Display 속성
: HTML 요소를 어떻게 표시할지 결정한다.
display: block → Block Level Element
display: inline → Inline Level Element
기본 4가지 값
- none : 요소를 보이지 않게 설정한다. visibility 속성을 hidden으로 설정한 것과 달리, 영역을 차지하지 않는다.
- block : 기본적으로 가로 영역을 모두 채우며, block 요소 다음에 등장하는 태그는 줄바꿈이 된 것처럼 보이니다. 문서에서 문단을 표시할 때 주로 사용한다.
- width, height 속성을 지정할 수 있다.
- div, p , h1~h6 태그 등이 해당한다.
- inline : 컨텐츠만큼 영역을 차지한다. block과 달리 줄바꿈이 되지 않고, width와 height를 지정할 수 없다. word와 같은 문서에서 볼드, 이탤릭, 색상, 밑줄 등 글자나 문장에 효과를 주기 위한 단위이다.
- inline-block :
- block과 inline의 중간 형태 요소로 inline 이지만 내부는 block 처럼 표시한다.
- inline 요소로 컨텐츠 만큼 영역을 차지하여 가로로 배치되지만 block 처럼 내부 속성인 width , height 등과 같은 것을 변경할 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Navbar</title>
</head>
<style>
* {
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
}
nav {
background-color: #34495e;
width: 100%;
height: 80px;
}
nav li {
/* border: 1px solid white; */
display: inline-block;
margin: 0 8px;
line-height: 80px;
}
nav a {
color: white;
font-size: 20px;
text-transform: uppercase;
padding: 10px;
}
a.active,
a:hover {
border: 1px solid white;
}
</style>
<body>
<nav>
<ul>
<li><a href="#" class="active">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Feedback</a></li>
</ul>
</nav>
</body>
</html>
'CSS' 카테고리의 다른 글
| Background (0) | 2024.01.24 |
|---|---|
| Float 속성 | Position 속성 (1) | 2024.01.24 |
| Box Model | border... | Box-Sizing (0) | 2024.01.23 |
| Table (표) 관련 속성 (0) | 2024.01.23 |
| CSS 폰트 글꼴 관련 속성 | 웹폰트 | 단위 | 색상키워드 표기법 | 그 외 속성 (0) | 2024.01.23 |
댓글