hr css๋ก ์ ์ ์๊ฒ ํ๊ฑฐ๋ ์ ์ ์ผ๋ก ๋๋ ์์์ ๋ฃ์ด์ ๊พธ๋ฐ ์ ์์ต๋๋ค. ์ํ์ ์ผ๋ก ๋จ๋ฝ๊ณผ ๋จ๋ฝ์ ๊ฐ๋ก์ ์ผ๋ก ๊ตฌ๋ถ ์ง์ ๋ ์ฌ์ฉํ๋ hr๋ก ๋ฉ๋ด๊ธฐ๋ฅผ ํด๋ณด์ธ์.
๋ซ๋ ํ๊ทธ ์์ด <hr> ํ๊ทธ ํ๋๋ก ๊ฐ๋จํ ๊ฐ๋ก์ ์ ๋ฃ์ ์ ์๊ณ <p> ํ๊ทธ๋ <br> ํ๊ทธ ์์ด ์ค ๋ฐ๊ฟ ๋ฉ๋๋ค.
๋ฐ๋ก ๋ฐ์ ์๋ ์ ๋ <hr> ํ๊ทธ๋ก ๋ง๋ค์ด์ก์ต๋๋ค.
์ฌ๊ธฐ์์ ๊ฐ์ด ์ฐ์ตํ๋ฉด์ ํด๋ณด๋ฉด ์ข์ต๋๋ค.โญโญโญ๐
์ด๋ ๊ฒ <hr> ํ๊ทธ์ ์ฌ๋ฌ ๊ฐ์ง ์์ฑ์ ๋ฃ์ ์ ์์ต๋๋ค.
<hr>์ด ๊ธฐ๋ณธ ํ๊ทธ์ ๋๋ค.
๋๋น์ ์ ๋ ฌ์ ํ ์ ์์ต๋๋ค.
์๋ hr ํ๊ทธ ๊ทธ๋ฆผ์ ์์๋๋ก ๋ณด์ธ์.
hr ๋์ด๋ px์ด๋ %๋ก ์ง์ ํ ์ ์์ด์.
์์ฑ์ ์ง์ ์ ์ฉํ๊ฑฐ๋ style๋ก ์ง์ ํ ์ ์์ด์.
์ ๋ ฌ์ ๊ฐ์ด๋ฐ ์ ๋ ฌ์ด ๊ธฐ๋ณธ์
๋๋ค.
1
<hr>
<br>
2
<hr width="300px">
3
<hr style="width:300px;">
<br>
4
<hr width="300px" align="left">
5
<hr style="width:300px;" align="left">
<br>
6
<hr width="300px" align="right">
7
<hr style="width:300px;" align="right">
<br>
8
<hr width="50%">
9
<hr style="width:50%;">
<br>
hr ํ๊ทธ ์๊ฒ
hr ํ๊ทธ๋ง ์ด์ฉํ๋ฉด border๊ฐ ๋๋ฌธ์ ์กฐ๊ธ ๋๊บผ์ ๋ณด์
๋๋ค. 1px๋ก ์ง์ ํด๋ ๋ณํ๊ฐ ์์ผ๋ ๋ค๋ฅธ ๋ฐฉ๋ฒ์ผ๋ก hr ๋๊ป๋ฅผ ์๊ฒ ์ฒ๋ฆฌํ ์ ์์ต๋๋ค.
1
<hr>
<br>
2
<hr style="border-width:1px 0 0 0; border-color:#fff;">
<br>
3
<hr style="border-width:1px 0 0 0; border-color:#000;">
<br>
4
<hr style="border-width:1px 0 0 0; border-color:#ccc;">
<br>
5
<hr style="border:0; height:1px; background: #bbb;">
<br>
6
<hr style="border:0; height:1px; background: #000;">
<br>
7
<hr style="border-width:1px 0 0 0; border-style:solid; border-color:#bbb;">
<br>
8 ์ ์
<hr style="border-width:1px 0 0 0; border-style:dotted; border-color:#bbb;">
<hr style="border-width:1px 0 0 0; border-style:dotted; border-color:red;">
<hr style="border-width:1px 0 0 0; border-style:dotted; border-color:green;">
<hr style="border-width:1px 0 0 0; border-style:dotted; border-color:deepskyblue;">
<br>
9 ์ ์
<hr style="border-width:1px 0 0 0; border-style:dashed; border-color:#bbb;">
<hr style="border-width:1px 0 0 0; border-style:dashed; border-color:red;">
<hr style="border-width:1px 0 0 0; border-style:dashed; border-color:green;">
<hr style="border-width:1px 0 0 0; border-style:dashed; border-color:deepskyblue;">
๋ ์ค๋ช
ํ์๋ฉด <hr> ํ๊ทธ๋ ์ด๋ ๊ฒ ๋์ด ์์ต๋๋ค.
border:1px๊ฐ 4๋ฉด์ผ๋ก ๋๋ ค์ธ์ฌ์๋ ํํ์์.
์๋ ๊ทธ๋ฆผ์ ๋ณด๋ฉด <hr> ํ๊ทธ๋ฅผ ๋ค๋ฃจ๋๋ฐ ๊ธ๋ฐฉ ์ดํดํ ์ ์์ต๋๋ค.
hr ํ๊ทธ size
<hr size="10px">
<hr size="20px">
<hr size="30px">
<hr size="40px">
<hr size="50px">
hr ํ๊ทธ์ ์์ ๋ฃ๊ธฐ
size ๊ฐ๊ณผ border ๊ฐ์ ๋ฌ๋ผ์.
ํ๊ทธ์ ๊ทธ๋ฆผ์ ํ์ธํด๋ณด์ธ์.
<hr color="red">
<hr color="green">
<hr color="blue">
<hr color="pink">
<hr color="skyblue">
<br>
<hr color="red" size="10px">
<hr color="green" size="10px">
<hr color="blue" size="10px">
<hr color="pink" size="10px">
<hr color="skyblue" size="10px">
<br>
<hr style="border:10px solid red;">
<hr style="border:10px solid green;">
<hr style="border:10px solid blue;">
<hr style="border:10px solid pink;">
<hr style="border:10px solid skyblue;">
hr ํ๊ทธ ์ ์ ๋ฑ ์ ๋ชจ์
<hr style="border:3px dotted green;">
<hr style="border:3px dashed green;">
<hr style="border:3px double green;">
<br>
<hr style="border:10px double green;">
<hr style="border:10px groove green;">
<hr style="border:10px ridge green;">
๊ฐ์ด๋ฐ๊ฐ ๋ณผ๋ก ํ์ด๋์์ด์. ์ ์ ๊ทธ๋ฆผ์ ๋ฐฉํฅ์ ํ์ธํด๋ณด์ธ์.(inset์ outset)
<hr style="border:10px inset green;">
<hr style="border:10px outset green;">
hrํ๊ทธ์ ๋์ด๊ฐ์ ์ค ์ ์์ต๋๋ค. ๊ทธ๋ฆฌ๊ณ ๋ฐฐ๊ฒฝ์๋ ๋ฃ์ ์ ์์ต๋๋ค.
<hr style="border:10px outset green; height:20px;">
<hr style="border:10px outset green; height:20px;">
<hr style="border:10px outset green; height:20px; background: yellow;">
hr ํ๊ทธ ์์ฉํ๊ธฐ
style๊ณผ css๋ก ์ฌ๋ฌ ๊ฐ์ง๋ก ์์ฉํด๋ณผ ์ ์์ต๋๋ค.
<hr style="height:20px; background: pink;">
<hr style="height:20px; background: skyblue;">
border ๊ฐ์ ์ง์ ํ์ง ์๊ณ ๋ฐฑ๊ทธ๋ผ์ด๋๋ฅผ ๋ฃ์์ด์.
์ด๋ ๊ฒ ๋๋ฉด border ์์์ ํ์ ์์์ผ๋ก ๊ทธ๋ฆฌ๊ณ ๊ตต๊ธฐ 1์ด ๊ธฐ๋ณธ์
๋๋ค.
ํ์ ์์์ ๋นผ์ฃผ๋ ค๋ฉด border: 0์ผ๋ก ๊ฐ์ ์
๋ ฅํ๋ฉด ๋ฉ๋๋ค.
<hr style="border:0; height:20px; background: pink;">
<hr style="border:0; height:20px; background: skyblue;">
<hr style="border:0; height:20px; background: yellow;">
<br>
border ์์์ ์ด์ธ๋ฆฌ๊ฒ ํด์ค ์ ๋ ์์ด์.
<hr style="border:1px solid red; height:20px; background: pink;">
<hr style="border:1px solid blue; height:20px; background: skyblue;">
<hr style="border:1px solid green; height:20px; background: yellow;">
hr ํ๊ทธ์ ๊ทธ๋ผ๋ฐ์ด์ ๋ฃ๊ธฐ
<hr style="border:0px; height:25px; background: linear-gradient(to left, red, blue);">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width">
<title>hr ๊ทธ๋ผ๋ฐ์ด์
</title>
<style>
.theme1 {border:0px; height:20px; background: linear-gradient(to left, red, blue);}
.theme2 {border:0px; height:20px; background: linear-gradient(to left, yellow, green);}
.theme3 {border:0px; height:20px; background: linear-gradient(to left, pink, skyblue);}
.theme4 {border:0px; height:20px; background: linear-gradient(to right, yellow, blue);}
.theme5 {border:0px; height:20px; background: linear-gradient(to left, red, yellow);}
</style>
</head>
<body>
<hr class="theme1">
<hr class="theme2">
<hr class="theme3">
<hr class="theme4">
<hr class="theme5">
</body>
</html>
hr ๊ทธ๋ผ๋ฐ์ด์
์์ ํฌ๋ช
๋๋ฅผ ๋ฃ์ด๋ดค์ต๋๋ค.
๊ทธ๋ผ๋ฐ์ด์
css๋ก ํฌํ ์ต์์ ์ฒ๋ฆฌํด์ค์ผ ํ๋ ์ด๋ฏธ์ง๋ css์์ ์ฒ๋ฆฌํด์ฃผ๋ ์๊ฐ ์ ์ฝ๋๋ค์.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width">
<title>hr ๊ทธ๋ผ๋ฐ์ด์
์์ฉ</title>
<style>
.theme1 {margin-bottom:30px; border:0px; height:20px; background: linear-gradient(transparent, rgba(255,0,0,0.2), transparent);}
.theme2 {margin-bottom:30px; border:0px; height:1px; background: linear-gradient(to left, transparent, rgba(255,0,0,1), transparent);}
.theme3 {margin-bottom:30px; border:0px; height:1px; background: linear-gradient(to left, transparent, rgba(0,0,0,.5), transparent);}
.theme4 {margin-bottom:30px; border:0px; height:1px; background: linear-gradient(to right, transparent, red, green, blue, transparent);}
.theme5 {margin-bottom:30px; border:0px; height:20px; background: linear-gradient(to right, transparent, yellow, blue, transparent);}
.theme6 {margin-bottom:30px; border:0px; height:20px; background: linear-gradient(to right, transparent, red, blue, yellow, transparent);}
.theme7 {margin-bottom:30px; border:0px; height:20px; background: linear-gradient(to left, transparent, rgba(0,43,198,0.5), transparent);}
</style>
</head>
<body>
<hr class="theme1">
<hr class="theme2">
<hr class="theme3">
<hr class="theme4">
<hr class="theme5">
<hr class="theme6">
<hr class="theme7">
</body>
</html>
<hr> ํ๊ทธ ๊พธ๋ฏธ๊ธฐ
<hr style="margin-bottom:30px; border:0px; height:1px; background: linear-gradient(to left, transparent, rgba(255,0,0,1), transparent);">
<hr style="margin-bottom:30px; width:700px; border:0px; height:1px; background: linear-gradient(to left, transparent, rgba(205,0,0,1), transparent);">
<hr style="margin-bottom:30px; width:500px; border:0px; height:1px; background: linear-gradient(to left, transparent, rgba(215,0,0,1), transparent);">
<hr style="margin-bottom:30px; width:300px; border:0px; height:1px; background: linear-gradient(to left, transparent, rgba(243,0,0,1), transparent);">
<hr style="margin-bottom:30px; width:100px; border:0px; height:1px; background: linear-gradient(to left, transparent, rgba(220,0,0,1), transparent);">
'HTML&CSS' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
์ฝ๋ ํธ์ง๊ธฐ ๋ญ ์ฐ์ธ์? ํน์ visual studio code? (0) | 2022.07.23 |
---|---|
์ด๋ฏธ์ง ๋งํฌ ํ ๋๋ฆฌ ์์ ๊ธฐ css (0) | 2022.07.14 |
white-space css(div ์ค๋ฐ๊ฟ ๋ฐฉ์ง css) (2) | 2021.12.06 |
background css ์ถ์ฝ, ํ๋ฒ์ ์ฐ๋ ๋ฐฉ๋ฒ, ์ค์ฌ์ ์จ๋ณด์ (1) | 2021.12.01 |
before after css ๊ฐ์์์ ์ ํ์ (0) | 2021.11.19 |