Front/CSS
[CSS3] 블록 레벨, 인라인 레벨
시월해
2021. 4. 20. 17:37
1. 블록 레벨 요소.
- 주요 태그 : div, hn, p
- 사용 가능한 최대 가로 너비를 사용한다.
- 크기를 지정할 수 있음.
- whidth : 100%, height : 0%로 시작 ==> default 값
- 수직으로 쌓인다.
- margin, padding의 속성에 위, 아래, 좌, 우 사용이 가능하다.
- 레이아웃을 설정하는 용도로 사용됨
2. 인라인 레벨 요소.
- 주요 태그 : span, img
- 필요한 만큼만의 너비를 사용한다.
- 크기를 지정할 수 없음.
- whidth : 0%, height : 0%로 시작 ==> default 값
- 수평으로 쌓인다.
- margin, padding의 속성에 위, 아래, 좌, 우 사용이 불가능하다.
- 텍스트를 설정하는 용도로 사용이 된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div></div>
<hr>
<span>텍스트</span>
</body>
</html>
span과 div가 차지한 영역 값이 다른 것을 볼 수 있다.