๐ŸŒˆ Div ๊ฐ€์šด๋ฐ์ •๋ ฌ

5241 ๋‹จ์–ด CSShtmlCSS

๐Ÿ”Ž Div


๋ฐ‘์˜ ์—ฐ์Šต์ฝ”๋“œ๋ฅผ ํ•œ๋ฒˆ ๋”ฐ๋ผํ•˜๊ธฐ๋งŒ ํ•˜๋ฉด ์ •๋ ฌ์— ๋Œ€ํ•œ ์ดํ•ด๋„๊ฐ€ ๋†’์•„์ง€๊ณ , css๋กœ ์œ„์น˜๋ฅผ ์กฐ์ •ํ•˜๋Š”๋ฐ ํฐ ๋ฌด๋ฆฌ๊ฐ€ ์—†์–ด์งˆ ๊ฒƒ์ด๋‹ค.

10๋ถ„์ด๋ฉด ๋๋‚˜๋‹ˆ๊นŒ ์ผ๋‹จ ํ•ด๋ณด์ž.

๋จผ์ € ๊ฐ€๋กœ๋กœ ์ •๋ ฌํ•˜๊ณ  ์‹ถ์€ div์˜ class๋Š” dot์ด๋ผ๊ณ  ํ•˜๊ณ , ์ •๋ ฌ๋œ div๋“ค์„ ๊ฐ์‹ธ์ค„ ํ•˜๋‚˜์˜ div๋ฅผ dot-wrapper๋ผ๊ณ  ํ•˜์ž.



๐Ÿ‘‰ dot


<div class="dot">1</div>
์œ„ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•ด์ฃผ๊ณ 

.dot{
    width: 100px;
    height : 100px;
    background-color: orangered;
    color: white;
    font-size: 3rem;
}

์ด๋ ‡๊ฒŒ css๋ฅผ ์„ค์ •ํ•ด์ฃผ๋ฉด ๋‹ค์Œ๊ณผ ๊ฐ™์€ ๋ชจ์–‘์ด ๋œ๋‹ค.


์ด์ œ ํฐํŠธ๋ฅผ 3rem ๋ฐ”๊พธ๊ณ  dot div ์•ˆ์— ์žˆ๋Š” ๊ธ€์ž ์š”์†Œ๋ฅผ ์ • ๊ฐ€์šด๋ฐ๋กœ ๋ฐฐ์น˜์‹œํ‚ค๊ธฐ ์œ„ํ•ด ๋‹ค์Œ์„ css์— ์ถ”๊ฐ€ํ•˜์ž

line-height: 100px;
text-align: center;
margin: 0 auto;

line-height
๋Š” ์†ํ•œ div์˜ ๋†’์ด์™€ ๋™์ผํ•˜๊ฒŒ ์ž‘์„ฑํ•˜๋ฉด ์ƒํ•˜์˜ ์ค‘๊ฐ„์— ๋ฐฐ์น˜๊ฐ€ ๋˜๊ณ  margin 0 auto์—์„œ 0์€ ์ƒํ•˜๋กœ ๊ฐ€์ง€๋Š” ๋งˆ์ง„๊ณผ auto๋Š” ์ขŒ์šฐ๋กœ ๊ฐ€์ง€๋Š” ๋งˆ์ง„์„ ์˜๋ฏธํ•œ๋‹ค. ๋”ฐ๋ผ์„œ ๊ฐœ๋ฐœ์ž๋„๊ตฌ๋กœ ํ™•์ธํ•˜๋ฉด ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์œ„์•„๋ž˜๋Š” ๋งˆ์ง„์ด ์—†์ง€๋งŒ ์ขŒ์šฐ๋กœ ๋งˆ์ง„์ด full๋กœ ์ฐจ๋Š” ๊ฒƒ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค.



๐Ÿ‘‰ dot-wrapper


dot wrapper๋ฅผ ์ถ”๊ฐ€ํ•˜์—ฌ ๋‹ค์Œ๊ณผ ๊ฐ™์ด html์„ ์ˆ˜์ •ํ•ด๋ณด์ž

<div class="dot-wrapper">
        <div class="dot">1</div>
        <div class="dot">2</div>
        <div class="dot">3</div>
        <div class="dot">4</div>
        <div class="dot">5</div>
</div>

์•„๋ฌด๋Ÿฐ css ์„ค์ •์„ ํ•ด์ฃผ์ง€ ์•Š์œผ๋ฉด dot div๋Š” ์„ธ๋กœ๋กœ ๋ฐฐ์น˜๊ฐ€ ๋œ๋‹ค.
์™œ๋ƒํ•˜๋ฉด div๋Š” ๋ธ”๋ก์š”์†Œ์ด๊ธฐ ๋•Œ๋ฌธ์— ํ•œ ์ธต์„ ์‚ฌ์šฉํ•˜๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.

dot-wrapper๋ฅผ 600px๋กœ ์žก์•„๋†“๊ณ  ์•ˆ์— ์žˆ๋Š” ์š”์†Œ๋“ค์„ ๊ฐ€์šด๋ฐ์— ์ •๋ ฌํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” inline-block์„ dot์— ์ ์šฉํ•ด์ฃผ์–ด์•ผ ํ•œ๋‹ค.

.dot{
    width: 100px;
    height : 100px;
    background-color: orangered;
    color: white;
    font-size: 3rem;
    line-height: 100px;
    text-align: center;
    display: inline-block;
}

dot์˜ css๋ฅผ ์œ„์™€ ๊ฐ™์ด ์ˆ˜์ •ํ•˜๋ฉด dot์€ ์ธ๋ผ์ธ ์†์„ฑ์„ ๊ฐ€์ง„ ๋ธ”๋ก์š”์†Œ๊ฐ€ ๋˜๊ธฐ ๋•Œ๋ฌธ์— ์™ผ์ชฝ๋ถ€ํ„ฐ ์ฐจ๋ก€์ฐจ๋ก€ ๋ธ”๋ก์ด ์Œ“์ด๊ฒŒ ๋œ๋‹ค.

๋”ฐ๋ผ์„œ dot-wrapper์˜ css์— text-align:center์„ ์ ์šฉํ•ด์ฃผ๋ฉด dot ํด๋ž˜์Šค๋“ค์€ inline ์†์„ฑ์— ์˜ํ•ด์„œ ๊ฐ€์šด๋ฐ๋กœ ์ •๋ ฌ์ด ๋œ๋‹ค.


๋ธ”๋ก์š”์†Œ ์‚ฌ์ด์— ๋นˆ๊ณต๊ฐ„์ด ์ƒ๊ธฐ๋Š” ์ด์œ ๋Š” ๋ธ”๋ก์ด inline ์†์„ฑ์„ ๊ฐ€์ง€๊ฒŒ ๋˜๋ฉด์„œ textํ™” ๋˜์–ด์„œ๋ผ๊ณ  ์ƒ๊ฐํ•˜๋ฉด ๋œ๋‹ค. divํƒœ๊ทธ๋“ค ์‚ฌ์ด์— enter๊ฐ€ ๋“ค์–ด๊ฐ”๊ธฐ ๋•Œ๋ฌธ์— ๊ทธ๊ฒƒ์„ ๋„์–ด์“ฐ๊ธฐ๋กœ ์ธ์‹ํ•˜๊ณ  ์ž‘์€ ๊ณต๊ฐ„์ด ์ƒ๊ธฐ๋Š” ๊ฒƒ์ด๋‹ค. ๋งŒ์•ฝ divํƒœ๊ทธ๋“ค์„ ํ•œ ์ค„๋„์–ด์“ฐ๊ธฐ ์—†์ด ์ผ๋ ฌ๋กœ ์ž‘์„ฑํ•œ๋‹ค๋ฉด ์ € ๊ณต๊ฐ„์„ ์‚ฌ๋ผ์งˆ ๊ฒƒ์ด๋‹ค.

์ข‹์€ ์›นํŽ˜์ด์ง€ ์ฆ๊ฒจ์ฐพ๊ธฐ