CSS - 다중кол럼 레이아웃

안녕하세요, 웹 개발자 지망생 여러분! 오늘 우리는 CSS 다중кол럼 레이아웃의 흥미로운 세상으로 뛰어들어 볼 거예요. 여러분의 친절한 이웃 컴퓨터 교사로서, 저는 많은 예제와 설명을 통해 여러분을 안내해 드리겠습니다. 그럼 시작해 보겠습니다!

다중кол럼 레이아웃 소개

신문을 읽고 계신가요? 텍스트가 정리된 콜럼으로 구성되어 있는 것을 주목해 보세요. 바로 이와 같은 것을 우리는 CSS를 사용하여 웹 페이지에서 구현할 거예요! 다중кол럼 레이아웃은 시각적으로 아름답고 읽기 쉬운 콘텐츠 구조를 만들 수 있게 해줍니다.

CSS 다중кол럼 레이아웃 - 세кол럼 레이아웃

먼저 기본적인 세кол럼 레이아웃을 시작해 보겠습니다. 이는 잡지 스타일의 콘텐츠를 만들거나 웹 페이지에서 정보를 정리하는 데 적합합니다.

<div class="three-column">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

.three-column {
column-count: 3;
column-gap: 40px;
}

이 예제에서 우리는 column-count 속성을 사용하여 세 개의 콜럼을 지정하고 있습니다. column-gap 속성은 각 콜럼 사이의 공간을 설정합니다.

CSS 다중кол럼 레이아웃 - 콜럼 너비 설정

때로는 콜럼의 수를 지정하는 대신 각 콜럼의 특정 너비를 설정하고 싶을 수 있습니다. 그럼 어떻게 작동하는지 보겠습니다:

<div class="flexible-columns">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

.flexible-columns {
column-width: 200px;
}

여기서 우리는 column-width를 사용하여 각 콜럼을 200 픽셀 너비로 설정하고 있습니다. 브라우저는 이 너비를 유지하면서 가능한 한 많은 콜럼을 생성합니다.

CSS 다중кол럼 레이아웃 - 콜럼 스타일링

이제 우리의 콜럼에 스타일을 더해 보겠습니다. 테두리 추가, 배경색 변경 등 다양한 작업을 할 수 있습니다!

<div class="styled-columns">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

.styled-columns {
column-count: 3;
column-gap: 40px;
column-rule: 4px dotted #ff00ff;
column-rule-style: dotted;
column-rule-width: 4px;
column-rule-color: #ff00ff;
}

이 예제에서 우리는 column-rule을 사용하여 콜럼 사이에 점선을 추가하고 있습니다. 이 속성들을 개별적으로 설정할 수도 있습니다.

CSS 다중кол럼 레이아웃 - 콜럼 가로질러

때로는 특정 콘텐츠가 여러 콜럼을 가로질러서 표시되기를 원할 수 있습니다. 그럼 어떻게 이를 구현할 수 있는지 보겠습니다:

<div class="spanning-columns">
<h2>이 헤딩은 모든 콜럼을 가로질러 표시됩니다</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="span-two">이 퍼グラ프는 두 개의 콜럼을 가로질러 표시됩니다. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>

.spanning-columns {
column-count: 3;
column-gap: 40px;
}

.spanning-columns h2 {
column-span: all;
text-align: center;
}

.span-two {
column-span: 2;
background-color: #f0f0f0;
padding: 10px;
}

여기서 우리는 column-span: all을 사용하여 헤딩이 모든 콜럼을 가로질러 표시되게 하고, column-span: 2를 사용하여 퍼グラ프가 두 개의 콜럼을 가로질러 표시되게 합니다.

CSS 다중кол럼 레이아웃 - 콜럼 분断

분断은 콘텐츠가 콜럼 간에 어떻게 나뉘는지를 의미합니다. 이를 제어하는 방법을 살펴보겠습니다:

<div class="fragmented-columns">
<h3>Chapter 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<h3>Chapter 2</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

.fragmented-columns {
column-count: 2;
column-gap: 40px;
}

.fragmented-columns h3 {
break-after: column;
}

이 예제에서 우리는 break-after: column을 사용하여 각 장의 헤딩이 새로운 콜럼의 맨 위에서 시작되도록 합니다.

관련 속성

이제 우리가 배운 모든 속성을 편리한 표로 요약해 보겠습니다:

속성	설명
column-count	콜럼의 수를 지정합니다
column-width	각 콜럼의 너비를 설정합니다
column-gap	콜럼 사이의 공간을 정의합니다
column-rule	콜럼 사이의 줄을 설정하는 약자 속성
column-rule-style	콜럼 줄의 스타일을 설정합니다
column-rule-width	콜럼 줄의 너비를 설정합니다
column-rule-color	콜럼 줄의 색상을 설정합니다
column-span	요소가 여러 콜럼을 가로질러 표시되게 합니다
break-after	요소 뒤에 콜럼 분断을 제어합니다

그럼 여러분, CSS 다중콜럼 레이아웃의 세상을 여행했습니다. 연습이 완벽을 만들어 준다는 것을 기억하세요, 그러니 이 속성들을 실험해 보지 마세요. 누구 knows? 다음 큰 잡지 스타일 웹사이트를 만들 수 있을지도 몰라요!

제 옛날 교수님이 말했던 것처럼, "CSS는 요리와 같아요.처음에는 난리를 칠 수 있지만, 연습을 하면 곧 마스터pieces를 만들 수 있을 거예요!" 그러니 계속 코딩하고, 배우고, 가장 중요한 것은 즐기세요!

Credits: Image by storyset