div

๐ŸŒฑ ์ฝ”๋ฆฐ์ด๋ฅผ ์œ„ํ•œ GUIDE/๐Ÿ—‚๏ธ OpenSource

9 CSS๋กœ ๋ฐ•์Šค ๋งŒ๋“ค๊ธฐ (๊ตฌํš ์ •ํ•ด์ฃผ๊ธฐ)

CSS๋กœ ๋ฐ•์Šค ๋งŒ๋“ค๊ธฐ (๊ตฌํš ์ •ํ•ด์ฃผ๊ธฐ) ๊ธด ๋ง ํ•  ๊ฒƒ ์—†์ด, ๋ฐ”๋กœ ์ฝ”๋“œ๋กœ ํ™•์ธํ•ด๋ณด์ž. CSS๊ฐ€ ์ดˆ๋ณด๋ผ์„œ ๊ตฌํš ์„ค์ •์ด ์–ด๋ ต๋‹ค๋ฉด, ๋‚˜์ฒ˜๋Ÿผ ์•„๋ž˜์˜ ์‚ฌ์ดํŠธ๋กœ ์—ฐ์Šต์„ ํ•ด๋ณด๋Š” ๊ฒƒ๋„ ์ข‹์„ ๊ฒƒ ๊ฐ™๋‹ค. ๐Ÿ’ก CSS Diner ํด๋ฆญ ์ฝ”๋“œ box1 box2 box3 * { background-color: gray; } .box1{ border: 3px solid blue; width: 200px; height: 200px; background-color: white; padding: 50px 100px 30px; /*pading top left ๋“ฑ์œผ๋กœ ํ•˜๋Š”๊ฒŒ ๋” ํŽธํ•จ */ margin-bottom: 30px; /*๊ณต๋ฐฑ*/ } .box2{ box-sizing: border-box; border: 3px solid red; wi..

๐ŸŒฑ ์ฝ”๋ฆฐ์ด๋ฅผ ์œ„ํ•œ GUIDE/๐Ÿ—‚๏ธ OpenSource

6 ํšŒ์›๊ฐ€์ž… ํผ ๋งŒ๋“ค๊ธฐ <form> <input>

ํšŒ์›๊ฐ€์ž… ํผ ๋งŒ๋“ค๊ธฐ ๊ณผ ์„ ํ†ตํ•ด ์–‘์‹์„ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋‹ค. ์˜ ํƒ€์ž…์„ ์ง€์ •ํ•ด์ฃผ๋ฉด ๋‹ค์–‘ํ•˜๊ฒŒ ํ™œ์šฉ์ด ๊ฐ€๋Šฅํ•˜๋‹ค. ๐Ÿ“ ์€ ๋‹ซ๋Š” ํƒœ๊ทธ๊ฐ€ ๋”ฐ๋กœ ์—†์–ด๋„ ๋œ๋‹ค. * ์กฐ๊ธˆ ๋” ์™„์„ฑ๋„ ์žˆ๋Š” ๋ฒ„์ „์˜ ํšŒ์›๊ฐ€์ž… ํผ ๋งํฌ1 ํšŒ์›๊ฐ€์ž… ํผ+ ํ…Œ๋‘๋ฆฌ + ์•„์ด์ฝ˜ (ํด๋ฆญ) ๋งํฌ2 HTML ๊ณผ CSS๋กœ ํšŒ์›๊ฐ€์ž… ํผ ๋งŒ๋“ค๊ธฐ + ๊ทธ๋ฆผ์žํšจ๊ณผ ๋„ฃ๊ธฐ (ํด๋ฆญ) ์ฝ”๋“œ ํŒฌํด๋Ÿฝ ํšŒ์›๊ฐ€์ž… ์•„์ด๋”” : ๋น„๋ฐ€๋ฒˆํ˜ธ : ์ด๋ฉ”์ผ : ๋‚˜์ด : ์—ฌ์„ฑ ๋‚จ์„ฑ ํšŒ์›๊ฐ€์ž… ํ•˜์‹œ๋ฉด ์ถ”์ฒจ์„ ํ†ตํ•ด ์‚ฌ์€ํ’ˆ์„ ๋“œ๋ฆฝ๋‹ˆ๋‹ค. ๊ฒฐ๊ณผ See the Pen by Kong Yang (@Kong-Yang) on CodePen.

์–‘์ฝฉ(Yangkong)
'div' ํƒœ๊ทธ์˜ ๊ธ€ ๋ชฉ๋ก