hr 효과주기 / 여러 군데에 있는 태그에 같은 효과 넣기

여러 <hr> 태그에 같은 효과 넣기

브라우저에 가로줄 <hr>는 이미 여러개가 있는데

html에서 효과 넣을려면 <hr>을 일일이 찾아서 효과를 넣어줘야 한다.

 

이런 경우 에러가 날 확율이 높고 시간도 걸리고 번거롭다. 

CSS에서 한 번에 바꿔 주는게 효과적이다. 

 

CSS에서 바꾸고자 하는 태그를 적어주고, { } 안에 변경 사항을 적어준다.

 

<hr> 흰색 긴 라인으로 바꾸기

css

<hr>의 색을 바꿀려서 background-color: white;로만 원하는 색을 써준다고 색이 바뀌지 않는다. 

background는 보더를 뺀 가운데 알맹이를 말한다. 

border 자체도 박스로 되어있다. 

디폴트로 위아래 양 옆으로 1px씩 inset 형태로 기본 색이 들어가있다. 

그래서 border를 없애고 나서

순수 background에 height를 줘서 눈에 보이게 사이즈를 키워준다.

 

border 자체도 박스로 되어있다.

1px이면 위아래 양옆으로 1px씩 되어있는 것이다.

구글 플러그인 pesticide에서 마우스 올려보면 박스 확인할 수 있다. 

 

height, width는 길이를 설정할 때 px 이나 %로 할 수 있다. 

px로 하면 화면 사이즈가 바뀌어도 길이가 그대로이고, 

%로 화면 비율에 맞춰 변한다. 

 

---

[참고] border-style

border-style https://developer.mozilla.org/en-US/docs/Web/CSS/border-style

border-style은 여러 종류가 있다.

디폴트로는 inset 스타일로 되어있다.

 

border styles

 

---

 

점점 스타일 만들기

hr {

border-style: none;

border-top-style: dotted;

border-color: #d1e9e9;

border-width: 6px;

width: 5%;

}

background 색을 없애고, 보더는 dotted로 해서 위만 살려준다. 

보더 색 지정해 주고 

보더의 width로 dot의 사이즈를 설정하고 

width로 화면에 얼마만큼 차게 할 지 설정한다. 

 

좀 더 간단한 코딩 

border: dotted #d1e9e9 6px;

border-bottom: none;

width: 4%;

margin: 100px auto;