๋กœ๋”ฉ ์ค‘์ž…๋‹ˆ๋‹ค.
๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

hr css๋กœ ์„ ์„ ์–‡๊ฒŒ ํ•˜๊ฑฐ๋‚˜ ์ ์„ ์œผ๋กœ ๋˜๋Š” ์ƒ‰์ƒ์„ ๋„ฃ์–ด์„œ ๊พธ๋ฐ€ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ˆ˜ํ‰์„ ์œผ๋กœ ๋‹จ๋ฝ๊ณผ ๋‹จ๋ฝ์„ ๊ฐ€๋กœ์„ ์œผ๋กœ ๊ตฌ๋ถ„ ์ง€์„ ๋•Œ ์‚ฌ์šฉํ•˜๋Š” hr๋กœ ๋ฉ‹๋‚ด๊ธฐ๋ฅผ ํ•ด๋ณด์„ธ์š”.

๋‹ซ๋Š” ํƒœ๊ทธ ์—†์ด <hr> ํƒœ๊ทธ ํ•˜๋‚˜๋กœ ๊ฐ„๋‹จํžˆ ๊ฐ€๋กœ์„ ์„ ๋„ฃ์„ ์ˆ˜ ์žˆ๊ณ  <p> ํƒœ๊ทธ๋‚˜ <br> ํƒœ๊ทธ ์—†์ด ์ค„ ๋ฐ”๊ฟˆ ๋ฉ๋‹ˆ๋‹ค.
๋ฐ”๋กœ ๋ฐ‘์— ์žˆ๋Š” ์„ ๋„ <hr> ํƒœ๊ทธ๋กœ ๋งŒ๋“ค์–ด์กŒ์Šต๋‹ˆ๋‹ค.

 

hr ํƒœ๊ทธ css

 

์—ฌ๊ธฐ์—์„œ ๊ฐ™์ด ์—ฐ์Šตํ•˜๋ฉด์„œ ํ•ด๋ณด๋ฉด ์ข‹์Šต๋‹ˆ๋‹ค.โญโญโญ๐Ÿ‘‡

 

JS Bin

Sample of the bin:

jsbin.com


์ด๋ ‡๊ฒŒ <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 ํƒœ๊ทธ

 

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 ํƒœ๊ทธ ์–‡๊ฒŒ&#44; ์ ์„ 

 

 

๋” ์„ค๋ช…ํ•˜์ž๋ฉด <hr> ํƒœ๊ทธ๋Š” ์ด๋ ‡๊ฒŒ ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค.
border:1px๊ฐ€ 4๋ฉด์œผ๋กœ ๋‘˜๋ ค์‹ธ์—ฌ์žˆ๋Š” ํ˜•ํƒœ์—์š”.
์•„๋ž˜ ๊ทธ๋ฆผ์„ ๋ณด๋ฉด <hr> ํƒœ๊ทธ๋ฅผ ๋‹ค๋ฃจ๋Š”๋ฐ ๊ธˆ๋ฐฉ ์ดํ•ดํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

hr ์†์„ฑ

 

hr ํƒœ๊ทธ size

    <hr size="10px">
    <hr size="20px">
    <hr size="30px">
    <hr size="40px">
    <hr size="50px">
hr ํƒœ๊ทธ size

 

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 color css

 

hr ํƒœ๊ทธ ์ ์„  ๋“ฑ ์„ ๋ชจ์–‘

<hr style="border:3px dotted green;">

hr ์ ์„ 

 

<hr style="border:3px dashed green;">

hr ์ ์„ 

 

<hr style="border:3px double green;">
<br>
<hr style="border:10px double green;">

hr css ์„ ๋ชจ์–‘

<hr style="border:10px groove green;">

hr css

<hr style="border:10px ridge green;">

hr css border

 

 

๊ฐ€์šด๋ฐ๊ฐ€ ๋ณผ๋ก ํŠ€์–ด๋‚˜์™”์–ด์š”. ์„ ์˜ ๊ทธ๋ฆผ์ž ๋ฐฉํ–ฅ์„ ํ™•์ธํ•ด๋ณด์„ธ์š”.(inset์™€ outset)

<hr style="border:10px inset green;">

hr border css

<hr style="border:10px outset green;">

hr css ๊ทธ๋ฆผ์ž

 

 

hrํƒœ๊ทธ์— ๋†’์ด๊ฐ’์„ ์ค„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ๋ฐฐ๊ฒฝ์ƒ‰๋„ ๋„ฃ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

<hr style="border:10px outset green; height:20px;">

hr css border

<hr style="border:10px outset green; height:20px;">
<hr style="border:10px outset green; height:20px; background: yellow;">

hr css ๊ตต๊ธฐ

 

hr ํƒœ๊ทธ ์‘์šฉํ•˜๊ธฐ

style๊ณผ css๋กœ ์—ฌ๋Ÿฌ ๊ฐ€์ง€๋กœ ์‘์šฉํ•ด๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

<hr style="height:20px; background: pink;">
<hr style="height:20px; background: skyblue;">

hr ์ƒ‰๊น”๋„ฃ๊ธฐ

 

 

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 css ์ƒ‰์ƒ

 

hr ํƒœ๊ทธ์— ๊ทธ๋ผ๋ฐ์ด์…˜ ๋„ฃ๊ธฐ

<hr style="border:0px; height:25px; background: linear-gradient(to left, red, blue);">

hr gradient css

<!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

 

 

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> ํƒœ๊ทธ ๊พธ๋ฏธ๊ธฐ

<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);">

hr ๊พธ๋ฏธ๊ธฐ ๊ทธ๋ผ๋ฐ์ด์…˜

 

 

์œ ๋ฃŒ ์ด๋ฏธ์ง€ ์‚ฌ์ดํŠธ BEST 12๊ฐœ ๋ชฉ๋ก

์š”์ฆ˜ ๋“ค์–ด ๋ธ”๋กœ๊ทธ๋‚˜ ์œ ํŠœ๋ธŒ ์˜์ƒ ์ฝ˜ํ…์ธ  ์ œ์ž‘ ์‹œ ๋ฌด๋ฃŒ ์ด๋ฏธ์ง€๋ณด๋‹ค๋Š” ์œ ๋ฃŒ ์ด๋ฏธ์ง€๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์ถ”์„ธ์ž…๋‹ˆ๋‹ค. ๊ณผ๊ฑฐ์—๋Š” ์‚ฌ์ง„ ํŽธ์ง‘ ํ”„๋กœ๊ทธ๋žจ ๋‚ด ์ž์ฒด ๋‚ด์žฅ๋œ ๊ธฐ๋ณธ ์ด๋ฏธ์ง€๋กœ๋„ ์ถฉ๋ถ„ํžˆ ํ€„๋ฆฌํ‹ฐ ๋†’์€ ๊ฒฐ

amango.tistory.com

 

์ƒ์—…์ ์œผ๋กœ ์‚ฌ์šฉ๊ฐ€๋Šฅํ•œ ๋ฌด๋ฃŒ ์ด๋ฏธ์ง€ ์‚ฌ์ดํŠธ BEST 5 ์ถ”์ฒœ

์ƒ์—…์ ์œผ๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๊ณ ํ™”์งˆ ๋ฌด๋ฃŒ ์ด๋ฏธ์ง€๋ฅผ ์ œ๊ณตํ•˜๋Š” ์—ฌ๋Ÿฌ ์›น ์‚ฌ์ดํŠธ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ฐ€์žฅ ์ธ๊ธฐ์žˆ๋Š” ๋ฌด๋ฃŒ ์ด๋ฏธ์ง€ ์‚ฌ์ดํŠธ๋“ค์„ ์†Œ๊ฐœํ•ด๋ด…๋‹ˆ๋‹ค. ๋ฌด๋ฃŒ ์ด๋ฏธ์ง€ ์‚ฌ์ดํŠธ BEST 5 ์ถ”์ฒœ ํ•œ๊ตญ์ธ์ด ๊ฐ€์žฅ ๋งŽ

amango.tistory.com

 

html ๋„์–ด์“ฐ๊ธฐ ๊ณต๋ฐฑ๋„ฃ๊ธฐ ๐Ÿ’ฏ

html ๋„์–ด์“ฐ๊ธฐ ๋ฐฉ๋ฒ•์ž…๋‹ˆ๋‹ค. html ํ•œ ์นธ ๋„์–ด์“ฐ๊ธฐ์™€ ํ•œ๋ฒˆ์— ์นธ ๋„์šฐ๊ธฐ ์—ฌ๋Ÿฌ๋ฒˆ ํ•˜๋Š” ๋ฐฉ๋ฒ•์ž…๋‹ˆ๋‹ค. html์—์„œ ํ•œ ์นธ์„ ๋„์šฐ๋ ค๋ฉด ๊ธฐ๋ณธ์ ์œผ๋กœ ์ŠคํŽ˜์ด์Šค ํ•œ๋ฒˆ ๋„ฃ์–ด์ฃผ๋ฉด ๋ฉ๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ 2์นธ ์ด์ƒ ์—ฐ๋‹ฌ์•„ ๋„์šฐ

amango.tistory.com

 

background css ์ถ•์•ฝ, ํ•œ๋ฒˆ์— ์“ฐ๋Š” ๋ฐฉ๋ฒ•, ์ค„์—ฌ์„œ ์จ๋ณด์ž

background css ์ถ•์•ฝ, ํ•œ๋ฒˆ์— ์“ฐ๋Š” ๋ฐฉ๋ฒ•, ์ค„์—ฌ์„œ ์จ๋ณด์ž. background css๋ฅผ ์ ์šฉํ•  ๋•Œ ๋งŽ์€ ์†์„ฑ๋“ค์ด ์žˆ๋‹ค. ์ด๊ฒƒ์„ ํ•œ๋ฒˆ์— ์ค„์–ด์„œ ์จ๋ณด์ž. background css .wrap { background-color:#CCC; background-image:url("..

amango.tistory.com