Part 01 À¥ Á¢±Ù¼º°ú À¥ Ç¥ÁØ
Section 01 À¥ Á¢±Ù¼º(web accessibility)
À¥ Á¢±Ù¼ºÀÇ °³¿ä
À¥ Á¢±Ù¼º Áؼö ½Ã ±â´ë È¿°ú
À¥ ÄÜÅÙÃ÷ Á¢±Ù¼º Áöħ(WCAG)
ÀÎÁö¼º(Perceivable)
¿î¿ë¼º(Operable)
ÀÌÇؼº(Understandable)
³»±¸¼º(Robust)
Àå¾ÖÀÎ Â÷º° ±ÝÁö ¹× ±Ç¸® ±¸Á¦ µî¿¡ °üÇÑ ¹ý·üÀÇ ÀÌÇØ
Section 02 À¥ Ç¥ÁØ(web standards)
À¥ Ç¥ÁØÀ̶õ?
À¥ Ç¥ÁØ °ü·Ã ±â¼úÀÇ ¼Ò°³
À¥ Ç¥ÁØÀÇ ÀåÁ¡
À¥ ºê¶ó¿ìÀú¿Í À¥ Ç¥ÁØ
Part 02 °ß°íÇÑ À¥À» À§ÇÑ ±¸Á¶ ¼³°è(XHTML)
Section 01 ½ÃÀÛÇϱâ Àü¿¡
ÀúÀÛµµ±¸ ¼³Ä¡ ¹× ȯ°æ¼³Á¤
ÆÄÀ̾îÆø½º ¹× ºÎ°¡ ±â´É ¼³Ä¡
Section 02 ˴(World Wide Web)
À¥(WWW) ¼ºñ½º
À¥ ÇÁ·Î±×·¡¹ÖÀÇ ÀÌÇØ
½Ã¸Çƽ À¥
Section 03 ±¸Á¶¸¦ À§ÇÑ XHTML
¸¶Å©¾÷ ¾ð¾îÀÇ ºÐ·ù
XHTML ¼½Ä
XHTML ±¸¼º ¿ä¼Ò
XHTML ¹®¼ÀÇ ±âº» ±¸Á¶
ºí·Ï ¿ä¼Ò¿Í ÀζóÀÎ ¿ä¼Ò
¹®¼Çü Á¤ÀÇ ¹× ¼±¾ð, ³×ÀÓ ½ºÆäÀ̽º, ÈÞ¸Õ ·©±ÍÁö
¹®¼Çü Á¤ÀÇ ¹× ¼±¾ð(DTD)
³×ÀÓ ½ºÆäÀ̽º
ÈÞ¸Õ ·©±ÍÁö
Section 04 XHTML ¿ä¼Ò
¹®¼ Á¤º¸ ¹× ¹®¼ Á¦¸ñ
¹®¼ Á¤º¸¿Í ¹®ÀÚ ÄÚµå ¼¼Æ®(meta)
¹®¼ Á¦¸ñ(title)
¹®´Ü °ü·Ã ¿ä¼Ò
Á¦¸ñ(h1~h6)
´Ü¶ô(p)
ÁٹٲÞ(br)
ÁÖ¼Ò(address)
±¸ºÐ¼±(hr)
¸µÅ©¿Í À̹ÌÁö
ÇÏÀÌÆÛ¸µÅ©(a)
À̹ÌÁö(img)
À̹ÌÁö ¸Ê(map, area)
¸ñ·Ï °ü·Ã ¿ä¼Ò
ºñ¼ø¼Çü ¸ñ·Ï(ul)
¼ø¼Çü ¸ñ·Ï(ol)
Á¤ÀÇÇü ¸ñ·Ï(dl)
ÅؽºÆ® °ü·Ã ¿ä¼Ò
°Á¶(strong & em)
Àο빮(blockquote & q)
Ãà¾à¾î ¹× µÎ¹®ÀÚ¾î(abbr & acronym)
Ãß°¡±Û ¹× »èÁ¦±Û(ins & del)
÷ÀÚ(sup & sub)
Å×ÀÌºí °ü·Ã ¿ä¼Ò
Å×ÀÌºí ¿ä¼Ò(table, tr, th, td)
¼¿ º´ÇÕ(colspan ¼Ó¼º, rowspan ¼Ó¼º)
Å×À̺í Á¦¸ñ ¹× ¿ä¾à¹®(caption & summary)
¿ ±×·ìÈ ¿ä¼Ò(colgroup, col)
Çà ±×·ìÈ ¿ä¼Ò(thead, tfoot, tbody)
Á¦¸ñ ¼¿°ú ³»¿ë ¼¿ÀÇ ¿¬°ü¼º(scope, id, headers ¼Ó¼º)
Æû °ü·Ã ¿ä¼Ò
ÆûÀ̶õ?
Æû ¿ä¼Ò(form)
Æû ¿ä¼Ò ±×·ìÈ ¹× Á¦¸ñ(fieldset, legend)
·¹À̺í(label)
´Ù¾çÇÑ Æû ÄÁÆ®·Ñ(input)
¸ñ·Ï »óÀÚ(select, option, optgroup)
¿©·¯ ÁÙ ±Û»óÀÚ(textarea)
¹öÆ° ¿ä¼Ò(button)
ÀζóÀÎ ÇÁ·¹ÀÓ°ú °³Ã¼ »ðÀÔ
ÀζóÀÎ ÇÁ·¹ÀÓ(iframe)
°³Ã¼ »ðÀÔ(object)
½ºÅ¸ÀÏ°ú ½ºÅ©¸³Æ®
³»ºÎ ½ºÅ¸ÀÏ Àû¿ë(style)
½ºÅ©¸³Æ® »ðÀÔ(script)
±×·ìÈ ¿ä¼Ò
ºí·Ï ±×·ìÈ ¿ä¼Ò(div)
ÀζóÀÎ ±×·ìÈ ¿ä¼Ò(span)
Part 03 ÀÚÀ¯·Ó°í âÀÇÀûÀÎ µðÀÚÀÎ ±â¹ý(CSS)
Section 01 CSS µðÀÚÀÎ
CSS¶õ?
Acid Test
Section 02 CSS ¼½Ä
Rule set
CSS Àû¿ëÇϱâ
External Style Sheet(¿ÜºÎ ½ºÅ¸ÀϽÃÆ®)
Internal Style Sheet(³»ºÎ ½ºÅ¸ÀϽÃÆ®)
Inline Style Sheet(ÀζóÀÎ ½ºÅ¸ÀϽÃÆ®)
Section 03 CSS ¼±ÅÃÀÚ
Type ¼±ÅÃÀÚ
Àüü ¼±ÅÃÀÚ
class ¼±ÅÃÀÚ¿Í id ¼±ÅÃÀÚ
¼Ó¼º(attribute) ¼±ÅÃÀÚ
°¡»ó ¿ä¼Ò¿Í °¡»ó Ŭ·¡½º
first-line, first-letter °¡»ó ¿ä¼Ò
before, after °¡»ó ¿ä¼Ò
first-child Ŭ·¡½º
¸µÅ© °¡»ó Ŭ·¡½º
¼±ÅÃÀÚ Á¶ÇÕ
ÇÏÀ§ ¼±ÅÃÀÚ(descendant selector)
ÀÚ½Ä ¼±ÅÃÀÚ(child selector)
ÀÎÁ¢ ÇüÁ¦ ¼±ÅÃÀÚ(adjacent sibling selector)
¼±ÅÃÀÚ ±×·ìÈ
Section 04 CSS °³³ä ¹× ´ÜÀ§
»ó¼Ó(inherit)
°ãħ(cascading)°ú °³º°¼º(specificity)
ÁÖ¼® ¹× ´ÜÀ§¿Í »ö»ó
ÁÖ¼®(comment)
´ÜÀ§(units)
»ö»ó(color & background)
Section 05 CSS ¼Ó¼º(property)
¹Ú½º ¸ðµ¨(Box Model)
¹Ú½º ³Êºñ(width)¿Í ³ôÀÌ(height)
Å׵θ®(border)
¸¶Áø(margin)
Æеù(padding)
Ç÷ÎÆ®(float)
float
clear
Æ÷Áö¼Ç(position)
relative position
absolute position
fixed position
ŸÀÌÆ÷±×·¡ÇÇ
font-family
font-size
line-height
font-weight
font-style
font-variant
font
text-indent
text-align
vertical-align
text-decoration
text-transform
letter-spacing
white-space
»ö»ó°ú ¹è°æ
color
background-color
background-image
background-repeat
background-position
background-attachment
background
¸ñ·Ï
list-style-type
list-style-position
list-style-image
±âŸ ¼Ó¼º
border-collapse
overflow
display
visibility
z-index
CSS hack
Part 04 ½ÇÀü ¿¹Á¦
Section 01 Á¦ÀÛÇϱâ Àü¿¡ ¾Ë¾Æ¾ß ÇÒ °Íµé
´Ù¾çÇÑ È¯°æÀÇ ÀÌÇØ
ÇÁ·ÎÁ§Æ® Á¦ÀÛ ´Ü°è
ÀúÀÛµµ±¸
Á¦ÀÛ °¡À̵å
WSG(Web Standardization Guide)
ÄÜÅÙÃ÷ ±×·ìÈ
ÄÜÅÙÃ÷ÀÇ ³í¸®ÀûÀÎ ±¸¼º
Á¦¸ñ ·¹º§ Á¤Çϱâ
À̹ÌÁö ÄÜÅÙÃ÷
Àǹ̿¡ ¸Â´Â ¸¶Å©¾÷
Section 02 ¸ÞÀÎ ¹× ÅÛÇø´ ¸¶Å©¾÷
·¹À̾ƿô ¼³°è
¸ÞÀÎ ÄÜÅÙÃ÷ ¸¶Å©¾÷
Çì´õ ¿µ¿ª
ºñÁÖ¾ó ¿µ¿ª
·Î±×ÀÎ ¿µ¿ª
¹è³Ê ¿µ¿ª
¿ë¾î ¼³¸í ¿µ¿ª
ÀÚ·á°Ë»ö ¿µ¿ª
°øÁö»çÇ× ¹× ÀÚ·á½Ç ¿µ¿ª
»õ¼Ò½Ä ¿µ¿ª
½Å±Ô À̺¥Æ® ¿µ¿ª
°ü·Ã »çÀÌÆ® ¿µ¿ª
Àα⠻çÀÌÆ® ¿µ¿ª
½½·Î°Ç ¿µ¿ª
ǪÅÍ ¿µ¿ª
¸ÞÀÎ ¸¶Å©¾÷ ¿Ï¼º
¼ºê ÅÛÇø´ ¸¶Å©¾÷
»çÀÌµå ¿µ¿ª
ÄÜÅÙÃ÷ ¿µ¿ª
Äü ¸Þ´º ¿µ¿ª
¼ºê ÅÛÇø´ ¿Ï¼º
HTML À¯È¿¼º °Ë»ç
Section 03 ¸ÞÀÎ ¹× ¼ºê ÅÛÇø´ µðÀÚÀÎ
½ºÅ¸ÀϽÃÆ®ÀÇ °èȹ ¹× ±¸¼º
½ºÅ¸ÀÏ ÃʱâÈ
·¹À̾ƿô ½ºÅ¸ÀÏ
°ø¿ë ½ºÅ¸ÀÏ
Çì´õ ¿µ¿ª
»çÀÌµå ¿µ¿ª
ÄÜÅÙÃ÷ ¿µ¿ª
Äü ¸Þ´º ¿µ¿ª
½½·Î°Ç ¿µ¿ª
ǪÅÍ ¿µ¿ª
CSS À¯È¿¼º °Ë»ç
Å©·Î½º ºê¶ó¿ì¡ Á¡°Ë
¸ÞÀÎ ·¹À̾ƿô µðÀÚÀÎ
¸ÞÀÎ ÄÜÅÙÃ÷ µðÀÚÀÎ
·Î±×ÀÎ ¿µ¿ª
¹è³Ê ¿µ¿ª
¿ë¾î ¼³¸í ¿µ¿ª
ÀÚ·á°Ë»ö ¿µ¿ª
°øÁö»çÇ× ¹× ÀÚ·á½Ç ¿µ¿ª
»õ¼Ò½Ä ¿µ¿ª
½Å±Ô À̺¥Æ® ¿µ¿ª
°ü·Ã »çÀÌÆ® ¿µ¿ª
Àα⠻çÀÌÆ® ¿µ¿ª
CSS À¯È¿¼º °Ë»ç
Å©·Î½º ºê¶ó¿ì¡ Á¡°Ë
Section 04 ¼ºê ÄÜÅÙÃ÷ µðÀÚÀÎ
ÅؽºÆ® ÄÜÅÙÃ÷(XHTHMLÀ̶õ?)
±¸Á¶ ¼³°è
¸¶Å©¾÷
CSS µðÀÚÀÎ
À̹ÌÁö °Ô½Ã¹° ¸ñ·Ï(À̹ÌÁö °¶·¯¸®)
±¸Á¶ ¼³°è
¸¶Å©¾÷
CSS µðÀÚÀÎ
°Ô½ÃÆÇ ¸ñ·Ï(¹¯°í ´äÇϱâ)
±¸Á¶ ¼³°è
¸¶Å©¾÷
CSS µðÀÚÀÎ
ȸ¿ø°¡ÀÔ ¾ç½Ä
±¸Á¶ ¼³°è
¸¶Å©¾÷
CSS µðÀÚÀÎ
Å©·Î½º ºê¶ó¿ì¡ Á¡°Ë
ã¾Æº¸±â
XHTML,
CSS