※ display 속성은 요소의 성격을 변경할 수 있는 속성이다.
주로, 블록요소를 인라인요소로
혹은 인라인요소를 블록요소로 변경할 때 사용하게 되며,
그 외에도 가시속성으로 안보이게 처리할 수도 있으며,
최근에는 레이아웃을 적용하는 속성으로도 사용하게 된다.
| 속성값 |
설명 |
| inline |
한줄만 차지하며 공간의 크기가 내부의 요소 크기로 한정됩니다. 따라서 옆에 남는 공간에 다른 요소가 올 수 있다. inline속성을 갖고 있는 요소의 대표적으로는 span, a, img... |
| block |
블록속성은 전체 행을 차지하게 되는 특징을 갖고 있다. p, div, h1~h6, p, form, header, section, footer... |
| flex | 블록레벨 flex로 변경됨 |
| grid | 블록레벨 grid로 변경됨 |
| inline-block |
요소에 부여된 크기는 보장되며, inline속성이 있기 때문에 행 전체를 차지하지 않고, 옆에 남는 공간이 활용될수 있다. 인라인-블록 요소는 인라인 요소와 비슷하지만, 너비와 높이를 설정할 수 있으며, 블록 요소처럼 margin이 적용된다. |
| none | 요소를 완전히 제거한다. |
이 외에도 많은 display의 속성값이 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>display</title>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<style>
nav{
width:100%;
height:50px;
background: #000;
}
ul{
list-style:none;
float: left;
margin:0;
}
ul:first-child{margin-left:-40px;}
ul:last-child{float: right;}
li{
float: left;
height:50px;
}
a{/*inline*/
display:block;
/*inline속성을 가진 요소가 크기를 적용받으려면, block 속성으로 바뀌어야 한다. */
width:100%;
height:100%;
padding:10px 30px;
box-sizing:border-box;
/*padding의 크기가 w,h에 포함된다*/
color:#fff;
text-decoration:none;
}
ul:first-child li:hover{
background: #aaa;
}
ul:last-child li:hover{
background: #f00;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#"><i class="fas fa-bars"></i></a></li>
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
<li><a href="#">menu4</a></li>
<li><a href="#">menu5</a></li>
<li><a href="#">menu6</a></li>
<li><a href="#">menu7</a></li>
</ul>
<ul>
<li><a href="#"><i class="fas fa-search"></i></a></li>
</ul>
</nav>
</body>
</html>
※ display의 기타 속성 참고
www.w3schools.com/cssref/pr_class_display.asp
CSS display property
CSS display Property Example Use of some different display values: p.ex1 {display: none;} p.ex2 {display: inline;} p.ex3 {display: block;} p.ex4 {display: inline-block;} Try it Yourself » More "Try it Yourself" examples below. Definition and Usage The dis
www.w3schools.com
'UIUX Web Standard > COA Lab's CSS' 카테고리의 다른 글
| background 속성 1 - 기본 (0) | 2021.01.25 |
|---|---|
| display 속성 2, 가시속성 (0) | 2021.01.25 |
| 문단과 관련된 속성 (0) | 2021.01.22 |
| CSS 기초개념 : selector(선택자), 문자관련속성 (0) | 2021.01.21 |
| 웹접근성을 위한 :focus (0) | 2020.08.25 |
