요소가 화면에 보이는 방식을 지정해 주는 display 속성을 배우다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- display: 요소가 화면에 보이는 방식 지정
(1) block -> 웹 페이지의 가로공간을 모두 차지하는 속성
-> widht, height 설정 가능
-> display: inline 으로 변경가능
ex) div, p, h1, ul, ol, table, ...
(2) inline -> 컨텐츠 내용이 끝나는 지점까지 너비를 가지는 속성
-> widht, height 설정 불가능
-> display: block 으로 변경가능
ex) span, a,
-->
<style>
div, span{
width: 200px;
height: 200px;
}
div{
background-color: lightgreen;
display: inline;
}
span{
background-color: lightcyan;
display: block
}
</style>
</head>
<body>
<div>div 태그</div>
<div>div 태그</div>
<div>div 태그</div>
<span>span태그</span>
<span>span태그</span>
<span>span태그</span>
</body>
</html>
block: 웹 페이지의 가로공간을 모두 차지하는 속성 (세로로 쌓임, 블록 쌓기 느낌)
- width, height 설정 가능
- display: inline, inline-block으로 변경 가능
- ex) div, p, h1, ul, ol, table...
inline: 컨텐츠 내용이 끝나는 지점까지 너비를 가지는 속성 (콘텐츠 크기만큼만 영역을 가짐)
- width, height 설정 불가능
- display: block, inline-block으로 변경 가능
- ex) span, a...
inline-block: 요소의 크기조절을 하고싶지만 위치는 그대로 두고 싶을 때 사용하는 속성
- width, height 설정 가능
'Front-End > CSS' 카테고리의 다른 글
| [CSS] Ex10_margin.html (0) | 2023.06.12 |
|---|---|
| [CSS] Ex09_none.html (0) | 2023.06.11 |
| [CSS] Ex07_크기단위.html (0) | 2023.06.11 |
| [CSS] Ex06_Font.html (0) | 2023.06.11 |
| [CSS] Ex05_반응선택자.html (0) | 2023.06.11 |
