💡 모든 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
| none | hidden 키워드와 마찬가지로 테두리를 표시하지 않습니다. |
|---|---|
| hidden | none 키워드와 마찬가지로 테두리를 표시하지 않습니다. |
| 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%;