디스플레이(Display)

CSS display 속성은 웹 페이지의 요소가 화면에 어떻게 표시될지 결정합니다.

display 속성은 아래와 같이 다양한 값을 가질 수 있고, 각 값은 HTML 요소의 박스 유형과 배치 방식을 다르게 정의합니다.

• block: 요소가 부모 요소의 전체 너비까지 확장되어 width: 100%가 됩니다. 항상 새로운 줄에서 시작합니다.

• inline: 인라인 요소는 새 줄에서 시작하지 않습니다. 요소가 콘텐츠의 너비만큼 차지하며, 줄의 중간에서 시작하거나 끝날 수 있습니다.

• none: 요소가 화면에 표시되지 않습니다.

• inline-block: inline과 block의 특징을 결합합니다. 요소가 콘텐츠의 너비만큼 차지하지만, block처럼 width와 height를 지정할 수 있습니다.

1. display: block;

display: block; 속성 값을 사용하면 해당 요소가 블록 레벨 요소로 처리됩니다. 블록 레벨 요소는 항상 새로운 줄에서 시작하며, 이전 요소가 끝나면 블록 레벨 요소는 다음 줄에 표시됩니다.

기본적으로 블록 레벨 요소는 부모 요소의 전체 너비를 차지합니다. 요소의 너비가 명시적으로 설정되지 않았다면, 블록 요소는 부모 요소의 너비만큼 길어져서 가로 방향으로 가능한 모든 공간을 차지합니다.

• 예시: <div>, <p>, <h1>~<h6> 등

복사
div {
  display: block;
}

2. display: inline;

display: inline; 속성 값을 사용하면, 해당 요소가 인라인(inline) 요소로 처리됩니다.

인라인 요소는 주변 내용과 함께 한 줄에 나란히 배치되며, 인라인 요소는 내용의 너비만큼의 영역만 차지합니다. 즉, 인라인 요소에는 너비(width)나 높이(height)를 직접 설정할 수 없습니다.

또한 위, 아래 margin(바깥 여백)이 적용되지 않습니다.

• 예시: <span>, <a>, <strong> 등

복사
span {
  display: inline;
}

3. display: inline-block;

inline-block은 inline과 block의 특성을 모두 갖습니다. 이는 요소가 인라인 요소처럼 줄 바꿈 없이 배치되지만, 블록 요소처럼 너비와 높이를 직접 설정할 수 있다는 것을 의미합니다.

• 예시: 사용자 정의 버튼 또는 아이콘과 같은 요소에 유용합니다.

복사
.icon {
  display: inline-block;
}

4. display: none;

display: none으로 설정된 요소는 웹 페이지에서 완전히 보이지 않게 됩니다. 또한, 이 요소는 문서의 레이아웃에도 영향을 주지 않게 되므로, 마치 해당 요소가 HTML 소스 코드에서 제거된 것처럼 동작합니다. visibility: hidden;과는 다르게, display: none은 요소에 할당된 공간도 사라지게 합니다.

• 예시: 스크립트를 사용하여 특정 조건에서만 요소를 보이게 하거나 숨길 때 주로 사용됩니다.

복사
.hidden {
  display: none;
}

다음은 display 속성을 사용한 예시입니다.

복사
<div>Block Element</div>
<span>Inline Element</span>
<span class="hidden">This will not be displayed</span>
<button>Inline-Block Button</button>

복사
div {
  display: block;
  background-color: lightblue;
}

span {
  display: inline;
  background-color: lightyellow;
}

.hidden {
  display: none;
}

button {
  display: inline-block;
  background-color: lightgreen;
}

div 요소는 lightblue 배경의 block 요소로 화면 전체 너비를 차지합니다.

span 요소는 lightyellow 배경의 inline 요소로 줄의 중간에서 시작되며, .hidden 클래스가 적용된 span 요소는 화면에 표시되지 않습니다.

button 요소는 lightgreen 배경의 inline-block 요소로 줄의 중간에서 시작되면서, 자체적인 높이와 너비가 있습니다.

코드의 별표로 강조된 부분을 따라 입력해 보세요.