Box Model

lucy_leee·2022년 4월 19일
0

CSS

목록 보기
8/9
post-thumbnail
💡 모든 HTML 요소는 Box 형태의 영역을 가지고 있다. Box는 콘텐트(Content), 패딩(Padding), 테두리(Border), 마진(Margin)로 구성된다.

Designation설명
Content요소의 텍스트나 이미지 등의 실제 내용이 위치하는 영역이다. width, height 프로퍼티를 갖는다.
Padding테두리안쪽에 위치하는 요소의 내부 여백 영역이다. padding 프로퍼티 값은 패딩 영역의 두께를 의미하며 기본색은 투명색 이다.
요소에 적용된 배경의 컬러, 이미지는 패딩 영역까지 적용된다.
Border테두리 영역으로 border 프로퍼티 값은 테두리의 두께를 의미한다.
Margin테두리(Border) 바깥에 위치하는 요소의 외부 여백 영역이다. margin 프로퍼티 값은 마진 영역의 두께를 의미한다.
기본적으로 투명(transparent)하며 배경색을 지정할 수 없다.

4개의 값을 지정할 때

  • margin: 25px 50px 75px 100px;
  • margin-top: 25px;
  • margin-right: 50px;
  • margin-bottom: 75px;
  • margin-left: 100px;

3개의 값을 지정할 때

  • margin: 25px 50px 75px;
  • margin-top: 25px;
  • margin-right: 50px; margin-left: 50px;
  • margin-bottom: 75px

2개의 값을 지정할 때

  • margin: 25px 50px;
  • margin-top: 25px; margin-bottom: 25px;
  • margin-right: 50px; margin-left: 50px;

1개의 값을 지정할 때

  • margin: 25px;
  • margin-top: 25px;
  • margin-right: 25px;
  • margin-bottom: 25px;
  • margin-left: 25px;

border-style

nonehidden 키워드와 마찬가지로 테두리를 표시하지 않습니다.
hiddennone 키워드와 마찬가지로 테두리를 표시하지 않습니다.
dotted테두리를 둥근 점 여러개로 그립니다. 점의 반지름은 해당 면 의 절반입니다.
dashed테두리를 직사각형 여러개로 그립니다. 사각형의 크기와 길이는 명세에서 지정하지 않으며 구현마다 다릅니다.
solid테두리를 하나의 직선으로 그립니다.
double테두리를 두 개의 평행한 직선으로 그립니다.
groove테두리가 파인 것처럼 그립니다.
ridge테두리가 파인 것처럼 그립니다.ridge의 반대입니다.
inset요소가 파인 것처럼 테두리를 그립니다.outset의 반대입니다.
outset요소가 튀어나온 것처럼 그립니다. inset의 반대입니다.

border-width

/* border-width 프로퍼티는 border-style과 함께 사용하지 않으면 적용되지 않는다. */
border-width: thin; /* 1px */
border-width: medium; /* 3px */
border-width: thick; /* 5px */
border-width: 15px;
border-width: 2px 10px 4px 20px; // 4방향 적용

border-radius

border-radius: 5px;
border-radius: 50%;

0개의 댓글