๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

HTML

(9)
ํ‹ฐ์Šคํ† ๋ฆฌ ๋ธ”๋กœ๊ทธ ์Šคํ‚จ ๊พธ๋ฏธ๊ธฐ [divํƒœ๊ทธ] ํƒœ๊ทธ(1) ์ •์˜ ๋ ˆ์ด์•„์›ƒ์„ ๋‚˜๋ˆŒ๋•Œ ์‚ฌ์šฉํ•˜๋Š” ํƒœ๊ทธ๋กœ Division์˜ ์•ฝ์ž์ด๋‹ค.๋‹ค๋ฅธ ๋ถ€๊ฐ€ ๊ธฐ๋Šฅ์ด๋‚˜ ๋ณต์žก์„ฑ ์—†์ด ๋‹จ์ˆœํžˆ ๊ณต๊ฐ„์„ ๋‚˜๋ˆ„์–ด ํ™œ์šฉํ• ๋•Œ ์‚ฌ์šฉํ•˜๋‹ค๋ณด๋‹ˆ ์ƒ๋‹นํžˆ ๋งŽ์ด ์‚ฌ์šฉํ•˜๋Š” ํƒœ๊ทธ์ด๋‹ค. ์‹ค์ œ๋กœ ๋ธ”๋กœ๊ทธ ํฌ์ŠคํŒ…์‹œ ๋งŽ์ด ๋‹ฌ๋ ค ์žˆ๋Š” ๊ฒƒ์„ ๋ณผ ์ˆ˜ ์žˆ๋‹ค. (2) ์‚ฌ์šฉ๋ฒ• ์ด์ „์— ๋ดค๋˜ ์ฒ˜๋Ÿผ ์›ํ•˜๋Š” ๊ณต๊ฐ„์— ํƒœ๊ทธ๋ฅผ ์—ด์–ด์ฃผ๊ณ  ์•ˆ์— ๋‚ด์šฉ์„ ์ ์œผ๋ฉด ๋œ๋‹ค.๊ตฌ์—ญ์„ ๋‚˜๋ˆˆ ํ‹ฐ๋ฅผ ๋‚ด๊ธฐ ์œ„ํ•ด css์™€ ๊ฐ™์ด ์‚ฌ์šฉํ•˜๋ฉด ๋ณด๊ธฐ ์ข‹๊ฒŒ ๊ณต๊ฐ„์„ ๋‚˜ํƒ€๋‚ผ ์ˆ˜ ์žˆ๋‹ค. : ์‹œ์ž‘, ์˜คํ”ˆ ํƒœ๊ทธ : ์ข…๋ฃŒ, ํด๋กœ์ฆˆ ํƒœ๊ทธ html์—์„œ css์‚ฌ์šฉํ•˜๊ธฐ : style ์†์„ฑ๋ฅผ ์ด์šฉ (3) ์‹ค์Šต ATOM ์œผ๋กœ ์ด์šฉํ•˜์—ฌ divํƒœ๊ทธ๋ฅผ ์‹ค์Šต ํ•ด๋ณด์ž.ํƒœ๊ทธ์™€ ํ•จ๊ป˜ ํƒœ๊ทธ๋ฅผ ํ•จ๊ป˜ ์จ๋ณด๋ฉฐ ๋น„๊ตํ•ด๋ณด๋ ค๊ณ  ํ•˜๋Š”๋ฐ์š”, ํƒœ๊ทธ์™€ ํƒœ๊ทธ ์‚ฌ์ด์— ๋‹ค๋ฅธ์ ์€ ์—†์–ด ๋ณด์ธ๋‹ค... ๋ญ๊ฐ€ ๋‹ค๋ฅธ๊ฑฐ์ง€?!.,์ƒ‰์ƒ์€ sty..
ํ‹ฐ์Šคํ† ๋ฆฌ ๋ธ”๋กœ๊ทธ ์Šคํ‚จ ๊พธ๋ฏธ๊ธฐ [sectionํƒœ๊ทธ] ํƒœ๊ทธ (1) ์ •์˜ ๋ฌธ์„œ๋‚˜ ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜ ๋“ฑ์˜ ์ฃผ์ œ๋ณ„ ์ฝ˜ํ…์ธ  ์„น์…˜์„ ๊ตฌ์„ฑํ• ๋•Œ ์‚ฌ์šฉํ•˜๋Š” ํƒœ๊ทธ์ด๋‹ค. (2) ์‚ฌ์šฉ๋ฒ• ์‚ฌ์šฉํ•˜๊ณ ์ž ํ•˜๋Š” ์œ„์น˜์—์„œ ํƒœ๊ทธ๋ฅผ ์—ด์–ด ์ค€ ํ›„ ์•ˆ์— ์ฝ˜ํ…์ธ ๋“ค์„ ์ฑ„์›Œ ์ฃผ๋ฉด ๋œ๋‹ค. : ์‹œ์ž‘, ์˜คํ”ˆ ํƒœ๊ทธ : ์ข…๋ฃŒ, ํด๋กœ์ฆˆ ํƒœ๊ทธ (3) ์‹ค์Šต ATOM ์œผ๋กœ ์ด์šฉํ•˜์—ฌ sectionํƒœ๊ทธ๋ฅผ ์‹ค์Šต ํ•ด๋ณด์ž.ํƒœ๊ทธ๋ฅผ ์—ด์–ด ์•ˆ์— ์„น์…˜1์ด๋ผ๋Š” ์ฝ˜ํ…์ธ  ์ œ๋ชฉ์„ ๋กœ ์ ์–ด์ฃผ๊ณ  ํƒœ๊ทธ๋ฅผ ์ด์šฉํ•˜์—ฌ ๋‚ด์šฉ์„ ์ ์–ด์คฌ์Šต๋‹ˆ๋‹ค. ์ถœ๋ ฅํ•˜๋‹ˆ ์œ„์™€ ๊ฐ™์ด ๋‚˜์˜ค๋„ค์š”. html๋งŒ ๊ฐ€์ง€๊ณ ๋Š” ํŠน๋ณ„ํžˆ ๋ญ”๊ฐ€ ๋„๋“œ๋ผ์ง€๋Š”๊ฒŒ ์—†๋„ค์š”. ์ด์™ธ์—๋„์™€ ๋กœ๋„ ์ฝ˜ํ…์ธ ์— ๋Œ€ํ•œ ๊ตฌ์—ญ์„ ์ •ํ•  ์ˆ˜ ์žˆ๋‹ค๋„ค์š”.๊ฐ๊ฐ ์šฉ๋„๊ฐ€ ์žˆ์„ํ…๋ฐ ๋ชจ๋ฅด๊ฒ ๋„ค์š” ใ…Ž.ใ…Ž ์˜ค๋Š˜์€ ์—ฌ๊ธฐ๊นŒ์ง€... ์ด์–ด๋ณด๊ธฐ โ˜ž ํ‹ฐ์Šคํ† ๋ฆฌ ๋ธ”๋กœ๊ทธ ์Šคํ‚จ ๊พธ๋ฏธ๊ธฐ [divํƒœ๊ทธ]
ํ‹ฐ์Šคํ† ๋ฆฌ ๋ธ”๋กœ๊ทธ ์Šคํ‚จ ๊พธ๋ฏธ๊ธฐ [imgํƒœ๊ทธ] ํƒœ๊ทธ(1) ์ •์˜ image๋ฅผ ์ค„์ธ ํƒœ๊ทธ๋กœ ๋ง๊ทธ๋Œ€๋กœ ์ด๋ฏธ์ง€๋ฅผ ์›นํŽ˜์ด์ง€์— ์‚ฝ์ž…ํ•˜๊ณ ์ž ํ• ๋•Œ ์‚ฌ์šฉํ•œ๋‹ค. (2) ์‚ฌ์šฉ๋ฒ• ํƒœ๊ทธ๋Š” ์‚ฝ์ž…ํ•˜๊ณ ์žํ•˜๋Š” ์ด๋ฏธ์ง€์˜ ๊ฒฝ๋กœ๋ฅผ ์ง€์˜ํ•ด์•ผ ํ•˜๋Š”๋ฐ, ์ด๊ฒŒ ์ •์ƒ์ ์ด์ง€ ์•Š์œผ๋ฉด ์—‘๋ฐ•(์—‘์Šค๋ฐ•์Šค)์ด ๋œจ๊ฒŒ ๋œ๋‹ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค.๊ณ ๋กœ ๊ฒฝ๋กœ๋ฅผ ์ง€์ •ํ•˜๊ธฐ ์œ„ํ•ด "src"๋ผ๋Š” ์†์„ฑ์„ ์ด์šฉํ•˜๋Š”๋ฐ์š”,์ด์™ธ์—๋„ ์ด๋ฏธ์ง€์˜ ์‚ฌ์ด์ฆˆ๋ฅผ ์ •ํ•ด์ฃผ๋Š” ์†์„ฑ์ด 2๊ฐ€์ง€๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. : ์‹œ์ž‘, ์˜คํ”ˆ ํƒœ๊ทธ- : ์ข…๋ฃŒ, ํด๋กœ์ฆˆ ํƒœ๊ทธ 3๊ฐ€์ง€ "์†์„ฑ"์„ ํ•จ๊ป˜ ๋ณด์‹œ๋ฉดโ–ถ src : ์ด๋ฏธ์ง€์˜ ๊ฒฝ๋กœ๋ฅผ ์ง€์ •โ–ถ width : ์ด๋ฏธ์ง€์˜ ๊ฐ€๋กœ ์‚ฌ์ด์ฆˆ๋ฅผ ์ง€์ •โ–ถ height : ์ด๋ฏธ์ง€์˜ ์„ธ๋กœ ์‚ฌ์ด์ฆˆ๋ฅผ ์ง€์ • (3) ์‹ค์Šต ATOM ์œผ๋กœ ์ด์šฉํ•˜์—ฌ imgํƒœ๊ทธ๋ฅผ ์‹ค์Šต ํ•ด๋ณด์ž.180x180 ์‚ฌ์ด์ฆˆ์˜ pngํŒŒ์ผ์„ src ์†์„ฑ์œผ๋กœ ๊ฒฝ๋กœ๋ฅผ ์ง€์ •ํ•ด ์ฃผ๊ณ width ์†์„ฑ๊ณผ height..
ํ‹ฐ์Šคํ† ๋ฆฌ ๋ธ”๋กœ๊ทธ ์Šคํ‚จ ๊พธ๋ฏธ๊ธฐ [h1~h6ํƒœ๊ทธ] ํƒœ๊ทธ(1) ์ •์˜ ๊ธ€์ด๋‚˜ ๋ฌธ์žฅ์˜ ์ œ๋ชฉ ๋“ฑ์œผ๋กœ ์‚ฌ์šฉ๋˜๋Š” ์ด ํƒœ๊ทธ๋Š” Heading์„ ์ค„์ธ ๋ง์ด๋ผ๊ณ  ํ•œ๋‹ค. (2) ์‚ฌ์šฉ๋ฒ• ์€ ๋ธ”๋กœ๊ทธ์˜ ํฌ์ŠคํŒ… ์ œ๋ชฉ์— ํ•ด๋‹นํ•˜๋Š” ํƒœ๊ทธ๋กœ ๊ฐ€์žฅ ํฐ? ๋จผ์ € ์‚ฌ์šฉ๋˜๋Š” ํƒœ๊ทธ์ด๋‹ค.๋Š” ํฌ์ŠคํŒ… ์ œ๋ชฉ์„ ํด๋ฆญํ•˜์—ฌ ๊ฐ€์žฅ ๋จผ์ € ๋ณด์ด๋Š” ์ฝ˜ํ…์ธ ์˜ ํ•ต์‹ฌ ํƒ€์ดํ‹€ ์ œ๋ชฉ์ด๋‹ค.๋Š” ์˜ ํ•˜์œ„ ์ œ๋ชฉ์œผ๋กœ ๋‚ด์šฉ์„ ์„ธ๋ถ„ํ™” ํ•˜๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉ๋˜๋Š” ์ œ๋ชฉ์ด๋‹ค.๋‚˜ , ๋“ฑ์€ ๋”์šฑ ๋‚ด์šฉ์„ ์„ธ๋ถ„ํ™”ํ•˜๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉ๋œ๋‹ค.(์ €๋Š” h4๊นŒ์ง€ ๋งŽ์ด ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.) : ์‹œ์ž‘, ์˜คํ”ˆ ํƒœ๊ทธ : ์ข…๋ฃŒ, ํด๋กœ์ฆˆ ํƒœ๊ทธ (3) ์‹ค์Šต ATOM ์œผ๋กœ ์ด์šฉํ•˜์—ฌ hํƒœ๊ทธ๋ฅผ ์‹ค์Šต ํ•ด๋ณด์ž.์œ„์™€ ๊ฐ™์ด ์ž‘์„ฑํ•˜์—ฌ ์–ด๋–ป๊ฒŒ ๋‚˜์˜ค๋Š”์ง€ ๋ณด๋„๋ก ํ•˜๊ฒ ๋‹ค. ๋ณด์‹œ๋Š” ๊ฒƒ์ฒ˜๋Ÿผ ์ˆซ์ž๊ฐ€ ํด์ˆ˜๋ก ํฐํŠธ๊ฐ€ ํฐ๊ฑธ ๋ณผ ์ˆ˜ ์žˆ์ง€์š”.h4 ์˜†์— h5์™€ h6์„ ๋‚˜๋ž€ํžˆ ์ ์—ˆ๋Š”๋ฐ ๋ฐ‘์œผ๋กœ ๋‚ด๋ ค๊ฐ€ ์žˆ๋Š”๊ฑธ ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค...
ํ‹ฐ์Šคํ† ๋ฆฌ ๋ธ”๋กœ๊ทธ ์Šคํ‚จ ๊พธ๋ฏธ๊ธฐ [spanํƒœ๊ทธ] ํƒœ๊ทธ(1) ์ •์˜ ๋ ˆ์ด์•„์›ƒ์„ ์„ค์ •ํ• ๋•Œ ์‚ฌ์šฉํ•˜๋Š” ํƒœ๊ทธ๋กœ ํƒœ๊ทธ์™€ ์œ ์‚ฌํ•˜์ง€๋งŒ ์‚ฌ์šฉ๋ฐฉ๋ฒ•์€ ๋‹ค๋ฅด๋‹ค. ํƒœ๊ทธ์˜ display์†์„ฑ์€ inline์š”์†Œ์ด๋ฉฐ, ๋ฅผ ์ด์šฉํ•œ ์ค„๋ฐ”๊ฟˆ์ด ๋˜์ง€ ์•Š๋Š”๋‹ค. ์™œ๋ƒํ•˜๋ฉด ์ผ์ง์„ ์œผ๋กœ ์‚ฌ์šฉ์‹œ์— ์“ฐ๋Š” ํƒœ๊ทธ์ด๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค. ๋ฐ˜๋ฉด, ํƒœ๊ทธ๋Š” ์ค„๋ฐ”๊ฟˆ์ด ๋˜๋Š” block์š”์†Œ๋ผ๊ณ  ํ•œ๋‹ค. (2) ์‚ฌ์šฉ๋ฒ• ํƒœ๊ทธ๋Š” ํ˜ผ์ž ์‚ฌ์šฉํ•˜์ง€ ์•Š์œผ๋ฉฐ ์ฃผ๋กœ CSS์†์„ฑ๋“ค๊ณผ ํ•จ๊ป˜ ์‚ฌ์šฉํ•œ๋‹ค. : ์‹œ์ž‘, ์˜คํ”ˆ ํƒœ๊ทธ : ์ข…๋ฃŒ, ํด๋กœ์ฆˆ ํƒœ๊ทธ ํ˜„์žฌ ์ž‘์„ฑ ์ค‘์ธ ์ด๋Ÿฌํ•œ ๋ฌธ์žฅ๋“ค์„ ๊พธ๋ฐ€๋•Œ ๋งŽ์ด ์‚ฌ์šฉ๋˜์–ด ์ง„๋‹ค. ์˜ˆ์‹œ) : ์‹œ์ž‘, ์˜คํ”ˆ ํƒœ๊ทธ : ์ข…๋ฃŒ, ํด๋กœ์ฆˆ ํƒœ๊ทธ (3) ์‹ค์Šต ATOM ์œผ๋กœ ์ด์šฉํ•˜์—ฌ spanํƒœ๊ทธ๋ฅผ ์‹ค์Šต ํ•ด๋ณด์ž. ์œ„์™€ ๊ฐ™์ด HTML์— ์ง์ ‘ CSS๋ฅผ ์ ์šฉํ• ๋•Œ ์‚ฌ์šฉํ•˜๋Š” style์š”์†Œ๋ฅผ ํƒœ๊ทธ์— ํ•จ๊ป˜ ์‚ฌ์šฉํ•˜์—ฌ ๊ธ€์”จ ๋’ค์— ๋ฐฐ๊ฒฝ์ƒ‰..
ํ‹ฐ์Šคํ† ๋ฆฌ ๋ธ”๋กœ๊ทธ ์Šคํ‚จ ๊พธ๋ฏธ๊ธฐ [brํƒœ๊ทธ] ํƒœ๊ทธ(1) ์ •์˜ ์ค„๋ฐ”๊ฟˆ์„ ํ• ๋•Œ ์‚ฌ์šฉํ•˜๋Š” ํƒœ๊ทธ๋กœ line break์˜ ์•ฝ์ž๋ผ๊ณ  ํ•œ๋‹ค.๊ทธ๋ฆฌ๊ณ  ์ข…๋ฃŒํƒœ๊ทธ๊ฐ€ ์—†๋Š” ๋นˆ ํƒœ๊ทธ์ด๊ธฐ๋„ ํ•˜๋‹ค. (2) ์‚ฌ์šฉ๋ฒ• ์ž‘์„ฑํ•œ ํ…์ŠคํŠธ ๋‹ค์Œ์— ํƒœ๊ทธ๋ฅผ ์—ด์–ด ์ค„๋ฐ”๊ฟˆ์„ ์‚ฌ์šฉํ•ด ์ฃผ๊ธฐ๋งŒ ํ•˜๋ฉด ๋œ๋‹ค. : ์‹œ์ž‘, ์˜คํ”ˆ ํƒœ๊ทธ์—†์Œ : ์ข…๋ฃŒ, ํด๋กœ์ฆˆ ํƒœ๊ทธ ํƒœ๊ทธ์™€ ํ•จ๊ป˜ ์‚ฌ์šฉํ•˜๋ฉด? (3) ์‹ค์Šต ATOM ์œผ๋กœ ์ด์šฉํ•˜์—ฌ brํƒœ๊ทธ๋ฅผ ์‹ค์Šต ํ•ด๋ณด์ž์š”~ ๊ฒฐ๊ณผ๋Š”? ์œ„ ์ฒ˜๋Ÿผ ์ถœ๋ ฅ์ด ๋˜๋Š”๊ตฐ์š”. ์˜ค๋Š˜์€ ์—ฌ๊ธฐ๊นŒ์ง€... ์ด์–ด๋ณด๊ธฐ โ˜ž ํ‹ฐ์Šคํ† ๋ฆฌ ๋ธ”๋กœ๊ทธ ์Šคํ‚จ ๊พธ๋ฏธ๊ธฐ [spanํƒœ๊ทธ]