# 컬럼 한 행에 2개 이상의 블록을 가로로 배치할 수 있습니다. 텍스트, 이미지, 표 등 모든 종류의 블록에 적용할 수 있습니다. ## 컬럼 추가 4가지 방법으로 추가할 수 있습니다. - 한 블록의 핸들을 클릭한 채로, 다른 블록의 왼쪽 또는 오른쪽에 드래그 앤 드롭합니다. - 빈 곳에 `/컬럼` 입력 후 `Enter` 를 누르면 컬럼 블록이 추가됩니다. - 블록 왼쪽의 `+` 클릭 후 `컬럼` 을 선택합니다. - 이미 만들어진 컬럼의 왼쪽, 오른쪽에 커서를 올리면 나타나는 `+` 를 클릭합니다. [Video](https://vz-127031db-d43.b-cdn.net/bc682376-d7ad-43e4-a5f7-e6cfbb579958/playlist.m3u8) > 컬럼 안에 또 다른 컬럼을 추가할 수도 있습니다. > 드래그 앤 드롭으로 컬럼 안의 블록을 컬럼 밖으로 빼낼 수도 있습니다. ## 줄바꿈 설정 각 컬럼 위의 회색 바를 클릭해 `반응형 줄바꿈` 을 선택합니다. 없음, 자동, 전체 중 하나를 선택합니다. - 없음: 창 너비가 좁아지거나 모바일 기기에서 볼 때도 줄바꿈되지 않습니다. - - 자동: 창과 모바일 화면의 너비에 따라, 컬럼 개수와 너비, 간격 등을 고려해 자동으로 줄바꿈됩니다. - - 전체: 창 너비가 좁아지거나 모바일 기기에서 볼 때 항상 모든 컬럼이 줄바꿈됩니다. [Video](https://vz-127031db-d43.b-cdn.net/76d76237-d135-4efb-bbaa-426d8bfc098c/playlist.m3u8) ## 간격 조절 두 컬럼 사이의 원을 클릭한 채 왼쪽 또는 오른쪽으로 드래그 앤 드롭합니다. [Video](https://vz-127031db-d43.b-cdn.net/e72e3a85-8bae-41b5-843b-9749e8e62c7b/playlist.m3u8) ## 너비 조절 두 컬럼 사이의 세로선을 클릭한 채 왼쪽 또는 오른쪽으로 드래그 앤 드롭합니다. [Video](https://vz-127031db-d43.b-cdn.net/74b7d954-2134-4559-ae32-a42dbee13f0c/playlist.m3u8) 각 컬럼의 너비를 동일하게 맞추려면, 컬럼 위의 회색 바를 클릭해 `열 너비를 동일하게` 를 선택합니다. [Video](https://vz-127031db-d43.b-cdn.net/645d6f2a-860f-45ef-901d-bb0bbe02d44c/playlist.m3u8) > **컬럼에 넣은 이미지들의 높이를 맞추려면?** 각 컬럼의 영역을 표시하는 점선을 참고해 컬럼 너비와 이미지 높이를 조절합니다. [Video](https://vz-127031db-d43.b-cdn.net/6ce657f8-0bd9-453d-89c4-cc5c347bd059/playlist.m3u8) ## 세로 정렬 각 컬럼 위의 회색 바를 클릭해 `세로 정렬` 을 선택합니다. 위 정렬, 가운데 정렬, 아래 정렬 중 하나를 선택하면 해당 컬럼에 정렬이 적용됩니다. [Video](https://vz-127031db-d43.b-cdn.net/234efc9d-d843-466c-84b6-b6685124233b/playlist.m3u8) ## 컬럼 내부 여백 추가 컬럼 영역 테두리에 커서를 올리면 나타나는 파란색 바를 클릭한 채 드래그합니다. [Video](https://vz-127031db-d43.b-cdn.net/b10c6535-39c4-4345-bfbd-406781a58652/playlist.m3u8) 더 미세하게 조정하려면, 각 컬럼 위쪽의 회색 바를 클릭해 `여백` 을 선택합니다. 빈칸에 수치를 입력하면 상하좌우 모두 해당 수치만큼의 여백이 적용됩니다. 상하좌우에 각각 다르게 적용하고 싶다면, 입력칸 옆의 링크 아이콘을 클릭합니다. ![Image](https://upload.cafenono.com/image/slashpageHome/20250522/110654_chyow2KfWsp5aUl435?q=80&s=1280x180&t=outside&f=webp) ## 제거 컬럼에서 제거하려는 블록 위쪽의 회색 바를 클릭해 삭제를 선택합니다. [Video](https://vz-127031db-d43.b-cdn.net/e387a8d6-14b7-49fe-a4e7-004fe694cb26/playlist.m3u8) ## 활용 사례 각 이미지를 클릭하면 템플릿으로 이동합니다. ### 1. 멤버/기능/프로젝트 소개 ![Image](https://upload.cafenono.com/image/slashpageHome/20240814/182255_pxhVsme6390LRkRLoa?q=80&s=1280x180&t=outside&f=webp) ![Image](https://upload.cafenono.com/image/slashpageHome/20240814/182227_49gXmdE4vBgsF8rEv4?q=80&s=1280x180&t=outside&f=webp) ![Image](https://upload.cafenono.com/image/slashpageHome/20240814/171549_VHFeelmDtjUwaggTnQ?q=80&s=1280x180&t=outside&f=webp) ![Image](https://upload.cafenono.com/image/slashpageHome/20240814/171007_Xd30polQKYdi5wxjc9?q=80&s=1280x180&t=outside&f=webp) ![Image](https://upload.cafenono.com/image/slashpageHome/20240814/171254_oCWsqf4iiHQ8XiODPs?q=80&s=1280x180&t=outside&f=webp) ### 2. 웹사이트 푸터 ![Image](https://upload.cafenono.com/image/slashpageHome/20240814/171201_5d2i3MX5laMCNEU25l?q=80&s=1280x180&t=outside&f=webp) ![Image](https://upload.cafenono.com/image/slashpageHome/20240814/171936_miWjJNfYDt8fh71utB?q=80&s=1280x180&t=outside&f=webp) ![Image](https://upload.cafenono.com/image/slashpageHome/20240814/171323_uQEvniv6kBODq9Vbjy?q=80&s=1280x180&t=outside&f=webp) ### 3. 프로필 ![Image](https://upload.cafenono.com/image/slashpageHome/20240814/171043_a38zsrcL5VlJCko1ha?q=80&s=1280x180&t=outside&f=webp) ![Image](https://upload.cafenono.com/image/slashpageHome/20240814/171410_DdAbdPKHkXGINEYu7b?q=80&s=1280x180&t=outside&f=webp) ![Image](https://upload.cafenono.com/image/slashpageHome/20240814/171631_YRUsJwFm92Qe91Jxdf?q=80&s=1280x180&t=outside&f=webp) ![Image](https://upload.cafenono.com/image/slashpageHome/20240814/171510_Y2217To8g8CUwMArsg?q=80&s=1280x180&t=outside&f=webp) For the site tree, see the [root Markdown](https://slashpage.com/slashpage-help-center.md).