한 장으로 정리하는 CSS

 

 

#1 스타일 시트

종류	설명
브라우저 기본 스타일	웹 브라우저에 웹 문서를 표시할 때 브라우저에서 기본으로 사용하는 스타일
인라인 스타일	style 속성을 사용해 필요한 요소에 스타일을 직접 지정
내부 스타일 시트	문서 앞부분에 문서에서 사용하는 스타일을 모아서 함께 정의하고 관리
외부 스타일 시트	문서에서 사용하는 스타일을 모아서 따로 파일로 저장한 후 연결해서 사용

 

 

#2 CSS 기본 선택자

종류	설명	작성 예시
전체 선택자	문서의 모든 요소에 스타일을 적용	* { margin: 0; }
타입 선택자	특정 태그를 사용한 모든 요소에 스타일 적용	p { font-style: italic; }
클래스 선택자	특정 부분만 선택해서 문서 안에 여러 번 적용 마침표(.)를 붙여 사용	.bg { background-color: #ddd; }
id 선택자	특정 부분만 선택해서 문서 안에서 한 번만 적용 #를 붙여 사용	#container { width: 500px; }
그룹 선택자	여러 요소에 같은 스타일을 적용할 때 사용	h1, h2 {text-align: center; }

 

 

#3 스타일 우선순위

1. 얼마나 중요한가?

  ① 사용자 스타일 → ② 제작자 스타일 → ③ 브라우저 기본 스타일

 

2. 적용 범위는 어디까지인가?

  ① !important → ② 인라인 스타일 → ③ id 스타일 → ④ 클래스 스타일 → ⑤ 타입 스타일

 

3. 소스 작성 순서는 어떠한가?

  나중에 작성한 스타일이 먼저 작성한 스타일을 덮어씀

 

 

#4 글자와 관련된 속성

종류	설명
font-family	글꼴 종류를 지정
font-size	글자 크기를 지정
font-style	글자를 이탤릭체로 표시할지 지정
font-weight	글자의 굵기를 지정

 

 

#5 텍스트 스타일 속성

종류	설명
color	글자색을 지정
text-decoration	텍스트에 밑줄이나 취소선을 표시할지 여부를 지정
text-trasform	텍스트 전체, 또는 첫 글자를 대문자로 표시
text-shadow	텍스트에 그림자를 추가
letter-spacing	글자 사이의 간격을 지정
word-spacing	단어 사이의 간격을 지정
text-align	텍스트 정렬 방법을 지정
line-height	줄 간격을 조절

 

 

#6 웹에서 색상을 지정하는 방법

방법	설명
16진수	빨강, 초록, 파랑 각각 두 자리씩 총 여섯 자리의 16진수로 색상을 표현
rgb, rgba	rgb(R, G, B)	빨강, 초록, 파랑의 양을 0~255 사이의 숫자로 표현
	rgba(R, G, B, a)	rgb 형식에 불투명도를 함께 표현
hsl, hsla	hsl(H, S, L)	색상, 채도, 명도의 값으로 색상을 표현
	hsla(H, S, L, a)	hsl 형식에 불투명도를 함께 표현
색상 이름	red, yellow, black과 같은 색상 이름을 사용

 

 

#7 박스 모델 속성

종류	설명
width	박스 모델의 너비를 지정
height	박스 모델의 높이를 지정
box-sizing	박스 모델의 크기를 계산하는 기준을 지정
box-shadow	박스 모델에 그림자 효과를 추가

 

 

#8 테두리 속성

종류	설명
border-style	상하좌우 4개 방향의 테두리 스타일을 한꺼번에 지정
border-위치-style	'위치'자리에 top, right, bottom, left 중 선택하여 특정 위치의 테두리 스타일을 지정
border-witdh	상하좌우 4개 방향 테두리 두께를 한꺼번에 지정
border-위치-width	'위치'자리에 top, right, bottom, left 중 선택하여 특정 위치의 테두리 두께를 지정
border-color	상하좌우 4개 방향 테두리 색상을 한꺼번에 지정
border-위치-color	'위치'자리에 top, right, bottom, left 중 선택하여 특정 위치의 테두리 색상을 지정
border-radius	상하좌우 4개 방향 꼭지점을 한꺼번에 둥글게 만듬
border-위치-radius	'위치'자리에 top-left, top-right, bottom-right, bottom-eft 등을 선택하여 특정 위치의 꼭지점을 둥글게 처리

 

 

#9 여백 속성

종류	설명
margin	상하좌우 4개 방향의 여백(margin)을 한꺼번에 지정
margin-위치	'위치'자리에 top, right, bottom, left를 사용하여 특정 위치의 여백을 지정
padding	상하좌우 4개 방향의 박스모델 사이의 여백(padding)을 한꺼번에 지정
padding-위치	'위치'자리에 top, right, bottom, left를 사용하여 특정 위치의 박스모델 사이의 여백을 지정

 

 

#10 레이아웃 속성

종류	설명
display	화면에서 요소의 배치 방법을 지정 주요 속성 : block, inlie, inline-block, none 등
float	웹 요소를 왼쪽이나 오른쪽으로 배치 float을 적용한 요소는 clear 속성으로 해제 하지 않으면 뒤에 오는 요소도 계속 왼쪽이나 오른쪽으로 연결해서 배치

 

 

#11 위치 지정 속성

종류	설명
left right top bottom	기준 위치와 요소 사이에 상하좌우 얼마나 떨어져 있는지를 지정
position	웹 요소의 위치를 지정. 속성값으로 static, relative, absolute, fixed가 있음

 

 

#12 배경 이미지 관련 속성

종류	설명
background-color	배경색을 지정
background-clip	배경색이나 이미지를 적용할 밤위를 지정
background-image	배경 이미지를 지정
background-repeat	배경 이미지의 반복 방법을 지정
background-position	배경 이미지의 위치를 지정
background-origin	배경 이미지를 배치할 기준을 지정
background-attachment	배경 이미지를 문서에 고정
background	하나의 속성으로 배경 스타일을 한꺼번에 지정
background-size	배경 이미지의 크기를 조절

 

 

#13 선형 그라데이션 관련 속성

종류	설명
방향	끝 지점을 기준으로 to 다음에 방향을 나타내는 예약어를 최대 2개까지 사용  예약어 예) left, right, top, bottom
각도	그라데이션이 끝나는 각도를 지정.  값은 deg로 표기
색상 중지점	쉼표(,)로 색상을 구분.  색상만 지정하거나 색상과 중지점의 위치를 함께 지정

 

 

#14 원형 그라데이션 관련 속성

종류		설명
모양	ellipse	타원형 그라에디션 (기본값)
	circle	원형 그라데이션
크기	closest-side	그라데이션 가장자리가 그라데이션 중심에서 가장 가까운 측면까지
	closest-corner	그라데이션 가장자리가 그라데이션 중심에서 가장 가까운 꼭지점까지
	farthest-side	그라데이션 가장자리가 그라데이션 중심에서 가장 먼 측면까지
	farthest-corner	그라데이션 가장자리가 그라데이션 중심에서 가장 먼 꼭지점까지
위치		at을 앞에 붙인 후 키워드나 백분율을 사용
색상 중지점		쉼표(,)로 색상을 구분.  색상만 지정하거나 색상과 중지점의 위치를 함께 지정

 

 

#15 연결 선택자

종류	형식	설명
하위 선택자	상위요소 하위요소	상위 요소에 포함된 모든 하위 요소를 선택
자식 선택자	부모요소 > 자식요소	부모 요소에 포함된 자식 요소만 선택
인접 형제 선택자	요소1 + 요소2	요소1 이후에 맨 먼저 오는 형제 요소를 선택
형제 선택자	요소1 ~ 요소2	요소1과 형제인 모든 요소를 선택

 

 

#16 속성 선택자

종류	선택 요소	예시
[속성]	해당 속성이 있는 요소	[required]
[속성 = 값]	지정한 속성값이 있는 요소	[target = _blank]
[속성 ~= 값]	지정한 속성값이 포함된 요소(단어별)	[[class ~= button]
[속성 |= 값]	지정한 속성값이 포함된 요소(하이픈 포함, 단어별)	[title ||= us]
[속성 ^= 값]	지정한 속성값으로 시작하는 요소	[title ^= eng]
[속성 $= 값]	지정한 속성값으로 끝나는 요소	[href $=  xls]
[속성 *= 값]	지정한 속성값의 일부가 일치하는 요소	[href *= w3]

 

 

#17 가상 클래스

종류	설명
:link	방문하지 않은 링크에 스타일을 적용
:visited	방문했던 링크에 스타일을 적용
:hover	지정한 요소에 마우스 포인터를 올려놓을 때 스타일을 적용
:active	지정한 요소를 활성화했을 때 스타일을 적용
:focus	지정한 요소에 초점이 맞춰졌을 때 스타일을 적용
:target	앵커 대상에 스타일을 적용
:enabled	지정한 요소를 사용할 수 있는 상태일 때 스타일을 적용
:disabled	지정한 요소를 사용할 수 없는 상태일 때 스타일을 적용
:checked	선택한 요소의 스타일을 적용
:not()	지정한 요소가 아닐 때 선택해서 스타일을 적용

 

 

#18 구조 가상 클래스

종류	설명
:only-child	부모 안에 자식 요소가 하나뿐일 떄 자식 요소를 선택
A:only-type-of	부모 안에 A 요소가 하나뿐일 때 선택
:first-child	부모 안에 있는 모든 요소 중에서 첫 번째 자식 요소를 선택
:last-child	부모 안에 있는 모든 요소 중에서 마지막 자식 요소를 선택
A:first-of-type	부모 안에 있는 A 요소 중에서 첫 번째 요소를 선택
A:last-of-type	부모 안에 있는 A 요소 중에서 마지막 요소를 선택
:nth-child(n)	부모 안에 있는 모든 요소 중에서 n번째 자식 요소를 선택
:nth-last-child(n)	부모 안에 있는 모든 요소 중에서 끝에서 n번째 자식 요소를 선택
A:nth-of-type(n)	부모 안에 있는 A 요소 중에서 n번째 요소를 선택
A:nth-last-of-type(n)	부모 안에 있는 A 요소 중에서 끝엣어 n번째 요소를 선택

 

 

#19 가상 요소

종류	설명
::first-line	첫 번째 줄을 선택
::first-letter	줄에서 첫 번째 글자를 선택
::before	특정 요소의 앞에 내용이나 스타일을 추가
::after	특정 요소의 뒤에 내용이나 스타일을 추가

 

 

#20 변형 함수

translate() 함수: 요소 이동하기
transform: translate(tx, ty)	지정한 크기만큼 x축, y축으로 이동
transform: translate(tx, ty, tz)	지정한 크기만큼 x축, y축, z축으로 이동
transform: translateX(tx)	지정한 크기만큼 x축으로 이동
transform: translateY(ty)	지정한 크기만큼 y축으로 이동
transform: translateZ(tz)	지정한 크기만큼 z축으로 이동
scale() 함수: 요소 확대∙축소하기
translate: scale(sx, sy)	지정한 크기만큼 x축, y축으로 확대∙축소
translate: scale(sx, sy, sz)	지정한 크기만큼 x축, y축, z축으로 확대∙축소
translate: scaleX(sx)	지정한 크기만큼 x축으로 확대∙축소
translate: scaleY(sy)	지정한 크기만큼 y축으로 확대∙축소
translate: scaleZ(sz)	지정한 크기만큼 z축으로 확대∙축소
rotate() 함수: 요소 회전하기
transform: rotate(각도)	지정한 각도만큼 회전
transform: rotateX(각도)	x축을 기준으로 지정한 각도만큼 회전
transform: rotateY(각도)	y축을 기준으로 지정한 각도만큼 회전
transform: rotateZ(각도)	z축을 기준으로 지정한 각도만큼 회전
transform: rotate3d(rx, ry, rz, 각도)	x축, y축, z축을 기준으로 지정한 각도만큼 회전
skew() 함수: 요소 비틀기
transform: skew(ax, ay)	지정한 각도만큼 x축, y축으로 비틀기
transform: skewX(ax)	지정한 각도만큼 x축으로 비틀기
transform: skewY(ay)	지정한 각도만큼 y축으로 비틀기

 

 

#21 트랜지션 속성

종류	설명
transition-property	트랜지션의 적용 대상을 지정. (기본값은 all)
transition-duration	트랜지션의 실행 시간을 지정. 단위는 s, ms. (기본값은 0)
transition-timing-function	트랜지션의 실행 형태를 지정
transition-delay	트랜지션의 지연 시간을 지정. 단위는 s, ms. (기본값은 0)
transition	transition-property, transition-duration  transition-timing-function, transition-delay 속성을 한꺼번에 지정

 

 

#22 애니메이션 속성

종류	설명
@keyframes	애니메이션이 바뀌는 지점을 설정
animation-delay	애니메이션의 시작 시간을 지정
animation-direction	애니메이션을 종료한 뒤 처음부터 시작할지, 반대 방향으로 진행할지 지정
animation-duration	애니메이션의 실행 시간을 지정. 단위는 s, ms.
animation-interation-count	애니메이션의 반복 횟수를 지정
animation-name	@keyframes로 설정해 놓은 중간 상태를 지정
animation-timing-function	키프레임의 전환 형태를 지정
animation	animation 속성을 한꺼번에 묶어서 지정

 

 

#23 미디어 쿼리의 속성

종류	설명
width, height	웹 페이지의 가로 너비, 세로 높이
min-width, min-height	웹 페이지의 최소 너비, 최소 높이
max-width, max-height	웹 페이지의 최대 너비, 최대 높이
device-width, device-witdh	단말기의 가로 너비, 세로 높이
min-device-witdh, min-device-height	단말기의 쇠노 너비, 최소 높이
max-device-witdh, max-device-height	단말기의 최대 너비, 최대 높이
orientation: portrait	단말기의 세로 모드
orientation: landspace	단말기의 가로 모드

 

 

#24 플렉스 박스 레이아웃 속성

종류	설명	속성값
display	플렉스 컨테이너를 지정	felx, inline-flex
flext-direction	플렉스 항목에서 주축과 방향을 지정	row, row-reverse, column, column-reverse
flex-wrap	컨테이너 너비보다 항목이 많을 경우 줄 바꿈 여부를 지정	nowrap, wrap, wrap-reverse
felx-flow	배치 방향과 줄 바꿈을 한번에 지정	flex-direction 속성값과 flex-wrap 속성값 사용
justify-content	주축에서 플렉스 항목 정렬 방법을 지정	flex-start, flex-end, center, space-between, space-around
align-items	교차축에서 플렉스 항목 정렬 방법을 지정	flex-start, flex-end, center, baseline, stretch
aline-self	특정 플렉스 항목의 정렬 방법을 지정	flex-start, flex-end, center, baseline, stretch
align-content	여러 줄일 때 교차축 정렬 방법을 지정	flex-start, flex-end, center, space-between, space-around, stretch
flex	플렉스 항목의 너비를 줄이거나 늘림	1개에서 3개까지의 값, auto, initial

 

 

#25 CSS 그리드 레이아웃의 속성과 함수

종류	설명	속성값
display	그리드 컨테이너를 지정	grid, inlind-grid
grid-template-columns	칼럼을 지정	크깃값
grid-template-rows	줄 높이를 지정	크깃값
grid-column-gap	칼럼과 칼럼 사이의 간격을 지정	크깃값
grid-row-gap	줄과 줄 사이의 간격을 지정	크깃값
grid-gap	칼럼과 줄 사이의 간격을 한꺼번에 지정	크깃값
grid-column-start	칼럼 시작의 라인 번호를 지정	숫자
grid-column-end	칼럼 마지막의 라인 번호를 지정	숫자
grid-column	칼럼의 시작 번호와 끝 번호 사이에 슬래시(/)를 넣어 사용	숫자
grid-row-start	줄 시작의 라인 번호를 지정	숫자
grid-row-end	줄 마지막의 라인 번호를 지정	숫자
grid-row	줄의 시작 번호와 끝 번호 사이에 슬래시(/)를 넣어 사용	숫자
grid-area	템플릿 이름을 지정
grid-template-areas	grid-area를 사용해 템플릿 그리드를 만듬
minmax()	최솟값과 최댓값을 지정하는 함수	크깃값, auto
repeat()	같은 값을 여러 번 반복할 때 사용하는 함수	크깃값, auto-fill, auto-fit