DIV Element (Block-Level Element - Part III)

DIV Element (Block-Level Element - Part III) | Inline Style

Home > Document > HTML > 고급 과정 > Division marker

페이지 목차

Division Marker

이번 페이지에서는 Block-Level Element 중 Div Element(DIVision marker)와 관련 Element인 Span Element 에 대해 알아 보도록 하겠습니다. Div Element는 일명 또 하나의 Canvas라고도 부릅니다. W3C의 설명을 빌리자면 위의 두 가지 Element를 'Generic language & Style container'라고 설명하고 있습니다. 즉, '일반적인 언어나 스타일을 담는 용기(容器)인 Block Box라는 뜻이죠. HTML 문서를 브라우저에서 볼때 <BODY> ... </BODY> 사이에 들어간 내용 부분이 보이는 브라우저 창을 Canvas라고도 부른다고 Parser를 설명할 때 말한적이 있는데, 바로 이 Div Element를 사용하면 또 하나의 Canvas를 만들 수 있습니다. 물론 사용하는 갯수 만큼 만들 수 있져. 이 문서 중에서 '입력'이나 '출력결과'등을 보면 배경색이 다른걸 알 수 있는데 바로 이 Div Element를 사용한 겁니다. 사용 빈도가 높은 Element입니다.

**Legend** : Optional, Forbidden, Empty, Deprecated, Loose DTD, Frameset DTD [표 보는 방법]
Element	Start tag	End tag	Empty	Deprecated	DTD
DIV
SPAN

HTML element
DIV	Style container, 나머지는 공통 속성표 를 참조
SPAN	Style container, 나머지는 공통 속성표 를 참조

Inline Style

최초로 다루어 보는 CSS(Cascading Style Sheet)가 되겠습니다. DIV는 순전히 Style을 사용하기 위한 Element 라고 보면 되겠습니다. 스타일 쉬트는 HTML Element만으로 해결되지 않는 부분들, 예를 들어 FONT Element로 지정할 수 있는 글씨 size가 1 ~ 7 밖에 안 되지만 CSS를 사용하면 자유롭게 그 크기를 지정할 수 있져. 여기서 소개하는 Inline Style은 CSS를 HTML Tag 속에 직접 지정하는 가장 기본 적인 CSS 사용법입니다.

입력

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>
  <HEAD>
      <TITLE>Inline Style</TITLE>
  </HEAD>
  <BODY>
    <CENTER>
    <DIV style="width:200px; height:200px; color:gold; background-color:royalblue;">
        Inline Style 1
    </DIV>
    <SPAN style="width:200px; height:200px; color:royalblue; background-color:gold;">
        Inline Style 2
    </SPAN>
    </CENTER>
  </BODY>
</HTML>

출력결과

DTD (Document Type Definition : 문서 형식의 정의)

가만히 보면 DIV나 SPAN이나 아무런 차이가 없는데 그렇다면 아무거나 맘에 드는 걸로 쓰면 될까요? DIV가 한 글자 작으니까 그걸 많이 쓸거 같지 않습니까? 그렇습니다. 그걸 많이 쓰져. 한 글자 적어서가 아니라 용도가 따로 있습니다. 위의 예제와 저 밑에 있는 예제를 보면 결과가 다르게 나온 걸 알 수 있습니다. Span Element의 경우 안에 들어간 내용물 에만 background-color가 지정됩니다. 위쪽 예제의 첫 줄을 보면 Transitional(호환 모드)로 선언 되어 있고, 아래 쪽 예제는 Strict(엄격 모드)로 선언되어있습니다. 이와 같이 DTD를 어떻게 선언하느냐에 따라 표현되는 결과가 달라집니다. 그리고 원래 SPAN Element는 그런 용도로 만든 것도 아니구요. XML에서는 모두가 Strict Mode 입니다. 호환 모드에서 Style Property Value 뒤에 px 같은 단위를 생략해도 무방하지만 엄격 모드에서는 아예 안 나오져. 따옴표 생략도 불허합니다. XML 같은 언어를 대비해서 이런 구분들을 잘 알아둬야하고 습관도 그렇게 들여야 되겠습니다. 선언하지 않으면 호환 모드입니다. 그렇기 때문에 Strict Mode 였을 경우를 대비해서 SPAN Element에서는 width와 height를 지정하지 않고 쓰는게 좋습니다.

아래는 위에서 사용된 CSS Property 들에 대한 설명입니다.

CSS Properties
width	Container 의 가로 길이, 길이단위 참조
height	Container 의 세로 길이, 길이단위 참조
color	Container 속의 글씨색, 색상, 길이단위 참조
background-color	Container 의 배경색, 색상, 길이단위 참조
사용법	style="css property : value \| keyword " 와 같이 property와 value \| keyword 사이에 : (colon)으로 구분해 줍니다. 예제와 같이 여러개의 property 를 지정하려면 ; (semi-colon) 으로 구분해 가면서 지정해 주면 되고, 순서나 property 갯수 제한은 없습니다.

Strict DTD에서의 Rendering
입력

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">

<HTML>
  <HEAD>
      <TITLE>Inline Style</TITLE>
  </HEAD>
  <BODY>
    <CENTER>
    <DIV style="width:200px; height:200px; color:gold; background-color:royalblue;">
        Inline Style 1
    </DIV>
    <SPAN style="width:200px; height:200px; color:royalblue; background-color:gold;">
        Inline Style 2
    </SPAN>
    </CENTER>
  </BODY>
</HTML>

출력결과

Div 와 Span의 차이점 하나

Div는 줄바꿈을 하고 Span은 줄바꿈이 없습니다. 예를 들어 아래와 같이 DIV Element를 사용하면

입력

<HTML>
    <HEAD>
        <TITLE></TITLE>
    </HEAD>
    <BODY>
        <div style="width:150px;height:25px;background:red;"></div>
        <div style="width:150px;height:25px;background:green;"></div>
        <div style="width:150px;height:25px;background:blue;"></div>
    </BODY>
</HTML>

출력결과

이렇게 줄바꿈이 생기지만 아래와 같이 Span Element를 사용하면

입력

<HTML>
    <HEAD>
        <TITLE></TITLE>
    </HEAD>
    <BODY>
        <span style="width:150px;height:25px;background:red;"></span>
        <span style="width:150px;height:25px;background:green;"></span>
        <span style="width:150px;height:25px;background:blue;"></span>
    </BODY>
</HTML>

출력결과

이렇게 줄이 바뀌지 않습니다.

SPAN Element의 용도와 사용 예제

위에서 Div와 Span의 차이점을 보았지만 Span같은 경우는 줄을 바꾸지 않고 특정 단어나 문장의 글씨색이나 배경색등의 변형을 줄 때 주로 사용 합니다. 한 가지 예를 보도록 하겠습니다.

예제
문단 속에서 특정 문장에 배경색을 주려고 할 때.
입력

<HTML>
    <HEAD>
        <TITLE></TITLE>
    </HEAD>
    <BODY>
        <P>P Tag 속의 문장 
        <SPAN style="background-color: #ffd700;">Span Tag 속의 문장</SPAN> 
        P Tag 속의 문장</P>
    </BODY>
</HTML>

출력결과

P Tag 속의 문장 Span Tag 속의 문장 P Tag 속의 문장

이와 같이 줄바꿈을 하지않고 특정 부분에 다른 스타일을 적용할 때는 SPAN Element 를 사용합니다. 그러나 SPAN Element 를 사용하면서 줄을 바꾸고 싶으면 <BR> 을 사용하면 되겠습니다.

연관성 없는 Element 끼리의 Cascading

연관성이 없는 Element 가 어떤 건지를 알아 보기 위해서 먼저 연관성 있는 Element 를 알아 보겠습니다. 예를 들면

DL(Definition List), DT(Definition Term), DD(Definition Data)
OL(Ordered List), UL(Unordered List), LI(List Item)
TABLE, CAPTION, TH(Table Header), TR(Table Row), TD(Table Data)

이런 Element 들은 서로 연관성 있는 Group 들이며 항상 같이 쓰입니다. 그러나 DIV 와 SPAN 같은 경우에는 두 가지 Element 를 같이 써야 된다는 규칙이 없습니다. 이런 경우, 연관성이 없다고 합니다. 앞에서도 설명 했지만 Div, Span 모두 Block-Level Element 로서 면적을 가지고 있는데, 이 때 두 Element 의 Cascading 순서는 어떤 Box 가 어떤 Box 를 포함하고 있느냐에 의해서 결정 됩니다.

입력

<HTML>
    <HEAD>
        <TITLE></TITLE>
    </HEAD>
    <BODY>
        <DIV style="color:tomato;">0123456789
            <SPAN>0123456789
                <DIV>0123456789
                </DIV>
            </SPAN>
        </DIV>
    </BODY>
</HTML>

출력결과

0123456789 0123456789

0123456789

위와 같이 가장 상위(바깥에 있는)의 DIV 에 글씨색을 Tomato로 지정한 결과 하위의 SPAN, DIV 의 글자색이 상위의 글자색을 상속 받게 되어 같은 Tomato 가 되었습니다. Table 에서도 시험해 보았지만 하위에서 같은 속성을 사용하면서 다른 지정을 하면 아래와 같이

입력

<HTML>
    <HEAD>
        <TITLE></TITLE>
    </HEAD>
    <BODY>
        <DIV style="color:tomato;">0123456789
            <SPAN style="color:darkolivegreen;">0123456789
                <DIV>0123456789
                </DIV>
            </SPAN>
        </DIV>
    </BODY>
</HTML>

출력결과

0123456789 0123456789

0123456789

하위의 SPAN Element 에 지정된 글자색인 darkolivegreen 이 적용됨과 동시에 가장 하위의 DIV Element 에도 상위의 SPAN Element 에 지정된 darkolivegreen 이 글자색으로 지정됩니다.

관련 링크