[HTML/CSS] html이란?, inline 요소, block 요소, Box Model

웹표준

웹표준은 웹사이트를 만들 때 지켜야 하는 약속들을 정리한 것이다. 표준을 지켜 웹사이트를 제작하면 운영체제나 브라우저에 상관 없이 사용자에게 동일한 결과를 보이게 하는 것이다. 이것이 웹표준의 궁극적인 목표이다.

---

HTML (Hypertext Markup Language)

웹 브라우저에서 보이는 화면 구조를 만들기 위한 언어이다. HTML로 글자, 이미지 등을 표현할 수 있고, 링크를 통해서 문서 내 또는 다른 사이트로 이동할 수 있다. HTML은 Tag(태그)로 구성되며 태그는 시작태그와 종료태그가 한쌍으로 다닌다. 또한, 시작태그에 속성을 표기할 수 있으며 Tag 그 자체가 컨텐츠에 대한 의미를 지니고 있는데 이것을 시맨틱 태그라 한다.

---

HTML의 기본구조 

---

block 요소 &   inline 요소

1. block 요소
   - 선언된 가로영역에 다른 요소가 올 수 없다
   - block element 나 inline element를 포함할 수 있다ㅋ
   - 대표적인 태그 : <div>,<h1>,<ol>,<ul>,<li>
2. inline 요소
   - 선언된 가로영역에 다른 요소가 올 수 있다
   - width, height, margin, padding 속성값 적용 불가
   - font-size, font-weight, line-height 등을 이용하여 표현 가능
   - 대표적인 태그 : <span>, <a>, <em>, <label>, <strong>, <address> 등..

---

Box Model

박스모델은 html에서 요소를 표현하는 방법이다. 박스모델은 contents, padding, border, margine 으로 구성된다. 박스모델의은 배치되는 크기와 실제요소의 크기가 다를 수 있다.

1. Content Box(기본 설정) : border, padding은 고려되지 않은 상태이다.
   - 실제 높이 :  height + border*2 + padding *2
   - 실제 너비  : width + border*2 + padding *2
2. Border Box : 요소를  생성시 , 테두리를 기준으로 크기 저장된다.
   요소를 Border Box로 표현하고 싶다면, css 에서 선언해주면 된다! ⇒ box-sizing : border-box;
   - 실제 높이 : height
   - 실제 너비 : width

---

margin 병합(상쇄)

인접형제 요소간, 부모-자식 요소간에는 상,하 margin이 상쇄되는 경우가 많다.
양 요소간 더 큰 마진이 적용되며, 경계선을 확정 해주면 마진상쇄가 발생하지 않는다.
⇒ {overflow : hidden} 또는 {border-top:1px solid transparent}을 적용해준다.