-
[CSS]css 박스 모델프로그래밍/HTML&CSS 2021. 12. 21. 14:27
오늘은 CSS 기본 설정 중 하나인 박스 모델에 대해 알아보고자 한다.
HTML 콘텐츠는 다음과 같이 구성되어있다.
- 높이(height)
- 너비(width)
- 패딩(padding)
- 테두리(border)
- 여백(margin)
웹페이지에서 우클릭-검사(inspect)를 클릭하면, CSS라는 콘텐츠가 [높이 : 21.500px, 너비 : 158.750px, 마진 : 8px]로 구성된 것을 확인할 수 있다.
CSS에서 박스 모델이 중요한 이유는 웹 페이지는 모두 박스들로 구성되어있기 때문이다.
우리 모두가 애용하는 NAVER 홈을 살펴보면, 아래와 같이 박스들로 구성된 것을 볼 수 있다.물론, 더 세부적으로 NAVER 로고 부분과 검색창 부분으로 나누는 것도 가능하다.
사람에 따라서 박스를 나누는 방법은 다를 수도 있으나 핵심은 모든 웹 페이지는 박스들로 구성되어 있다는 점이다.
그렇기에 CSS를 공부하기 위해서 앞으로 웹 페이지를 바라볼 때 어떻게 박스가 배치 되어있는지 한 번씩 살펴보면 도움이 될 것 같다.이제 CSS의 박스 모델을 활용하는 법을 알아보자!
우리의 목표는 위의 예시처럼 웹페이지를 만드는 것이라고 가정하자.
1. CSS 제목 부분
- 가운데 정렬 : text-align: center;
- 아래쪽 실선 : border-bottom: 2px solid gray;<style> h1 { text-align: center; border-bottom: 2px solid gray; } </style> <body> <h1>CSS</h1> </body>css 글자 위쪽의 여백이 너무 큰 것을 볼 수 있다.
우클릭-검사(inspect) 클릭 후 해당되는 곳 수치를 더블 클릭하면 조절할 수가 있다.
웹페이지에서 적당한 마진 크기 조정해서 화면에서 어떻게 보이는지 확인한 후 수정을 하면 코드 수정의 번복을 줄일 수가 있다.
<style> h1 { text-align: center; border-bottom: 2px solid gray; margin: 0px; } body { margin: 0px; } </style> <body> <h1>CSS</h1> </body>
위쪽 여백이 줄어들고, <body> 부분의 여백을 없애 실선이 끝까지 좌우 끝까지 이어진 것을 볼 수 있다.
2. 목록 부분
- 오른쪽 실선 : border-right: 2px solid gray;ol { border-right: 2px solid gray; }
너무 오른쪽에 치우쳐 있으므로, 콘텐츠의 너비(width)를 조정한다.
width:120px;ol { border-right: 2px solid gray; width: 120px; }
조금 더 왼쪽으로 이동하기 위해 padding을 조절하고, 조금 더 위쪽으로 이동하기 위해 margin을 조절한다.
padding-left:30px;
margin-top:5px;ol { border-right: 2px solid gray; width: 120px; padding-left: 30px; margin-top: 5px; }
'프로그래밍 > HTML&CSS' 카테고리의 다른 글
[CSS]css 태그 - div / span (0) 2021.12.23 [CSS]css display 속성 - block, inline, block-inline (0) 2021.12.22 [CSS]css 시작 - style 속성,<style> 태그 / 선택자 (0) 2021.12.20 [HTML]html 태그 - 자주 쓰이는 기본 태그 (0) 2021.12.18 [HTML]html 문서 구조 (0) 2021.12.17
