Post

css - display 종류01

Posted Updated
Preview Image
By HwangInJi 14 min read

css display 종류

▶ CSS에서 display는 요소의 렌더링 방식을 결정하는 속성으로 이를 활용하면 요소를 블록 레벨 요소, 인라인 요소, 그리드, 플렉스박스 등으로 지정할 수 있습니다.
display에는 다양한 종류가 있는데 오늘은 자주쓰는 요소와 인라인 요소에 대해서 먼저 알아보도록 하겠습니다.

1
2
3
4
5
6
7
8
9
10
11
12

<style>
.body {
    display: none;
    display: contents;
    display: flex;
    display: grid;
    display: inline;
    display: inline-block;
    display: inline-flex;
    display: inline-table;
}
</style>


1. display: none;

▶ display: none;은 해당 요소를 화면에서 완전히 숨기는 속성입니다.
설정을 해주면 요소가 화면에 나타나지 않을 뿐만아니라 레이아웃에서도 공간을 차지하지 않습니다.
즉, 해당 요소와 해당 요소의 자식 요소들이 브라우저창에 나타나지 않게 됩니다. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Display None Example</title>
<style>
.hidden-element {
    display: none; 
}
</style>
</head>
<body>
    <div class="hidden-element">
        This element is hidden using display: none;
    </div>
    <p>This is a paragraph visible on the page.</p>
</body>
</html>

▶ 위의 예시에서 .hidden-element는 display: none;으로 설정되어 있어 “This element is hidden using display: none;” 이라는 텍스트는 보이지 않게 됩니다.


2. display: contents;

▶ display: contents;는 부모 요소의 스타일을 상속받지 않고 자식 요소들을 부모 요소 대신 표시하도록 만드는 속성입니다. 즉, 이 속성을 사용하면 부모 요소 자체는 브라우저창에 나타나지 않고, 그 대신 자식 요소들이 부모 요소의 자리를 차지하게 됩니다. 

1
2
3
4
5
6
7
8
9
10
11
12
13

<style>
.parent {
    display: contents; /* 부모 요소의 스타일을 상속받지 않고 자식 요소를 직접 표시 */
    border: 1px solid black; /* 부모 요소의 테두리 스타일 */
    padding: 10px; /* 부모 요소의 안쪽 여백 */
}

.child {
    width: 100px;
    height: 100px;
    background-color: red;
}
</style>

▶ 위의 예시에서 .parent는 display: contents;로 설정되어 있어 부모 요소가 아닌 자식 요소인 .child의 속성 스타일이 표시됩니다. 때문에 .parent 요소에 있는 테두리나 안쪽 여백 등의 스타일이 적용되지 않고 .child 요소가 화면에 나타나게 될겁니다.

3. display: flex;

▶ display: flex;는 주로 가로 방향으로 요소들을 배치하는데 사용되는데 이는 플렉스 박스(Flexbox)의 기본 동작 방식으로 4가지의 주요 특징이 있습니다.

  • 유연한 레이아웃: 요소들을 플렉스 아이템으로 정의하고, 주 축(main axis)과 교차 축(cross axis)에 따라 유연하게 배치할 수 있습니다.
  • 정렬 및 정렬 순서 조절: justify-content, align-items, align-self 등의 속성을 사용하여 요소들을 정렬하고 정렬 순서를 조절할 수 있습니다.
  • 간단한 반응형 레이아웃: 미디어 쿼리와 함께 사용하여 간단한 반응형 레이아웃을 만들 수 있습니다.
  • 아이템 간 여백 및 정렬 조절: gap, margin, padding 등의 속성을 활용하여 아이템 간 여백을 설정하거나 정렬을 조절할 수 있습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<style>
.flex-container {
    display: flex; /* 요소들을 가로 방향으로 배치 */
    justify-content: space-between; /* 요소들을 주 축을 기준으로 공간 분배 */
    align-items: center; /* 요소들을 교차 축을 기준으로 가운데 정렬 */
    height: 200px; /* 플렉스 컨테이너의 높이 설정 */
    background-color: lightblue;
}

.flex-item {
    width: 100px; /* 플렉스 아이템의 너비 설정 */
    height: 100px; /* 플렉스 아이템의 높이 설정 */
    background-color: red;
}
</style>


4. display: grid;

▶ display: grid;는 요소를 그리드 레이아웃으로 표시하는 속성입니다. 그리드는 행(row)과 열(column)을 사용하기 때문에 요소들을 배치할 수 있는 레이아웃을 만들 수 있습니다. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<style>
 .grid-container {
    display: grid; /* 요소들을 그리드 레이아웃으로 배치 */
    grid-template-columns: 100px 100px 100px; /* 세 개의 열을 각각 100px로 설정 */
    grid-template-rows: 100px 100px; /* 두 개의 행을 각각 100px로 설정 */
    gap: 10px; /* 그리드 아이템들 간의 간격 설정 */
}

.grid-item {
    background-color: lightblue;
    border: 1px solid black;
    text-align: center;
    padding: 20px;
}
</style>

▶ 위의 예시에서 .grid-container는 display: grid;로 설정되어 있으므로 grid-template-columns와 grid-template-rows 속성을 사용하여 열과 행을 정의한 레이아웃이 만들어지게 됩니다.
그 다음 gap 속성을 사용하면 그리드 아이템들 간의 간격을 설정할 수 있고 이를 활용하면 다양한 디자인을 구현할 수 있습니다.


5. display: inline;

▶ display: inline;은 요소를 인라인 요소로 지정하는 CSS 속성입니다.
이 속성을 사용하면 요소는 다른 인라인 요소와 동일한 줄에 배치되며, 해당 요소의 크기는 내부 콘텐츠의 크기에 따라 자동으로 조정됩니다.
만약 여러 개의 인라인 요소를 설정하게 된다면 가로로 나란히 배치됩니다. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inline Element Example</title>
<style>
.inline-item {
    display: inline; /* 요소를 인라인으로 배치 */
    background-color: lightblue;
    padding: 10px;
    margin-right: 10px; /* 오른쪽 여백 추가 */
}
</style>
</head>
<body>
    <div>
        <span class="inline-item">Inline 1</span>
        <span class="inline-item">Inline 2</span>
        <span class="inline-item">Inline 3</span>
    </div>
</body>
</html>

▶ 위의 예시에서 .inline-item 클래스는 display: inline;으로 설정되어 있고 세 개의 span 요소가 있기 때문에 가로로 나란히 배치되며,
각 요소의 크기는 내부 콘텐츠의 크기에 맞게 조절됩니다. 즉, 인라인 요소는 블록 레벨 요소와 달리 자동으로 줄바꿈되지 않고, 가로로만 쌓입니다.


6. display: inline-block;

▶ display: inline-block;은 요소를 인라인 박스처럼 동작하면서도 블록 레벨 요소처럼 크기와 여백을 조절할 수 있도록 만드는 CSS 속성입니다.
때문에 이 속성을 사용하면 display: inline;과 달리 요소들을 가로로 나란히 배치하면서도 각 요소의 너비와 높이, 여백 등을 설정할 수 있습니다. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inline-Block Element Example</title>
<style>
.inline-block-item {
    display: inline-block; /* 요소를 인라인 블록 요소로 배치 */
    width: 100px; /* 너비 설정 */
    height: 100px; /* 높이 설정 */
    background-color: lightblue;
    margin-right: 10px; /* 오른쪽 여백 추가 */
}
</style>
</head>
<body>
    <div>
        <div class="inline-block-item">Block 1</div>
        <div class="inline-block-item">Block 2</div>
        <div class="inline-block-item">Block 3</div>
    </div>
</body>
</html>

▶ 위의 예시에서 .inline-block-item 클래스는 display: inline-block;으로 설정되어 있어 세 개의 div 요소가 가로로 나란히 배치됨과 동시에
각 가로세로 100px 크기 및 오른쪽 10px만큼의 여백이 적용되면서 가로로 배치가 됩니다.


7. display: inline-flex;

▶ display: inline-flex;는 요소를 인라인 플렉스 박스로 지정하는 CSS 속성입니다. 때문에 이 속성을 사용하면 요소는 인라인 요소처럼 가로로 배치되면서, 동시에 플렉스 박스 모델로 다룰 수 있습니다. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inline Flexbox Example</title>
<style>
.inline-flex-container {
    display: inline-flex; /* 요소를 인라인 플렉스 박스로 배치 */
    background-color: lightblue;
    padding: 10px;
}

.flex-item {
    background-color: red;
    width: 50px;
    height: 50px;
    margin-right: 10px;
}
</style>
</head>
<body>
    <div class="inline-flex-container">
        <div class="flex-item"></div>
        <div class="flex-item"></div>
        <div class="flex-item"></div>
    </div>
</body>
</html>

▶ 위의 예시에서 .inline-flex-container는 display: inline-flex;로 설정되어 있어 인라인 플렉스 박스로 배치가 가능합니다.
따라서 내부의 .flex-item 클래스를 가진 요소들은 플렉스 박스 모델에 따라 가로로 나란히 배치되며, 각 요소의 크기와 여백도 설정한대로 적용됩니다.


8. display: inline-table;

▶ display: inline-table;은 요소를 인라인 테이블로 지정하는 CSS 속성입니다.
이 속성을 사용하면 요소는 인라인 요소처럼 가로로 배치되면서도 테이블 요소의 특성을 갖게 됩니다. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inline Table Example</title>
<style>
.inline-table {
    display: inline-table; /* 요소를 인라인 테이블로 배치 */
    border: 1px solid black; /* 테이블 테두리 스타일 설정 */
}

.table-cell {
    border: 1px solid red; /* 셀 테두리 스타일 설정 */
    padding: 10px; /* 셀 안의 여백 설정 */
}
</style>
</head>
<body>
    <div class="inline-table">
        <div class="table-cell">Cell 1</div>
        <div class="table-cell">Cell 2</div>
        <div class="table-cell">Cell 3</div>
    </div>
</body>
</html>

▶ 위의 예시에서 .inline-table 클래스는 display: inline-table;로 설정되어 있어 인라인 테이블로 배치됩니다.
때문에 테이블 요소처럼 각 셀이 가로로 나란히 배치되며, 테이블 테두리와 각 셀의 테두리 스타일도 동시에 설정한대로 적용됩니다.


오늘은 css속성 중 자주쓰는 display 요소와 인라인 요소 종류에 대해 알아봤는데요,
다양한 옵션들을 활용하면 더 다양한 느낌의 웹사이트를 만들 수 있으니 조금씩 알아가보면 코드를 만들 때 도움이 되겠죠?
다음엔 다른 display의 옵션을 소개하는 글을 들고 오도록 할게요😁!

자바스크립트
css javascript
This post is licensed under CC BY 4.0 by the author.