CSS3 크로스 브라우저를 고려한 선 라인 태그 <hr> 두께 설정 방법
HTML5 에서는 방식이 조금 바뀌었다고 합니다. 예전 HTML4 시절에는 인라인 방식으로 size를 사용해서 직접 값을 입력하여 두께를 조절하는 방식을 취했는데, HTML5에 넘어오면서 height 로 두께를 조절할 수 있게 되었습니다. 사용 방법은 아래와 같습니다.
See the Pen HTML5 <hr> border Settings by rgy0409 (@rgy0409) on CodePen.
첫번째 <hr>의 경우가 가장 기본 형태입니다. 두번째 <hr>의 경우는 HTML4 에서 사용된 방식입니다. 하지만 지금은 HTML5 를 쓰기 때문에 이상하게 적용되고 있는 모습을 보실 수 있습니다. 세번째 <hr> 부터는 클래스값을 각각 사용해서 height의 값에 따른 두께의 변화를 살펴보실 수 있습니다.
height의 값에 따라서 두께가 변화하는것을 확인할 수 있는데 클래스명 hr3과 hr4의 경우를 좀 더 유심히 살펴보시기 바랍니다. html 문서에서의 두께의 변화는 1px 아래로는 실제로 없는 영역이라고 생각하시면 좋을 것 같습니다. 그렇기에 1px 아래로의 두께의 차이를 색상으로 표현하기도 합니다. 일종의 눈속임이라고 할 수 있습니다. 1px 보더 더 얇은 두께는 없으므로 색을 옅게 사용하여 얇아보이게 보여지는 것 뿐입니다.
크로스 브라우저를 고려한 <hr> 두께의 표현 방법의 기본 형태는 위의 예제에서 보신 것 처럼 다음과 같습니다.
.hr {
height: 1px; ▶ 선의 두께 (1px 이상)
border: 0 none; ▶ 테두리를 없애도록 처리함
color: #ccc; ▶ 테두리를 없앴지만 혹시 모르니 라인 색상을 깔맞춤 하기 위하여 마크업
background-color: #ccc; ▶ 선의 색상
}
이렇게 이해하시면 됩니다. 크로스 브라우저란 크롬 외에 익스플로러나 파이어폭스, 사파리, 오페라 등등의 브라우저 프로그램에서도 마크업에 따라 발생하는 결과물에 대한 차이가 없도록 하는 코딩 방법입니다. 즉 어떤 브라우저에서 열람을 해도 <hr>의 결과물은 같습니다. 이와 같은 방법으로 hr 태그의 라인 두께를 조절할 수 있습니다. 끝.
"친절한효자손 취미생활" 을 검색!
