(CSS) display
2023. 1. 11. 16:19ㆍHTML&CSS
반응형
display
- 영역을 어떻게 출력할지 설정하는 CSS 명령어
- 종류 (block, inline, inline-block, flex, none,.... 등등
- display : block => div 태그의 기본 설정 값, 내부 content와 상관없이 가로 너비를 전부 차지한다
- display : inline => 인라인 설정, span, a 등 기본 값으로 설정되어 있다. 내부 필요한 content 영역만 갖고 그 외 영역은 차지하지 않는다
- display : none => 출력을 하지 않는다. 해당 영역이 없다고 취급
- display : flex => 플렉스 아이템들의 부모 이자 플렉스 박스라고 명칭
- display : grid => 그리드 아이템들의 부모 이자 그리드 박스라고 명칭
- display : inherit => 설정된 영역의 부모 태그의 설정 값을 상속받는다.
- display : initial => 기본 값으로 설정
- display : unset => 부모의 값을 확인해서 있으면 받아오고, 없으면 기본값으로 설정
※ display 설정 명령어 중 사용 빈도수 : flex > block > none >>>>>>> grid >>>>>>>>>>>>>>>>>>>>>나머지 설정 명령어
<html lang="ko">
<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>Document</title>
<link rel="stylesheet" href="./index.css" />
</head>
<body>
<div class="display-container">
<div class="display1">display1</div>
<div class="display2">display2</div>
<div class="display3">display3</div>
<div class="display4">display4</div>
<div class="display5">display5</div>
<div class="display6">display6</div>
<div class="display7">display7</div>
<div class="display8">display8</div>
</div>
</body>
</html>* {
box-sizing: border-box;
padding: 0;
margin: 0 auto;
}
.display-container {
border: 5px solid firebrick;
}
.display1,
.display2,
.display3,
.display4,
.display5,
.display6,
.display7,
.display8 {
font-size: 5rem;
border: 5px solid hotpink;
}
.display1 {
background-color: aqua;
display: block;
}
.display2 {
background-color: blue;
display: inline;
}
.display3 {
background-color: bisque;
display: inline-block;
}
.display4 {
background-color: darkcyan;
display: flex;
}
.display5 {
background-color: red;
display: grid;
}
.display6 {
background-color: orange;
display: inherit;
}
.display7 {
background-color: rosybrown;
display: initial;
}
.display8 {
background-color: wheat;
display: unset;
}'HTML&CSS' 카테고리의 다른 글
| (CSS) pseudo (0) | 2023.01.11 |
|---|---|
| (CSS) position (0) | 2023.01.11 |
| (CSS) 선택자 (0) | 2023.01.11 |
| (CSS) CSS & Link태그 (0) | 2023.01.11 |
| (CSS) padding, margin (4) | 2023.01.11 |