close

CSS에서 사용 Box Model- 구조 및 위치 지정

CSS에서 요소는 Box Model 웹페이지에서 요소가 구성되고 배치되는 방식을 결정하는 중요한 개념입니다. Padding Content,, Border 와 같은 기본 구성 요소로 구성됩니다 Margin.

 

Content

Content 텍스트, 이미지 또는 비디오와 같은 요소의 실제 콘텐츠를 포함하는 영역입니다.

콘텐츠의 크기를 정의하기 위해 width  및 height 속성을 사용합니다.

 

Padding

Padding 콘텐츠 주변의 공간으로 콘텐츠와 요소 사이에 간격을 만듭니다 border.

값을 지정하려면 및 속성을 padding 사용합니다  . padding-top, padding-right,padding-bottom padding-left

 

Border

Border 요소 주변의 윤곽선으로 콘텐츠와 주변 영역 사이에 명확한 경계를 만듭니다 .

를 형식화하려면, 및 속성을 border 사용합니다  . border-width border-style border-color

 

Margin

Margin 요소 외부의 공간으로 border 다른 요소 사이에 간격을 만듭니다.

값을 정의하기 위해, 및 속성 을 margin 사용합니다. margin-top margin-right margin-bottom margin-left

 

in CSS 를 활용하여 Box Model 구성 요소의 값을 수정하여 요소의 크기와 위치를 사용자 정의할 수 있습니다.

예:

.box {  
  width: 200px;  
  height: 100px;  
  padding: 20px;
  border: 1px solid black;
  margin: 10px;  
}

위의 예에서 클래스가 있는 요소 .box 의 너비는 200px이고 높이는 100px입니다. 20px padding, 두께 1px 의 검은색 border, 10px 가 있습니다 margin.

 

이 값을 조정하여 웹 페이지에서 크기와 간격이 다른 요소를 만들 수 있습니다. 를 사용하여 Box Model 인터페이스 내에서 요소의 위치, 크기 및 간격을 제어할 수 있습니다.