๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
๋ฐ˜์‘ํ˜•

HTML5 & CSS355

[HTML5 & CSS3] ์›น์—์„œ ์ƒ‰์ƒ ํ‘œํ˜„ํ•˜๊ธฐ โ–ถ ์›น์—์„œ ์ƒ‰์ƒ ํ‘œํ˜„ํ•˜๊ธฐ * 16์ง„์ˆ˜ ํ‘œ๊ธฐ๋ฒ• ์˜ˆ) #ff0000 ๋“ฑ๋“ฑ โ€‹ * RGB์™€ RGBA ํ‘œ๊ธฐ๋ฒ• rgb(red ๊ฐ’, green ๊ฐ’, blue ๊ฐ’); rgba(red ๊ฐ’, green ๊ฐ’, blud ๊ฐ’, alpha ๊ฐ’); โ€‹ * hsl๊ณผ hsla ํ‘œ๊ธฐ๋ฒ• RGB์™ธ์— ์ƒ‰์ƒ์„ ํ‘œ๊ธฐํ•˜๋Š” ๋ฐฉ๋ฒ•. hue(์ƒ‰์ƒ), saturation(์ฑ„๋„), lightness(๋ฐ๊ธฐ) hsl(, , ); hsla(, , , ); โ€‹ * ์ƒ‰์ƒ ์ด๋ฆ„ ํ‘œ๊ธฐ๋ฒ• ์ƒ‰ ์ด๋ฆ„์œผ๋กœ ํ‘œ๊ธฐํ•˜๋Š” ๋ฒ• ์˜ˆ) white, red, yellow ๋“ฑ โ€‹ * ์ƒ‰์ƒ ์ถ”์ถœ ์‚ฌ์ดํŠธ ์ด์šฉํ•˜๊ธฐ ๋Œ€ํ‘œ์ ์ธ ์‚ฌ์ดํŠธ๊ฐ€ Color Picker 2021. 2. 3.
[HTML5 & CSS3] ๋ชฉ๋ก ์Šคํƒ€์ผ โ–ถ ๋ชฉ๋ก ์Šคํƒ€์ผ * list-style-type ์†์„ฑ - ๋ชฉ๋ก์˜ ๋ถˆ๋ฆฟ๊ณผ ๋ฒˆํ˜ธ ์Šคํƒ€์ผ ์ง€์ •ํ•˜๊ธฐ ์ˆœ์„œ ์—†๋Š” ๋ชฉ๋ก์˜ ๊ฒฝ์šฐ, ๋ชฉ๋ก ์•ž์— ๋‹ค์–‘ํ•œ ๋ถˆ๋ฆฟ์„ ๋„ฃ์„ ์ˆ˜ ์žˆ๊ณ  ์ˆœ์„œ ๋ชฉ๋ก์—์„œ๋Š” ๋ฒˆํ˜ธ ์Šคํƒ€์ผ์„ ์ง€์ •ํ•  ์ˆ˜ ์žˆ๋‹ค. ๋ถˆ๋ฆฟ ์—†์•จ๋• none ๊ฐ’ ์ž…๋ ฅ. ๋ถˆ๋ฆฟ ๋ชจ์–‘ ๋ฐ”๊พธ๊ธฐ๋„ ๊ฐ€๋Šฅ. ๊ธฐ๋ณธํ˜•) list-style-type : none / ์ˆœ์„œ ์—†๋Š” ๋ชฉ๋ก์˜ ๋ถˆ๋ฆฟ / ์ˆœ์„œ ๋ชฉ๋ก์˜ ๋ฒˆํ˜ธ โ€‹ * list-style-image ์†์„ฑ - ๋ถˆ๋ฆฟ ๋Œ€์‹  ์ด๋ฏธ์ง€ ๋„ฃ๊ธฐ ๊ธฐ๋ณธํ˜•) list-style-image : ์ด๋ฏธ์ง€ / none = url(์ด๋ฏธ์ง€ ํŒŒ์ผ ๊ฒฝ๋กœ) * list-style-position ์†์„ฑ - ๋ชฉ๋ก์— ๋“ค์—ฌ ์“ฐ๋Š” ํšจ๊ณผ ๋‚ด๊ธฐ ๊ธฐ๋ณธํ˜•) list-style-position : inside(๋ถˆ๋ฆฟ์ด๋‚˜ ์ˆซ์ž๋ฅผ ์•ˆ์ชฝ์œผ๋กœ ๋“ค์—ฌ ์“ด๋‹ค) / outs.. 2021. 2. 3.
[HTML5 & CSS3] ๋ฌธ๋‹จ ์Šคํƒ€์ผ โ–ถ ๋ฌธ๋‹จ ์Šคํƒ€์ผ * direction ์†์„ฑ - ๊ธ€์ž ์“ฐ๊ธฐ ๋ฐฉํ–ฅ ์ง€์ •ํ•˜๊ธฐ ๊ธฐ๋ณธํ˜•) direction : ltr(์™ผ์ชฝ์—์„œ ์˜ค๋ฅธ์ชฝ์œผ๋กœ) / rtl(์˜ค๋ฅธ์ชฝ์—์„œ ์™ผ์ชฝ์œผ๋กœ) โ€‹ * text-align ์†์„ฑ - ํ…์ŠคํŠธ ์ •๋ ฌํ•˜๊ธฐ ๊ธฐ๋ณธํ˜•) text-align : start(ํ˜„์žฌ ํ…์ŠคํŠธ ์ค„์˜ ์‹œ์ž‘ ์œ„์น˜์— ๋งž์ถ”์–ด ๋ฌธ๋‹จ์„ ์ •๋ ฌํ•œ๋‹ค) / end(ํ˜„์žฌ ํ…์ŠคํŠธ ์ค„์˜ ๋ ์œ„์น˜์— ๋งž์ถ”์–ด ๋ฌธ๋‹จ์„ ์ •๋ ฌํ•œ๋‹ค) / left(์™ผ์ชฝ์— ๋งž์ถ”์–ด ๋ฌธ๋‹จ์„ ์ •๋ ฌ) / right(์˜ค๋ฅธ์ชฝ์— ๋งž์ถ”์–ด ๋ฌธ๋‹จ์„ ์ •๋ ฌ) / center(๊ฐ€์šด๋ฐ์— ๋งž์ถ”์–ด ๋ฌธ๋‹จ์„ ์ •๋ ฌ) / justify(์–‘์ชฝ์— ๋งž์ถ”์–ด ๋ฌธ๋‹จ์„ ์ •๋ ฌ) / match-parent(๋ถ€๋ชจ ์š”์†Œ๋ฅผ ๋”ฐ๋ผ ๋ฌธ๋‹จ์„ ์ •๋ ฌ) โ€‹ * text-justify ์†์„ฑ - ์ •๋ ฌ ์‹œ ๊ณต๋ฐฑ ์กฐ์ ˆํ•˜๊ธฐ ๊ธฐ๋ณธํ˜•) text-justify :.. 2021. 2. 3.
[HTML5 & CSS3] CSS ๊ธฐ์ดˆ - ํ…์ŠคํŠธ ์Šคํƒ€์ผ โ–ถ ํ…์ŠคํŠธ ์Šคํƒ€์ผ * color ์†์„ฑ - ๊ธ€์ž ์ƒ‰ ์ง€์ •ํ•˜๊ธฐ ์›น ๋ฌธ์„œ์—์„œ ๋ฌธ๋‹จ์ด๋‚˜ ์ œ๋ชฉ ๋“ฑ์˜ ํ…์ŠคํŠธ์—์„œ ์‚ฌ์šฉ๋˜๋Š” ๊ธ€์ž ์ƒ‰์„ ๋ฐ”๊ฟ€ ๋•Œ ์‚ฌ์šฉ. ๊ธฐ๋ณธํ˜• โ€‹→ color: โ€‹ * text-decoration ์†์„ฑ - ํ…์ŠคํŠธ์— ์ค„ ํ‘œ์‹œํ•˜๊ธฐ / ์—†์• ๊ธฐ ํ…์ŠคํŠธ์— ๋ฐ‘์ค„์„ ๊ธ‹๊ฑฐ๋‚˜ ์ทจ์†Œ ์„ ์„ ํ‘œ์‹œํ•  ์ˆ˜ ์žˆ๋‹ค. ๋˜ํ•œ ์›น ๋ฌธ์„œ์˜ ๊ธฐ์กด ๋‚ด์šฉ์„ ์ทจ์†Œํ•˜๊ณ  ์ƒˆ๋กœ์šด ๋‚ด์šฉ์„ ์ž…๋ ฅํ•  ๋•Œ ์ทจ์†Œ ์„ ์„ ์ด์šฉํ•˜๋ฉด ๊ธฐ์กด ๋‚ด์šฉ์„ ์™„์ „ํžˆ ์‚ญ์ œํ•˜์ง€ ์•Š๊ณ  ์ƒˆ๋กœ์šด ๋‚ด์šฉ๊ณผ ๋น„๊ตํ•˜๋ฉฐ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค. โ€‹ * text-transform ์†์„ฑ - ํ…์ŠคํŠธ ๋Œ€·์†Œ๋ฌธ์ž ๋ณ€ํ™˜ํ•˜๊ธฐ โ€‹ * text-shadow ์†์„ฑ - ํ…์ŠคํŠธ์— ๊ทธ๋ฆผ์ž ํšจ๊ณผ ์ถ”๊ฐ€ํ•˜๊ธฐ โ€‹ * white-space ์†์„ฑ - ๊ณต๋ฐฑ ์ฒ˜๋ฆฌํ•˜๊ธฐ โ€‹ * letter-spacing๊ณผ word-spacing ์†์„ฑ - ํ…์ŠคํŠธ.. 2021. 2. 3.
[HTML5 & CSS3] CSS ๊ธฐ์ดˆ โ–ถ CSS css๋ฅผ ์ด์šฉํ•˜๋ฉด html๋กœ ์ž‘์„ฑ๋œ ๋‚ด์šฉ์€ ๊ทธ๋Œ€๋กœ ๋‘๊ณ  ๋Œ€์ƒ ๊ธฐ๊ธฐ์— ๋งž๊ฒŒ CSS๋งŒ ๋ฐ”๊พธ์–ด ์ฃผ๋ฉด ๊ฐ™์€ ๋‚ด์šฉ์„ ์—ฌ๋Ÿฌ ๊ธฐ๊ธฐ์— ์–ด์šธ๋ฆฌ๊ฒŒ ๋ณผ ์ˆ˜ ์žˆ๋‹ค. (ํƒœ๋ธ”๋ฆฟ, ํœด๋Œ€ํฐ ๋“ฑ) ๋ชจ๋“  ์Šคํƒ€์ผ ์ •๋ณด๋Š” ์‚ฌ์ด์— ์ •์˜ ํ•  ๊ฒƒ. * ๋‚ด๋ถ€ ์Šคํƒ€์ผ ์‹œํŠธ * ์™ธ๋ถ€ ์Šคํƒ€์ผ ์‹œํŠธ * ์ธ๋ผ์ธ ์Šคํƒ€์ผ ์Šคํƒ€์ผ ์‹œํŠธ๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š๊ณ  ์Šคํƒ€์ผ์„ ์ ์šฉํ•  ๋Œ€์ƒ์— ์ง์ ‘ ํ‘œ์‹œํ•˜๋Š” ๊ฒƒ. * ์ „์ฒด ์„ ํƒ์ž - ๋ชจ๋“  ์š”์†Œ์— ์Šคํƒ€์ผ ์ ์šฉํ•˜๊ธฐ ์ „์ฒด ์„ ํƒ์ž๋Š” ๋ง ๊ทธ๋Œ€๋กœ ์Šคํƒ€์ผ์„ ๋ชจ๋“  ์š”์†Œ์— ์ ์šฉํ•  ๋•Œ ์‚ฌ์šฉํ•œ๋‹ค. ์ฃผ๋กœ ๋ชจ๋“  ํ•˜์œ„ ์š”์†Œ์— ํ•œ๊บผ๋ฒˆ์— ์Šคํƒ€์ผ์„ ์ ์šฉํ•  ๋•Œ ์‚ฌ์šฉํ•œ๋‹ค. ์ „์ฒด ์„ ํƒ์ž๋กœ๋Š” *๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค. ๋˜ํ•œ ์ „์ฒด ์„ ํƒ์ž๋Š” ๋ฌธ์„œ์˜ ์—ฌ๋ฐฑ์ด๋‚˜ ๊ธ€๊ผด ํฌ๊ธฐ ๋“ฑ ๊ธฐ๋ณธ ์Šคํƒ€์ผ์„ ์ดˆ๊ธฐํ™”ํ•  ๋•Œ ์‚ฌ์šฉํ•œ๋‹ค. * { margin: 0; padding: 0; } * ํƒœ๊ทธ ์„ .. 2021. 2. 3.
[HTML5 & CSS3] ์ˆ™์ œ (ํŽ˜์Šคํ‹ฐ๋ฒŒ ํŽ˜์ด์ง€ ๋งŒ๋“ค๊ธฐ) โ–ถ๊ณผ์ • -์œ—๋ถ€๋ถ„์€ 4์นธ, ๋ฐ‘๋ถ€๋ถ„์€ 3์นธ์ด๋ผ์„œ ์ค„ ๋งž์ถ”๊ธฐ๊ฐ€ ํž˜๋“ค์—ˆ๋‹ค ์ผ๋‹จ ์‚ฌ์ง„๋ถ€ํ„ฐ ๋„ฃ๊ณ  ๋ณด๊ธฐ๋กœํ•จ. -์ค„๋„ ์•ˆ๋งž๊ณ  ์‚ฌ์ง„๋„ ํฌ๊ธฐ๊ฐ€ ๋“ค์ญ‰๋‚ ์ญ‰. ์ด์ฒด์  ๋‚œ๊ตญ. ํ•ด๊ฒฐ๋ฐฉ๋ฒ•์ด ๋„์ €ํžˆ ์ƒ๊ฐ์ด ์•ˆ๋‚˜์„œ ํ•œ์ˆจ ์ž๊ธฐ๋กœํ•จ -ํ…Œ์ด๋ธ” ์† ํ…Œ์ด๋ธ”์„ ๋งŒ๋“ค๋ฉด ์–ด๋–จ๊นŒ์‹ถ์–ด์„œ ๋งŒ๋“ค์–ด๋ดค๋”๋‹ˆ ์ค„์ด ๊ฒน์นœ๋‹ค. -ํ•œ์ˆจ ์ž๊ณ  ์ผ์–ด๋‚˜์„œ ์ƒ๊ฐํ•ด๋ณด๋‹ˆ 12์—ด๋กœ ํ•ด์„œ ์œ—๋ถ€๋ถ„์€ 3๊ฐœ์”ฉ, ๋ฐ‘๋ถ€๋ถ„์€ 4๊ฐœ์”ฉ ๋ณ‘ํ•ฉํ•˜๋ฉด ์–ด๋–จ๊นŒ ๋ผ๋Š” ์ƒ๊ฐ์ด ๋ฒˆ๋œฉ ๋“ค์—ˆ๋‹ค. ๊ฒฐ๊ณผ๋Š” ์„ฑ๊ณต! ํ•˜์ง€๋งŒ ์•„์ง ์‚ฌ์ง„ํฌ๊ธฐ๋ฅผ ํ•ด๊ฒฐํ•˜์ง€ ๋ชปํ–ˆ๋‹ค. ์•„์ด์ฝ˜๋„ ๋„ฃ์–ด์•ผํ•˜๊ณ ... -์‚ฌ์ง„์„ ๋ฐฐ๊ฒฝ์œผ๋กœ ๋„ฃ์œผ๋‹ˆ๊นŒ ํ•ด๊ฒฐ๋จ. ๊ทผ๋ฐ ๊ฐ€์šด๋ฐ ์ค„ ๊ฐ„๊ฒฉ์ด ๋งž์ง€์•Š๋‹ค. '์ „๋‚จ ์ˆœ์ฒœ์‹œ' ์˜ ์‚ฌ์ง„๋„ ์งค๋ ค์„œ ๋‚˜์˜ค๊ณ ... ์‚ฌ์ง„์„ ์ข€ ๋” ํฌ๊ฒŒ ์ˆ˜์ •ํ–ˆ๋‹ค. โ–ถ ์™„์„ฑ๋ณธ -์‚ฐ์ •ํ˜ธ์ˆ˜ ๋ช…์„ฑ์‚ฐ ์–ต์ƒˆ๊ฝƒ ์ถ•์ œ~์˜๊ด‘ ๋ถˆ๊ฐ‘์‚ฐ์ƒ์‚ฌํ™”์ถ•์ œ ์นธ ๋ผ์ธ ๊ฐ„๊ฒฉ์ด ์ด์ƒํ•ด์ ธ์„œ ๊ณ ์น˜๋Š๋ผ.. 2021. 2. 3.
๋ฐ˜์‘ํ˜•