html 줄 긋기

목차

 

 

html 줄 생성하기

<hr/>

 

 

기본적 hr

 

 

줄 꾸미기

여기서 style을 곁들이면 이쁘게 꾸밀 수 있는데

가로길이 정하기

 

hr {  
  width: 100px;
}​

 

width 길이

 

세로길이 정하기

height로 높이를 지정할 수 있다.

hr {
  height: 10px;
  
  
  width: 100px;
}​

height 높이

 

주의사항

여기서 알아둬야 할게

hr(horizontal rule)은 이름 그대로 자로 선을 긋는 거라

가로 / 세로를 지정 할 경우

내부 면적은 비어 있다.

이를 이용해서 사각형을 그릴 수 있지만

공간 안에 콘텐츠를 담는 것은 제한되어 있고, 무엇보다 접근성에서 불편하니 사각형 용으로 쓰지는 말자.

사각형을 그리고 싶다면 svg나 canvas를 사용하여 그리는 것이 좋다.

 

 

---

심화내용

여기서부턴 심화 내용

hr에 style을 넣는다면 저 정도쯤 일 텐데

hr {
  border: none;
  border-top: 4px double black;
  overflow: visible;
  text-align: center;
  margin-top: 48px;
  height: 48px;
}

hr:after {
  position: relative;
  top: -25px;
  background: #fff;
  content: "§";
  padding: 0 4px;
}
​

하나하나 차근차근 설명하자면

이 스타일에서 목표는 '두 줄짜리 선과 중앙에 §를 배치하고 싶다'이다.

 

그럼 맨 처음 코드는 이렇게 된다.

 

hr {
  border: 4px double black;
}

hr {
  border: 4px double black;
/*
  border은 대상의 테두리를 그리는 style이다.
  border: 4px     double     black;
          선굵기, 선 스타일, 색
          을 설정할수 있다.
*/
}

지금 이상태는 네 방향에서 모두 더블이 적용되었는 현상이다.

일단 우리는 같은 굵기의 선 두줄만 필요하기에 윗방향에서만 선이 나오게 하자.

 

br을 두 개 쓰는 걸로 두줄을 표시하지 않는 이유.

br 두 개를 쓰는 방법도 있겠지만 이 방법을 쓰는 이유는 코드의 간결성 때문이다.

우리가 목표로 하는 스타일은 구분선에 잘 쓰이는 스타일이다.

페이지에서 여러 번 쓰일 확률이 높으며 후에 유지보수를 할 때 조금이라도 더 간편하게 수정할 수 있어야 한다.

이를 생각하여 한 오브젝트는 한 덩어리로 작업하는 게 좋다.

그리고 이 작업은 다른 사람이 할 수도 있다.

 

무엇보다 후에 §를 추가하는 걸 생각하면

<br/>

<p>§</p>

<br/>

대충 이 정도가 나온다. 중앙에 글자에 js를 넣을게 아니라면

굳이 한 덩어리를 세 덩어리로 나눌 필요는 없다.

 

hr {
  border: none;
  border-top: 4px double black;
}

hr {
  border: none;
  /*
  모든 테두리를 일단 지운다.
  */
  border-top: 4px double black;
  /*
  윗방향 테두리만 설정한다.
  */
}

두줄

여기서

border : none;과

border-top: 4px double black;의

순서를 바꾸면 안 된다.

코드는 기본적으로 위에서 아래로 내려오기에

순서를 바꾸면 선을 다 지워버린다.

hr {
  border: none;
  border-top: 4px double black;
}

hr:after {
  content: "§";
}

 

hr:after {}는 hr을 그리고 난 뒤 작업을 한다는 것이다.

 

 

hr {
  border: none;
  border-top: 4px double black;
  text-align: center;
}

hr:after {
  content: "§";
}

hr {
  border: none;
  border-top: 4px double black;
  text-align: center;
  /*
  text-align:
  문자-정렬
  */
}

hr:after {
  content: "§";
}

 

중앙 정렬로 배치한다.

hr {
  border: none;
  border-top: 4px double black;
  text-align: center;
}

hr:after {
  content: "§";
  position: relative;
  top: -25px;
}

hr {
  border: none;
  border-top: 4px double black;
  text-align: center;
}

hr:after {
  content: "§";
  position: relative;
  /*
  위치설정: 상대적
  밑줄의 top: -25px;과 같이
  top, bottom, left, top을 이용하여
  위치를 설정해준다.
  */
  top: -25px;
}

§가 짤림

이와 같이 §가 잘리는 이유는 잘린 부분이 hr영역을 나갔기 때문이다.

hr영역

hr영역은 파란색과 같다

그리고 원래는 파란색 영역 안에 있을 §가 top:-25로 위로 올라가며 영역 밖을 나갔다.

 

hr영역이 저렇게 된 이유

글이 너무 길어지기에 다시 한번 상기시키자면

우리는 border(외곽선)을 위에 빼고 다 지웠다.

글자는 hr내부에 있을 것이고 글자크기에 맞게 저렇게 영역이 늘어났을 뿐

기본적인 영역의 모양은 저것이 된다.

 

 

hr {
  overflow: visible;

  border: none;
  border-top: 4px double black;
  text-align: center;
}

hr:after {
  content: "§";
  position: relative;
  top: -25px;
}

hr {
  overflow: visible;
  
  /*
  overflow : visible;
  흘러넘칠때 : 보이게한다
  */
  
  
  border: none;
  border-top: 4px double black;
  text-align: center;
}

hr:after {
  content: "§";
  position: relative;
  top: -25px;
}

 

컨텐츠가 다보인다.

 

§글자에 선이 겹치는 걸 방지해주자

hr {
  overflow: visible;


  border: none;
  border-top: 4px double black;
  text-align: center;
}

hr:after {
  background: white;
  /*
  배경 : 하양
  */
  padding: 0 4px;
  /*
  컨텐츠내부영역 : 세로 가로
  */
  
  
  position: relative;
  top: -25px;
  content: "§";
}

 

자 이제 콘텐츠를 실 적용시키면 저렇게 되는데

이렇게 hr영역 때문이다.

아래는 글자 때문에 영역이 늘었지만, 위에는 설정한 게 없다.

<hr/>

hr {
  margin-top: 48px;
  /*
  컨텐츠 밖 영역-위 설정
  */
  height: 48px;
  /*
  컨텐츠 높이 설정
  */
  overflow: visible;
  border: none;
  border-top: 4px double black;
  text-align: center;
}

hr:after {
  background: white;
  padding: 0 4px;
  position: relative;
  top: -25px;
  content: "§";
}

padding top 48px인 이유

외곽선이 4px 글자크기가 46px정도이다.

합하면 50px인데 위에 padding을 그냥 50px 설정하면 밑에 공간이 4px 적어진다.

48px

4px

48px 이렇게 두면 100px로 디자인 짜기도 깔끔하고 구분선의 위아래 간격이 같다.