FrontEnd/css

[css]<hr> ํƒœ๊ทธ ์ƒ‰์ƒ ๋ฐ”๊พธ๋Š” ๋ฐฉ๋ฒ•

๊น€ํ‰๋ฒ”๋‹˜ 2022. 6. 25. 23:16
๋ฐ˜์‘ํ˜•

<hr>ํƒœ๊ทธ ์ƒ‰์ƒ ๋ณ€๊ฒฝ๋ฐฉ๋ฒ•

๐Ÿ“‘<hr> ํƒœ๊ทธ๋ž€?

hr ํƒœ๊ทธ๋ฅผ ์ด์šฉํ•˜๋ฉด ์ฝ˜ํ…์ธ  ์ค‘๊ฐ„์— ์„ ์„ ๊ทธ์„ ์ˆ˜ ์žˆ๋‹ค.

๋ณดํ†ต ์ฃผ์ œ๊ฐ€ ๋ณ€๊ฒฝ์ด ๋  ๋•Œ ์ด์šฉํ•˜๋Š” ํƒœ๊ทธ์ด๋‹ค.

 

<hr> ํƒœ๊ทธ๋Š” ๊ธฐ๋ณธ์ ์œผ๋กœ ๊ฒ€์€์ƒ‰์œผ๋กœ ์ œ๊ณต๋˜๊ณ  ์žˆ๋‹ค.

๋งŒ์•ฝ์— ํ•ด๋‹น ์ƒ‰์ƒ์„ ๋ฐ”๊พธ๊ณ  ์‹ถ๋‹ค๋ฉด?

 

๐Ÿงก<hr>ํƒœ๊ทธ ์„  ์ƒ‰์ƒ ๋ณ€๊ฒฝ ์ฝ”๋“œ

hr {
    background:pink;
    height:1px;
    border:0;
}

 

hr ํƒœ๊ทธ๋ฅผ ๋ณ€๊ฒฝํ•˜๋ ค๋ฉด background๋‚˜ color ์†์„ฑ๋งŒ ๋ณ€๊ฒฝํ•˜๋ฉด ์ƒ‰์ƒ์ด ๋ณ€ํ•˜์ง€ ์•Š๋Š”๋‹ค.

height๋ฅผ 1px์„ ์ฃผ๊ณ  background๋ฅผ ์ฃผ๋ฉด ์ƒ‰์ƒ์ด ๋ณ€ํ•˜๋Š” ๊ฑธ ํ™•์ธํ•  ์ˆ˜ ์žˆ๊ณ 

์ด๋•Œ border๋Š” 0์œผ๋กœ ๋งž์ถฐ์ค€๋‹ค.

 

<hr>ํƒœ๊ทธ ์ปฌ๋Ÿฌ ๋ณ€๊ฒฝ

์ค„ ๋„“์ด๋ฅผ ํ‚ค์šฐ๊ณ  ์‹ถ์„ ๊ฒฝ์šฐ height๋ฅผ ์กฐ์ ˆํ•ด์ฃผ๋ฉด ๋!

๋ฐ˜์‘ํ˜•