반응형
<div> </div> : 한 줄을 차지하고 줄바꿈 된다.
<span> </span> : content 크기만큼 공간을 차지한다. 줄바꿈 되지 않는다.
직접 화면으로 확인해보자.
<!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>
</head>
<body>
<div>hello</div>
<span>hi</span>
<span>byebye</span>
</body>
</html>
<div>는 block특성이고 <span>은 inline특성이다.
<div>는 항상 새로운자리에서 시작하고, 한줄 전체를 차지,
<inline> 은 문장 중간에 들어갈 수 있으며 content 너비만큼 가로폭을 차지한다.
반응형
'개발 > HTML' 카테고리의 다른 글
| iframe 태그로 html에 유튜브 영상 삽입하기 (0) | 2022.02.18 |
|---|---|
| 표준 마크업 개발과 시맨틱 HTML태그 (0) | 2022.01.03 |
| html에 환경변수 넣는법 (0) | 2021.11.19 |
| input radio 와 input checkbox의 차이 (0) | 2021.07.23 |
| Sementic Tag 와 Non-sementic Tag (0) | 2021.07.23 |
