레이아웃-1.display, 2.float, 3.position
display
none :태그를 화면에서 보이지 않게
block :태그를 block형식으로 지정. inline요소를 block으로
inline :태그를 inline형식으로 지정. block요소를 inline으로
inline-block :태그를 inline-block형식으로 지정. inline으로 배치하되 block의 성질을 갖게.
->너비,높이 정렬은 block에만 들어갈 수 있다. 박스는 가로배치하되 박스요소의 크기,너비 설정이 가능해진다.
tip)
개발자도구를 보면 왜 안들어가고 있는지 등 문제해결에 도움을 받을 수 있다
<!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>Document</title>
<style>
/* 인라인요소로 변경 */
.list .inner {
display: inline;
}
/* 블럭요소로 변경 */
.list2 span {
display: block;
}
/* 인라인으로 배치, 블럭성질을 가지게 함 */
.list3 a {
display: inline-block;
height: 100px;
line-height: 100px;
width: 100px;
text-align: center;
}
/* 숨기기 */
.box {
display: none;
}
</style>
</head>
<body>
<div class="list">
<div class="inner">블럭</div>
<div class="inner">블럭</div>
<div class="inner">블럭</div>
</div>
<div class="list2">
<span>인라인</span>
<span>인라인</span>
<span>인라인</span>
</div>
<div class="list3">
<a href="#">인라인</a>
<a href="#">인라인</a>
<a href="#">인라인</a>
</div>
<div class="box">
<p>디스플레이 none</p>
</div>
</body>
</html>
'HTML·CSS' 카테고리의 다른 글
| 221220 HTML CSS 백그라운드 (0) | 2022.12.20 |
|---|---|
| 221220 HTML CSS display 실습 (0) | 2022.12.20 |
| 221220 HTML CSS 텍스트와 BORDER (0) | 2022.12.20 |
| 221220 HTML CSS 폰트 (0) | 2022.12.20 |
| 221220 HTML CSS 선택자, 가상선택자 (0) | 2022.12.20 |
