이거!!! block(div) VS inline(span)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>06_영역관련태그</title>
<style>
div {
border: 1px solid red;
}
span{
border: 1px solid blue;
}
</style>
</head>
<body>
<h1>영역을 나누는 형식(성질)</h1>
<pre>
<h3>block 형식</h3>
- 공간을 수직 분할한다(레고블럭이 위로 쌓여있다고 상상).
- 크기를 지정하는 width, height 속성을 사용할 수 있다.
- p태그/pre태그(문단나누기), h1~h6, hr(수평선), div태그
</pre>
<pre>
<h3>inline 형식</h3>
- 공간을 수평 분할한다(레고블럭이 가로로 놓여져있다고 상상)
- 크기를 지정하는 width, height 속성을 사용할 수 없다.
- strong/b, em/i, mark, span
</pre>
<hr>
<h2>block(div) / inline(span) 차이점 1 : 줄바꿈(개행)에서 차이가 있다.</h2>
<h3>div 태그</h3>
<p>
block 형식의 태그는 한 줄을 모두 차지하기 때문에, <br>
뒤에 오는 내용은 다음줄에 작성이 된다.
</p>
<div>첫번째 영역</div>
<div>두번째 영역</div>
<div>세번째 영역</div>
<br>
<h3>span 태그</h3>
<p>
inline 형식 태그는 한 줄 내에서 일정한 칸을 차지하기 때문에, <br>
뒤에 오는 내용은 줄이 바뀌지 않고 옆에 붙는다.
</p>
<span>첫번째 영역</span>
<span>두번째 영역</span>
<span>세번째 영역</span>
<hr>
<h2>block(div) / inline(span) 차이점 2 : 영역 지정 방식</h2>
<ul>
<li>block : 사각형 박스 형태로 영역을 지정</li>
<li>inline : 내부에 작성된 내용(Content) 단위로 영역을 지정한다.
<!-- 글자 수대로 길이가 길어진다는 얘기야. -->
</li>
</ul>
<div style="background-color: aqua;">
동해물과 백두산이 마르고 닳도록 <br>
하느님이 보우하사 우리나라 만세 <br>
무궁화 삼천리 화려 강산 <br>
대한사람 대한으로 길이 보전하세 <br>
남산 위에 저 소나무 철갑을 두른듯 <br>
바람서리 불변함은 우리 기상일세 <br>
무궁화 삼천리 화려 강산 <br>
대한사람 대한으로 길이 보전하세 <br>
</div>
<span style="background-color: blanchedalmond;">
동해물과 백두산이 마르고 닳도록 <br>
하느님이 보우하사 우리나라 만세 <br>
무궁화 삼천리 화려 강산 <br>
대한사람 대한으로 길이 보전하세 <br>
남산 위에 저 소나무 철갑을 두른듯 <br>
바람서리 불변함은 우리 기상일세 <br>
무궁화 삼천리 화려 강산 <br>
대한사람 대한으로 길이 보전하세 <br>
</span>
<hr>
<h2>block(div) / inline(span) 차이점 3 : 크기 지정(width/height) </h2>
<ul>
<li>block: 크기 지정 가능</li>
<li>lnline: 크기 지정 불가능</li>
</ul>
<h3>div 태그</h3>
<div style="width:200px; height:200px">Test</div>
<div style="width:200px; height:200px">Test</div>
<span style="width:200px; height:200px">Test</span>
<span style="width:200px; height:200px">Test</span>
<hr>
</body>
</html>