1. display property
- display : layout 정의에 자주 사용되는 property, 상속되지 않음
| property 값 | description |
|---|
| block | block 특성을 가지는 요소로 지정 |
| inline | inline 특성을 가지는 요소로 지정 |
| inline-block | inline-block 특성을 가지는 요소로 지정 |
| none | 해당 요소를 화면에 표시하지 않음 |
- HTML 요소의 display 디폴트 값 : block, inline
1.1 block 레벨 요소
- block 특성을 가진 요소 (block 레벨 요소, block 요소)
- 항상 새로운 라인에서 시작
- 화면 크기의 전체 가로폭을 차지 (width: 100%)
- width, height, margin, padding 지정 가능
- block 레벨 요소 내에 inline 레벨 요소 포함 가능
- block 레벨 요소 : div, h1~h6, p, ol, ul, hr, table, form
<!DOCTYPE html>
<html>
<head>
<style>
div:nth-of-type(1) {
background-color: #FFA07A;
padding: 20px;
}
div:nth-of-type(2) {
background-color: #FF7F50;
padding: 20px;
width: 300px;
}
</style>
</head>
<body>
<div>
<h2>block 레벨 요소</h2>
<p>width, height 미지정 -> width: 100%; height: auto;</p>
</div>
<div>
<h2>block 레벨 요소</h2>
<p>width: 300px -> width: 300px; height: auto;</p>
</div>
</body>
</html>
1.2 inline 레벨 요소
- inline 특성을 가지는 요소 (inline 레벨 요소, inline 요소)
- 줄을 바꾸지 않고 다른 요소와 함께 한 행에 위치
- content의 너비만큼 가로폭을 차지
- width, height, margin-top, margin-bottom 지정 X
- line-height으로 상,하 여백 지정
- inline 레벨 요소 뒤에 공백(엔터, 스페이스)이 있는 경우, 정의하지 않은 space(4px)이 자동 지정됨
- inline 레벨 요소 내에 block 레벨 요소 포함 X
- inline 레벨 요소 : span, a, strong, img, br, input, select, textarea, button
<!DOCTYPE html>
<html>
<head>
<style>
span {
background-color: red;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<h1>My<span>Important</span>Heading</h1>
<span>Inline</span>
<span>Inline</span><span>Inline</span>
</body>
</html>
1.3 inline-block 레벨 요소
- block과 inline 레벨 요소의 특징을 모두 가짐
- inline 레벨 요소처럼 줄을 바꾸지 않고 다른 요소와 함께 한 행에 위치 가능
- block 레벨 요소처럼 width, height, margin, padding을 모두 지정 가능
- margin, line-height 모두를 통해 상, 하 여백 지정 가능
- content의 너비만큼 가로폭을 차지
- inline 레벨 요소 뒤에 공백(엔터, 스페이스)이 있는 경우, 정의하지 않은 space(4px)이 자동 지정됨
<!DOCTYPE html>
<html>
<head>
<style>
.wrapper {
font-size: 0;
}
.inline-block {
display: inline-block;
vertical-align: middle;
border: 3px solid #73AD21;
font-size: 16px;
}
.box1 {
width: 300px;
height: 70px;
}
.box2 {
width: 300px;
height: 150px;
}
</style>
</head>
<body>
<div class="inline-block box1">inline-block height: 70px</div>
<div class="inline-block box2">inline-block height: 150px</div>
<div class="wrapper">
<div class="inline-block box1">inline-block height: 70px</div>
<div class="inline-block box2">inline-block height: 150px</div>
</div>
</body>
</html>
2. visibility property
- visibility : 요소의 렌더링 여부를 정의 (요소를 보이게 할 것인지 아닌지를 정의)
| property 값 | description |
|---|
| visible | 해당 요소를 보이게 함 (기본값) |
| hidden | 해당 요소를 보이지 않게 함, display: none;과 다르게 해당 요소의 공간이 사라지지 않고 남음 |
| collapse | table 요소에 사용하며 행이나 열을 보이지 않게 함 |
<!DOCTYPE html>
<html>
<head>
<style>
.visible { visibility: visible; }
.hidden { visibility: hidden; }
table, td { border: 1px solid black; }
.collapse { visibility: collapse; }
</style>
</head>
<body>
<h1 class="visible">visibility: visible</h1>
<h1 class="hidden">visibility: hidden</h1>
<h1 style="display: none">display: none</h1>
<table>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr class="collapse">
<td>C</td>
<td>D</td>
</tr>
</table>
</body>
</html>
3. opacity property
- opacity : 요소의 투명도를 정의, 0.0(투명) ~ 1.0(불투명) 사이 값을 가짐
<!DOCTYPE html>
<html>
<head>
<style>
div, img {
float: left;
width: 150px;
height: 150px;
margin: 30px;
background-color: blue;
color: white;
opacity: 0.5;
transition: opacity 1s;
}
div:hover, img:hover {
opacity: 1.0;
}
</style>
</head>
<body>
<div>opacity: 0.5</div>
<img src="https://poiemaweb.com/img/doug.jpg" alt="doug">
</body>
</html>
