s✨ CSS 박스 모델 (Box-model)

 

 

 

목차

 

CSS Box-model

🏳‍🌈 CSS에 포함되는 모든 요소의 외형은 박스이며, 이 박스를 이해하는 것은 CSS를 통해 레이아웃을 생성 하거나, 아이템과 다른 아이템을 정렬하는 것을 가능하게 한다.

 

🏳‍🌈  CSS 박스 모델은 블록 박스에 적용되며, 인라인 박스는 박스 모델에 정의된 일부 동작만 사용한다. 여백, 테두리, 패딩 및 콘텐츠등이 어떻게 작동할 것인지를 정의한다.

 

 

• Content : 콘텐츠가 표시되는 영역으로 그 크기는 width and height 와  같은 속성을 사용해서 정의할 수 있다.
• Padding : 패딩은 콘텐주 주변을 마치 공백처럼 자리 잡는다. 패딩의 크기는 padding 와 관련 속성을 사용해 제어할 수 있다.
• Border : 테두리 박스는 콘텐츠와 패딩까지 둘러싼다. 테두리의 크기와 스타일은 border 와 관련 속성을 사용하여 제어할 수 있다.
• Margin : 여백은 가장 바깥쪽 콘텐츠와 패딩, 테두리를 둘러싸면서 박스와 다른 요소 사이의 공백 역할을 한다. 여백 박스의 크기는 margin 과 관련 속성을 사용하여 제어할 수 있다.

 

콘텐츠 여백 속성

🏳‍🌈 *-top *-right, *-bottom, *-left 4방향의 프로퍼티를 각각 지정하지 않고, margin, padding 1개의 프로퍼티만으로 4방향의 프로퍼티를 한번에 지정할 수 있다.

 

• 한 개의 값은 모든 네 면의 여백을 설정한다.
• 두 개의 값을 지정하면 첫 번

 

패딩 (padding)

🏳‍🌈  CSS 에서는 HTML 요소의 패딩 영역을 설정하기 위해 다음과 같은 속성을 제공한다

1. padding-top
2. padding-right
3. padding-bottom
4. padding-left

 

📌 패딩 축약 표현

🏳‍🌈  모든 padding 속성을 이용한 스타일을 한 줄에 설정할 수 있다.

div {
	padding : 20px 50px 30px 50px;
}

padding 속성값은 top, right, bottom, left 순으로 설정 한다.