728x90
반응형
Display property
- 해당 요소가 어떻게 보여야 할지를 결정하는 속성
- 요소가 보이는 방식에는 기본적으로 block과 inline이 있다.
display: block
- 항상 한 줄을 모두 차지한다.
- 기본 너비는 100%로 설정되어 있다.
- 박스 취급
- padding과 margin을 통한 여백 설정이 가능하다.
- ex - div, p, h, ul, li, ...등의 기본값
display: inline
- 한 줄을 차지하지 않고 필요한만큼만 차지한다.
- 글자들 사이에서 특정 부분을 선택할 때 주로 사용한다.
- padding과 margin이 제대로 적용되지 않는다.
- ex - span, a, b, i, mark, ...등의 기본값
display: inline-block
- inline 요소처럼 문단을 해치지 않으면서 margin과 padding도 정상 적용된다.
display: none
- 해당 요소를 안보이게 한다. 해당 요소가 보유한 영역도 사라진다.
visibility: hidden
- 영역은 그대로 두고, 보이지만 않는 상태로 변경한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>15_Display.html</title>
<link rel="stylesheet" href="./assets/css15.css">
</head>
<body>
<h3># Display property</h3>
<ul>
<li>해당 요소가 어떻게 보여야 할지를 결정하는 속성</li>
<li>요소가 보이는 방식에는 기본적으로 block과 inline이 있다.</li>
</ul>
<h3># display: block</h3>
<ul>
<li>항상 한 줄을 모두 차지한다.</li>
<li>기본 너비는 100%로 설정되어 있다.</li>
<li>박스 취급</li>
<li>padding과 margin을 통한 여백 설정이 가능하다.</li>
<li>ex - div, p, h, ul, li, ...등의 기본값</li>
</ul>
<h3># display: inline</h3>
<ul>
<li>한 줄을 차지하지 않고 필요한만큼만 차지한다.</li>
<li>글자들 사이에서 특정 부분을 선택할 때 주로 사용한다.</li>
<li>padding과 margin이 제대로 적용되지 않는다.</li>
<li>ex - span, a, b, i, mark, ...등의 기본값</li>
</ul>
<div class="border red inline">1</div>
<div class="border orange inline">2</div>
<div class="border green inline">3</div>
<div class="border blue inline">4</div>
<div class="border purple inline">5</div>
<h3># block 요소와 inline 요소의 차이점</h3>
<h5>- display: block</h5>
<div>
Lorem ipsum
<div style="border: solid 1px black; margin: 10px; padding: 10px;">
dolor
</div> sit
<div style="border: solid 1px black;">
amet
</div>
consectetur adipisicing elit. Eligendi, laborum! Itaque nisi officiis nobis accusamus ex. Non deserunt quam, placeat, unde, dolorum quidem et cupiditate nemo omnis ex suscipit fugit.
</div>
<h5>- display: inline</h5>
<div>
Lorem ipsum
<i style="border: solid 1px black; margin: 10px; padding: 30px; background-color: yellow;">
dolor
</i>
sit
<b style="border: solid 1px black;">
amet
</b>
consectetur adipisicing elit. Eligendi, laborum! Itaque nisi officiis nobis accusamus ex. Non deserunt quam, placeat, unde, dolorum quidem et cupiditate nemo omnis ex suscipit fugit.
</div>
<h5>- display: inline-block</h5>
<p>inline 요소처럼 문단을 해치지 않으면서 margin과 padding도 정상 적용된다.</p>
<div>
Lorem ipsum
<i style="border: solid 1px black; margin: 10px; padding: 30px; background-color: yellow; display: inline-block;">
dolor
</i>
sit
<b style="border: solid 1px black; margin: 10px; padding: 5px; background-color: blue; color:white; display: inline-block;">
amet
</b>
consectetur adipisicing elit. Eligendi, laborum! Itaque nisi officiis nobis accusamus ex. Non deserunt quam, placeat, unde, dolorum quidem et cupiditate nemo omnis ex suscipit fugit.
</div>
<h5>- display: none</h5>
<p>해당 요소를 안보이게 한다. 해당 요소가 보유한 영역도 사라진다.</p>
<div>
Lorem ipsum
<i style="border: solid 1px black; margin: 10px; padding: 30px; background-color: yellow; display: none;">
dolor
</i>
sit
<b style="border: solid 1px black; margin: 10px; padding: 5px; background-color: blue; color:white; display: none;">
amet
</b>
consectetur adipisicing elit. Eligendi, laborum! Itaque nisi officiis nobis accusamus ex. Non deserunt quam, placeat, unde, dolorum quidem et cupiditate nemo omnis ex suscipit fugit.
</div>
<h5>- visibility: hidden</h5>
<p>영역은 그대로 두고, 보이지만 않는 상태로 변경한다.</p>
<div>
Lorem ipsum
<i style="border: solid 1px black; margin: 10px; padding: 30px; background-color: yellow; display: inline-block; visibility: hidden;">
dolor
</i>
sit
<b style="border: solid 1px black; margin: 10px; padding: 5px; background-color: blue; color:white; display: inline-block; visibility: hidden;">
amet
</b>
consectetur adipisicing elit. Eligendi, laborum! Itaque nisi officiis nobis accusamus ex. Non deserunt quam, placeat, unde, dolorum quidem et cupiditate nemo omnis ex suscipit fugit.
</div>
</body>
</html>.block {
display: block;
}
.inline {
display: inline;
}
.border {
border: solid 3px black;
}
.red {
border-color: red;
}
.blue {
border-color: blue;
}
.orange {
border-color: orange;
}
.green {
border-color:green;
}
.purple {
border-color:purple;
}728x90
반응형
'CSS' 카테고리의 다른 글
| [CSS] Position (0) | 2023.06.11 |
|---|---|
| [CSS] Flex (2) | 2023.06.08 |
| [CSS] Float (0) | 2023.06.08 |
| [CSS] 가상 요소 (0) | 2023.06.07 |
| [CSS] 가상 클래스 (0) | 2023.06.07 |
