공간 분할 태그는 지금 사실상 별 의미를 못 느끼는 태그 입니다.
하지만, 나중에 CSS를 배우면서 스타일을 입히게 될 때. 이 공간 분할 태그에 대해서 많이 사용하게 될 것이니 꼭 알아두고 넘어가야 합니다.
1. 블록 태그 (div)
블록 태그는 내용물에 관계 없이 그 줄 전체를 자신의 범위에 포함시킵니다.
블록 태그에서 우리가 흔히 사용했던 태그로는 <p> 태그가 있겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>블록 태그</title>
</head>
<body>
<p>안녕하세요.</p><p>반갑습니다.</p><p>블록 태그에 대해서 알아보겠습니다.</p>
</body>
</html>
위와 같이 태그를 작성하면 아래처럼 출력이 될 것 입니다.
안녕하세요.
반갑습니다.
블록 태그에 대해서 알아보겠습니다.
각각의 <p>태그는 한 줄을 자신의 영역으로 포함하기 때문입니다.
그래서 새 <p> 태그마다 줄이 바뀌게 되는 것 이지요.
하지만 공간을 분할하기 위해서는 <p>태그는 단락을 나타내는 역할이 있기 때문에 다른 공간 분할만을 할 태그로 div 태그를 이용합니다.
다른 블록 태그도 많습니다. 이제 태그를 되새겨보면 이건 블록 태그 였구나~ 하는 것이 있을 것 입니다.
2. 인라인 태그 (span)
인라인 태그는 딱 내용물 만큼만 영역으로 가집니다.
예를 들면 <b>태그나 <i> 태그 같이 글을 꾸밀 때 사용했던 태그들이 인라인 태그라고 할 수 있겠지요.
<a> 태그 역시 인라인 태그 입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>인라인 태그</title>
</head>
<body>
<b>안녕하세요.</b>
<i>반갑습니다.</i>
<a href="#">인라인 태그에 대해서 알아보겠습니다.</a>
</body>
</html>
이렇게 작성을 하게 되면 다음과 같은 결과가 나옵니다.
다음과 같이 줄이 바뀌지 않고 다닥다닥 붙어서 출력되게 됩니다.
딱 본인의 영역만을 자리로 차지하기 때문입니다.
하지만 이들 역시 각자의 역할이 있는 태그기에 공간 분할 태그로 이용하기 위한 인라인 태그는 <span> 태그를 이용합니다.
3. 범위 확인해 보기
이번에는 범위를 스타일을 통해서 확인해 볼 것입니다.
각각 범위들을 확인할 수 있도록 스타일을 적용해보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>공간 분할 태그</title>
<style>
div {
background-color:blue;
}
span {
background-color:green;
}
</style>
</head>
<body>
<div>div 태그 입니다.</div>
<div>div 태그 입니다.</div>
<span>span 태그 입니다.</span>
<span>span 태그 입니다.</span>
</body>
</html>
다음과 같이 입력하면 스타일이 적용되어서 div태그는 파란색으로 green태그는 초록색으로 색깔이 입혀집니다.
(예제에서는 다른 태그를 건들이지 않도록 하기 위해서 스타일을 다소 수정하였지만, 다를 바 없습니다.)
다음과 같이 출력이 됩니다.
div태그가 간격 없이 붙어벼러서 하나로 보이지만, 사실 두개로 떨어져 있는거 랍니다.
궁금하시면 div 태그 사이에 <br />태그를 넣어서 한번 떨어트려서 보시면 될 것 같습니다.
'프로그래밍 > HTML5' 카테고리의 다른 글
| [HTML5] 비디오 태그 (0) | 2016.08.05 |
|---|---|
| [HTML5] 오디오 태그 (0) | 2016.08.05 |
| [HTML5] 테이블 태그 (2) - 셀 합치기 (0) | 2016.07.26 |
| [HTML5] 테이블 태그 (1) - 기본 (0) | 2016.07.22 |
| [HTML5] 주석 달기 (3) | 2016.07.20 |