CSS Display 속성 배우기: 블록, 인라인, 인라인 블록, 없음

소개

이 랩에서는 학생들이 웹 요소의 레이아웃과 가시성을 제어하는 기본적인 CSS display 속성을 탐구합니다. 일련의 실습을 통해 참가자들은 block, inline, inline-block, 그리고 none display 속성을 조작하는 방법을 배우고, 웹 페이지 레이아웃을 구조화하고 관리하는 실질적인 기술을 습득하게 됩니다. 이 랩은 서로 다른 display 속성이 요소의 위치 지정에 미치는 영향, 네비게이션 메뉴 생성, 요소 가시성 제어 등과 같은 핵심 개념을 다루며, CSS 레이아웃 기술에 대한 포괄적인 소개를 제공합니다.

실용적인 예제와 코드 시연을 통해 학습자들은 display 속성이 웹 디자인에 미치는 영향을 확실하게 이해하고, 더 유연하고 반응형 웹 페이지 레이아웃을 만들 수 있게 됩니다. 단계별 접근 방식을 통해 학생들은 기본적인 블록 레벨 요소 특성에서 더 발전된 display 속성 구현에 이르기까지 지식을 점진적으로 쌓아갈 수 있습니다.

Block Display 속성 이해

이 단계에서는 웹 요소의 레이아웃을 제어하는 기본적인 개념인 CSS 의 block display 속성에 대해 배우게 됩니다. 기본적으로 많은 HTML 요소는 블록 레벨 display 속성을 가지고 있습니다.

먼저, block display 속성을 시연하기 위한 HTML 파일을 만들어 보겠습니다. WebIDE 를 열고 ~/project 디렉토리에 block-display.html이라는 새 파일을 만듭니다.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Block Display Property</title>
    <style>
      .block-element {
        display: block;
        background-color: lightblue;
        padding: 10px;
        margin: 10px 0;
        border: 2px solid blue;
      }
    </style>
  </head>
  <body>
    <div class="block-element">This is a block-level div element</div>
    <div class="block-element">Another block-level div element</div>
    <p class="block-element">This is a block-level paragraph</p>
  </body>
</html>

블록 레벨 요소의 주요 특징:

항상 새 줄에서 시작합니다.
기본적으로 사용 가능한 전체 너비를 차지합니다.
너비, 높이, 마진 및 패딩 속성을 적용할 수 있습니다.
블록 요소는 서로 수직으로 쌓입니다.

파일 내용을 확인해 보겠습니다.

cat ~/project/block-display.html

예시 출력:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Block Display Property</title>
    <style>
        .block-element {
            display: block;
            background-color: lightblue;
            padding: 10px;
            margin: 10px 0;
            border: 2px solid blue;
        }
    </style>
</head>
<body>
    <div class="block-element">This is a block-level div element</div>
    <div class="block-element">Another block-level div element</div>
    <p class="block-element">This is a block-level paragraph</p>
</body>
</html>

일반적인 블록 레벨 요소는 다음과 같습니다.

<div>
<p>
<h1> ~ <h6>
<section>
<article>
<ul> 및 <ol>

Inline Display 속성 적용

이 단계에서는 CSS 의 inline display 속성에 대해 배우게 됩니다. 이 속성을 사용하면 요소가 수평으로 흐르고 필요한 만큼의 너비만 차지하도록 할 수 있습니다.

inline display 속성을 시연하기 위한 HTML 파일을 만들어 보겠습니다. WebIDE 를 열고 ~/project 디렉토리에 inline-display.html이라는 새 파일을 만듭니다.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Inline Display Property</title>
    <style>
      .inline-element {
        display: inline;
        background-color: lightgreen;
        padding: 5px;
        margin: 5px;
        border: 2px solid green;
      }
    </style>
  </head>
  <body>
    <span class="inline-element">First inline element</span>
    <span class="inline-element">Second inline element</span>
    <a href="#" class="inline-element">Inline link</a>
  </body>
</html>

inline 요소의 주요 특징:

같은 줄에서 수평으로 흐릅니다.
필요한 만큼의 너비만 차지합니다.
너비와 높이 속성이 작동하지 않습니다.
수직 패딩과 마진은 제한적인 효과를 가집니다.
너비와 높이를 직접 설정할 수 없습니다.

파일 내용을 확인해 보겠습니다.

cat ~/project/inline-display.html

예시 출력:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Inline Display Property</title>
    <style>
        .inline-element {
            display: inline;
            background-color: lightgreen;
            padding: 5px;
            margin: 5px;
            border: 2px solid green;
        }
    </style>
</head>
<body>
    <span class="inline-element">First inline element</span>
    <span class="inline-element">Second inline element</span>
    <a href="#" class="inline-element">Inline link</a>
</body>
</html>

일반적인 inline 요소는 다음과 같습니다.

<span>
<a>
<strong>
<em>
<img>

Inline-Block Display 속성 구현

이 단계에서는 CSS 의 inline-block display 속성에 대해 배우게 됩니다. 이 속성은 inline 요소와 블록 레벨 요소의 가장 좋은 기능을 결합합니다.

inline-block display 속성을 시연하기 위한 HTML 파일을 만들어 보겠습니다. WebIDE 를 열고 ~/project 디렉토리에 inline-block-display.html이라는 새 파일을 만듭니다.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Inline-Block Display Property</title>
    <style>
      .inline-block-element {
        display: inline-block;
        background-color: lightsalmon;
        padding: 10px;
        margin: 10px;
        border: 2px solid red;
        width: 150px;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div class="inline-block-element">First inline-block element</div>
    <div class="inline-block-element">Second inline-block element</div>
    <div class="inline-block-element">Third inline-block element</div>
  </body>
</html>

inline-block 요소의 주요 특징:

inline 요소처럼 수평으로 흐릅니다.
블록 요소처럼 너비, 높이, 패딩 및 마진을 가질 수 있습니다.
요소 크기 조정 및 간격에 대한 정밀한 제어가 가능합니다.
탐색 메뉴 또는 이미지 갤러리와 같은 수평 레이아웃을 만드는 데 유용합니다.

파일 내용을 확인해 보겠습니다.

cat ~/project/inline-block-display.html

예시 출력:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Inline-Block Display Property</title>
    <style>
        .inline-block-element {
            display: inline-block;
            background-color: lightsalmon;
            padding: 10px;
            margin: 10px;
            border: 2px solid red;
            width: 150px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="inline-block-element">First inline-block element</div>
    <div class="inline-block-element">Second inline-block element</div>
    <div class="inline-block-element">Third inline-block element</div>
</body>
</html>

inline-block의 일반적인 사용 사례:

수평 탐색 메뉴 만들기
이미지 갤러리 디자인
정밀한 제어를 통해 요소를 나란히 정렬

None Display 속성을 사용하여 요소 숨기기

이 단계에서는 CSS 의 display: none 속성에 대해 배우게 됩니다. 이 속성은 페이지 레이아웃에서 요소를 완전히 제거하여 보이지 않게 하고 공간을 차지하지 않도록 합니다.

none display 속성을 시연하기 위한 HTML 파일을 만들어 보겠습니다. WebIDE 를 열고 ~/project 디렉토리에 none-display.html이라는 새 파일을 만듭니다.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>None Display Property</title>
    <style>
      .visible-element {
        background-color: lightblue;
        padding: 10px;
        margin: 10px;
      }

      .hidden-element {
        display: none;
        background-color: lightgray;
        padding: 10px;
        margin: 10px;
      }

      .toggle-button {
        padding: 5px 10px;
        margin: 10px 0;
      }
    </style>
  </head>
  <body>
    <div class="visible-element">This element is always visible</div>
    <div id="hiddenDiv" class="hidden-element">This element is hidden</div>
    <button class="toggle-button" onclick="toggleElement()">
      Toggle Hidden Element
    </button>

    <script>
      function toggleElement() {
        var hiddenDiv = document.getElementById("hiddenDiv");
        if (hiddenDiv.style.display === "none") {
          hiddenDiv.style.display = "block";
        } else {
          hiddenDiv.style.display = "none";
        }
      }
    </script>
  </body>
</html>

display: none의 주요 특징:

페이지 레이아웃에서 요소를 완전히 제거합니다.
요소는 공간을 차지하지 않습니다.
visibility: hidden과 다릅니다 (공간은 유지하지만 요소를 보이지 않게 합니다).
동적 콘텐츠 숨기기 및 반응형 디자인에 유용합니다.

파일 내용을 확인해 보겠습니다.

cat ~/project/none-display.html

예시 출력:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>None Display Property</title>
    <style>
        .visible-element {
            background-color: lightblue;
            padding: 10px;
            margin: 10px;
        }

        .hidden-element {
            display: none;
            background-color: lightgray;
            padding: 10px;
            margin: 10px;
        }

        .toggle-button {
            padding: 5px 10px;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <div class="visible-element">This element is always visible</div>
    <div id="hiddenDiv" class="hidden-element">This element is hidden</div>
    <button class="toggle-button" onclick="toggleElement()">Toggle Hidden Element</button>

    <script>
        function toggleElement() {
            var hiddenDiv = document.getElementById('hiddenDiv');
            if (hiddenDiv.style.display === 'none') {
                hiddenDiv.style.display = 'block';
            } else {
                hiddenDiv.style.display = 'none';
            }
        }
    </script>
</body>
</html>

display: none의 일반적인 사용 사례:

조건부로 요소 숨기기
반응형 메뉴 만들기
동적 콘텐츠 가시성 관리
드롭다운 및 토글 인터페이스 구현

Display 속성을 사용한 네비게이션 메뉴 생성

이 단계에서는 이전 단계에서 배운 display 속성을 사용하여 수평 탐색 메뉴를 만들 것입니다. 이 실용적인 예제는 inline-block display 를 사용하여 반응형의 깔끔한 탐색 레이아웃을 만드는 방법을 보여줍니다.

탐색 메뉴가 있는 HTML 파일을 만들어 보겠습니다. WebIDE 를 열고 ~/project 디렉토리에 navigation-menu.html이라는 새 파일을 만듭니다.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Navigation Menu</title>
    <style>
      .nav-menu {
        background-color: #333;
        padding: 10px;
      }

      .nav-menu ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
      }

      .nav-menu li {
        display: inline-block;
        margin-right: 20px;
      }

      .nav-menu a {
        text-decoration: none;
        color: white;
        font-family: Arial, sans-serif;
        transition: color 0.3s ease;
      }

      .nav-menu a:hover {
        color: #ffd700;
      }
    </style>
  </head>
  <body>
    <nav class="nav-menu">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </body>
</html>

이 탐색 메뉴에 사용된 주요 기술:

메뉴 항목에 대한 display: inline-block
기본 목록 스타일 제거
호버 효과 추가
수평 레이아웃 생성

파일 내용을 확인해 보겠습니다.

cat ~/project/navigation-menu.html

예시 출력:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Navigation Menu</title>
    <style>
        .nav-menu {
            background-color: #333;
            padding: 10px;
        }

        .nav-menu ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }

        .nav-menu li {
            display: inline-block;
            margin-right: 20px;
        }

        .nav-menu a {
            text-decoration: none;
            color: white;
            font-family: Arial, sans-serif;
            transition: color 0.3s ease;
        }

        .nav-menu a:hover {
            color: #ffd700;
        }
    </style>
</head>
<body>
    <nav class="nav-menu">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
</body>
</html>

탐색 메뉴에 대한 모범 사례:

<nav>와 같은 의미론적 HTML5 태그 사용
메뉴 구조를 단순하게 유지
가독성 및 접근성 확보
더 나은 사용자 상호 작용을 위해 호버 및 활성 상태 추가

요약

이 랩에서는 CSS display 속성을 탐구하여 다양한 display 값이 웹 페이지 레이아웃 및 요소 동작에 어떤 영향을 미치는지 이해하는 데 중점을 두었습니다. 랩은 block display 속성을 검토하는 것으로 시작하여 블록 레벨 요소가 전체 너비를 차지하고, 새 줄에서 시작하며, margin, padding 및 border 로 스타일링할 수 있음을 시연했습니다. 참가자들은 <div>, <p> 및 heading 태그와 같은 일반적인 블록 레벨 요소와 문서에서 자연스럽게 수직으로 쌓이는 방식을 배웠습니다.

이후 단계에서는 inline, inline-block 및 none display 속성을 적용하도록 안내하여 요소 렌더링 및 가시성을 제어하는 실질적인 통찰력을 제공했습니다. 실용적인 예제를 만들고 CSS 스타일을 실험함으로써 참가자들은 요소 display 특성을 조작하는 데 실질적인 경험을 쌓았으며, 궁극적으로 CSS display 속성을 사용하여 보다 유연하고 반응형 웹 페이지 레이아웃을 만드는 방법을 이해했습니다.

CSS Display 속성 탐구

소개

Block Display 속성 이해

Inline Display 속성 적용

Inline-Block Display 속성 구현

None Display 속성을 사용하여 요소 숨기기

Display 속성을 사용한 네비게이션 메뉴 생성

요약