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

๊ฐ•ํ™”๋„๋ผ์ดํ”„/๋ธ”๋กœ๊ทธ & ์›น ์‚ฌ์ดํŠธ

ํ‹ฐ์Šคํ† ๋ฆฌ ๋ธ”๋กœ๊ทธ ์Šคํ‚จ ๊พธ๋ฏธ๊ธฐ [divํƒœ๊ทธ]

divํƒœ๊ทธ main

<div> ํƒœ๊ทธ

(1) ์ •์˜


๋ ˆ์ด์•„์›ƒ์„ ๋‚˜๋ˆŒ๋•Œ ์‚ฌ์šฉํ•˜๋Š” ํƒœ๊ทธ๋กœ Division์˜ ์•ฝ์ž์ด๋‹ค.

๋‹ค๋ฅธ ๋ถ€๊ฐ€ ๊ธฐ๋Šฅ์ด๋‚˜ ๋ณต์žก์„ฑ ์—†์ด ๋‹จ์ˆœํžˆ ๊ณต๊ฐ„์„ ๋‚˜๋ˆ„์–ด ํ™œ์šฉํ• ๋•Œ ์‚ฌ์šฉํ•˜๋‹ค๋ณด๋‹ˆ ์ƒ๋‹นํžˆ ๋งŽ์ด ์‚ฌ์šฉํ•˜๋Š” ํƒœ๊ทธ์ด๋‹ค. ์‹ค์ œ๋กœ ๋ธ”๋กœ๊ทธ ํฌ์ŠคํŒ…์‹œ ๋งŽ์ด ๋‹ฌ๋ ค ์žˆ๋Š” ๊ฒƒ์„ ๋ณผ ์ˆ˜ ์žˆ๋‹ค.



(2) ์‚ฌ์šฉ๋ฒ•


์ด์ „์— ๋ดค๋˜ <section>์ฒ˜๋Ÿผ ์›ํ•˜๋Š” ๊ณต๊ฐ„์— ํƒœ๊ทธ๋ฅผ ์—ด์–ด์ฃผ๊ณ  ์•ˆ์— ๋‚ด์šฉ์„ ์ ์œผ๋ฉด ๋œ๋‹ค.

๊ตฌ์—ญ์„ ๋‚˜๋ˆˆ ํ‹ฐ๋ฅผ ๋‚ด๊ธฐ ์œ„ํ•ด css์™€ ๊ฐ™์ด ์‚ฌ์šฉํ•˜๋ฉด ๋ณด๊ธฐ ์ข‹๊ฒŒ ๊ณต๊ฐ„์„ ๋‚˜ํƒ€๋‚ผ ์ˆ˜ ์žˆ๋‹ค.


<div> : ์‹œ์ž‘, ์˜คํ”ˆ ํƒœ๊ทธ

</div> : ์ข…๋ฃŒ, ํด๋กœ์ฆˆ ํƒœ๊ทธ


html์—์„œ css์‚ฌ์šฉํ•˜๊ธฐ : style ์†์„ฑ๋ฅผ ์ด์šฉ


(3) ์‹ค์Šต


ATOM ์œผ๋กœ ์ด์šฉํ•˜์—ฌ divํƒœ๊ทธ๋ฅผ ์‹ค์Šต ํ•ด๋ณด์ž.

divํƒœ๊ทธ ์‹ค์Šต

<div>ํƒœ๊ทธ์™€ ํ•จ๊ป˜ <section>ํƒœ๊ทธ๋ฅผ ํ•จ๊ป˜ ์จ๋ณด๋ฉฐ ๋น„๊ตํ•ด๋ณด๋ ค๊ณ  ํ•˜๋Š”๋ฐ์š”,


divํƒœ๊ทธ ์›น์‹ค์Šต

<div>ํƒœ๊ทธ์™€ <section>ํƒœ๊ทธ ์‚ฌ์ด์— ๋‹ค๋ฅธ์ ์€ ์—†์–ด ๋ณด์ธ๋‹ค... ๋ญ๊ฐ€ ๋‹ค๋ฅธ๊ฑฐ์ง€?!.,

์ƒ‰์ƒ์€ style์†์„ฑ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ ์šฉํ•˜์˜€์Šต๋‹ˆ๋‹ค.


์˜ค๋Š˜์€ ์—ฌ๊ธฐ๊นŒ์ง€...


๋ฐ˜์‘ํ˜•

"์ด ํฌ์ŠคํŒ…์€ ์ฟ ํŒก ํŒŒํŠธ๋„ˆ์Šค ํ™œ๋™์˜ ์ผํ™˜์œผ๋กœ, ์ด์— ๋”ฐ๋ฅธ ์ผ์ •์•ก์˜ ์ˆ˜์ˆ˜๋ฃŒ๋ฅผ ์ œ๊ณต๋ฐ›์Šต๋‹ˆ๋‹ค."