Content 영역
요소의 실제 내용을 포함하는 영역입니다. 따라서 크기는 내용의 너비(width) 및 높이(height)를 나타냅니다.
- Border 영역
content 영역을 감싸는 테두리 선을 border라고 합니다. - Padding 영역
content 영역과 테두리 사이의 여백을 padding이라고 합니다.
content 영역이 배경, 색 또는 이미지가 있을 때 패딩 영역까지 영향을 미칩니다.
이에 따라 padding을 content의 연장으로 볼 수도 있습니다.
- Margin 영역
border 바깥쪽의 영역을 margin이라고 합니다.
border 영역을 다른 요소와 구별하기 위해 쓰이는 빈 영역입니다.
즉, 주변 요소와의 여백(간격)을 margin을 이용해 지정할 수 있습니다.
##1. Boder란?
요소의 테두리를 말함
1-1. 속성
border-width: 1px; ->두께 <lenght> thin, medium, thick
< 속성 값 >
| 키워드 | thin, medium, thick |
| 단위 | px, em, rem ... ( % , 정수 단위 사용불가 ) |
border-style: solid; ->종류 none, hidden, dotted, dashed, solid, double, groove
< 속성 값 >
| none | border를 표시 하지 않습니다. |
| solid | border를 실선 모양으로 나타냅니다. |
| double | border를 이중 실선 모양으로 나타냅니다. |
| dotted | border를 점선 모양으로 나타냅니다. |
그 밖에도 dashed, double, groove, ridge, inset, outset 등의 다양한 스타일이 있습니다.
border-color: #000; ->색상
1-2. 축약형
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 ->보더 상, 우, 하, 좌 두께
##2. padding 이란?
요소의 안쪽 여백을 의미한다.
* 참고 : CSS에서 0 값에 대해서는 단위를 따로 적지 않습니다.
0px = 0% = 0em = 0pt... => " 0 "
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; -> 상, 우, 하, 좌 동일
축약형을 사용할때는 위쪽을 기준으로 시계방향으로 적용이 된다고 생각하면 됨
- padding : 20px 30px 40px 30px 일 때, 좌우의 패딩 값이 같을 때 padding : 20px 30px 40px 와 같이 함축하여 사용할 수 있습니다.
- padding : 20px 30px 20px 일 때, 좌우 패딩과 마찬가지로 상하의 패딩 값이 같을 때 padding : 20px 30px 와 같이 함축하여 사용 할 수 있습니다.
- padding : 20px 20px ( = 20px, 20px, 20px, 20px )일 때, 상하좌우 패딩 값이 모두 같을 때 padding : 20px 와 같이 하나의 값으로 함축하여 사용할 수 있습니다.
##3. margin 이란?
요소의 바깥여백을 의미함
margin-top: 0;
margin-rigth: 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이며 contents의 가로값을 적용할 때 사용함
(왜 width가 함께 해야하는지? 이유는 width가 없다면 한 행을 기준으로 계속 늘어나기 때문에(block요소)
어떤걸 기준으로 맞추어야 하는지 알 수 없기 때문이다)
** margin: 0 auto 와 margin: auto 는 동일함
margin collapse(마진 병합)
마진 병합은 인접한 두 개 이상의 수직 방향 박스의 마진이 하나로 합쳐지는 것을 의미합니다.
마진 병합이 다음 세가지의 경우에 일어납니다.
- 두 요소가 상하로 인접한 경우: 위 요소의 하단 마진과 아래 요소의 상단 마진의 병합이 일어납니다.
- 부모 요소와 첫 번째 자식 요소 또는 마지막 자식 요소
- 부모 요소의 상단 마진과 첫 번째 자식 요소의 상단 마진 병합이 일어납니다.
- 부모 요소의 하단 마진과 마지막 자식 요소의 하단 마진 병합이 일어납니다.
- 내용이 없는 빈 요소의 경우: 해당 요소의 상단 마진과 하단 마진의 병합이 일어납니다.
마진 병합은 수직 방향으로만 이루어지며, 좌우에 대해서는 일어나지 않습니다.
마진 병합은 마진이 반드시 맞닿아야 발생하기 때문에 2,3번째의 경우 패딩 및 보더가 없어야 합니다.
##4. margin&padding
margin과 padding의 비교
| 구분 | + (양수값) | - (음수값) | auto | 단위 |
| margin | o | o | o | px, % ... |
| padding | o | x | x | px, % ... |
##5. width
요소의 가로값을 결정함
값의 기본값은 auto
width: auto; -> 기본값
width: 100px; ->길이
width: 100% -> 퍼센트
##6. height
요소의 세로 크기를 정의하는데 사용함
width의 동작방식과 같게 동작하나 %값을 가졌을 때의 동작방식이 조금 다름
<div class="box">box</div>
.box{
width:100px;
heigth:100px;
padding:10px;
border:15px solid black;위와같이 선언되었다면 총 세로의 크기는 150px이다.
왜냐하면 heigth 도 padding, border 영역에 대해 추가로 영향을 받기 때문이다.
즉, 100px content + (10px*2)padding + (15px*2)border =150px
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.parent{
width: 200px;
border: 10px solid blue;
}
.child{
height:50%;
border: 10px solid red;
}
</style>위와 같이 코드 적용시에 .child는 어떻게 적용 되나??
실제로 확인해보면 heigth: auto 일때와 height: 50% 일때의 차이는 없다.
MDN 에서 height 속성에 percent value에 대한 설명을 확인해보면
"Containing Block의 높이에 대한 백분율로 높이를 정의합니다"고 나와있다.
여기서 말하는 containing block은 부모를 의미하며,
즉, 현재 위의 코드에서 부모가 명시적인 높이 갚을 가지고 있지 않기 때문에
자식의 높이를 %값으로 지정해주어도 적용되지 않았던 것이다.
'MarkUp > CSS' 카테고리의 다른 글
| [CSS] 레이아웃(display, visibility, float, clear, position ) (0) | 2021.01.12 |
|---|---|
| [CSS] 폰트&텍스트 알아보기 (0) | 2021.01.11 |
| CSS_가상선택자 알아보기 (0) | 2021.01.08 |
| [CSS] 문서구조관련 선택자 이해하기(자손, 자식 등) (0) | 2021.01.08 |
| CSS_CSS문법과 적용 (0) | 2021.01.07 |