[속성 - 박스모델]
width: 요소의 가로 너비를 지정
값: auto - 브라우저의 너비를 계산(기본값: auto, 블록요소: 100%, 인라인요소: 가로세로넓이x 글자특화)
단위 - px, em, cm등 단위로 지정
height: 요소의 세로 너비를 지정
값: auto - 브라우저의 너비를 계산(기본값: auto, 블록요소: 0, 인라인요소: 가로세로넓이x 글자특화)
단위 - px, em, cm등 단위로 지정
max-width, min-width: 요소의 최대 가로 너비를 지정, 요소의 최소 가로 너비를 지정
값: auto - 브라우저의 너비를 계산
단위 - px, em, %등 단위로 지정(기본값: none(없다))
값: auto - 브라우저의 너비를 계산
단위 - px, em, %등 단위로 지정(기본값: 0)
max-height, min-height: 요소의 최대 세로 너비를 지정, 요소의 최소 세로 너비를 지정
값: auto - 브라우저의 너비를 계산
단위 - px, em, %등 단위로 지정(기본값: none)
값: auto - 브라우저의 너비를 계산
단위 - px, em, %등 단위로 지정(기본값: 0)
margin: 요소의 '외부(바깥) 여백'을 지정 - 단축속성, 개별속성, margin 중복
음수 값을 사용할 수 있음
값: auto - 브라우저의 너비를 계산
단위 - px, em, cm등 단위로 지정(기본값: 0)
% - 부모 요소의 가로너비에 대한 비율로 지정
ex) /* 단축속성 */
margin: 10px; /* [위, 아래, 좌, 우] */
margin: 10px 20px; /* [위, 아래] [좌, 우] */
margin: 10px 20px 30px; /* 위 [좌, 우] 아래 */
margin: 10px 20px 30px 40px; /* 위, 우, 아래, 좌 */
ex) /* 개별속성 */
margin-top: 10px; /* 요소의 외부 위쪽 여백 지정 */
margin-bottom: 10px; /* 요소의 외부 아래쪽 여백 지정 */
margin-left: 10px; /* 요소의 외부 왼쪽 여백 지정 */
margin-right: 10px; /* 요소의 외부 오른쪽 여백 지정 */
margin 중복: 마진의 특정 값들이 '중복'되어 합쳐지는 현상
1. 형제 요소들의 margin-top과 margin-bottom이 만났을때
2. 부모 요소들의 margin-top과 자식요소 margin-top이 만났을때
3. 부모 요소들의 margin-bottom과 자식요소 margin-bottom이 만났을때
margin중복 계산법: 마진 중복 현상이 발생시, 중복 값을 계산하는 방법
| 조건 | 요소A 마진 | 요소B마진 | 계산법 | 중복 값 |
| 둘다 양수 | 30px | 10px | 더 큰 값으로 중복 | 30px |
| 둘다 음수 | -30px | -10px | 더 작은 값으로 중복 | -30px |
| 각각 양수와 음수 | -30px | 10px | -30 + 10 =-20 | -20px |
padding: 요소의 '내부(안) 여백'을 지정 - 단축속성, 개별속성, 크기증가문제
단위 - px, em, cm등 단위로 지정(기본값: 0)
% - 부모 요소의 가로너비에 대한 비율로 지정
크기 증가: 추가된 padding 값만큼 요소의 크기가 커지는 현상
크기 증가계산: 1. 직접 계산(padding이 추가된 만큼 width, height 값 다시 계산)
2. 자동 계산(box-sizing: border-box;를 추가)
개별속성: padding-top, padding-bottom, padding-left, padding-right
border: 요소의 '테두리 선'을 지정 - 단축속성
속성 값: border-width: 선의 두께(너비), 기본값(medium) - 단축, 개별속성, 크기증가문제
값: medium: 중간 두께
thin: 얇은 두께
think: 두꺼운 두께
단위: px, em cm 등 단위로 지정
border-style: 선의 종류, 기본값(none) - 단축, 개별속성
값: none: 선없음
hidden: 선 없음과 동일(table 요소에서 사용)
soild: 실선(일반선)
dotted: 점선
dashed: 파선
double: 두 줄선
groove: 홈이 파여있는 모양(선)
ridge: 솟은 모양(선, groove의 반대)
inset: 요소 전체가 들어간 모양(선)
outset: 요소 전체가 나온 모양(선)
단위: px, em cm 등 단위로 지정
border-color: 선의 색상, 기본값(black) - 단축, 개별속성
값: 색상: 선의 색상을 지정
transparent: 투명한 선(요소의 배경색이 보임)
box-sizing: 요소의 크기 계산 기준을 지정
값: content-box: 너비(width, height)만으로 요소의 크기를 계산, 기본값
border-box: 너비에 안쪽 여백(padding)과 테두리 선(border)을 포함하여 요소의 크기를 계산
display: 요소의 박스 타입(유형)을 설정
값: block: 블록요소(<div>등)
inline: 인라인 요소(<span>등)
inline-block: 인라인-블록요소(<input>등)
inline이어서 수평으로 쌓고 text에 특화지만 block의 성질인 width, height을 가질 수 있음
기타: table, table-cell, flex 등
none: 요소의 박스 타입이 없음(요소가 사라짐)
화면에 사라지게 할때 사용, 존재하지만 안보이는 개념이 아니고 존재하지 않는 개념
존재하지만 안보이는 개념은 opacity: 0;
overflow: 요소의 크기 이상으로 내용(자식 요소)이 넘쳤을때, 내용의 보여짐을 제어 - 단축
값: visible:넘친 부분을 자르지 않고 그대로 보여줌, 기본값
hidden: 넘친 부분을 잘라내고, 보이지 않도록 함
scroll: 넘친 부분을 잘라내고, 스크롤바를 이용하여 볼 수 있도록 함
auto: 넘친 부분이 있는 경우만 잘라내고, 스크롤바를 이용하여 볼 수 있도록 함
opacity: 요소의 투명도를 지정
값: 숫자: 0부터 1사이의 소수점 숫자, 기본값(1)
ex) opacity: 0.5; /* 50% 투명도, 반투명 */
opacity: 0; /* 50% 투명도, 투명 */
opacity: .75; /* 75% 투명도, 반투명, 0은 생략가능 */
'기초 > HTML l& CSS' 카테고리의 다른 글
| <12> HTML & CSS (0) | 2022.08.17 |
|---|---|
| <11> HTML & CSS (0) | 2022.08.08 |
| <10> HTML & CSS (0) | 2022.08.05 |
| <9> HTML & CSS (0) | 2022.08.03 |
| <8> HTML & CSS (0) | 2022.08.03 |
댓글