¼öÇè¼ | Âü°í¼ | Àڰݼ | ÀϹݵµ¼ | + ½°ÅÍ |
Ã¥¹ä Ä®ÅðÁ· ±è´ë¸®´Â ¾Ë°í ³ª¸¸ ¸ð¸£´Â HTML5+CSS3 ±èű¤
- »óÇ°Á¤º¸
- »óÇ°Æò°¡
- »óÇ°¹®ÀÇ
- ¹è¼Û/¹ÝÇ°/ȯºÒ
Ä®ÅðÁ· ±è´ë¸®´Â ¾Ë°í ³ª¸¸ ¸ð¸£´Â HTML5+CSS3
Á¤°¡ : 21,000¿øÆǸŰ¡ 18,900¿ø (10% ÇÒÀÎ)
Ç°¸ñÁ¤º¸
¹ßÇàÀÏ | 2023³â 04¿ù 01ÀÏ |
---|---|
Âʼö, ¹«°Ô, Å©±â | 408ÂÊ | 148*210*30mm |
ISBN13 | 9791190641982 |
ISBN10 | 1190641984 |
Ã¥¼Ò°³
¾î·Æ°í Áö·çÇÑ ¼³¸íÀº ±×¸¸!
»ç¿ëµµ°¡ ³ôÀº HTML ÅÂ±×¿Í CSS ¼Ó¼ºÀ» ª°í ½±°Ô ¼³¸íÇÑ Ã¥!
À¥ µðÀÚÀ̳ʷΠ½Ç¹«¸¦ ÁøÇàÇÏ´ø ÀúÀÚ´Â ÆÛºí¸®½Ì ¾÷¹«¸¦ ÁøÇàÇÏ°Ô µÇ¸é¼ ºÎµúÈù ±Ã±ÝÁõ°ú ½ÃÇàÂø¿À¸¦ ÇØ°áÇϱâ À§ÇØ ¸¹Àº Ã¥°ú ¾¾¸§Çß´Ù. ÇÏÁö¸¸ ¾î·Á¿î ¿ë¾î¿Í ³»¿ëÀ¸·Î °¡µæÇÑ »çÀü °°Àº Ã¥Àº º¸±â¿¡µµ ºÒÆíÇÏ°í °úÇÑ Á¤º¸·Î ÀÎÇØ Áö¸é ³¶ºñÀÎ °æ¿ì°¡ ¸¹¾ÒÀ¸¸ç ¿©±âÀú±â ¼Ä¡ÇØ Ã£¾Æ³½ ÀÚ·áµµ Çϳª¸¦ ÇØ°áÇÏ¸é ¶Ç ´Ù¸¥ Áú¹®ÀÌ »ý°Ü ÁøÀϺ¸ÇÏÁö ¸øÇÏ´Â »óȲÀ̾ú´Ù. 20¿© ³â°£ ½Ç¹«¿¡ ÀÖÀ¸¸é¼ ¸¹Àº ¾î·Á¿òÀ» ½º½º·Î ÇØ°áÇØ¿Â ÀúÀÚ´Â È°¿ëµµ ³ôÀº Ã¥ÀÇ Çʿ伺À» Àý°¨ÇØ °æÇè°ú ¿¬·ûÀ» ¸ð¾Æ ÀÌ Ã¥À» ÁýÇÊÇß´Ù.
ÀÌ Ã¥Àº °³³ä°ú ¿ëµµ¸¦ ¼³¸íÇÏ°í ¹Ù·Î ÀÌ¾î ½Ç½ÀÀ» µû¶ó ÇØ ±â´ÉÀ» ÀÍÈ÷°Ô Çß°í, »ö°ú ŸÀÌÆ÷±×·¡ÇÇ, ·¹À̾ƿô µî µðÀÚÀο¡ ÇÊ¿äÇÑ ³»¿ëÀ» ´Ù·ç¾î °¨°¢ÀûÀÎ µðÀÚÀεµ °¡´ÉÇÏ°Ô Çß´Ù. ÄÚµù ÀÛ¾÷ÀÇ °¡µ¶¼ºÀ» ³ôÀÌ´Â ¼³Á¤À» ÇÏ°í ¼ö½Ã·Î Å©·Ò ºê¶ó¿ìÀú·Î ¹Ì¸® º¸±â ÇÏ´Ï ÀÛ¾÷´É·üµµ ³ô´Ù. ±â´ÉÀ» ¸ðµÎ ÀÍÈ÷°í ³ª¸é ½ÇÁ¦·Î À¥»çÀÌÆ®¸¦ ¸¸µé¸é¼ ½Ç·ÂÀ» ¹ßÈÖÇغ¸ÀÚ! õõÈ÷ µû¶ó ÇÏ¸é ´©±¸µç ¿øÇÏ´Â À¥ »çÀÌÆ®¸¦ ¸¸µé ¼ö ÀÖÀ» °ÍÀÌ´Ù.
»ç¿ëµµ°¡ ³ôÀº HTML ÅÂ±×¿Í CSS ¼Ó¼ºÀ» ª°í ½±°Ô ¼³¸íÇÑ Ã¥!
À¥ µðÀÚÀ̳ʷΠ½Ç¹«¸¦ ÁøÇàÇÏ´ø ÀúÀÚ´Â ÆÛºí¸®½Ì ¾÷¹«¸¦ ÁøÇàÇÏ°Ô µÇ¸é¼ ºÎµúÈù ±Ã±ÝÁõ°ú ½ÃÇàÂø¿À¸¦ ÇØ°áÇϱâ À§ÇØ ¸¹Àº Ã¥°ú ¾¾¸§Çß´Ù. ÇÏÁö¸¸ ¾î·Á¿î ¿ë¾î¿Í ³»¿ëÀ¸·Î °¡µæÇÑ »çÀü °°Àº Ã¥Àº º¸±â¿¡µµ ºÒÆíÇÏ°í °úÇÑ Á¤º¸·Î ÀÎÇØ Áö¸é ³¶ºñÀÎ °æ¿ì°¡ ¸¹¾ÒÀ¸¸ç ¿©±âÀú±â ¼Ä¡ÇØ Ã£¾Æ³½ ÀÚ·áµµ Çϳª¸¦ ÇØ°áÇÏ¸é ¶Ç ´Ù¸¥ Áú¹®ÀÌ »ý°Ü ÁøÀϺ¸ÇÏÁö ¸øÇÏ´Â »óȲÀ̾ú´Ù. 20¿© ³â°£ ½Ç¹«¿¡ ÀÖÀ¸¸é¼ ¸¹Àº ¾î·Á¿òÀ» ½º½º·Î ÇØ°áÇØ¿Â ÀúÀÚ´Â È°¿ëµµ ³ôÀº Ã¥ÀÇ Çʿ伺À» Àý°¨ÇØ °æÇè°ú ¿¬·ûÀ» ¸ð¾Æ ÀÌ Ã¥À» ÁýÇÊÇß´Ù.
ÀÌ Ã¥Àº °³³ä°ú ¿ëµµ¸¦ ¼³¸íÇÏ°í ¹Ù·Î ÀÌ¾î ½Ç½ÀÀ» µû¶ó ÇØ ±â´ÉÀ» ÀÍÈ÷°Ô Çß°í, »ö°ú ŸÀÌÆ÷±×·¡ÇÇ, ·¹À̾ƿô µî µðÀÚÀο¡ ÇÊ¿äÇÑ ³»¿ëÀ» ´Ù·ç¾î °¨°¢ÀûÀÎ µðÀÚÀεµ °¡´ÉÇÏ°Ô Çß´Ù. ÄÚµù ÀÛ¾÷ÀÇ °¡µ¶¼ºÀ» ³ôÀÌ´Â ¼³Á¤À» ÇÏ°í ¼ö½Ã·Î Å©·Ò ºê¶ó¿ìÀú·Î ¹Ì¸® º¸±â ÇÏ´Ï ÀÛ¾÷´É·üµµ ³ô´Ù. ±â´ÉÀ» ¸ðµÎ ÀÍÈ÷°í ³ª¸é ½ÇÁ¦·Î À¥»çÀÌÆ®¸¦ ¸¸µé¸é¼ ½Ç·ÂÀ» ¹ßÈÖÇغ¸ÀÚ! õõÈ÷ µû¶ó ÇÏ¸é ´©±¸µç ¿øÇÏ´Â À¥ »çÀÌÆ®¸¦ ¸¸µé ¼ö ÀÖÀ» °ÍÀÌ´Ù.
- Ã¥ÀÇ ÀϺΠ³»¿ëÀ» ¹Ì¸® Àо½Ç ¼ö ÀÖ½À´Ï´Ù. ¹Ì¸®º¸±â
¸ñÂ÷
CHAPTER 01 HTML°ú CSS ÁغñÇϱâ
01. HTML, CSS °³³ä ¾Ë±â
| 01 | À¥ºê¶ó¿ìÀú(Web browser)
02. ¹» ÁغñÇÏÁÒ?
¤ýÀ¥ºê¶ó¿ìÀúÀÇ Á¾·ù¿Í Á¡À¯À²
¤ýÅ©·Ò(Chrome) ºê¶ó¿ìÀú ¼³Ä¡Çϱâ
¤ý°³¹ßÀÚ µµ±¸
½Ç½À _ À¥»çÀÌÆ® [+´õº¸±â]¿¡¼ HTML ¿ä¼Ò¿Í CSS ¼Ó¼º°ú ¼Ó¼º°ª ¾Ë¾Æº¸±â
½Ç½À _ [°³¹ßÀÚ µµ±¸]·Î »ö°ú ³»¿ë ¼öÁ¤Çغ¸±â
| 01 | ÆíÁý±â(Editors)
½Ç½À _ ºñÁÖ¾ó ½ºÆ©µð¿À ÄÚµå ÆÄÀÏ ´Ù¿î·ÎµåÇϱâ
½Ç½À _ ºñÁÖ¾ó ½ºÆ©µð¿À ÄÚµå ¼³Ä¡Çϱâ
¤ýºñÁÖ¾ó ½ºÆ©µð¿À ÄÚµåÀÇ ÀÎÅÍÆäÀ̽º ¾Ë¾Æº¸±â
¤ýÆí¸®ÇÑ È®Àå ±â´É »ç¿ëÇϱâ
½Ç½À _ ¿µ¹® ¸Þ´º¸¦ Çѱ۷Π±³Ã¼Çϱâ
½Ç½À _ HTML ÆÄÀÏÀ» ½Ç½Ã°£ ¹Ì¸® º¸±â
¤ýÄÚµù ¼Óµµ¸¦ ³ôÀÌ´Â ±â´É ¼³Á¤Çϱâ
CHAPTER 02 HTML ÆäÀÌÁö ¸¸µé±â
01. ű×(tag)°¡ ¹¹ÁÒ?
02. ¿ä¼Ò(elements)°¡ ¹¹ÁÒ?
03. HTML ¹®¼ÀÇ ±âº» ±¸¼º
½Ç½À _ [ÀÚµ¿ ¿Ï¼º] ±â´ÉÀ» ÀÌ¿ëÇØ HTML ±¸Á¶ ¾Ë¾Æº¸±â
04. ¼Ó¼º(Attributes)
| 01 | href ¼Ó¼º
| 02 | target ¼Ó¼º
| 03 | src ¼Ó¼º
| 04 | alt ¼Ó¼º
05. ¿ä¼Ò(elements)ÀÇ Æ¯Â¡
| 01 | Block level ¿ä¼Ò(elements)
| 02 | Inline ¿ä¼Ò(elements)
06. ÅؽºÆ®(Text) ¿ä¼Ò(elements)
| 01 | ¡´h1¡µ~¡´h6¡µ Á¦¸ñ ű×(tags)
| 02 | ¹®´Ü ¡´p¡µ ű×
| 03 | ÁÙ ¹Ù²Þ ¡´br¡µ ű×
| 04 | Ư¼öÄÚµå ¹®ÀÚ(entity)
| 05 | ¹®ÀÚ °Á¶ ű×
| 06 | ÁÖ¼®(comment)
½Ç½À _ HTML ¹®¼ ¸¸µé±â
07. À̹ÌÁö(Images) ÅÂ±×¿Í ¼Ó¼º
| 01 | ¡´img, src, alt¡µ¸¦ ÀÌ¿ëÇÏ¿© À̹ÌÁö »ðÀÔÇϱâ
| 02 | À̹ÌÁö ÆÄÀÏ °æ·Î(file paths)
| 03 | HTML¿¡¼ »ç¿ëÇÒ ¼ö ÀÖ´Â À̹ÌÁö ÆÄÀÏ Çü½Ä
½Ç½À _ À̹ÌÁö »ðÀÔÇϱâ
08. ÇÏÀÌÆÛ¸µÅ©(Hyperlinks)
| 01 | À̹ÌÁö¿¡ ¸µÅ© Àû¿ëÇϱâ
| 02 | ÅؽºÆ®¿¡ ¸µÅ© Àû¿ëÇϱâ
| 03 | À̸ÞÀÏ¿¡ ¸µÅ© Àû¿ëÇϱâ
| 04 | ÁÖ¼Ò(URL) ÀÔ·ÂÇϱâ
½Ç½À _ À̹ÌÁö¸¦ Ŭ¸¯ÇØ »õ·Î¿î ÅÇ(ÆäÀÌÁö)À¸·Î ¿±â
½Ç½À _ ÅؽºÆ®¸¦ Ŭ¸¯ÇØ »õ·Î¿î ÅÇ(ÆäÀÌÁö)À¸·Î ¿±â
09. ¸ñ·Ï(List) ű×
| 01 | ¼ø¼ ¾ø´Â ¸ñ·Ï¡´ul li¡µ
| 02 | ¼ø¼ ÀÖ´Â ¸ñ·Ï¡´ol li¡µ
½Ç½À _ ¼ø¼ ¾ø´Â ¸ñ·Ï¿¡ ¼ø¼ Àû¿ëÇϱâ
10. Ç¥(Table) ű×
½Ç½À _ 3¿ 3Çà Ç¥ ¸¸µé±â
11. Æû(Form) ű×
| 01 | ÀÎDz(input) ű×
| 02 | ·¹À̺í(label) ű×
½Ç½À _ ¾ÆÀÌÄÜÀÌ ÀÖ´Â °Ë»ö Æû ¸¸µé±â
12. ¹öÆ°(button) ű×
13. ¹Ìµð¾î(Media) ű×
| 01 | ºñµð¿À(video) ű×
| 02 | ¿Àµð¿À(audio) ű×
| 03 | À¯Æ©ºê(youtube) ¿¬°á
½Ç½À _ À¯Æ©ºê ¿µ»óÀ» HTML ÆäÀÌÁö¿¡ »ðÀÔÇϱâ
14. Àǹ̷ÐÀûÀÎ ¿ä¼Ò·Î ±¸¼ºµÈ HTML5 ÆäÀÌÁö ±¸Á¶
| 01 | Çì´õ(header) ű×
| 02 | ³»ºñ°ÔÀ̼Ç(nav) ű×
| 03 | ¼½¼Ç(section) ű×
| 04 | ¾ÆƼŬ(article) ű×
| 05 | ¾î»çÀ̵å(aside) ű×
| 06 | ǪÅÍ(footer) ű×
½Ç½À _ Àǹ̷ÐÀû HTML ÆäÀÌÁö ¸¸µé±â
CHAPTER 03 CSS·Î HTML ÆäÀÌÁö ½ºÅ¸ÀϸµÇϱâ
01. CSS ÀԷ¹ý(Syntax)
02. ¼±ÅÃÀÚ(Selectors)ÀÇ Á¾·ù
| 01 | ¿ä¼Ò(element)
| 02 | ¾ÆÀ̵ð(#)
| 02 | Ŭ·¡½º(.)
| 03 | ¸ðµç(*)
| 04 | ±×·ì(,)
| 05 | ÀÚ¼Õ ¼±ÅÃÀÚ(ÇÑ Ä ¶ç±â)
| 06 | ÀÚ½Ä ¼±ÅÃÀÚ(¡µ)
03. °¡»ó(pseudo) Ŭ·¡½º
04. HTML ÆäÀÌÁö¿¡ CSS ¿¬°áÇϱâ
| 01 | ¿ÜºÎ(External CSS) ½ºÅ¸ÀÏ
| 02 | ³»ºÎ(Internal CSS) ½ºÅ¸ÀÏ
| 03 | ÀζóÀÎ(Inline CSS)
½Ç½À _ Á¦¸ñ ±ÛÀÚ »ö Àû¿ëÇϱâ
05. ÆùÆ®(Fonts)
| 01 | Æйи®(family)
| 02 | ½ºÅ¸ÀÏ(style)
| 03 | »çÀÌÁî(size)
| 04 | ¿þÀÌÆ®(font-weight)
| 05 | ±¸±Û À¥ÆùÆ®(Google Web fonts)
½Ç½À _ ±¸±Û À¥ÆùÆ® Àû¿ëÇϱâ
06. Ä÷¯(color)
| 01 | À̸§(names)
| 02 | 16Áø¼ö(HEX:Hexadecimal)
| 03 | RGB(Red, Green, Blue)
| 04 | HSL(Hue, Saturation, Lightness)
| 05 | Ä÷¯ ¼±Åñâ(Color Picker)
07. ÅؽºÆ® ½ºÅ¸Àϸµ(Text styling)
| 01 | ÅؽºÆ® Á¤·Ä(align)
| 02 | µ¥ÄÚ·¹À̼Ç(decoration)
| 03 | µé¿©¾²±â(indent)
| 04 | ÀÚ°£(letter spacing)
| 05 | ´Ü¾î °£°Ý(word spacing)
| 06 | Çà°£(line height)
08. ¹Ú½º ¸ðµ¨(Box Model)
| 01 | Å©±â(width, height)
| 02 | Å׵θ® ¼±(border)
| 03 | ¿©¹é(padding, margin)
¤ýPadding(¾ÈÂÊ ¿©¹é)
¤ýMargin(¹Ù±ù ¿©¹é)
| 01 | µÕ±Ù ¸ð¼¸®(radius)
| 02 | box-sizing
09. ·¹À̾ƿô(Layout)
| 03 | float
| 04 | clear
| 05 | overflow
¤ýÀ̹ÌÁö¿Í ³»¿ëÀ» 2´ÜÀ¸·Î ·¹À̾ƿô ±¸¼ºÇϱâ
| 01 | display
| 02 | position
| 03 | flexbox
¤ýºÎ¸ð(container)¿¡¼ »ç¿ëÇÏ´Â ¼öÆòÃà Á¤·Ä ¼Ó¼ºµé
- flex
- flex-direction
©ç flex-direction : column
©è flex-direction : column-reverse
©é flex-direction : row
©ê flex-direction : row-reverse
- flex-wrap
©ç flex-wrap : wrap
©è flex-wrap : no- wrap
©é flex-wrap : wrap-reverse
- justfy-contents
©ç justfy-contents : flex-start
©è justfy-contents : flex-end
©é justfy-contents : center
©ê justify-contents : space-between
©ë justify-contents : space-around
©ì justify-contents : space-evenly
¤ýºÎ¸ð(container)¿¡¼ »ç¿ëÇÏ´Â ¼öÁ÷Ãà Á¤·Ä ¼Ó¼ºµé
- align-items
©ç align-items: stretch
©è align-items: center
©é align-items: flex-start
©ê align-items: flex-end
©ë align-items: baseline
- align-contents ¼Ó¼º
©ç align-content : space-between
©è align-content : space-around
©é align-content : stretch
©ê align-content : center
©ë align-content : flex-start
©ì align-content : flex-end
¤ýÀÚ½Ä(item)¿¡¼ »ç¿ëÇÏ´Â ¼Ó¼ºµé
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
½Ç½À _ flexbox¸¦ ÀÌ¿ëÇÏ¿© HTML5 ¹®¼ ·¹À̾ƿô µðÀÚÀÎÇϱâ
| 07 | z-index
½Ç½À _ z-index ¼Ó¼º Àû¿ëÇϱâ
z-index ¼Ó¼ºÀ» È°¿ëÇØ °ãħ ¼ø¼ ÁöÁ¤Çϱâ
10. ¹è°æ(background)
| 01 | ¹è°æ»ö(background color) Àû¿ëÇϱâ
| 02 | ¹è°æ¿¡ À̹ÌÁö(background image)
³Ö±â
¤ýbackground-image
¤ýbackground-repeat
¤ýbackground-position
©ç background-position : Å°¿öµå
©è background-position : ÁÂÇ©°ª
¤ýbackground-size
©ç background-size
©è background-size ¼Ó¼ºÀÇ ¼Ó¼º°ª ºñ±³ : auto, contain, cover
| 03 | ºÒÅõ¸íµµ(opacity)
CHAPTER 04 ½ÇÀü ¿¹Á¦ À¥»çÀÌÆ® ¸¸µé±â
01. ¸ÞÀÎ ÆäÀÌÁö ¸¸µé±â
| 01 | ¸ÞÀÎ ÆäÀÌÁö HTML ±¸¼º°ú °øÅë CSS ¸¸µé±â
| 02 | ¸ÞÀÎ ÆäÀÌÁö¿¡ ·Î°í¿Í GNB ¸¸µé±â
| 03 | À̺¥Æ® ¹è³Ê ¹èÄ¡Çϱâ
| 04 | À̹ÌÁö ¼öÆò Á¤·Ä ¸¸µé±â
| 05 | À¯Æ©ºê »ðÀÔÇϱâ
| 06 | ¼¶³×ÀÏ °¶·¯¸®¿Í ´º½º ¸®½ºÆ® ¸¸µé±â
| 07 | footer ¸¸µé±â
| 08 | »ó´ÜÀ¸·Î À̵¿ÇÏ´Â [top] ¹öÆ° ¸¸µé±â
02. ¼ºê ÆäÀÌÁö ¸¸µé±â
| 01 | ¼ºê ÆäÀÌÁö HTML ±¸¼º
| 02 | ºê·¹µåÅ©·³(breadcrumb) ¸¸µé±â
| 03 | Á¦¸ñ°ú À̹ÌÁö ¼öÁ÷ Á¤·Ä ¸¸µé±â
| 04 | ¹è°æ»ö À§¿¡ ¼¶³×ÀÏ À̹ÌÁö ¼öÆò Á¤·Ä ¸¸µé±â
| 05 | Á¦¸ñ°ú À̹ÌÁö °¡¿îµ¥ Á¤·Ä ¸¸µé±â
| 06 | GNB ¸Þ´º¿¡ ÆäÀÌÁö·Î À̵¿ÇÏ´Â ÇÏÀÌÆÛ¸µÅ© Àû¿ëÇϱâ
| ºÎ·Ï | Ä®ÅðÁ·¿¡°Ô À¯¿ëÇÑ »çÀÌÆ® ¸ðÀ½
01. HTML, CSS °³³ä ¾Ë±â
| 01 | À¥ºê¶ó¿ìÀú(Web browser)
02. ¹» ÁغñÇÏÁÒ?
¤ýÀ¥ºê¶ó¿ìÀúÀÇ Á¾·ù¿Í Á¡À¯À²
¤ýÅ©·Ò(Chrome) ºê¶ó¿ìÀú ¼³Ä¡Çϱâ
¤ý°³¹ßÀÚ µµ±¸
½Ç½À _ À¥»çÀÌÆ® [+´õº¸±â]¿¡¼ HTML ¿ä¼Ò¿Í CSS ¼Ó¼º°ú ¼Ó¼º°ª ¾Ë¾Æº¸±â
½Ç½À _ [°³¹ßÀÚ µµ±¸]·Î »ö°ú ³»¿ë ¼öÁ¤Çغ¸±â
| 01 | ÆíÁý±â(Editors)
½Ç½À _ ºñÁÖ¾ó ½ºÆ©µð¿À ÄÚµå ÆÄÀÏ ´Ù¿î·ÎµåÇϱâ
½Ç½À _ ºñÁÖ¾ó ½ºÆ©µð¿À ÄÚµå ¼³Ä¡Çϱâ
¤ýºñÁÖ¾ó ½ºÆ©µð¿À ÄÚµåÀÇ ÀÎÅÍÆäÀ̽º ¾Ë¾Æº¸±â
¤ýÆí¸®ÇÑ È®Àå ±â´É »ç¿ëÇϱâ
½Ç½À _ ¿µ¹® ¸Þ´º¸¦ Çѱ۷Π±³Ã¼Çϱâ
½Ç½À _ HTML ÆÄÀÏÀ» ½Ç½Ã°£ ¹Ì¸® º¸±â
¤ýÄÚµù ¼Óµµ¸¦ ³ôÀÌ´Â ±â´É ¼³Á¤Çϱâ
CHAPTER 02 HTML ÆäÀÌÁö ¸¸µé±â
01. ű×(tag)°¡ ¹¹ÁÒ?
02. ¿ä¼Ò(elements)°¡ ¹¹ÁÒ?
03. HTML ¹®¼ÀÇ ±âº» ±¸¼º
½Ç½À _ [ÀÚµ¿ ¿Ï¼º] ±â´ÉÀ» ÀÌ¿ëÇØ HTML ±¸Á¶ ¾Ë¾Æº¸±â
04. ¼Ó¼º(Attributes)
| 01 | href ¼Ó¼º
| 02 | target ¼Ó¼º
| 03 | src ¼Ó¼º
| 04 | alt ¼Ó¼º
05. ¿ä¼Ò(elements)ÀÇ Æ¯Â¡
| 01 | Block level ¿ä¼Ò(elements)
| 02 | Inline ¿ä¼Ò(elements)
06. ÅؽºÆ®(Text) ¿ä¼Ò(elements)
| 01 | ¡´h1¡µ~¡´h6¡µ Á¦¸ñ ű×(tags)
| 02 | ¹®´Ü ¡´p¡µ ű×
| 03 | ÁÙ ¹Ù²Þ ¡´br¡µ ű×
| 04 | Ư¼öÄÚµå ¹®ÀÚ(entity)
| 05 | ¹®ÀÚ °Á¶ ű×
| 06 | ÁÖ¼®(comment)
½Ç½À _ HTML ¹®¼ ¸¸µé±â
07. À̹ÌÁö(Images) ÅÂ±×¿Í ¼Ó¼º
| 01 | ¡´img, src, alt¡µ¸¦ ÀÌ¿ëÇÏ¿© À̹ÌÁö »ðÀÔÇϱâ
| 02 | À̹ÌÁö ÆÄÀÏ °æ·Î(file paths)
| 03 | HTML¿¡¼ »ç¿ëÇÒ ¼ö ÀÖ´Â À̹ÌÁö ÆÄÀÏ Çü½Ä
½Ç½À _ À̹ÌÁö »ðÀÔÇϱâ
08. ÇÏÀÌÆÛ¸µÅ©(Hyperlinks)
| 01 | À̹ÌÁö¿¡ ¸µÅ© Àû¿ëÇϱâ
| 02 | ÅؽºÆ®¿¡ ¸µÅ© Àû¿ëÇϱâ
| 03 | À̸ÞÀÏ¿¡ ¸µÅ© Àû¿ëÇϱâ
| 04 | ÁÖ¼Ò(URL) ÀÔ·ÂÇϱâ
½Ç½À _ À̹ÌÁö¸¦ Ŭ¸¯ÇØ »õ·Î¿î ÅÇ(ÆäÀÌÁö)À¸·Î ¿±â
½Ç½À _ ÅؽºÆ®¸¦ Ŭ¸¯ÇØ »õ·Î¿î ÅÇ(ÆäÀÌÁö)À¸·Î ¿±â
09. ¸ñ·Ï(List) ű×
| 01 | ¼ø¼ ¾ø´Â ¸ñ·Ï¡´ul li¡µ
| 02 | ¼ø¼ ÀÖ´Â ¸ñ·Ï¡´ol li¡µ
½Ç½À _ ¼ø¼ ¾ø´Â ¸ñ·Ï¿¡ ¼ø¼ Àû¿ëÇϱâ
10. Ç¥(Table) ű×
½Ç½À _ 3¿ 3Çà Ç¥ ¸¸µé±â
11. Æû(Form) ű×
| 01 | ÀÎDz(input) ű×
| 02 | ·¹À̺í(label) ű×
½Ç½À _ ¾ÆÀÌÄÜÀÌ ÀÖ´Â °Ë»ö Æû ¸¸µé±â
12. ¹öÆ°(button) ű×
13. ¹Ìµð¾î(Media) ű×
| 01 | ºñµð¿À(video) ű×
| 02 | ¿Àµð¿À(audio) ű×
| 03 | À¯Æ©ºê(youtube) ¿¬°á
½Ç½À _ À¯Æ©ºê ¿µ»óÀ» HTML ÆäÀÌÁö¿¡ »ðÀÔÇϱâ
14. Àǹ̷ÐÀûÀÎ ¿ä¼Ò·Î ±¸¼ºµÈ HTML5 ÆäÀÌÁö ±¸Á¶
| 01 | Çì´õ(header) ű×
| 02 | ³»ºñ°ÔÀ̼Ç(nav) ű×
| 03 | ¼½¼Ç(section) ű×
| 04 | ¾ÆƼŬ(article) ű×
| 05 | ¾î»çÀ̵å(aside) ű×
| 06 | ǪÅÍ(footer) ű×
½Ç½À _ Àǹ̷ÐÀû HTML ÆäÀÌÁö ¸¸µé±â
CHAPTER 03 CSS·Î HTML ÆäÀÌÁö ½ºÅ¸ÀϸµÇϱâ
01. CSS ÀԷ¹ý(Syntax)
02. ¼±ÅÃÀÚ(Selectors)ÀÇ Á¾·ù
| 01 | ¿ä¼Ò(element)
| 02 | ¾ÆÀ̵ð(#)
| 02 | Ŭ·¡½º(.)
| 03 | ¸ðµç(*)
| 04 | ±×·ì(,)
| 05 | ÀÚ¼Õ ¼±ÅÃÀÚ(ÇÑ Ä ¶ç±â)
| 06 | ÀÚ½Ä ¼±ÅÃÀÚ(¡µ)
03. °¡»ó(pseudo) Ŭ·¡½º
04. HTML ÆäÀÌÁö¿¡ CSS ¿¬°áÇϱâ
| 01 | ¿ÜºÎ(External CSS) ½ºÅ¸ÀÏ
| 02 | ³»ºÎ(Internal CSS) ½ºÅ¸ÀÏ
| 03 | ÀζóÀÎ(Inline CSS)
½Ç½À _ Á¦¸ñ ±ÛÀÚ »ö Àû¿ëÇϱâ
05. ÆùÆ®(Fonts)
| 01 | Æйи®(family)
| 02 | ½ºÅ¸ÀÏ(style)
| 03 | »çÀÌÁî(size)
| 04 | ¿þÀÌÆ®(font-weight)
| 05 | ±¸±Û À¥ÆùÆ®(Google Web fonts)
½Ç½À _ ±¸±Û À¥ÆùÆ® Àû¿ëÇϱâ
06. Ä÷¯(color)
| 01 | À̸§(names)
| 02 | 16Áø¼ö(HEX:Hexadecimal)
| 03 | RGB(Red, Green, Blue)
| 04 | HSL(Hue, Saturation, Lightness)
| 05 | Ä÷¯ ¼±Åñâ(Color Picker)
07. ÅؽºÆ® ½ºÅ¸Àϸµ(Text styling)
| 01 | ÅؽºÆ® Á¤·Ä(align)
| 02 | µ¥ÄÚ·¹À̼Ç(decoration)
| 03 | µé¿©¾²±â(indent)
| 04 | ÀÚ°£(letter spacing)
| 05 | ´Ü¾î °£°Ý(word spacing)
| 06 | Çà°£(line height)
08. ¹Ú½º ¸ðµ¨(Box Model)
| 01 | Å©±â(width, height)
| 02 | Å׵θ® ¼±(border)
| 03 | ¿©¹é(padding, margin)
¤ýPadding(¾ÈÂÊ ¿©¹é)
¤ýMargin(¹Ù±ù ¿©¹é)
| 01 | µÕ±Ù ¸ð¼¸®(radius)
| 02 | box-sizing
09. ·¹À̾ƿô(Layout)
| 03 | float
| 04 | clear
| 05 | overflow
¤ýÀ̹ÌÁö¿Í ³»¿ëÀ» 2´ÜÀ¸·Î ·¹À̾ƿô ±¸¼ºÇϱâ
| 01 | display
| 02 | position
| 03 | flexbox
¤ýºÎ¸ð(container)¿¡¼ »ç¿ëÇÏ´Â ¼öÆòÃà Á¤·Ä ¼Ó¼ºµé
- flex
- flex-direction
©ç flex-direction : column
©è flex-direction : column-reverse
©é flex-direction : row
©ê flex-direction : row-reverse
- flex-wrap
©ç flex-wrap : wrap
©è flex-wrap : no- wrap
©é flex-wrap : wrap-reverse
- justfy-contents
©ç justfy-contents : flex-start
©è justfy-contents : flex-end
©é justfy-contents : center
©ê justify-contents : space-between
©ë justify-contents : space-around
©ì justify-contents : space-evenly
¤ýºÎ¸ð(container)¿¡¼ »ç¿ëÇÏ´Â ¼öÁ÷Ãà Á¤·Ä ¼Ó¼ºµé
- align-items
©ç align-items: stretch
©è align-items: center
©é align-items: flex-start
©ê align-items: flex-end
©ë align-items: baseline
- align-contents ¼Ó¼º
©ç align-content : space-between
©è align-content : space-around
©é align-content : stretch
©ê align-content : center
©ë align-content : flex-start
©ì align-content : flex-end
¤ýÀÚ½Ä(item)¿¡¼ »ç¿ëÇÏ´Â ¼Ó¼ºµé
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
½Ç½À _ flexbox¸¦ ÀÌ¿ëÇÏ¿© HTML5 ¹®¼ ·¹À̾ƿô µðÀÚÀÎÇϱâ
| 07 | z-index
½Ç½À _ z-index ¼Ó¼º Àû¿ëÇϱâ
z-index ¼Ó¼ºÀ» È°¿ëÇØ °ãħ ¼ø¼ ÁöÁ¤Çϱâ
10. ¹è°æ(background)
| 01 | ¹è°æ»ö(background color) Àû¿ëÇϱâ
| 02 | ¹è°æ¿¡ À̹ÌÁö(background image)
³Ö±â
¤ýbackground-image
¤ýbackground-repeat
¤ýbackground-position
©ç background-position : Å°¿öµå
©è background-position : ÁÂÇ©°ª
¤ýbackground-size
©ç background-size
©è background-size ¼Ó¼ºÀÇ ¼Ó¼º°ª ºñ±³ : auto, contain, cover
| 03 | ºÒÅõ¸íµµ(opacity)
CHAPTER 04 ½ÇÀü ¿¹Á¦ À¥»çÀÌÆ® ¸¸µé±â
01. ¸ÞÀÎ ÆäÀÌÁö ¸¸µé±â
| 01 | ¸ÞÀÎ ÆäÀÌÁö HTML ±¸¼º°ú °øÅë CSS ¸¸µé±â
| 02 | ¸ÞÀÎ ÆäÀÌÁö¿¡ ·Î°í¿Í GNB ¸¸µé±â
| 03 | À̺¥Æ® ¹è³Ê ¹èÄ¡Çϱâ
| 04 | À̹ÌÁö ¼öÆò Á¤·Ä ¸¸µé±â
| 05 | À¯Æ©ºê »ðÀÔÇϱâ
| 06 | ¼¶³×ÀÏ °¶·¯¸®¿Í ´º½º ¸®½ºÆ® ¸¸µé±â
| 07 | footer ¸¸µé±â
| 08 | »ó´ÜÀ¸·Î À̵¿ÇÏ´Â [top] ¹öÆ° ¸¸µé±â
02. ¼ºê ÆäÀÌÁö ¸¸µé±â
| 01 | ¼ºê ÆäÀÌÁö HTML ±¸¼º
| 02 | ºê·¹µåÅ©·³(breadcrumb) ¸¸µé±â
| 03 | Á¦¸ñ°ú À̹ÌÁö ¼öÁ÷ Á¤·Ä ¸¸µé±â
| 04 | ¹è°æ»ö À§¿¡ ¼¶³×ÀÏ À̹ÌÁö ¼öÆò Á¤·Ä ¸¸µé±â
| 05 | Á¦¸ñ°ú À̹ÌÁö °¡¿îµ¥ Á¤·Ä ¸¸µé±â
| 06 | GNB ¸Þ´º¿¡ ÆäÀÌÁö·Î À̵¿ÇÏ´Â ÇÏÀÌÆÛ¸µÅ© Àû¿ëÇϱâ
| ºÎ·Ï | Ä®ÅðÁ·¿¡°Ô À¯¿ëÇÑ »çÀÌÆ® ¸ðÀ½
»ó¼¼ À̹ÌÁö
(0°³)
¸®ºäº¸µå
µî·ÏµÈ ¸®ºä°¡ ¾ø½À´Ï´Ù.
(0°³)
»óÇ°¹®ÀÇ
»óÇ° °í½Ã Á¤º¸
1. ¹è¼Û
¹è¼ÛÀº ´çÀÏ ¿ÀÈÄ 5½ÃÀÌÀü(Åä¿äÀÏÀº ¿ÀÈÄ1½Ã)¿¡ ÁÖ¹®¹× °áÀ縦 ÇÏ½Ã¸é ´çÀϹè¼ÛµË´Ï´Ù.
¹è¼ÛÀº ÁÖ¹® ÈÄ °áÀç¿Ï·áÀÏÀ» ±âÁØÀ¸·Î 1~2ÀÏ ¾È¿¡ ¹è¼Û¿Ï·á¸¦ ¿øÄ¢À¸·Î ÇÏ°í ÀÖ½À´Ï´Ù.
´Ù¸¸ ºÎµæÀÌÇÑ °æ¿ì(ÇØ´ç»óÇ°ÀÇ Ç°Àý ¹× ÀýÆÇ) °í°´´Ô²² Àüȸ¦ µå·Á¼ 󸮸¦ ÇÕ´Ï´Ù.
¹è¼ÛÀº ´çÀÏ ¿ÀÈÄ 5½ÃÀÌÀü(Åä¿äÀÏÀº ¿ÀÈÄ1½Ã)¿¡ ÁÖ¹®¹× °áÀ縦 ÇÏ½Ã¸é ´çÀϹè¼ÛµË´Ï´Ù.
¹è¼ÛÀº ÁÖ¹® ÈÄ °áÀç¿Ï·áÀÏÀ» ±âÁØÀ¸·Î 1~2ÀÏ ¾È¿¡ ¹è¼Û¿Ï·á¸¦ ¿øÄ¢À¸·Î ÇÏ°í ÀÖ½À´Ï´Ù.
´Ù¸¸ ºÎµæÀÌÇÑ °æ¿ì(ÇØ´ç»óÇ°ÀÇ Ç°Àý ¹× ÀýÆÇ) °í°´´Ô²² Àüȸ¦ µå·Á¼ 󸮸¦ ÇÕ´Ï´Ù.
2. ¹è¼Û·á
¹è¼Û·á´Â 3¸¸¿ø ÀÌ»óÀÌ °æ¿ì À̱×ÀëÇ÷¯½º¿¡¼ ºÎ´ãÇÏ°í, ¹Ì¸¸ÀÏ °æ¿ì °í°´ÀÌ 2,500¿øÀ» ºÎ´ãÇÕ´Ï´Ù.
´Ù¸¸ ±¸¸Å±Ý¾×ÀÌ 3¸¸¿ø ÀÌ»óÀε¥ Àû¸³±Ý µîÀ» »ç¿ëÇÏ¿© ½ÇÁ¦ °áÀç±Ý¾×ÀÌ 3¸¸¿ø ¹Ì¸¸ÀÌ µÇ´õ¶óµµ À̱×ÀëÇ÷¯½º¿¡¼ ¹è¼Û·á¸¦ ºÎ´ãÇÏ°í, Á¦ÁÖ¸¦ Á¦¿ÜÇÑ µµ¼Áö¿ªÀÇ °æ¿ì´Â 5,000¿øÀÌ Ãß°¡µÈ´ä´Ï´Ù. Çؿܹè¼ÛÀº Àü¾× °í°´ºÎ´ãÀÌ µÈ´ä´Ï´Ù.
5. ¹ÝÇ°/±³È¯
¹ÞÀ¸½Å ³¯ ºÎÅÍ ÀÏÁÖÀÏ À̳» ¹ÝÇ°/±³È¯ÀÌ °¡´ÉÇϽʴϴÙ. ½Ã°£ÀÌ Áö³ª¸é 󸮰¡ ºÒ°¡ÇÔÀ» ¾Ë·Á µå¸³´Ï´Ù. ´Ù¸¸ ÁÖ¹®ÇϽŠ»óÇ°°ú ´Ù¸¥ »óÇ°ÀÌ ¹è¼ÛµÇ°Å³ª Æĺ», ³«ÀåÀÌ ÀÖ´Â µµ¼ÀÇ °æ¿ì ÀÌ¿ë¾à°ü¿¡ ÁØÇÏ¿© À̱×ÀëÇ÷¯½ºÀÇ ºñ¿ëÀ¸·Î ±³È¯, ¹ÝÇ° ¹× ȯºÒ µîÀ» Çص帳´Ï´Ù.
¹ÞÀ¸½Å ³¯ ºÎÅÍ ÀÏÁÖÀÏ À̳» ¹ÝÇ°/±³È¯ÀÌ °¡´ÉÇϽʴϴÙ. ½Ã°£ÀÌ Áö³ª¸é 󸮰¡ ºÒ°¡ÇÔÀ» ¾Ë·Á µå¸³´Ï´Ù. ´Ù¸¸ ÁÖ¹®ÇϽŠ»óÇ°°ú ´Ù¸¥ »óÇ°ÀÌ ¹è¼ÛµÇ°Å³ª Æĺ», ³«ÀåÀÌ ÀÖ´Â µµ¼ÀÇ °æ¿ì ÀÌ¿ë¾à°ü¿¡ ÁØÇÏ¿© À̱×ÀëÇ÷¯½ºÀÇ ºñ¿ëÀ¸·Î ±³È¯, ¹ÝÇ° ¹× ȯºÒ µîÀ» Çص帳´Ï´Ù.
4. ȯºÒ
¹ÞÀ¸½Å ³¯ºÎÅÍ 2ÀÏ À̳»·Î Àüȳª 1:1 °Ô½Ã±Û·Î Àû¾îÁÖ¼Å¾ß °¡´ÉÇϽʴϴÙ.
5. ÁÖÀÇ
°í°´´Ô º¯½ÉÀ¸·Î ÀÎÇÑ ±³È¯/¹ÝÇ°/ȯºÒ °í°´´Ô²²¼ Åùèºñ(¿Õº¹Åùèºñ)¸¦ ºÎ´ãÀÌ µÇ´Ï ÀÌÁ¡ À¯ÀÇÇØ ÁֽʽÿÀ. ¶ÇÇÑ °ÀÇÅ×ÀÙ/¾ãÀº¹®Á¦Áý/ºñ´ÒÆ÷ÀåµÈÁ¦Ç°µîÀº Çѹø ±¸¸ÅÇÏ½Ã¸é ±³È¯/¹ÝÇ°/ȯºÒÀÌ ÀüÇô ¾ÈµË´Ï´Ù. ½ÅÁßÈ÷ »ý°¢Çϼż ±¸¸Å ºÎŹµå¸³´Ï´Ù. ´Ù¸¸ ºÒ·®Å×ÀÙÀÇ °æ¿ì ±× ºÒ·®ÀÌ µÈ °³º°Å×ÀÙÀ» À̱×ÀëÇ÷¯½ºÀÇ ºñ¿ëÀ¸·Î A/S¸¦ Çص帳´Ï´Ù.
6. ÁÖ¹®Ãë¼Ò, ±³È¯, ¹ÝÇ° ¹× ȯºÒÀº ´çÀÏ 5½Ã ÀÌÀü¿¡ ÇØÁÖ¼Å¾ß °¡´ÉÇÕ´Ï´Ù.
±× ÀÌÈÄ´Â ¹è¼Û µî¿¡ µû¸¥ Á¦ºñ¿ëÀ» ºÎ´ãÇÏ¼Å¾ß ÇÕ´Ï´Ù.