hr 태그란?
웹페이지의 위의 요소와, 아래의 요소를 나누어주는 html 태그
hr 태그 사용법
<html>
<body>
<span>Login</span>
<hr/> {* 위아래를 나누고 싶은 부분에 넣어줍니다 *}
<span>아이디를 입력해주세요</span>
</body>
</html
hr 태그 중간에 글자 넣기
기본적으로 hr태그는, width:100%, height:1px, div에 border가 적용되어 있는 모습이다.
:after를 이용해 hr 태그에 글자사용하고, 스타일을 적용하면
나만의 분할 선을 만들 수 있다.
:after 란?
:after는 html 태그 바로 뒤에, 가상 자식 요소를 만들어준다.
예제
<html>
<body>
<span>Login</span>
<hr/> {* 위아래를 나누고 싶은 부분에 넣어줍니다 *}
<span>아이디를 입력해주세요</span>
</body>
</html>
hr {
border: none; {*기존 border 제거*}
border-top: 1px solid gray; {*분할선 역할해줄 border설정*}
text-align: center; {*hr태그 내부 텍스트 가운데 정렬*}
overflow: visible; {*hr태그 벗어난 자식요소 보이게 만들기*}
}
hr:after {
content: "Or" {*hr 태그 내부에 "Or"가 들어간 가상요소 만들기*}
position: relative; {*hr 태그를 중심으로 요소 움직이기*}
top: -15px; {*hr태그 맨위 기준으로 -15px 만큼 움직이기*}
background-color: white; {*배경색 칠해서, 글자주변에서는 분할선 안보이게 만들기*}
padding: 0 10px; {*더욱 예쁘게 여분 설정하기*}
}
반응형
