CSS - 속성

배경

속성값

단축 속성 background - 요소의 배경을 설정

값	의미	기본값
background-color	배경 색상	transparent
background-image	하나 이상의 배경 이미지	none
background-repeat	배경 이미지의 반복	repeat
background-position	배경 이미지의 위치	0 0
background-attachment	배경 이미지의 스크롤 여부 (특성)	scroll

---

사용법

background: 색상 이미지경로 반복 위치 스크롤특성;

.box1 {
    /* 색상 이미지경로 반복 위치 스크롤 특성 */
    background: red url("../img/image.jpg") no-repeat left top scroll;
}
.box2 {
    /* 이미지경로 반복 위치 */
    background: url("../img/image.jpg") no-repeat right 100px;
}
.box3 {
    /* 색상 */
    background: red;
}

---

개별속성

background-color

요소의 배경 색상을 지정

값	의미	기본값
색상	요소의 배경 색상
transparent	투명	transparent

background-imgae

요소의 배경에 하나 이상의 이미지를 삽입

값	의미	기본값
none	이미지 없음	none
url("경로")	이미지 경로

하나 이상의 배경이미지를 삽입할 경우 ,로 구분되며, 먼저 작성된 이미지가 위에 쌓임
이런 '다중 배경 이미지'는 IE8 이하 버전에서 사용할 수 없음

/* 개별속성 */
.box1 {
    background-image: url("../img/i1.jpg"),
        url("../img/i2.jpg"),
        url("../img/i3.jpg");
}
/* 단축속성 */
.box2 {
    background: url("../img/i1.jpg") no-repeat,
        url("../img/i2.jpg") no-repeat 100px 50px,
        url("../img/i3.jpg") repeat-x;
}

background-repeat

배경 이미지의 반복을 설정

값	의미	기본값
repeat	배경 이미지를 수직, 수평으로 반복	repeat
repeat-x	배경 이미지를 수평으로 반복
repeat-y	배경 이미지를 수직으로 반복
no-repeat	반복 없음

background-position

배경 이미지의 위치를 설정

값	의미	기본값
%	왼쪽 상단 모서리는 0% 0%, 오른쪽 하단 모서리는 100% 100%	0% 0%
방향	방향을 입력하여 위치 설정 top,bottom,left,right,center
단위	px,em,cm 등 단위로 지정

값이 방향일 경우

background-position: 방향1 방향2;

값이 단위(%,px 등)일 경우

background-position: x축 y축;

background-attachment

요소가 스크롤될 때 배경 이미지의 스크롤 여부(특성) 설정

값	의미	기본값
scroll	배경 이미지가 요소를 따라서 같이 스크롤 됨	scroll
fixed	배경 이미지가 뷰포트(Viewport)에 고정되어, 요소와 같이 스크롤되지 않음
local	요소 내 스크롤 시 배경 이미지가 같이 스크롤 됨

background-size

배경 이미지의 크기를 지정

값	의미	기본값
auto	배경 이미지가 원래의 크기로 표시됨	auto
auto	- px, em, % 등 단위로 지정 - width height형태로 입력 가능 width만 입력하면 비율에 맞게 지정됨
cover	-배경 이미지의 크기 비율을 유지하며, 요소의 더 넓은 너비에 맞춰짐 - 이미지가 잘릴 수 있음
contain	-배경 이미지의 크기 비율을 유지하며, 요소의 더 짧은 너비에 맞춰짐 - 이미지가 잘리지 않음

CSS - 속성

전환 & 변환

Transitions(전환)

CSS 속성의 전환 효과를 지정

속성값

값	의미	기본값
transition-property	전환 효과를 사용할 속성 이름	all
transition-duration	전환 효과의 지속시간 설정	0s
transition-timing-function	타이밍 함수 지정(타이밍 함수란?)	ease
transition-delay	전환 효과의 대기시간 설정	0s

transition-timing-function

값	의미	기본값	Cubic Beezier 값
ease	빠르게 - 느리게	ease	cubic-bezier(0.25, 0.1, 0.25, 1)
linear	일정하게		cubic-bezier(0, 0, 1, 1)
ease-in	느리게 - 빠르게		cubic-bezier(0.42, 0, 1, 1)
ease-out	빠르게 - 느리게		cubic-bezier(0, 0, 0.58, 1)
ease-in-out	느리게 - 빠르게 - 느리게		cubic-bezier(0.42, 0, 0.58, 1)
cubic-bezier(n, n, n, n)	자신만의 값을 정의 (0 ~ 1)
steps(n)	n번 분할된 애니메이션

---

Transform(변환)

요소의 변환 효과(변형)을 지정

transform: 변환함수1 변환함수2 변환함수3...;
transform: 원근법 이동 크기 회전 기울임;

.box {
    transform: rotate(20deg) translate(10px, 0);
}

transform 2D 변환 함수

값(변환함수)	의미	단위
translate(x, y)	이동(X축, Y축)	단위
translateX(x)	이동(X축)	단위
translateY(y)	이동(Y축)	단위
scale(x, y)	크기(X축, Y축)	없음(배수)
scaleX(x)	크기(X축)	없음(배수)
scaleX(y)	크기(Y축)	없음(배수)
rotate(degree)	회전(각도)	deg
skew(x-deg, y-deg)	기울임(X축, Y축)	deg
skewX(x-deg)	기울임(X축)	deg
skewY(y-deg)	기울임(Y축)	deg
matrix(n, n, n, n, n, n)	2차원 변환 효과	없음

transform 3D 변환 함수

값(변환함수)	의미	단위
translate3d(x, y, z)	이동(X축, Y축, Z축)	단위
translateZ(z)	이동(Z축)	단위
scale3d(x, y, z)	크기(X축, Y축, Z축)	없음(배수)
scaleZ(z)	크기(Z축)	없음(배수)
rotate3d(x, y, z, a)	회전(X벡터, Y벡터, Z벡터, 각도)	없음, deg
rotateX(x)	회전(X축)	deg
rotateY(y)	회전(Y축)	deg
rotateZ(z)	회전(Z축)	deg
perspective(n)	원근법(거리)	단위
matrix(n, n, n, n, n, n, n, n, n, n, n, n, n, n, n, n)	3차원 변환 효과	없음

transform 변환 속성

속성	의미
transform-origin	요소 변환의 기준점을 설정
transform-style	3D 변환 요소의 자식 요소도 3D 변환을 사용할 지 설정
perspective	하위 요소를 관찰하는 원근 거리를 설정
perspective-origin	원근 거리의 기준점을 설정
backface-visibility	3D 변환으로 회전된 요소의 뒷면 숨김을 설정

transform-origin - 요소변환의 기준점을 설정

값	의미	기본값
X축	left, right, center, %, 단위	50%
Y축	left, right, center, %, 단위	50%
Z축	단위	0

transform-style - 3D 변환 요소의 자식 요소도 3D 변환을 사용할지 설정

값	의미	기본값
flat	자식 요소의 3D 변환을 사용하지 않음	flat
preserver-3d	자식 요소의 3D 변환을 사용함

perspective - 하위 요소를 관찰하는 원근 거리를 설정

값	의미	기본값
단위	px, em, cm 등 단위로 지정

perspective 속성과 함수의 차이점
| 속성/함수 | 적용대상 | 기준점 설정 |
|:---:|:---:|:---:|
| perspective | 관찰 대상의 부모 요소 | perspective-origin |
| transform: perspective() | 관찰 대상 | transform-origin |

perspective 속성은 관찰 대상의 부모(조상) 요소에 적용하여 하위 요소들을 관찰하는 원근 거리를 설정하며, transform: perspective() 변환 함수는 관찰 대상에 직접 적용하여 그 대상을 관찰하는 원근 거리를 설정합니다.

perspective=origin - 원근 거리의 기준점을 설정

값	의미	기본값
X축	left, right, center, %, 단위	50%
Y축	top, bottom, center, %, 단위	50%

backface-visibility - 3D변환으로 회전된 요소의 뒷면 숨김을 설정

값	의미	기본값
visible	뒷면 숨기지 않음	visible
hidden	뒷면 숨김

`matrix(a, b, c, d, e, f) - 요소의 2차원 변환(Transforms)효과를 지정

scale(), skew(), translate() 그리고 rotate()를 지정

요소에 일반변환(Transforms)함수 (2D, 3D)를 사용하더라도 브라우저에 의해 matrix 함수로 계산되어 적용됨니다. (2D 변환 함수는 matrix로, 3D 변환 함수는 matrix3d로)
따라서 일반적인 경우는 matrix 함수가 아닌 일반 변환 함수를 사용하면 됩니다.

CSS - 속성

애니메이션 & 다단

애니메이션(animation) 개요

요소에 애니메이션을 설정/제어

값	의미	기본값
animation-name	@keyframes규칙의 이름을 지정	none
animation-duration	애니메이션의 지속 시간 설정	0s
animation-timing-function	타이밍 함수 지정(타이밍 함수란?)	ease
animation-delay	애니메이션의 대기 시간 설정	0s
animation-iteration-count	애니메이션의 반복 횟수 설정	1
animation-direction	애니메이션의 반복 방향 설정	normal
animation-fill-mode	애니메이션의 전후 상태(위치) 설정	none
animation-play-state	애니메이션의 재생과 정지 설정	running

단축 속성
animation: 애니메이션이름 지속시간 [타이밍함수 대기시간 반복횟수 반복방향 전후상태 재생/정지];

.box {
    width: 100px;
    height: 100px; 
    background: tomato;
    animation: hello 2s linear infinite both;
}
@keyframes hello {
    0% { width: 200px;}
    100% { width: 200px;}
}

Keyframs Rule

2개 이상의 애니메이션 중간 상태(프레임)을 지정

@keyframes 애니메이션이름 {
    0% { 속성: 값; }
    50% { 속성: 값; }
    100% { 속성: 값; }
}

@keyframes move-box {
    0% { left: 100px; }
    100% { top: 200px; }
}

애니메이션 속성

animation-name - @keyframes규칙(애니메이션 프레임)의 이름을 지정

값	의미	기본값
none	애니메이션을 지정하지 않음	none
@keyframes이름	이름이 일치하는 @keyframes규칙의 애니메이션을 적용

animation-duration - 애니메이션의 지속시간 설정

값	의미	기본값
시간	지속 시간을 설정	0s

animation-timing-function - 타이밍 함수(애니메이션 효과를 계산하는 방법) 지정

값	의미	기본값	Cubic Beezier 값
ease	빠르게 - 느리게	ease	cubic-bezier(0.25, 0.1, 0.25, 1)
linear	일정하게		cubic-bezier(0, 0, 1, 1)
ease-in	느리게 - 빠르게		cubic-bezier(0.42, 0, 1, 1)
ease-out	빠르게 - 느리게		cubic-bezier(0, 0, 0.58, 1)
ease-in-out	느리게 - 빠르게 - 느리게		cubic-bezier(0.42, 0, 0.58, 1)
cubic-bezier(n, n, n, n)	자신만의 값을 정의 (0 ~ 1)
steps(n)	n번 분할된 애니메이션

animation-delay - 애니메이션의 대기시간 설정

음수가 허용됨
음수가 있을 경우 애니메이션은 바로 시작되지만, 그 값만큼 애니메이션이 앞서 시작함

값	의미	기본값
시간	대기 시간을 설정	0s

animation-iteration-count - 애니메이션의 반복 횟수를 설정

값	의미	기본값
숫자	반복 횟수를 설정	1
infinite	무한 반복

animation-direction - 애니메이션의 반복 방향을 설정

값	의미	기본값
normal	정방향만 반복	normal
reverse	역방향만 반복
alternate	정방향에서 역방향으로 반복 (왕복)
alternate-reverse	역방향에서 정방향으로 반복 (왕복)

animation-fill-mode - 애니메이션의 전후 상태(위치)를 설정

값	의미	기본값
none	기존위치에서 시작 -> 애니메이션 시작 위치로 이동 -> 동작 -> 기존 위치에서 끝	none
forwards	기존위치에서 시작 -> 애니메이션 시작 위치로 이동 -> 동작 -> 애니메이션 끝 위치에서 끝
backwards	애니메이션 시작 위치에서 시작 -> 동작 -> 기존 위치에서 끝
both	애니메이션 시작 위치에서 시작 -> 동작 -> 애니메이션 끝 위치에서 끝

animation-play-state - 애니메이션의 재생과 정지를 설정

값	의미	기본값
running	애니메이션을 동작	running
paused	애니메이션 동작을 정지

---

다단(Multi Columns)

일반 블록 레이아웃을 확장하여 여러 텍스트 다단으로 쉽게 정리하며, 가독성 확보

columns - 다단을 정의

값	의미	기본값
auto	브라우저가 단의 너비와 개수를 설정	auto
columns-width	단의 최적 너비를 설정	auto
columns-count	단의 개수를 설정	auto

columns: 너비 개수;

.text {
    columns: 100px 2;
}

column-width - 단의 최적 너비를 설정

각 단이 줄어들 수 있는 최적 너비(최소 너비)를 설정하며,
요소의 너비가 가변하여 하나의 단이 최적 너비보다 줄어들 경우 단의 개수가 조정됩니다.

값	의미	기본값
auto	브라우저가 단의 너비를 설정	auto
단위	px, em, cm 등 단위로 지정

column-count - 단의 개수를 설정

값	의미	기본값
auto	브라우저가 단의 개수를 설정	auto
숫자	단의 개수를 설정

column-gap - 단과 단 사이의 간격 설정

값	의미	기본값
normal	브라우저가 단과 단 사이의 간격을 설정(lem)	normal
단위	px, em, cm 등 단위로 지정

column-rule - 단과 단 사이의 (구분)선을 지정

구분선(column-rule)은 단과 단 사이의 간격 중간에 위치합니다.

값	의미	기본값
column-width	선의 두께를 지정	medium
column-style	선의 종류를 지정	none
column-color	선의 색상을 지정	요소의 글자색과 동일

CSS - 속성

플랙스(Flex)

Flex 개요

Flex는 두개의 개념으로 나뉨 [ Container - Items ]

Container는 Items를 감싸는 부모 요소이며, 각 Item을 정렬하기 위해선 Container가 필수입니다.

주의할 부분은 Container와 Items에 적용하는 속성이 구분되어 있음

Container에는 display, flex-flow, justify-content 등의 속성을 사용할 수 있으며,
Items에는 order, flex, align-self 등의 속성을 사용할 수 있음

주축(main-axis)과 교차축(cross-axis)

축 이름	주축(main-axis)	교차축(cross-axis)	주축 방향
row	수평	수직	왼쪽에서 오른쪽
column	수직	수평	위에서 아래

시작점(flex-start)과 끝점(flex-end)

주축이나 교차축의 시작하는 지점과 끝나는 지점

축 이름	시작점	끝점
row	왼쪽	오른쪽
row-reverse	오른쪽	왼쪽
column	위	아래
column-reverse	아래	위

Flex Container 속성

속성	의미
display	Flex Container를 정의
flex-flow	flex-direction과 flex-wrap의 단축 속성
flex-direction	Flex Items의 주축(main-axis)를 설정
flex-wrap	Flex Items의 여러 줄 묶음(줄 바꿈) 설정
justify-content	주 축(main-axis)의 정렬 방법을 설정
align-content	교차 축(cross-axis)의 정렬 방법을 설정(2줄 이상)
align-items	교차 축(cross-axis)에서 Items의 정렬 방법을 설정(1줄)

display - display 속성으로 Flex Container를 정의함

display: flex, display: inline-flex

값	의미	특성
flex	Block 특성의 Flex Container를 정의	Container 수직 쌓임
inline-flex	Inline 특성의 Flex Container를 정의	Container 수평 쌓임

flex-flow - Flex Items의 주축 및 Items의 여러 줄 묶음(줄 바꿈) 설정

flex-flow: 주축 여러줄묶음;

.flex-container {
    flex-flow: row-reverse wrap;
}

값	의미	기본값
flex-direction	Items의 주 축(main-axis)을 설정	row
flex-wrap	Items의 여러 줄 묶음(줄 바꿈) 설정	nowrap

flex-direction - Items의 주축을 설정함

flex-direction: 주축;

값	의미	기본값
row	Items를 수평축(왼쪽에서 오른쪽)으로 표시	row
row-reverse	Items를 row의 반대 축으로 표시
column	Items를 수직축(위에서 아래)으로 표시
column-reverse	Items를 column의 반대 축으로 표시

flex-wrap - Items의 여러 줄 묶음(줄 바꿈)을 설정합니다.

기본적으로 Items는 한 줄에서만 표시되고 줄 바꿈 되지 않습니다.
이는 지정된 크기(주 축에 따라 width나 height)를 무시하고 한 줄 안에서만 가변합니다.
Items를 줄 바꿈 하려면 값으로 wrap을 사용해야 합니다.

flex-wrap: 여러줄묶음;

값	의미	기본값
nowrap	모든 Items를 여러 줄로 묶지 않음(한 줄에 표시)	nowrap
wrap	Items를 여러 줄로 묶음(Items의 크기를 지켜줌)
wrap-reverse	Items를 wrap의 역 방향으로 여러 줄로 묶음

justify-content - 주축의 정렬 방법을 설정

justify-content: 정렬방법;

값	의미	기본값
flex-start	Items를 시작점(flex-start)으로 정렬	flex-start
flex-end	Items를 끝점(flex-end)으로 정렬
center	Items를 가운데 정렬
space-between	시작 Item은 시작점에, 마지막 Item은 끝점에 정렬되고 나머지는 Items 사이에 고르게 정렬
space-around	Items를 균등한 여백을 포함하여 정렬

align-content - 교차축의 정렬 방법을 설정

align-content: 정렬방법;

주의할 점은 flex-wrap속성을 통해 Items가 여러 줄(2줄 이상)이고 여백이 있을 경우만 사용할 수 있습니다.
Items가 한 줄일 경우 align-items 속성을 사용함
값 stretch는 교차축에 해당하는 너비(속성 width 혹은 height)가 값이 auto(기본값)일 경우 교차축을 채우기 위해 자동으로 늘어남

값	의미	기본값
stretch	Container의 교차 축을 채우기 위해 Items를 늘림	stretch
flex-start	Items를 시작점(flex-start)으로 정렬
flex-end	Items를 끝점(flex-end)으로 정렬
center	Items를 가운데 정렬
space-between	시작 Item은 시작점에, 마지막 Item은 끝점에 정렬되고 나머지 Items는 사이에 고르게 정렬됨
space-around	Items를 균등한 여백을 포함하여 정렬

align-items - 교차축에서 Items의 정렬 방법을 설정(Items가 한 줄일 경우)

align-items: 정렬방법;

Items가 flex-wrap을 통해 여러 줄(2줄 이상)일 경우에는 align-content 속성이 우선함
align-items를 사용하려면 align-content속성을 기본값(stretch)로 설정해야 함

값	의미	기본값
stretch	Container의 교차 축을 채우기 위해 Items를 늘림	stretch
flex-start	Items를 각 줄의 시작점(flex-start)으로 정렬
flex-end	Items를 각 줄의 끝점(flex-end)으로 정렬
center	Items를 가운데 정렬
baseline	Items를 문자 기준선에 정렬

Flex Items 속성

속성	의미
order	Flex Item의 순서를 설정
flex	flex-grow, flex-shrink,flex-basis 단축 속성
flex-grow	Flex Item의 증가 너비 비율을 설정
flex-shrink	Flex Item의 감소 너비 비율을 설정
flex-basis	Flex Item의 (공간 배분 전) 기본 너비 설정
align-self	교차 축(cross-axis)에서 Item의 정렬 방법을 설정

order - Item의 순서 설정 (음수 허용)

order: 순서;

HTML구조와 상관없이 순서를 변경할 수 있기 때문에 유용함

값	의미	기본값
숫자	Item의 순서를 설정	0

flex - Item의 너비(증가, 감소, 기본)를 설정하는 단축 속성

flex: 증가너비 감소너비 기본너비;

.item {
    flex: 1 1 20px; /* 증가너비 감소너비 기본너비 */
    flex: 1 1; /* 증가너비 감소너비 */
    flex: 1 20px; /* 증가너비 감소너비 (단위를 사용하면 flex-basis가 적용됨) */
}

값	의미	기본값
flex-grow	Item의 증가 너비 비율을 설정	0
flex-shrink	Item의 감소 너비 비율을 설정	1
flex-basis	Item의 (공간 배분 전) 기본 너비 설정	auto

flex-grow를 제외한 개별 속성은 생략할 수 있음

flex: 1; != flex-grow: 1; flex-shrink: 1;, flex-basis: auto;

flex-basis의 기본값은 auto지만 단축 속성인 flex에서 값을 생략할 경우는 0

즉, flex: 1; == flex: 1 1 0;

flex-grow - Item의 증가 너비 비율을 설정

flex-grow: 증가너비;

Item이 가변 너비가 아니거나, 값이 0일 경우 효과가 없음
숫자가 클 수록 증가비도 커짐
0을 제외한 증가너비들의 합에서 자신이 가지고 있는 너비값 만큼 커진다
(자신의 증가너비/증가너비들의 합) * 전체너비

값	의미	기본값
숫자	Item의 증가 너비 비율을 설정	0

flex-shrink - Item의 감소 너비 비율을 설정

flex-shrink: 감소너비;

Item이 가변 너비가 아니거나, 값이 0일 경우 효과가 없음
숫자가 클 수록 감소비도 커짐
0을 제외한 감소너비들의 합에서 자신이 가지고 있는 너비값 만큼 작아진다
감소값 = (자신의 너비 * 감소너비)
(감소값/감소값들의 합) * 감소된 너비

값	의미	기본값
숫자	Item의 감소 너비 비율을 설정	1

flex-basis - Item의 (공간 배분 전) 기본 너비를 설정

flex-basis: 기본너비;

값이 auto일 경우 width, height 등의 속성으로 Item의 너비를 설정할 수 있음
하지만 단위 값이 주어질 경우 설정할 수 없음
flex 속성에서 설명한 것 같이 단축 속성 내에서 flex-basis를 생략하면 값이 0이 되는 것에 주의

auto값일 경우 쉽게 말하면 content의 너비/높이 값을 제외한 너비들로 증가/감소 비율을 배정함

값	의미	기본값
auto	가변 Item과 같은 너비	auto
단위	px, em, cm 등 단위로 지정

align-self - 교차 축(cross-axis)에서 개별 Item의 정렬 방법을 설정합니다.

align-self: 정렬방법;

align-items는 Container 내 모든 Items의 정렬 방법을 설정.
필요에 의해 일부 Item만 정렬 방법을 변경하려고 할 경우 align-self를 사용할 수 있음.
이 속성을 align-items속성부다 우선함

값	의미	기본값
auto	Container의 align-items 속성을 상속받음	auto
stretch	Container의 교차 축을 채우기 위해 Item을 늘림
flex-start	Item을 각 줄의 시작점(flex-start)으로 정렬
flex-end	Item을 각 줄의 끝점(flex-end)으로 정렬
center	Item을 가운데 정렬
baseline	Item을 문자 기준선에 정렬