HTML & CSS Wrap-Up

HTML: HyperText Markup Language

HTML은 프로그래밍 언어가 아니다.
Markup Language란 브라우저와 사람 간 소통이 가능하게 하는 언어를 말한다. HTML에서는 사람의 언어를 브라우저가 인지할 수 있도록 tag로 표시한다.

HTML-CSS-JavaScript의 관계

사람의 몸에 비유하면
HTML = 뼈대
CSS = 몸체
JavaScript = 근육

CSS

class 선택자를 사용하는 이유

• 원하는 요소만 골라서 효과를 적용하기 위해
• 여러 요소에 공통적으로 효과를 적용하기 위해
  CSS에서는 tag 선택자나 id 선택자보다는 class 선택자를 주로 사용한다.

box-sizing

box-sizing: content-box

• 콘텐트 영역을 기준으로 크기를 정한다.
• width와 height 속성에 padding, border가 포함되지 않는다.
• 기본값.

box-sizing: border-box

• 테두리를 기준으로 크기를 정한다.
• width와 height 속성이 padding, border를 포함해서 계산된다.

디자인과 코딩을 일치시키기 위해 대부분의 웹페이지에 border-box를 적용한다.

* {
  box-sizing: border-box;
}