본문 바로가기
프로그래밍/HTML5 태그 를 뛰어넘어라

(HTML/HTML5) 1.기본태그 <hr> 9/10

by it-수다쟁이증후군 2019. 3. 26.

직전 포스트 복습

  1. br은 줄 바꿈 태그이다

바로가기☞(HTML/HTML5) 1.기본태그 br 태그 8/10



이전의 강의를 간략하게 줄이면 위와 같다. hr- 태그에 대해서 알아보자.

html5 태그완전정복 hr 기초태그편


hr-태그는 기본태그 10개 중에서 9번째에 있다. 아래 그림을 보면 간단히 알 수 있다.

hr 태그 간략 설명


1.html태그 <hr> 간단 정리


의미/역활 :분기점 및 이전 주제와 새로운 주제를 구분
사용법 :수평구분선을 넣어주고 싶은 곳에 <hr>를 넣어 주기만 하면 된다.


hr 태그 실제 사용법



2.html태그 <hr> 한걸음 더.


주제를 구분하기 위하여 수평구분선으로 사용한다. 라고 끝내기엔 뭔가 아쉽다. 저 얇은 수평선을 두껍게 한번 해보자. 재미난 것을 볼수 있다.

hr 태그 수평선두께를 조절


수평선은 실제 얇은 한 줄이 아니라. 저렇게 2가지의 색상으로 감싸는 모양으로 디자인 되었다. 선을 감싸는 테두리 두께를 조절하는 것은 html-hr 속성에는 없다. CSS에서 border-width 프로퍼티를 이용해서 만들었다.


이렇듯 html태그-속성 중에서 디자인과 관련된 속성을 CSS의 프로퍼티로 넘김으로써 html태그는 좀 더 간결해졌고, CSS는 단순히 역할은 넘겨받은 것을 넘어 더 확장을 거듭하고 있다.



3.html태그 <hr> 속성

hr 속성 전체
속성Attribute 속성값Value 설명
1 align left / center / right 수평선정렬
2 noshade noshade 음영을 없애는 것
3 size pixels 수평선의 높이조절
4 width pixels / % 수평선의 가로길이 설정

hr 태그 속성은 html5에서는 지원하지 않고 CSS로 전부 넘어갔다.



4.html태그 <br/> 최종정리


  1. hr은 줄 바꿈 태그이다
  2. CSS를 이용하여 좀 더 다양하고 멋지게 할 수는 있다.
  3. 그런데 많이 쓰일까? 기본적인 것 몇 가지만 알고 있자.

다음은 주석을 작성하는<!-- ..... --> 태그

댓글