CSS: display

이번 글에서는 웹 개발의 핵심 요소 중 하나인 'CSS(Cascading Style Sheets)'에 대한 이야기를 계속 이어가고자 합니다. 이번에는 CSS의 기본적인 속성 중 하나인 'display'에 대해 자세히 알아보겠습니다.

---

1. CSS Display란 무엇일까?

 

CSS Display는 웹 페이지 내 요소들이 어떻게 표시될지 결정하는 속성입니다. 즉, HTML 요소가 화면에 어떤 형태로 보여질 것인지를 지정합니다. display 속성은 block, inline, inline-block, flex, grid 등 다양한 값으로 설정할 수 있으며 각각 다른 표시 방식을 제공합니다.

 

• Block: 블록 요소는 화면 전체 너비를 차지하며 상하로 쌓입니다. 주요 블록 수준 요소에는 `<div>`, `<h1>` ~ `<h6>`, `<p>`, `<form>` 등이 있습니다.

 

• Inline: 인라인 요소는 필요한 만큼의 너비만 차지하며 좌우로 쌓입니다. 주요 인라인 수준 요소에는 `<span>`, `<a>`, `<img>` 등이 있습니다.

 

• Inline-block: 인라인 블록 요소는 인라인과 블록의 특징을 모두 가집니다.

 

• Flex: Flexbox 레이아웃을 활용하여 유연한 레이아웃을 구현할 수 있습니다.

 

• Grid: Grid 레이아웃을 활용하여 복잡한 2차원 레이아웃을 구현할 수 있습니다.

---

2. CSS Display 사용법

 

다음 코드 조각은 위의 display 값들을 어떻게 적용할 수 있는지 보여줍니다:

 

/* Block level element */

.block-element {

    display: block;

}

 

/* Inline level element */

.inline-element {

    display: inline;

}

 

/* Inline-block level element */

.inlineblock-element {

    display: inline-block;

}

 

/* Flex container */

.flex-container {

    display: flex;

}

 

/* Grid container */

.grid-container {

    display: grid;

}

 

위 코드에서 각 클래스가 지정된 HTML 요소는 해당하는 디스플레이 값을 갖게 됩니다.

 

---

3. CSS Display 작성 시 주의할 점

 

CSS Display를 활용할 때 주목해야 할 몇 가지 포인트들이 있습니다:

 

• Box model: 모든 HTML 요소는 사각형 박스로 생각됩니다. 따라서 padding, border, margin 등 박스 모델 관련 속성도 함께 고려해야 합니다.

 

• Context: Flex와 Grid 같은 디스플레이 값은 자신들만의 컨텍스트를 생성합니다. 이 컨텍스트 안에서는 자식 요소들에게 고유한 규칙과 동작 방식을 부여합니다.

---

4. 각 Display 값에 대한 자세한 설명

 

• Block: 블록 수준 요소는 새로운 줄에서 시작하여 다음 요소 앞에 새로운 줄을 생성합니다. 너비와 높이를 명시적으로 설정할 수 있으며, 위아래 마진이 적용됩니다.

 

• Inline: 인라인 수준 요소는 새로운 줄을 시작하지 않으며, 필요한 만큼의 너비만 차지합니다. 상하 마진과 패딩은 적용되지 않으며, 너비와 높이를 직접 설정할 수 없습니다.

 

• Inline-block: 인라인 블록 수준 요소는 인라인과 같이 한 줄에 표시되면서 블록처럼 너비와 높이를 명시적으로 설정할 수 있습니다.

 

• Flex: Flexbox 모델을 사용하면 아이템 간 공간 분배 및 정렬 방식을 효율적으로 제어할 수 있습니다. flex container(부모)와 flex items(자식) 간의 관계를 이해하는 것이 중요합니다.

 

• Grid: CSS 그리드는 2차원(열과 행) 레이아웃 시스템을 제공하여 복잡한 UI 디자인도 구현 가능하게 합니다.

---

5. 결론

 

CSS Display 속성은 웹 페이지 내에서 개별적인 HTML 요소들의 표시 방식을 정확하게 제어하는데 매우 중요한 역할을 합니다. 각각의 display 값들은 고유한 특징과 사용법을 가지고 있으므로 어떤 상황에서 어떤 값을 사용해야 하는지 잘 파악하고 활용해야 합니다.

 

CSS Display만큼 중요한 것은 그것을 올바르게 적용하기 위해 필요한 다른 CSS 속성들입니다. Box model 관련 속성 및 Flex, Grid 관련 서브 속성 등도 함께 숙지하여야 원하는 결과를 얻을 수 있습니다.

 

그러나 CSS Display만으로는 복잡한 웹 페이지 레이아웃을 구현하기 어렵습니다. 이외에도 position, float 등 다양한 CSS 속성과 기법들도 함께 익혀두어야 합니다.

 

웹 개발자라면 CSS Display에 대한 확실한 이해가 필수입니다. 이러한 지식과 실력, 그리고 앞서 소개된 팁들을 바탕으로 보다 완성도 있는 웹 페이지를 만드는데 도움이 될 것입니다.

728x90

반응형