본문 바로가기
Front/CSS

[CSS3] 블록 레벨, 인라인 레벨

by 시월해 2021. 4. 20.

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가 차지한 영역 값이 다른 것을 볼 수 있다.

'Front > CSS' 카테고리의 다른 글

[CSS3] margin과 padding (여백)  (0) 2021.04.22
[CSS3] display 속성  (0) 2021.04.22
[CSS3] em 단위  (0) 2021.04.22
[CSS3] 선택자의 종류(태그, class, id)  (0) 2021.04.20
[CSS3] CSS 기본 개념  (0) 2021.04.20