CSS
-
스타일 시트
브라우저 기본 스타일 – 웹 브라우저에 웹 문서를 표시할 때 브라우저에서 기본으로 사용
인라인 스타일 – style 속성을 사용해 필요한 요소에 스타일을 직접 지정
내부 스타일 시트 – 문서 앞부분에 문서에서 사용하는 스타일을 모아서 함께 정의하고 관리
외부 스타일 시트 – 문서에서 사용하는 스타일을 모아서 따로 파일로 저장한 후 연결해서 사용 -
CSS 기본 선택자
전체 선택자 – 문서의 모든 요소에 스타일을 적용
ex) * { margin:0; }
타입 선택자 – 특정 태그를 사용한 모든 요소에서 스타일을 적용
ex) p { font-style: italic; }
클래스 선택자 – 특정 부분만 선택해서 문서 안에 여러 번 적용, 마침표(.)를 붙여서 사용
ex) .bg { background-color: #ddd; }
id 선택자 – 특정 부분만 선택해서 문서 안에서 한 번만 적용, #을 붙여서 사용
ex) #container { width: 500px; }
그룹 선택자 – 여러 요소에 같은 스타일을 적용할 때 사용
ex) h1, h2 { text-align: center; } -
스타일 우선순위
1) 얼마나 중요한가?
① 사용자 스타일 - ② 제작자 스타일 - ③ 브라우저 기본 스타일
2) 적용 범위는 어디까지 인가?
① !important - ② 인라인 스타일 - ③ id 스타일 - ④ 클래스 스타일 -
⑤ 타입 스타일
3) 소스 작성 순서는 어떠한가?
나중에 작성한 스타일이 먼저 작성한 스타일을 덮어씌움 -
글자와 관련된 속성
font-family – 글꼴 종류를 지정
font-size – 글자 크기를 지정
font-style – 글자를 이탤릭체로 표시할지 지정
font-weight – 글자의 굵기를 지정
-
텍스트 스타일 속성
color – 글자색을 지정
text-decoration – 텍스트에 밑줄이나 취소선을 표시할지 여부를 지정
text-transform – 텍스트 전체, 또는 첫 글자를 대문자로 표시
text-shadow – 텍스트에 그림자를 추가함
letter-spacing – 글자 사이의 간격을 지정
word-spacing – 단어 사이의 간격을 지정
text-align – 텍스트 정렬 방법을 지정
line-height – 줄 간격을 조절 -
웹에서 색상을 지정하는 방법
16진수 – 빨강, 초록, 파랑, 각각 두 자리씩 총 여섯 자리의 16진수로 색상을 표현
RGB – 빨강, 초록, 파랑의 양을 0 ~ 255 사이의 숫자로 표현
RGBA – RGB 형식에 불투명도를 함께 표현
HSL – 색상, 채도, 명도의 값으로 색상을 표현
HSLA – HSL 형식에 불투명도를 함께 표현
색상 이름 – red, yellow, black과 같은 색상 이름을 사용 -
박스 모델 속성
width – 박스 모델의 너비를 지정
height – 박스 모델의 높이를 지정
box-sizing – 박스 모델의 크기를 계산하는 기준을 지정
box-shadow – 박스 모델에 그림자 효과를 추가 -
테두리 속성
border-style – 상하좌우 4개 방향의 테두리 스타일을 한꺼번에 지정
border-위치-style - ‘위치’ 자리에 top, right, bottom, left 중에서 선택해서 특정 위치의 테두리 스타일만 지정
border-width – 상하좌우 4개 방향 테두리 두께를 한꺼번에 지정
border-위치-width - ‘위치’ 자리에 top, right, bottom, left 중에서 선택해서 특정 위치의 테두리 두께만 지정
border-color – 상하좌우 4개 방향 테두리 색상을 한꺼번에 지정
border-위치-color - ‘위치’ 자리에 top, right, bottom, left 중에서 선택해서 특정 위치의
테두리 색상만 지정
border-radius – 상하좌우 4개 방향 꼭짓점을 한꺼번에 둥글게 만듦
border-위치-radius - ‘위치’ 자리에 top, right, bottom, left 중에서 선택해서 특정
꼭짓점만 둥글게 처리 -
여백 속성
margin – 상하좌우 4개 방향의 마진을 한꺼번에 지정
margin-위치 - ‘위치’ 자리에 top, right, bottom, left 중에서 선택해서 특정 위치의
마진만 지정
padding – 상하좌우 4개 방향의 패딩을 한꺼번에 지정
padding-위치 - ‘위치’ 자리에 top, right, bottom, left 중에서 선택해서 특정 위치의
패딩만 지정 -
레이아웃 속성
display – 화면에서 요소를 배치할 방법을 지정, 자주 사용하는 속성으로 block, inline, inline-block, none 등이 있음
float – 웹 요소를 왼쪽이나 오른쪽으로 배치, float를 적용한 요소는 clear 속성으로
해제 하지 않으면 뒤에 오는 요소도 계속 왼쪽이나 오른쪽으로 연결해서 배치함 -
위치 지정 속성
left, right, top, bottom – 기준 위치와 요소 사이에 상하좌우 얼마나 떨어져 있는지 지정
position – 웹 요소의 위치를 지정, 속성값으로 static, relative, absolute, fixed가 있음 -
배경 이미지 관련 속성
background-color – 배경색을 지정
background-clip – 배경색이나 이미지를 어디까지 적용할지 지정
background-image – 배경 이미지를 지정
background-repeat – 배경 이미지의 반복 방법을 지정
background-position – 배경 이미지의 위치를 지정
background-origin – 배경 이미지를 배치할 기준을 지정
background-attachment – 배경 이미지를 문서에 고정
background – 하나의 속성으로 배경 스타일을 한꺼번에 지정
background-size – 배경 이미지의 크기를 조절 -
선현 그러데이션 관련 속성
방향 – 끝 지점을 기준으로 to 다음에 방향을 나타내는 예약어를 최대 2개까지 사용 가능,
사용할 수 있는 예약어는 left, right, top, bottom이 있음
각도 – 그러데이션이 끝나는 각도를 지정, 값은 deg로 표기
색상 중지점 – 쉼표(,)로 색상을 구분하며, 색상만 지정하거나 색상과 중지점의 위치를
함께 지정 -
원형 그러데이션 관련 속성
-
모양
ellipse – 타원형의 그러데이션을 나타내며 기본값
circle – 원형의 그러데이션을 나타냄 -
크기
closest-side – 그러데이션 가장자리가 그러데이션 중심에서 가장 가까운 측면에 닿게 함
closest-corner – 그러데이션 가장자리가 그러데이션 중심에서 가장 가까운 꼭짓점에
닿게 함
farthest-side – 그러데이션 가장자리가 그러데이션 중심에서 가장 먼 측면에 닿게 함
farthest-corner – 그러데이션 가장자리가 그러데이션 중심에서 가장 먼 꼭짓점에 닿게 함 -
위치
at을 앞에 붙인 후 키워드나 백분율을 사용함 -
색상 중지점
쉼표(,)로 색상을 구분하며, 색상만 지정하거나 색상과 중지점의 위치를 함께 지정함
-
연결 선택자
하위 선택자 (상위요소 하위요소) - 상위 요소에 포함된 모든 하위 요소를 선택
자식 선택자 (부모요소 > 자식요소) - 부모 요소에 포함된 자식 요소만 선택
인접 형제 선택자 (요소 1 + 요소 2) - 요소 1 이후 맨 먼저 오는 형제 요소를 선택
형제 선택자 (요소 1 ~ 요소 2) - 요소 1과 형제인 모든 요소를 선택
-
속성 선택자
[속성] - 해당 속성이 있는 요소
ex) [required][속성 = 값] - 지정한 속성값이 있는 요소
ex) [target = _blank][속성 ~= 값] - 지정한 속성값이 포함된 요소(단어별)
ex) [class ~= button][속성 |= 값] - 지정한 속성값이 포함된 요소(하이픈 포함, 단어별)
ex) [title ¦= us][속성 ^= 값] - 지정한 속성값으로 시작하는 요소
ex) [title ^= eng][속성 $= 값] - 지정한 속성값으로 끝나는 요소
ex) [href $= xls][속성 *= 값] - 지정한 속성값의 일부가 일치하는 요소
ex) [href *= w3] -
가상 클래스
:link – 방문하지 않은 링크에 스타일을 적용
:visited – 방문했던 링크에 스타일을 적용
:hover – 지정한 요소에 마우스 포인터를 올려놓을 때 스타일 적용
:active – 지정한 요소를 활성화했을 때 스타일을 적용
:focus – 지정한 요소에 초점이 맞춰졌을 때 스타일을 적용
:target – 앵커 대상에 스타일을 적용
:enabled – 지정한 요소를 사용할 수 있는 상태일 때 스타일을 적용
:disabled – 지정한 요소를 사용할 수 없는 상태일 때 스타일을 적용
:checked – 선택한 요소의 스타일을 적용
:not – 지정한 요소가 아닐 때 선택해서 스타일을 적용 -
구조 가상 클래스
: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번째 자식 요소를 선택
A:nth-of-type(n) - 부모 안에 있는 A 요소 중에서 n번째 요소를 선택
A:nth-last-of-type – 부모 안에 있는 A 요소 중에서 끝에서 n번째 요소를 선택 -
가상 요소
::first-line – 첫 번째 줄을 선택
::first-letter – 줄에서 첫 번째 글자를 선택
::before – 특정 요소의 앞에 내용이나 스타일을 추가
::after – 특정 요소의 뒤에 내용이나 스타일을 추가
-
변형 함수
translate( ) 함수: 요소 이동하기
transform: translate(tx, ty) - 지정한 크기만큼 x축과 y축으로 이동
transform: translate(tx, ty, tz) - 지정한 크기만큼 x축, y축, z축으로 이동
transform: translate(tx) - 지정한 크기만큼 x축으로 이동
transform: translate(ty) - 지정한 크기만큼 y축으로 이동
transform: translate(tx) - 지정한 크기만큼 z축으로 이동scale( ) 함수: 요소 확대, 축소하기
transform: scale(sx, sy) - 지정한 크기만큼 x축, y축으로 확대, 축소
transform: scale(sx, sy, sz) - 지정한 크기만큼 x축, y축, z축으로 확대, 축소
transform: scale(sx) - 지정한 크기만큼 x축으로 확대, 축소
transform: scale(sy) - 지정한 크기만큼 y축으로 확대, 축소
transform: scale(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축으로 비틈 -
트랜지션 속성
transition-property – 트랜지션의 적용 대상을 지정합니다. 기본값은 all
transition-duration – 트랜지션의 실행 시간을 지정, 단위는 s(초)이고 기본값은 0
transition-timing-function – 트랜지션의 실행 형태를 지정
transition-delay – 트랜지션의 지연 시간을 지정, 단위는 s(초)이고 기본값은 0
transition – property, duration, timing-function, delay 속성을 한꺼번에 지정
-
애니메이션 속성
@keyframes – 애니메이션이 바뀌는 지점을 설정
animation-delay – 애니메이션의 시작 시간을 지정
animation-direction – 애니메이션을 종료한 뒤 시작이나 반대방향으로 진행할지 지정
animation-duration – 애니메이션의 실행 시간을 지정, 단위는 s(초)
animation-iteration-count – 애니메이션의 반복 횟수를 지정
animation-name - @keyframes로 설정해 놓은 중간 상태를 지정
animation-timing-function – 키프레임의 전환 형태를 지정
animation – animation의 속성을 한꺼번에 지정 -
미디어 쿼리의 속성
width, height – 웹 페이지의 가로 너비, 세로 높이
min(max)-width, min(max)-height – 웹 페이지의 최소(최대) 너비, 최소(최대) 높이
device-width, device-height – 단말기의 가로 너비, 세로 높이
min-device-width, min-device-height – 단말기의 최소 너비, 최소 높이
max-device-width, max-device-height – 단말기의 최대 너비, 최대 높이
orientation: portrait – 단말기의 세로 모드
orientation: landscape – 단말기의 가로 모드 -
플렉스 박스 레이아웃의 속성
display – 플렉스 컨테이너를 지정
속성값: flex, inline-flex
flext-direction – 플렉스 항목에서 주축과 방향을 지정
속성값: row, row-reverse, column, column-reverse
flex-wrap – 컨테이너 너비보다 항목이 많을 경우 줄 바꿈 여부를 지정
속성값: nowrap, wrap, wrap-reverse
flex-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
align-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 -
CSS 그리드 레이아웃의 속성과 함수
display – 그리드 컨테이너를 지정
속성값: grid, inline-grid
grid-template-columns – 칼럼을 지정
속성값: 크깃값
grid-template-rows – 줄 높이를 지정
속성값: 크깃값
grid-column-gap – 칼럼과 칼럼 사이의 간격을 지정
속성값: 크깃값
grid-row-gap – 줄과 줄 사이의 간격을 지정
속성값: 크깃값
grid-column(또는 row)-start – 칼럼(또는 줄) 시작의 라인 번호를 지정
속성값: 숫자
grid-column(또는 row)-end – 칼럼(또는 줄) 마지막의 라인 번호를 지정
속성값: 숫자
grid-column(또는 row) – 칼럼(또는 줄) 시작 번호와 끝 번호 사이에 슬래시(/) 넣어 사용
속성값: 숫자
grid-area – 템플릿 이름을 지정
grid-template-areas – grid-area를 사용해 템플릿 그리드를 만듦
minmax( ) - 최솟값과 최댓값을 지정하는 함수
속성값: 크깃값, auto
repeat( ) - 같은 값을 여러 번 반복할 때 사용하는 함수
속성값: 크깃값, auto-fill, auto-fit
