CSS - Display 속성: 시각적 마법의 관문!

안녕하세요, 미래의 CSS 마법사 여러분! ? 저는 여러분과 함께 CSS display 속성의 fascineting 세계를 탐험하게 되어 기쁩니다. CSS를 가르쳐온 10년 동안, 이 속성을 마스터하면 웹 디자인의 무한한 가능성을 열어줄 힘이 있다고 확신할 수 있습니다. 그럼 시작해보겠습니다!

Display 속성이란?

자세한 내용에 들어가기 전에, display 속성이 정확히 무엇을 하는지 이해해보겠습니다. 간단히 말해, 이 속성은 웹 페이지에서 요소가 어떻게 표시되는지 kontrol 합니다. 이를 연극의 감독으로 생각해보면, 각 배우(요소)가 무대(웹 페이지)에서 어떻게 행동할지 지시하는 것입니다.

가능한 값

display 속성은 다양한 상황에 맞춰 사용할 수 있는 많은 도구(값)을 가지고 있습니다. 여기 가장 흔한 값들의 표를 소개합니다:

값	설명
inline	인라인 요소로 표시합니다 (예: <span>)
block	블록 요소로 표시합니다 (예: <div>)
inline-block	인라인 레벨 블록 컨테이너로 표시합니다
none	요소를 문서에서 완전히 제거합니다
flex	블록 레벨 fleks 컨테이너로 표시합니다
inline-flex	인라인 레벨 fleks 컨테이너로 표시합니다
grid	블록 레벨 그리드 컨테이너로 표시합니다
inline-grid	인라인 레벨 그리드 컨테이너로 표시합니다
table	요소를 <table> 요소처럼 행동하게 합니다
list-item	요소를 <li> 요소처럼 행동하게 합니다

적용 대상

display 속성은 모든 HTML 요소에 적용됩니다. 맞춰요, 그렇게 들릅니다 - 모든 것! 작은 <span>에서 강력한 <div>까지, 모든 요소는 이 강력한 속성에 영향을 받을 수 있습니다.

DOM 문법

JavaScript와 문서 객체 모델(DOM)을 사용할 때, display 속성을 다음과 같이 조작할 수 있습니다:

element.style.display = "value";

예를 들어:

document.getElementById("myElement").style.display = "none";

이렇게 하면 ID가 "myElement"인 요소를 숨길 수 있습니다. 마법이죠?

CSS display - inline 값

inline 값을 먼저 살펴보겠습니다. 이는 <span>, <a>, <img>와 같은 요소们的 기본 값입니다.

<style>
.inline-element {
display: inline;
background-color: yellow;
padding: 5px;
}
</style>

<p>이 문단에 <span class="inline-element">인라인 요소</span>가 들어 있습니다.</p>

이 예제에서, <span> 요소는 텍스트와 함께 흐르며, 새 줄에서 시작하지 않습니다. 문장 속 단어처럼, 흐름을 방해하지 않습니다.

CSS display - block 값

다음은 block 값입니다. 이는 <div>, <p>, <h1>에서 <h6>와 같은 요소们的 기본 값입니다.

<style>
.block-element {
display: block;
background-color: lightblue;
padding: 10px;
margin: 10px 0;
}
</style>

<div class="block-element">이는 블록 요소입니다.</div>
<div class="block-element">이는 또 다른 블록 요소입니다.</div>

블록 요소는 새 줄에서 시작하고, 가능한 한 넓이를 채웁니다. 책의 문단처럼, 각 요소는 새 줄에서 시작합니다.

CSS display - inline-block 값

inline-block 값은 인라인과 블록의 기능을 결합한 하이브리드입니다.

<style>
.inline-block-element {
display: inline-block;
width: 100px;
height: 100px;
background-color: lightgreen;
margin: 5px;
}
</style>

<div class="inline-block-element"></div>
<div class="inline-block-element"></div>
<div class="inline-block-element"></div>

이 요소들은 인라인 요소처럼 서로 옆에 배치되지만, width와 height를 설정할 수 있습니다. 그리드나 fleks 없이 그리드似的 레이아웃을 만들기에 적합합니다.

CSS display - none 값

none 값은 요소를 보이지 않게 합니다.

<style>
.hidden {
display: none;
}
</style>

<p>이 문단은 보입니다.</p>
<p class="hidden">하지만 이 문단은 보이지 않습니다!</p>

display: none을 가진 요소는 레이아웃에서 완전히 제거됩니다. 마치 페이지에 존재하지 않는 것처럼입니다.

CSS display - table 값

CSS는 요소들이 <table> 요소처럼 행동하도록 만들 수 있습니다, 실제 <table> 태그가 아니더라도.

<style>
.table {
display: table;
width: 100%;
border-collapse: collapse;
}
.table-row {
display: table-row;
}
.table-cell {
display: table-cell;
border: 1px solid black;
padding: 5px;
}
</style>

<div class="table">
<div class="table-row">
<div class="table-cell">셀 1</div>
<div class="table-cell">셀 2</div>
</div>
<div class="table-row">
<div class="table-cell">셀 3</div>
<div class="table-cell">셀 4</div>
</div>
</div>

이렇게 하면 테이블 요소 없이도 테이블似的 레이아웃을 만들 수 있습니다. 더 유연한 레이아웃을 만들기에 좋습니다.

CSS display - flex 값

Fleks는 강력한 레이아웃 도구이며, display: flex으로 시작합니다.

<style>
.flex-container {
display: flex;
justify-content: space-around;
background-color: lightgray;
}
.flex-item {
background-color: white;
margin: 10px;
padding: 20px;
}
</style>

<div class="flex-container">
<div class="flex-item">Fleks 아이템 1</div>
<div class="flex-item">Fleks 아이템 2</div>
<div class="flex-item">Fleks 아이템 3</div>
</div>

이렇게 하면 fleks 컨테이너를 만들고, 요소들을 쉽게 정렬하고 분포시킬 수 있습니다. 마치 유연한 체조 선수들이 공간을 맞추고 수축하듯이.

CSS display - inline-flex 값

inline-flex는 flex와 유사하지만, 컨테이너 자체가 인라인 요소로 행동합니다.

<style>
.inline-flex-container {
display: inline-flex;
background-color: lightpink;
}
.flex-item {
margin: 5px;
padding: 10px;
background-color: white;
}
</style>

<div class="inline-flex-container">
<div class="flex-item">아이템 1</div>
<div class="flex-item">아이템 2</div>
</div>
<div class="inline-flex-container">
<div class="flex-item">아이템 3</div>
<div class="flex-item">아이템 4</div>
</div>

이렇게 하면 여러 fleks 컨테이너를 동일한 줄에 배치할 수 있어, 더 복잡한 레이아웃을 만들 수 있습니다.

CSS display - grid 값

그리드는 또 다른 강력한 레이아웃 도구로, display: grid으로 시작합니다.

<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
gap: 10px;
background-color: lightblue;
padding: 10px;
}
.grid-item {
background-color: white;
padding: 20px;
text-align: center;
}
</style>

<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
</div>

그리드는 행과 열을 사용하여 복잡한 레이아웃을 만들 수 있습니다. 요소들의 완벽한 스프레드시트似的 배치를 위해 좋습니다.

CSS display - inline-grid 값

inline-grid는 inline-flex와 유사하지만, 그리드 컨테이너가 인라인 요소로 행동합니다.

<style>
.inline-grid-container {
display: inline-grid;
grid-template-columns: auto auto;
gap: 10px;
background-color: lightyellow;
padding: 10px;
}
.grid-item {
background-color: white;
padding: 10px;
text-align: center;
}
</style>

<div class="inline-grid-container">
<div class="grid-item">A</div>
<div class="grid-item">B</div>
</div>
<div class="inline-grid-container">
<div class="grid-item">C</div>
<div class="grid-item">D</div>
</div>

이렇게 하면 여러 그리드 컨테이너를 동일한 줄에 배치할 수 있어, 더 많은 레이아웃 가능성을 열어줍니다.

CSS display - list-item 값

마지막으로, list-item 값은 요소를 목록 아이템처럼 행동하게 합니다.

<style>
.custom-list {
display: list-item;
list-style-type: square;
margin-left: 20px;
}
</style>

<div class="custom-list">이는 커스텀 목록 아이템입니다.</div>
<div class="custom-list">이는 또 다른 커스텀 목록 아이템입니다.</div>

이는 실제 <ul> 또는 <ol> 요소 없이 목록似的 구조를 만들 때 유용합니다.

그럼 여러분! 우리는 display 속성의 땅에서 여정을 마쳤습니다. 인라인에서 강력한 그리드까지, 다양한 속성을 탐험했습니다. CSS를 마스터하는 열쇠는 연습입니다. 그러니 이 속성들을 실험하고, 새로운 웹 디자인의 큰거를 만들어보세요!

행복한 코딩 되세요, 여러분의 레이아웃은 항상 픽셀 퍼фект하길 바랍니다! ??

Credits: Image by storyset