CSS 박스 모델 설명!

반응형

CSS 상자 모델:
프런트 엔드 디벨로퍼로서 저 자신도 CSS에 서툴지만, CSS 초급 시절에는 마진 패딩 테두리를 제대로 배우지 못해 헷갈릴 수 있어서 이 포스트에서 얼마나 간단한지 보여드리겠습니다.

• 요소: HTML에 익숙한 것처럼 모든 HTML 태그가 요소임을 알아야 합니다. 상자 모형에서 첫 번째로 나오는 것은 엘리먼트입니다. 우리는 박스 모델 속성이나 CSS에 있는 모든 속성을 사용하여 스타일을 지정할 수 있습니다.

<button class="btn">Cick me</button>

• 패딩: 패딩은 요소의 양쪽 모두에 대한 속성으로, 기본적으로 모든 요소 내부에 공간을 제공하며 패딩 속성을 사용하여 요소를 아름답게 만들 수 있습니다. 패딩 탑, 패딩 바텀, 패딩 오른쪽, 패딩 레프트의 네 가지 특성이 있다.

 

.btn {
       padding-top: 10px;
       padding-bottom: 10px;
       padding-right: 10px;
       padding-left: 10px;
}

• 테두리: 테두리는 상자 모델의 특성으로 요소 외부에 테두리를 만드는 데도 유용합니다. 테두리를 사용하여 단추에 이미 있는 테두리 등을 제거할 수 있습니다. 속성 없음.

.btn {
      border: 2px solid #fff;
}

• 여백: 여백은 여백과 마찬가지로 요소에 공간을 제공하는 데 사용되지만, 여백 안쪽에서는 요소 외부에 공간을 제공하지 않습니다. 여백은 프런트 엔드 개발자인 경우 대부분의 시간 동안 작업할 때 가장 유용한 속성입니다.