 |
|
|  |
¸ñ·ÏÅÂ±× ul,li,dl,dd,dt ÀÇ »ç¿ë¿ëµµ |
|
|
 |
14³â Àü |
1. ¸ñ·Ï ¸¸µé±â ÅÂ±× : ¸ñ·ÏÀ» ¸¸µé ¶§ »ç¿ëÇϴ ű׷μ, <OL>, <UL>, <MENU>, <LI>ű׵îÀÌ ÀÖ´Ù.
ű×Á¾·ù ¹× ¼³¸í
<OL> </OL> ¹øÈ£°¡ ºÙ´Â ¸ñ·ÏÀ» ¸¸µç´Ù.
<UL> </UL> ¹øÈ£°¡ ºÙÁö ¾Ê´Â ¸ñ·ÏÀ» ¸¸µç´Ù
<MENU></MENU> ªÀº ¹®ÀÚ¿ÀÇ ¸ñ·ÏÀ» ¸¸µç´Ù
<DIR></DIR> ´Ü¾î¿Í °°Àº ¹®ÀÚ¿À» ¸¸µç´Ù
<LI> ¸ñ·Ïű×ÀÇ ±âÈ£¸¦ º¸¿©ÁØ´Ù.
<UL>,<DIR>,<MENU> ű׾ȿ¡ À§Ä¡ÇÏ¸é ¡Ü ³ªÅ¸³¿
<OL>ű׾ȿ¡ ÀÖÀ¸¸é ¹øÈ£¸¦ º¸¿©ÁÜ
<H3> ¸ñ·Ï ¸¸µé±â ÅÂ±× ¿¬½À1 </H3>
<UL>
<LI> ULű×(¹øÈ£°¡ ºÙÁö ¾Ê´Â ¸ñ·Ï)¸¦ »ç¿ëÇÏ¸é ¹øÈ£°¡ ºÙÁö ¾Ê´Â´Ù
<LI> LIű״ OLÅÂ±× ¾È¿¡ ÀÖÀ» °æ¿ì¿¡¸¸ ¼ýÀÚ¸¦ º¸¿©ÁÖ¸ç.
<LI> LIű״ ULÅÂ±× ¾È¿¡ ÀÖÀ» °æ¿ì¿¡´Â ¡Ü¸¦ º¸¿©ÁØ´Ù.
</UL>
2. ¹øÈ£ ÀÖ´Â ¸ñ·Ï ¸¸µé±â
<H3> ASP ȨÆäÀÌÁö ±¸Ãà¿ä°Ç </H3>
<OL>
<LI> ¿î¿µÃ¼Á¦ : À©µµ¿ì¼¹ö
<LI> À©µµ¿ì¿ë À¥ ¼¹ö : IIS
<LI> HTML + JAVA SCRIPT-x + ASP
</OL>
3. ªÀº ¸ñ·Ï ¸¸µé±â
<H3> ȨÆäÀÌÁö ±¸Ãà </H3>
<DIR>
<LI> À©µµ¿ì
<LI> IIS
<LI> ASP
</DIR>
<H3> °øºÎÇÏ´Â ¹æ¹ý </H3>
<MENU>
<LI> ÃÖ¼±À» ´Ù ÇÑ´Ù.
<LI> ÆÄÀÌÆÃ
</MENU>
Çؼ³ : DIRű׸¦ »ç¿ëÇÑ ÈÄ LIű׸¦ ¾²¸é ULű׸¦ ½è´ø °Í ó·³ ¡Ü¹®ÀÚ°¡ ¹®ÀåÀÇ ¾ÕºÎºÐ¿¡ À§Ä¡ÇÒ °ÍÀÌ´Ù.
4. °èÃþÀû ¸ñ·Ï º¸±â :
¸ñ·ÏÀ» °èÃþÀûÀ¸·Î º¼ ¶§ »ç¿ë(»çÀü¿¡ ÀÀ¿ë)
ű×Á¾·ù ¹× ¼³¸í
<DD> Á¤ÀÇµÈ ³»¿ëÀ» ¼³¸í
<DL></DL> ¸ñ·ÏÀ» °èÃþÀû ±¸Á¶·Î º¸°íÀÚ ÇÒ ¶§ »ç¿ë
<DT> ´Ü¾î¿¡ ´ëÇÑ Á¤ÀÇÇÒ ¶§ »ç¿ë
<dl>
<dt>ÀÔÃá</dt>
<dd>À̽ʻçÀý±âÀÇ Çϳª. ´ëÇÑ(ÓÞùÎ)°ú ¿ì¼ö(éëâ©) »çÀÌ¿¡ µé¸ç, À̶§ºÎÅÍ º½ÀÌ ½ÃÀ۵ȴٰí ÇÑ´Ù.</dd>
<dt>ÀÔÃá´ë±æ</dt>
<dd>ÀÔÃáÀ» ¸ÂÀÌÇÏ¿© ±æ¿îÀ» ±â¿øÇÏ¸ç º®À̳ª ¹®Â¦ µûÀ§¿¡ ½á ºÙÀÌ´Â ±Û±Í.</dd>
</dl>
dt {
font-weight: bold;
}
dd {
margin-left: 15px;
padding-left: 15px;
color: #999;
background: url(dd_arow.gif) no-repeat 0 2px;
}
¿ë¾î¿Í ¼³¸íÀ» ¸¶Å©¾÷Çϴ ű×ÀÎ Á¤ÀǸ®½ºÆ®
dl (definition list)
dt (definition term, ¿ë¾î)
dd (definition descript-xion, ¼³¸í) : ¼³¸íºÎºÐÀ» ¾à°£ µé¿©¾º±âÇÔ
±âº»ÀûÀ¸·Î, ¿©¹é°ú Æеù°ªÀº ¼³Á¤ÇØ ÁÖ¾î¾ß IE7°ú FireFox2»çÀÌÀÇ ·¹À̾ƿô Â÷À̸¦ ¾ø¾Ù ¼ö ÀÖ½À´Ï´Ù.
ul{ margin: 0; padding: 0;}/* liű״ ÇØ´ç ³»¿ë »ó¼ÓµÊ */
ul,li { margin:0px; padding:0px; list-style:none; }
<li> ¹× display¼Ó¼º°ªÀÌ [list-item]ÀÎ °æ¿ì ´ÙÀ½°ú °°Àº ½ºÅ¸ÀÏÀ» Àû¿ëÇÒ ¼ö ÀÖ½À´Ï´Ù.
* <ol> <ul> ¿¡ ´ÙÀ½ÀÇ ¼Ó¼ºÀ» ÁöÁ¤Çϸé, ÇØ´ç ű×ÀÇ ¼ºê <li>¿ä¼Ò¿¡´Â ¸ðµÎ »ó¼ÓµË´Ï´Ù.
[ ¸®½ºÆ® ¼Ó¼ºÀÇ ÀÏ°ý ÁöÁ¤ ]
list-style: type image position;
¸®½ºÆ®ÀÇ ±Û¸Ó¸®Ç¥ÀÇ Á¾·ù¸¦ ÁöÁ¤(type), ±Û¸Ó¸®Ç¥ÀÇ À̹ÌÁö¸¦ ÁöÁ¤(image) ±Û¸Ó¸®Ç¥ÀÇ Ç¥½ÃÀ§Ä¡ ÁöÁ¤(position)À» ÁöÁ¤ÇÕ´Ï´Ù. ¼Ó¼º°ªÀÎ type, image, positionÀº ¾Æ·¡¿¡¼ ¼³¸íÇÒ ¼Ó¼º°ªÀ» µû¸¨´Ï´Ù.
[ ±Û¸Ó¸®Ç¥ÀÇ Á¾·ù ÁöÁ¤ ]
list-style-type: disc(ÃʱⰪ);
±Û¸Ó¸®Ç¥ÀÇ À̹ÌÁö°¡ ÀÖ´Â °æ¿ì¿¡´Â, À̹ÌÁö°¡ ¿ì¼±ÀûÀ¸·Î Ç¥½ÃµË´Ï´Ù. À̹ÌÁö°¡ ¾ø°Å³ª(none) ÁöÁ¤ÇÑ À̹ÌÁö¸¦ Ç¥½ÃÇÒ ¼ö ¾ø´Â °æ¿ì, ÀÌ ¼³Á¤°ªÀÌ À¯È¿ÇÏ°Ô µË´Ï´Ù. ±¸¹öÀüÀÇ IE¿¡¼´Â ÀνĵÇÁö ¾ÊÀ¸³ª, IE7¿¡¼´Â ÀνÄÀ̵˴ϴÙ.
´ÙÀ½°ú °°Àº ¼Ó¼º°ªÀ» ÀÌ¿ëÇÒ ¼ö ÀÖ½À´Ï´Ù.
none : ±Û¸Ó¸®Ç¥¸¦ Ç¥½ÃÇÏÁö ¾Ê½À´Ï´Ù.
disc : °ËÀº»ö ¿ø(±âº» °ª)
circls : ¼±À¸·Î ±×·ÁÁø ¿ø
square : ¼±À¸·Î ±×·ÁÁø »ç°¢Çü
lower-roman : ·Î¸¶¼ýÀÚ ¼Ò¹®ÀÚ
upper-roman : ·Î¸¶¼ýÀÚ ´ë¹®ÀÚ
lower-greek : ±×¸®½º ¹®ÀÚ ¼Ò¹®ÀÚ
decimal : ÀÏ¹Ý ¼ýÀÚ
decimal-leading-zero : ù ÀÚ¸®¿¡ 0À» ºÙÀÎ ¼ýÀÚ
lower-latin, lower-alpha : ¾ËÆĺª ¼Ò¹®ÀÚ
upper-latin, upper-alpha : ¾ËÆĺª ´ë¹®ÀÚ
hebrew : È÷ºê¸® ¼ýÀÚ
armenian : ¾Æ¸£¸Þ´Ï¾Æ ¼ýÀÚ
georgian : ±×·ÎÁö¾Æ ¼ýÀÚ
<ul style="list-style-type: lower-roman;">
* index
* content
* postscripe
[ ±Û¸Ó¸®Ç¥ À̹ÌÁö ÁöÁ¤ ]
list-style-image: url();
µðÆúÆ® °ªÀº noneÀÔ´Ï´Ù. ¾Æ·¡¿Í °°ÀÌ »ç¿ëÇÒ ¼ö ÀÖ½À´Ï´Ù.
<ul style="list-style-image: url(ico_note.gif);"> |
|
̵̧ : 475 |
̵̧
¸ñ·Ï
|
|
|  |
|