[CSS] box-sizing, display, <hr> in HTML5

box-sizing의 속성값

content-box (box-sizing의 default value)

• Content 영역을 기준으로 box의 size 적용 
• width값이 400px이더라도 padding을 50px로 주면 500px의 width를 가진 box가 된다.

👾 위와 같은 이유로 일반적으로 모든 요소의 box-sizing을 border-box로 맞춰주고 시작하는 경우가 많다.

border-box

• Border 영역을 기준으로 box의 size를 적용
• content와 padding을 포함한 box 사이즈가 width 값이 되는 것

---

Inline요소 vs Block 요소 

div, p, span, h1, h2 등 수많은 HTML 태그는 블록요소와 인라인 요소로 분류한다.

CSS에서 display 속성은 웹 페이지 상에서 엘리먼트들이 어떻게 보여지고 다른 엘리먼트와 어떻게 상호 배치되는 지를 결정한다. 여러가지 display 속성값 중에서 inline, block(default value), inline-block에 대해서 알아보자.

 

block 요소

• 블록 요소를 여러 개 연속으로 쌓을 경우, 자동으로 다음 줄로 넘어간다. (한 줄을 차지)
• 좌/우 양쪽으로 늘어나 부모 요소의 너비를 가득 채운다. 
• 태그 종류: div, p, ul, dl, p, h1, h2, h3, h4, h5 등....
• display 속성의 값으로 block(기본 속성값), inline으로 강제 변형가능하다.

inline 요소

• 여러 개의 요소를 연속해서 입력해도 자동으로 다음 줄로 넘어가지 않는다. 
• 태그에 할당된 공간 만큼의 너비만 차지한다.(content의 크기 만큼만 공간을 차지하도록 되어있음)
• 태그 종류: a, span, img, strong, em, input, button, textarea, select 등 ...
• ❌주의점: width, height 속성을 지정해도 무시된다.  + margin과 padding은 좌우 간격만 반영이되고 상하는 반영X

inline-block

• 이 속성값으로 지정된 엘리먼트는 마치 하이브리드 모드처럼 동작한다.
• inline 엘리먼트처럼 전후 줄바꿈없이 한 줄에 다른 엘리먼트들과 나란히 배치되지만, block 엘리먼트처럼 width, height 속성 지정 및 margin과 padding 속성의 상하 간격 지정이 가능하다.
• 태그 종류: button, input, select 태그 등...

---

<hr> 태그

콘텐츠 내용에서 주제가 바뀔 때 사용할 수 있는 수평 가로선을 정의할 때 사용한다. 

HTML5에서 변경된 사항

html 4.01에서는 <hr>요소가 단순히 가로선을 나타냈지만, HTML5에서는 "주제의 흐름 변경"을 나타내도록 변경되었다.

브라우저는 여전히 <hr> 요소를 수평 가로선으로 표현하지만, 시각적인 의미보다는 의미적 용어(semantic term)으로 사용된다. 또한, HTML5에서는 <hr>요소의 layout 속성을 더 이상 지원하지 않으며, CSS를 대신 사용하도록 변경되었다. (지원x) 

HTML에서는 <hr>태그를 닫지 않지만, XHTML에서는 반드시 태그를 닫아야 합니다. 

CSS 기본값

hr {
  display: block;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: auto;
  border-style: inset;
  border-width: 1px;
}