: 요소의 가로/세로 너비
auto
브라우저가 너비를 계산 (기본값)
단위
px, em, vw 등 단위로 지정
: 요소의 외부 여백(공간)
을 지정
0
외부 여백 없음
auto
브라우저가 여백을 계산
단위
px, em, vw 등 단위로 지정
%
부모 요소의 가로 너비에 대한 비율로 지정
top, right, bottom, left
<= 1가지top, bottom
, left, right
<= 2가지top
, left, right
bottom
<= 3가지top
, right
, bottom
, left
; <= 4가지: 요소의 내부 여백(공간)
을 지정
0
내부 여백 없음
단위
px, em, vw 등 단위로 지정
%
부모 요소의 가로 너비에 대한 비율로 지정
top, right, bottom, left
<= 1가지top, bottom
, left, right
<= 2가지top
, left, right
bottom
<= 3가지top
, right
, bottom
, left
; <= 4가지: 테두리 선
border: 선-두께 선-종류 선-색상
border: border-width border-style border-color
: 테두리 모서리를 둥글게 깎음
0
둥글게 없음
단위
px, em, vw 등 단위로 지정
: 요소의 크기 계산 기준
을 지정
content-box
요소의 내용(content)으로 크기 계산 (기본값)
border-box
요소의 내용 + padding + border 로 크기 계산
: 요소의 크기 이상으로 내용이 넘쳤을 때, 보여짐을 제어하는 단축 속성
visible
넘친 내용을 그대로 보여줌 (기본값)
hidden
넘친 내용을 잘라냄
scroll
넘친 내용을 잘라냄, 스크롤바 생성
auto
넘친 내용이 있는 경우에만 잘라내고 스크롤바 생성
: 요소의 화면 출력(보여짐) 특징
block
상자(레이아웃) 요소
inline
글자 요소
inline-block
글자 + 상자 요소
flex
플렉스 박스 (1차원 레이아웃)
grid
그리드 (2차원 레이아웃)
none
보여짐 특성 없음, 화면에서 사라짐
기타
table, tale-row, table-cell 등...
3. inline-block : block과 inline의 중간 형태, 줄 바꿈이 되지 않지만 크기를 지정할 수 있음
4. flex : 1차원 내에서 요소 조정 (가로 / 세로)
5. grid : 2차원 내에서 요소 조정 (가로 / 세로 / 대각선(?))
: 요소 투명도
1
불투명 (기본값)
0~1
0부터 1사이의 소수점 숫자
: 요소의 배경 색상
transparent
투명함 (기본값)
색상
지정 가능한 색상
background-image: url("[url]")
: 요소의 배경 이미지 삽입
none
이미지 없음 (기본값)
url("경로")
이미지 경로
: 요소의 배경 이미지 반복
repeat
이미지를 수직, 수평 반복 (기본값)
repeat-x
이미지를 수평 반복
repeat-y
이미지를 수직 반복
no-repeat
반복 없음
: 요소의 배경 이미지 위치
0% 0%
0% ~ 100% 사이 값
방향
top, bottom, left, right, center 방향
단위
px, em, rem 등 단위로 지정 (x축 y축)
: 요소의 전환(시작과 끝) 효과를 지정하는 단축 속성
transition: 속성명 지속시간 타이밍함수 대기시간;
transiton: transition-property transition-duration transition-function transition-delay
translate(x,y)
이동(x축, y축)translateX(x)
이동(x축)translateY(y)
이동(y축)scale(x,y)
크기(x축, y축)scaleX(x)
크기(x축)scaleY(y)
크기(y축)ratate(degree)
회전(각도)skewX(x)
기울임(x축)skewY(y)
기울임(y축)