웹개발/HTML, CSS 응용
[html, css 응용] 3. css 박스 모델
chaNsoo
2024. 1. 21. 18:07
html 요소는 모두 박스모양으로 이루어져 있다. 개발자 도구 (F12)를 통해 들어가보면
다음과 같이 그림 형태로 나타난다.
margin : 공간에 대한 의미로 content의 바깥 공간에 대한 정의이다.
padding : content의 내부 공간으로 실제 몸집이 커진다.
border : content의 테두리이다.
# padding과 margin
옵션을 1개 주면 4방향 모두 해당 px로 지정되고
옵션을 2개 주면 아래-위, 양옆 세트로 지정되고
옵션을 4개주면 위쪽부터 시계방향으로 px조정이 가능하다.