박스 모델
박스 모델은 웹 페이지에서 HTML 요소가 브라우저에 표시될 때 각각의 요소가 사각형 상자로 간주되는 개념이다. 이 사각형 상자는 해당 요소의 내용, 안쪽 여백, 테두리, 그리고 바깥 여백으로 구성된다.
Content (내용)
요소의 실제 내용이 위치하는 영역으로 width와 height 속성으로 크기를 조절할 수 있다.
여기서는 빨간색 선 사이에 들어 있는 글자들이 내용이다.
Padding (안쪽 여백)
content와 border 사이의 여백으로 padding의 속성을 사용하여 조절할 수 있다.
padding : 8px;
이는 상하좌우 안쪽 여백을 한번에 8px로 설정한다.
padding : 16px 8px;
이는 상하, 좌우 안쪽 여백을 각각 설정하며, 상하를 16px로 좌우를 8px로 여백을 조절한 것이다.
padding : 16px 8px 24px;
이는 상, 좌우, 하 여백을 각각 설정하며 위쪽 여백을 16px, 좌우 여백을 8px, 아래쪽 여백을 24px로 조절한 것이다.
padding : 16px 8px 24px 10px;
이는 상하좌우 여백을 각각 설정한 것이다. 위쪽 여백을 16px, 오른쪽 여백을 8px, 아래쪽 여백을 24px, 왼쪽 여백을 10px로 조절한 것이다. 시계 방향으로 돈다고 생각하면 이해하기 쉽다.
물론 padding-top, padding-right, padding-bottom, padding-left로도 설정 가능하다.
여기서 빨간색(content)을 제외한 파란색 안쪽 부분이 padding이다.
Border (테두리)
padding 영역을 감싸고 있는 테두리로 border 속성을 사용하여 스타일, 두께, 색상 등을 조절할 수 있다.
border : 2px solid 색상
주로 굵기, 테두리 종류, 색상 순서로 쓴다.
border-radius
박스 모델의 모서리를 둥글게 만들 때 사용하며 border 속성 없이도 사용 가능하다.
Margin (바깥쪽 여백)
border와 인접한 다른 요소와의 간격을 나타내며 margin 속성을 사용하여 조절할 수 있다.
margin : 8px;
이는 상하좌우 바깥쪽 여백을 한번에 8px로 설정한다.
margin : 16px 8px;
이는 상하, 좌우 바깥쪽 여백을 각각 설정하며, 상하를 16px로 좌우를 8px로 여백을 조절한 것이다.
margin : 16px 8px 24px;
이는 상, 좌우, 하 여백을 각각 설정하며 위쪽 여백을 16px, 좌우 여백을 8px, 아래쪽 여백을 24px로 조절한 것이다.
margin : 16px 8px 24px 10px;
이는 상하좌우 여백을 각각 설정한 것이다. 위쪽 여백을 16px, 오른쪽 여백을 8px, 아래쪽 여백을 24px, 왼쪽 여백을 10px로 조절한 것이다. 시계 방향으로 돈다고 생각하면 이해하기 쉽다.
물론 margin-top, margin-right, margin-bottom, margin-left로도 설정 가능하다.
Overflow 속성
박스 크기를 지정했을 때, 안에 있는 내용이 많아서 삐져나올때가 있다. 이러한 현상을 오버 플로우라고 한다. 이때 박스에 스크롤이 되도록하거나 삐져나온것을 감출 수 있다.
1) 넘치는 것 감추기
여기서 white-space란 공백 처리에 대한 규칙을 지정하는 데 사용된다. 이를 통해 텍스트의 줄 바꿈, 공백, 탭과 같은 공백 문자의 처리를 조절할 수 있다.
white-space : nowrap 은 텍스트를 한줄로 표시하며 줄바꿈 문자를 무시한다.
2) 넘치면 스크롤하게 만들기
3) 항상 스크롤하게 만들기
정리
'FE > CSS' 카테고리의 다른 글
| [CSS] Display (0) | 2024.01.20 |
|---|---|
| [CSS] 배경 이미지 (0) | 2024.01.19 |
| [CSS] 기본 개념 (1) | 2024.01.19 |
