디스플레이 속성

1. 도입 (왜 배워야 하는가)

CSS의 디스플레이 속성은 웹 페이지의 레이아웃을 구성하는 데 있어서 핵심적인 역할을 합니다. 디스플레이 속성을 제대로 이해하지 못하면 요소들이 예상과 다르게 배치되거나, 사용자 경험이 저하될 수 있습니다. 예를 들어, 버튼이 본래 의도된 위치와 다른 곳에 위치하게 되면 사용자는 혼란을 느끼고, 이는 사이트의 신뢰성에도 영향을 미칠 수 있습니다. 따라서 디스플레이 속성을 이해하고 활용하는 것은 웹 개발에서 매우 중요합니다.

2. 핵심 개념 설명

디스플레이 속성은 HTML 요소가 어떻게 보여질지를 결정합니다. 주로 사용되는 디스플레이 속성은 다음과 같습니다:

이 속성들은 마치 집의 방 구조와 같습니다. 방이 크면 많은 공간을 차지하고, 작으면 다른 방과 연결되어 쭉 이어질 수 있습니다.

3. 기본 코드 예제

/ 블록 요소 /
.block {
    display: block;
    background-color: lightblue;
    width: 100%;
    height: 50px;
}

/ 인라인 요소 /
.inline {
    display: inline;
    background-color: lightgreen;
    padding: 10px;
}

/ 인라인 블록 요소 /
.inline-block {
    display: inline-block;
    background-color: lightcoral;
    width: 100px;
    height: 50px;
}

실행 결과

• .block 요소는 페이지의 전체 너비를 차지하고, 높이는 50px입니다.
• .inline 요소는 텍스트와 같은 라인에 표시되며, 좌우로만 공간을 차지합니다.
• .inline-block 요소는 인라인처럼 나란히 배치되지만, 블록처럼 크기를 가질 수 있습니다.

코드 한 줄씩 동작 설명

1. .block 클래스 정의: 요소를 블록으로 표시하고, 배경색과 크기를 설정합니다.
2. .inline 클래스 정의: 요소를 인라인으로 표시하고, 좌우 여백을 설정합니다.
3. .inline-block 클래스 정의: 요소를 인라인 블록으로 표시하고, 크기를 명시적으로 설정합니다.

4. 실전 활용 예제

4. 쇼핑몰의 상품 목록: 상품 이미지를 블록으로 배치하고, 상품명을 인라인으로 표시하여 정렬합니다.

   <div class="product">
       <img src="product.jpg" class="block" />
       <span class="inline">상품명</span>
   </div>

5. 네비게이션 바: 메뉴 항목을 인라인으로 배치하여 가로로 나열합니다.

   <nav>
       <ul>
           <li class="inline-block">홈</li>
           <li class="inline-block">상품</li>
           <li class="inline-block">장바구니</li>
       </ul>
   </nav>

5. 흔한 실수와 주의사항

6. 블록 요소에 인라인 속성 사용:

   / 잘못된 코드 /
   .wrong {
       display: inline;
       width: 100%; / 블록의 너비 속성은 무시됨 /
   }

   / 올바른 코드 /
   .right {
       display: block;
       width: 100%; / 제대로 적용됨 /
   }

7. 디스플레이 속성의 혼용:

- 인라인 요소에 margin을 사용할 때, 상하 여백이 무시되므로 이를 기억해야 합니다.

6. 정리

8. 디스플레이 속성은 HTML 요소의 시각적 배치를 결정합니다.
9. 블록, 인라인, 인라인 블록, none과 같은 다양한 속성을 통해 레이아웃을 조정할 수 있습니다.
10. 요소의 특성을 이해하고 적절히 활용하는 것이 중요합니다.

다음에 학습하면 좋은 주제

11. 박스 모델 (Box Model)
12. 플렉스박스 (Flexbox)
13. 그리드 레이아웃 (CSS Grid)