[CSS] CSS 기초(3)

박스 모델

​ 모든 HTML 요소는 박스모양으로 구성되며, 이것을 박스 모델이라 부른다. 박스모델은 HTML요소를 패딩(padding), 테두리(border), 내용(content)으로 구분한다.

• 내용 (Content) : 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분
• 패팅(padding) : 내용과 테두리 사이의 간격. 패딩은 눈에 보이진 않음
• 테두리(border) : 내용과 패딩 주변을 감싸는 테두리
• 마진(margin) : 테두리와 이웃하는 요소 사이의 간격. 마진은 눈에 보이지 않음.

각 영역은 브라우저 내 개발자도구의 Elements탭에서 어떻게 적용되는지 확인이 가능하다

크기 단위

CSS에서 사용하는 크기의 단위에는 %, em, px, cm, mm, inch 등이 있다. 그 중에서도 가장 많이 쓰이는 크기 단위는

1. 백분율 단위(%) : 기본 크기를 100%로 두고 그에 대한 상대적인 크기
2. 배수 단위(em) : 해당 글꼴(font)의 기본 크기를 1em으로 두고 그에 대한 상대적인 크기
3. 픽셀 단위(px) : 스크린의 픽셀을 기준으로 하는 절대적인 크기

추후 CSS 중급 과정에서 이야기 할 Flexbox 를 다루게 되면서 픽셀(px) 보다 백분율(%)이나 배수(em)단위를 쓰는게 더 용이하다.