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

๐Ÿ‘ฉ‍๐Ÿ’ป Learn programming/HTML, CSS

(2)
[CSS] CSS ๋ฐ•์Šค ๋ชจ๋ธ (box model) โœ… CSS ๋ฐ•์Šค ์˜์—ญ ๋ฐ”๊นฅ ์—ฌ๋ฐฑ ์˜์—ญ (Margin Area) ํ…Œ๋‘๋ฆฌ ์˜์—ญ (Border Area) ์•ˆ์ชฝ ์—ฌ๋ฐฑ ์˜์—ญ (Padding Area) ๋‚ด์šฉ ์˜์—ญ (Content Area) โœ… ๊ฐ ์˜์—ญ์„ ๊พธ๋ฐ€ ๋•Œ ์‚ฌ์šฉํ•˜๋Š” ์†์„ฑ ๋ฐ”๊นฅ ์—ฌ๋ฐฑ : margin ์†์„ฑ ํ…Œ๋‘๋ฆฌ : border ์†์„ฑ ์•ˆ์ชฝ ์—ฌ๋ฐฑ : padding ์†์„ฑ ๋ฐ•์Šค ๊ฐ€๋กœ ํฌ๊ธฐ : width ์†์„ฑ ๋ฐ•์Šค ์„ธ๋กœ ํฌ๊ธฐ : height ์†์„ฑ ๋ฐ•์Šค ํฌ๊ธฐ ๊ธฐ์ค€ : box-sizing ์†์„ฑ ๋ฐ•์Šค์˜ ๋ฐฐ๊ฒฝ : background ์†์„ฑ โœ… ์†์„ฑ ์ถ•์•ฝ ํ‘œํ˜„ (shorthand) 4๊ฐœ ์†์„ฑ : top, right, bottom, left (์‹œ๊ณ„๋ฐฉํ–ฅ !) 3๊ฐœ ์†์„ฑ : top, right/left, bottom 2๊ฐœ ์†์„ฑ : top/bottom, right/left 1๊ฐœ ์†์„ฑ ..
[์ŠคํŒŒ๋ฅดํƒ€] ์›น๊ฐœ๋ฐœ ์ข…ํ•ฉ๋ฐ˜ 1์ฃผ์ฐจ - HTML, CSS, Javascript 1. HTML HTML์€ ๋ผˆ๋Œ€, CSS๋Š” ๊พธ๋ฏธ๊ธฐ HTML ๊ธฐ์ดˆ - HTML๋Š” ํฌ๊ฒŒ head์™€ body๋กœ ๊ตฌ์„ฑ - head์—๋Š” ํŽ˜์ด์ง€ ์†์„ฑ์ •๋ณด, - body์—๋Š” ํŽ˜์ด์ง€ ๋‚ด์šฉ head ์•ˆ์— ๋“ค์–ด๊ฐ€๋Š” ๋Œ€ํ‘œ ์š”์†Œ๋“ค : meta, script, link, title body ์•ˆ์— ๋“ค์–ด๊ฐ€๋Š” ๋Œ€ํ‘œ ์š”์†Œ๋“ค ๊ตฌ์—ญ ๋‚˜๋ˆ„๊ธฐ ๋ฌธ๋‹จ bullet point!1 bullet point!2 h1 ์ œ๋ชฉ์„ ๋‚˜ํƒ€๋‚ด๋Š” ํƒœ๊ทธ. ํŽ˜์ด์ง€๋งˆ๋‹ค ํ•˜๋‚˜์”ฉ ์จ์ฃผ๋ฉด ๊ตฌ๊ธ€ ๊ฒ€์ƒ‰ ์ž˜ ๋จ. h2 ์†Œ์ œ๋ชฉ ์ด์™ธ์— h3~h6 span ํƒœ๊ทธ: ํŠน์ • ๊ธ€์ž๋ฅผ ๊พธ๋ฐˆ a ํƒœ๊ทธ: ํ•˜์ดํผ๋งํฌ img ํƒœ๊ทธ: input ํƒœ๊ทธ: button ํƒœ๊ทธ: ๋ฒ„ํŠผ textarea ํƒœ๊ทธ: text๋ฅผ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ๋Š” ๊ณณ โ€‹ ๐Ÿฐ ๋‹จ์ถ• ํ‚ค TIP! โ‘  ์ •๋ ฌ ๋‹จ์ถ• ํ‚ค - window : Ctrl + A..