공간 분할 태그는 지금 사실상 별 의미를 못 느끼는 태그 입니다.


하지만, 나중에 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 태그 입니다.
span 태그 입니다. span 태그 입니다.


다음과 같이 출력이 됩니다.


div태그가 간격 없이 붙어벼러서 하나로 보이지만, 사실 두개로 떨어져 있는거 랍니다.


궁금하시면 div 태그 사이에 <br />태그를 넣어서 한번 떨어트려서 보시면 될 것 같습니다.

'프로그래밍 > HTML5' 카테고리의 다른 글

[HTML5] 비디오 태그  (0) 2016.08.05
[HTML5] 오디오 태그  (0) 2016.08.05
[HTML5] 공간 분할 태그  (0) 2016.07.26
[HTML5] 테이블 태그 (2) - 셀 합치기  (0) 2016.07.26
[HTML5] 테이블 태그 (1) - 기본  (0) 2016.07.22
[HTML5] 주석 달기  (3) 2016.07.20

댓글 작성