컬럼 레이아웃 관련 CSS 속성
이 기사는 컬럼 레이아웃과 관련된 CSS 속성을 설명합니다.
컬럼 레이아웃을 정의하는 방법을 배울 수 있습니다.
YouTube Video
미리보기를 위한 HTML
css-columns.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>CSS Properties Example</title>
7 <link rel="stylesheet" href="css-base.css">
8 <link rel="stylesheet" href="css-columns.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>CSS Properties For Columns</h1>
14 </header>
15
16 <!-- Main content -->
17 <main>
18 <header>
19 <h2>Layout Related Properties</h2>
20 </header>
21 <article>
22 <h3>columns</h3>
23 <section style="width: 100%; height: 350px;">
24 <h4>Columns Example</h4>
25 <header><h4>columns: 100px 3; column-gap: 20px; column-rule: 2px solid #333;</h4></header>
26 <section class="sample-view">
27 <section class="columns-container">
28 <h5>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</h5>
29 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
30 <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
31 <p>Pellentesque malesuada diam eu sem finibus scelerisque.</p>
32 <p>Integer eget dolor nec est dignissim fermentum ut eget nunc.</p>
33 <p>Morbi in nibh in lorem vestibulum sollicitudin.</p>
34 </section>
35 </section>
36 </section>
37 </article>
38 <article>
39 <h3>order</h3>
40 <section style="height: 300px;">
41 <header><h4>column-width: 250px</h4></header>
42 <section class="sample-view">
43 <div class="container">
44 <div class="item item-1">Item 1</div>
45 <div class="item item-2">Item 2</div>
46 <div class="item item-3">Item 3</div>
47 </div>
48 </section>
49 </section>
50 </article>
51 </main>
52</body>
53</html>컬럼 레이아웃
컬럼
1.columns-container {
2 columns: 100px 3;
3 column-gap: 20px;
4 column-rule: 2px solid #333;
5}
6
7h5 {
8 column-span: all;
9}CSS columns 속성은 콘텐츠를 여러 컬럼으로 나눠 표시하는 간편한 방법을 제공합니다. 단일 선언으로 컬럼 너비와 컬럼 수를 쉽게 설정할 수 있어 반응형 디자인에 적합합니다. 이 속성은 신문이나 잡지와 같이 텍스트가 세로로 길게 표시되고 여러 컬럼으로 배치되는 레이아웃이 필요한 경우 특히 효과적입니다.
- 이 예제에서는 콘텐츠가 3개의 컬럼으로 나뉘며, 컬럼 간격은 20px, 컬럼 사이 경계는 2px로 설정됩니다. 또한,
h5요소는 여러 컬럼에 걸쳐 표시됩니다.
columns는 column-width와 column-count 속성의 약어입니다.
columns 속성의 문법
1columns: <column-width> <column-count>;columns는 다음과 같은 형식을 따릅니다.
<column-width>: 각 컬럼의 너비를 지정합니다.auto또는px,em,%등의 길이 단위를 값으로 사용할 수 있습니다.<column-count>: 컬럼의 개수를 지정합니다. 숫자 값으로 표현됩니다.
column-width 속성
1.container {
2 column-width: 250px;
3}column-width는 각 컬럼의 최소 너비를 지정하는 속성입니다. column-count와 함께 사용하면 컬럼의 자동 배치 및 조정이 가능합니다. 브라우저는 컨테이너의 너비를 고려하여 필요한 컬럼 수를 자동으로 계산합니다.
- 이 예제에서는 컬럼당 너비가 250px로 설정되며, 컨테이너 너비를 기반으로 최적의 컬럼 수가 계산됩니다.
column-count 속성
1.container {
2 column-count: 3;
3}column-count는 지정된 요소가 몇 개의 열로 나뉘어질지를 명시적으로 설정하는 속성입니다. column-width와 달리, 이 속성은 열의 개수를 고정합니다.
- 이 예제에서는 컨테이너 안의 콘텐츠가 3개의 열로 나뉘어집니다.
column-gap 속성
1.container {
2 column-gap: 20px;
3}column-gap는 각 열 사이의 간격(공백)을 지정하는 속성입니다. CSS Grid와 공통 속성인 gap도 있지만, column-gap은 열 사이 간격만 사용자 지정할 때 유용합니다.
- 이 예제에서는 각 열 사이에 20px의 간격이 있습니다. 기본값은 16px입니다.
column-rule 속성
1.container {
2 column-rule: 2px solid #333;
3}column-rule는 열 사이에 선을 그리는 속성입니다. 이 속성은 border 속성과 유사한 문법을 가지며, 선의 두께, 스타일, 색상을 지정할 수 있습니다.
- 이 예제에서는 각 열 사이에 두께가 2px인 검정 실선이 표시됩니다.
column-rule는 다음 세 가지 속성으로 나눌 수 있습니다.column-rule-width: 선의 두께를 지정합니다.column-rule-style: 선의 스타일을 지정합니다. 예를 들어,solid,dashed,dotted등이 있습니다.column-rule-color: 선의 색상을 지정합니다.
column-span 속성
1h5 {
2 column-span: all;
3}column-span는 특정 요소를 여러 열에 걸치도록 설정하는 속성입니다. 주로 제목이나 헤딩 같은 요소에 사용됩니다. 다음 두 가지 값을 사용할 수 있습니다:.
- none: 요소가 열에 걸치지 않고 하나의 열 안에 맞춰집니다. 이 값은 기본값입니다.
- all: 요소가 모든 열에 걸쳐 표시됩니다.
- 이 예제에서는
h5요소가 여러 열에 걸쳐 표시됩니다.
column-fill 속성
1.container {
2 column-fill: balance;
3}column-fill은 콘텐츠가 열에 어떻게 분배되는지를 제어하는 속성입니다. 일반적으로 열은 가능한 한 균등하게 채워지지만, 이 속성을 사용하면 다른 배열을 지정할 수 있습니다. 다음 값들을 사용할 수 있습니다:.
- balance: 콘텐츠가 열을 균등하게 채우도록 배치됩니다. 이 값은 기본값입니다.
- auto: 열이 자동으로 채워집니다. 마지막 열이 더 길어질 수 있습니다.
- 이 설정은 콘텐츠가 균등하게 분배되도록 조정합니다.
미디어 쿼리와 함께 사용하기
1.container {
2 columns: 200px 3;
3}
4
5@media (max-width: 600px) {
6 .container {
7 columns: 1;
8 }
9}columns 속성은 미디어 쿼리와 결합하여 반응형 디자인을 지원할 수 있습니다. 화면 크기에 따라 열의 개수와 너비를 유연하게 변경할 수 있습니다.
- 이 예에서는 화면 너비가 600px 이하일 때 1개의 열이 표시됩니다. 넓은 화면에서는 각각 200px의 너비로 3개의 열로 나뉩니다.
요약
CSS columns 속성은 여러 열을 사용한 레이아웃을 쉽게 구현할 수 있는 강력한 도구입니다. 이 속성은 특히 반응형 디자인과 가독성을 우선시하는 텍스트 레이아웃에 유용합니다. 관련 속성을 결합하여 열의 개수, 너비, 간격, 장식 등을 유연하게 사용자화할 수 있습니다.
이로 인해 더 정교한 디자인을 쉽게 구현할 수 있으므로 적극 활용해보세요.
order
1.container {
2 all:initial;
3 display: flex;
4}
5.item {
6 padding: 10px;
7 background-color: lightblue;
8 margin: 5px;
9}
10.item-1 {
11 order: 3;
12}
13.item-2 {
14 order: 1;
15}
16.item-3 {
17 order: 2;
18}CSS order 속성은 Flexbox나 Grid 레이아웃을 사용할 때 요소의 표시 순서를 제어하는 데 사용됩니다. 일반적으로 요소는 HTML 마크업 순서대로 렌더링되지만, order 속성을 사용하여 시각적 순서를 변경할 수 있습니다. 이 속성은 유연한 사용자 인터페이스를 설계하고 반응형 디자인을 구축하는 데 유용합니다.
- 이 예에서는 항목이 HTML에서는
Item 1,Item 2,Item 3으로 마크업되어 있지만, CSSorder속성에 의해 표시 순서가Item 2,Item 3,Item 1로 변경됩니다.
order 속성의 기본
order 속성은 Flexbox나 Grid 컨테이너 내의 항목에 적용됩니다. 각 항목에 정수 값을 설정하여 배치 순서를 정의합니다. 기본적으로 모든 항목의 order 값은 0으로 설정됩니다. 이 값을 변경하여 항목이 표시되는 순서를 지정할 수 있습니다.
기본 구문
1.item {
2 order: <integer>;
3}order값으로는 임의의 정수를 지정할 수 있습니다. 양수, 음수, 또는 0 값을 사용할 수 있습니다. 값이 작을수록 요소가 먼저 표시되고, 값이 클수록 나중에 표시됩니다.
양수 및 음수 값 사용하기
order 속성에 음수 값을 할당할 수도 있습니다. 음수 값을 가진 요소는 기본 순서보다 먼저 표시됩니다.
1.item-1 {
2 order: -1;
3}
4.item-2 {
5 order: 2;
6}
7.item-3 {
8 order: 1;
9}이 예에서는 Item 1이 order: -1로 설정되어 있어 가장 먼저 표시됩니다. 반면에, Item 3은 order: 1로, Item 2는 order: 2로 설정되어 해당 순서대로 표시됩니다.
반응형 디자인에서의 order
반응형 디자인에서는 화면 크기에 따라 요소의 순서를 변경할 수 있습니다. 예를 들어, 모바일 뷰에서는 중요한 정보를 먼저 표시하기 위해 요소의 순서를 변경할 수 있습니다.
1.item-1 {
2 order: 1;
3}
4.item-2 {
5 order: 2;
6}
7.item-3 {
8 order: 3;
9}
10
11/* Change the order on screens with a width of 800px or less */
12@media (max-width: 800px) {
13 .item-1 {
14 order: 3;
15 }
16 .item-2 {
17 order: 1;
18 }
19 .item-3 {
20 order: 2;
21 }
22}이 예에서는 일반 뷰에서 항목이 Item 1, Item 2, Item 3 순서대로 표시되지만 화면 너비가 600px 이하일 때는 Item 2, Item 3, Item 1 순서로 표시됩니다.
order 사용 시 주의사항
order 속성을 사용하면 DOM 트리의 순서와 시각적인 순서가 다를 수 있습니다. 이는 화면 낭독기와 같은 접근성 도구에 영향을 줄 수 있습니다. 순서가 변경되면 키보드 네비게이션이나 기타 보조 기술이 예상대로 동작하지 않을 수 있습니다. 따라서 order를 사용할 때 사용자 경험에 미치는 영향을 신중히 고려해야 합니다.
결론
CSS order 속성은 Flexbox나 Grid 레이아웃에서 요소의 표시 순서를 쉽게 제어할 수 있는 강력한 도구입니다. 양수나 음수 값을 사용하면 요소의 순서를 유연하게 변경할 수 있으며, 반응형 디자인에서 특히 유용합니다. 그러나 접근성과 시각적 순서와 HTML 구조 간의 차이에 주의를 기울여야 합니다. 이러한 점을 적절히 고려하면 order 속성은 더욱 동적이고 유연한 레이아웃을 만드는 데 유용할 수 있습니다.
위의 기사를 보면서 Visual Studio Code를 사용해 우리 유튜브 채널에서 함께 따라할 수 있습니다. 유튜브 채널도 확인해 주세요.