5. 단위, 배경, 박스모델
6) 속성-border
요소의 테두리
/* 속성 */
border-width: 1px; /* 두께 <length> | thin | medium | thick */
border-style: solid; /* 종류 none | hidden | dotted | dashed | solid | double | groove */
border-color: #000; /* 색상 */
/* 축약형 */
border: 1px solid #000; /* 단축 속성 */
border-left: 6px solid red; /* 보더 왼쪽 */
border-width: 6px; /* 보더 두꼐 */
border-width: 6px 3px; /* 보더 상하, 좌우 두께 */
border-width: 6px 3px 4px; /* 보더 상, 우(좌). 하 두께 */
border-width: 6px 3px 4px 1px; /* 보더 상, 우, 하, 좌 두께 */
- border-width
- 기본 값: medium
- 선의 굵기를 지정
- border-top-width, border-bottom-width, border-right-width, border-left-width
- 상하좌우 선의 굵기 다르게 표현할 수 있음
- thin, medium, thick
- 단위: px, em, rem (%, 정수 단위 사용불가)
- border-style
- 기본 값: none
- 선의 모양을 지정하는 속성
- border-top-style, border-bottom-style, border-right-style, border-left-style
- 속성 값
- none: border 표시 하지 않음
- solid: 실선 모양
- double: 이중 실선
- dotted: 점선 모양
- dashed, double, groove, ridge, inset, outset
- border-color
- 기본 값: currentColor
- 선의 색상 지정
- border-top-color- border-bottom-color, border-right-color, border-left-color
https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#currentcolor_keyword
https://www.w3schools.com/css/css_border.asp
7) 속성-padding
border와 content 사이의 여백
상우하좌 (시계 방향)
- padding-top
- padding-right
- padding-bottom
- padding-left
padding-top: 0;
padding-right: 10px;
padding-bottom: 20px;
padding-left: 30px;
padding: 0 10px 20px 30px; /* 상,우,하,좌 다름 */
padding: 0 10px 20px; /* 좌, 우 같음 */
padding: 0 10px; /* 상, 하 같음. 좌, 우 같음 */
padding: 0; /* 상,우,하,좌 같음 */
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>Box Model</title>
<style>
div {
border: 10px solid #000;
padding-top: 0;
padding-right: 10px;
padding-bottom: 20px;
padding-left: 30px;
}
</style>
</head>
<body>
<div>Box Model을 알아볼까요?</div>
</body>
</html>
8) 속성-margin
margin-top: 0;
margin-right: 10px;
margin-bottom: 20px;
margin-left: 30px;
margin: 0 10px 20px 30px; /* 상,우,하,좌 다름 */
margin: 0 10px 20px; /* 좌, 우 같음 */
margin: 0 10px; /* 상, 하 같음. 좌, 우 같음 */
margin: 0; /* 상,우,하,좌 같음 */
margin-left: auto; /* 브라우저 계산 */
margin: auto; /* 가로축 중앙 정렬(요소에 width값 필요) */
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>Box Model</title>
<style>
div {
width: 300px;
margin: 50px auto;
border: 10px solid #000;
}
</style>
</head>
<body>
<div>Box Model을 알아볼까요?</div>
</body>
</html>
- 속성 값
- length: 고정값으로 지정(px, em)
- percent: 요소의 width에 상대적인 크기를 지정
- auto: 브라우저에 의해 계산된 값이 적용
- margin collapse(마진 병합)
- 인접한 두 개 이상의 수직 방향 박스의 마진이 하나로 합쳐지는 것을 의미
- 마진 병합은 수직 방향으로만 이루어지며, 좌우에 대해서는 일어나지 않음
9) 속성-margin&padding
| + | - | auto | 단위 | |
| margin | O | O | O | px, % |
| padding | O | X | X | px, % |
10) 속성-width
요소의 가로값을 결정
width: auto; /* 기본값 */
width: 100px; /* 길이 */
width: 100%; /* 퍼센트 */
11) 속성-height
요소의 높이값을 결정
height: auto; /* 기본값 */
height: 100px; /* 길이 */
height: 50%; /* 퍼센트 */
12) 속성-boxmodel 정리
부스트코스 [비전공자를 위한 HTML/CSS] 강의 공부 기록
300x250
'LEARN > HTML | CSS' 카테고리의 다른 글
| [부스트코스] 6-2 CSS 폰트, 텍스트 (0) | 2022.03.20 |
|---|---|
| [부스트코스] 6-1 CSS 폰트, 텍스트 (0) | 2022.03.19 |
| [부스트코스] 5-1 CSS 단위, 배경, 박스모델 (0) | 2022.03.17 |
| [부스트코스] 4-2 CSS 이해하기 (0) | 2022.03.16 |
| [부스트코스] 4-1 CSS 이해하기 (0) | 2022.03.15 |
