반응형
Block VS Inline element
<!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>
<!-- <link rel="stylesheet" href="css.css"> -->
</head>
<body>
<p> <!-- div, span : 아무런 의미가 없는 tag -->
<div>div1</div> <!-- div : block level element의 성격을 가짐 -->
<div>div2</div>
</p>
<p>
<span>span1</span> <!-- span : inline element의 성격을 가짐 -->
<span>span2</span>
</p>
<p>
<h1>h1</h1> <!-- 기본적으로 block level element의 성격을 가짐 -->
<a href="">a</a> <!-- 기본적으로 inline element의 성격을 가짐 -->
</p>
</body>
</html>
HTML code & result
윗 화면으로만으로는 정확하게 block level element와 inline element의 차이를 구별하기 어렵습니다.
그래서 육안으로 구분하기 쉽게 주석이 걸린 css.css를 풀고 border를 입력하겠습니다.
css.css & result
윗 코드의 주석을 풀어 css.css로 border를 주니
육안으로 block level element와 inline element를 구분이 뚜렷이 보입니다.
block level element는 화면 전체를 사용합니다.
inline element는 자기 자신의 크기만큼 사용합니다.
<div>, <h1> ~ <h6> 는 기본적으로 block level element의 성격을 가집니다.
<span>, <a>... 등 대부분은 inline element의 성격을 가집니다.
반응형
Summary (요약)
Block VS inline element를 알아보는 시간이었습니다.
틀린 내용은 댓글로 알려주시면 감사하겠습니다.
반응형
