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  [Ç¥ º¸´Â ¹æ¹ý]
ElementStart tagEnd tagEmptyDeprecatedDTD
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 ÀÌ ±ÛÀÚ»öÀ¸·Î ÁöÁ¤µË´Ï´Ù.

°ü·Ã ¸µÅ©

Block-level elementÀÎ div¿Í Inline-level elementÀÎ span¿¡ ´ëÇØ ÀÚ¼¼È÷ ¾Ë°í ½ÍÀ¸¸é ¾Æ·¡ÀÇ ¸µÅ©¸¦ ÂüÁ¶Çϼ¼¿ä.





ÀÌ ¹®¼­ÀÇ ÀúÀÛ±ÇÀº www.cadvance.org ¿¡ ÀÖ½À´Ï´Ù.

Top
Back
New
°Ë»ö