Ch 8. CSS 속성
11. 투명도
opacity : 요소 투명도
- 1 : 불투명
- 0~1 : 0부터 1 사이의 소수점 숫자
Q1. opacity 속성의 기본값은?
A1. 1
12. 글꼴
font-style : 글자의 기울기
- normal : 기울기 없음
- italic : 이텔릭체
- oblique : 기울어진 글자
font-weight : 글자의 두께(가중치)
- normal, 400 : 기본 두께
- bold, 700 : 두껍게
- bolder : 상위(부모) 요소보다 더 두껍게
- lighter : 상위(부모) 요소보다 더 얇게
- 100~900 : 100 단위의 숫자 9개, normal과 bold 이외 두께
font-size : 글자의 크기
- 16px : 기본 크기
- 단위 : px, em, rem 등 단위로 지정
- % : 부모 요소의 폰트 크기에 대한 비율
- smaller : 상위(부모) 요소보다 작은 크기
- larger : 상위(부모) 요소보다 큰 크기
- xx-small ~ xx-large : 가장 작은 크기 ~ 가장 큰 크기까지, 7단계의 크기를 지정
line-height : 한 줄의 높이, 행간과 유사
- normal : 브라우저의 기본 정의를 사용
- 숫자 : 요소의 글꼴 크기의 배수로 지정
- 단위 : px, em, rem 등의 단위로 지정
- % : 요소의 글꼴 크기의 비율로 지정
font-family : 글꼴(서체)지정
ex.
font-family : 글꼴1, "글꼴2", ...글꼴계열;- 글꼴 계열은 필수로 작성
- 띄어쓰기 등 특수문자가 포함된 글꼴 이름은 큰 따옴표로 묶어야 한다
13. 문자
color : 글자의 색상
- rgb(0, 0, 0) : 검정색
- 색상 : 기타 지정 가능한 색상
text-align : 문자의 정렬 방식
- left : 왼쪽 정렬
- right : 오른쪽 정렬
- center : 가운데 정렬
- justify : 양쪽 정렬
text-decoration : 문자의 장식(선)
- none : 장식 없음
- underline : 밑줄
- overline : 윗줄
- line-through : 중앙 선
text-indent : 문자 첫 줄의 들여쓰기
👉 음수를 사용할 수 있다! 반대는 내어쓰기(outdent)
- 0 : 들여쓰기 없음
- 단위 : px, em, rem 등 단위로 지정
- % : 요소의 가로 너비에 대한 비율
Q1. 문자를 수평 정렬하는 속성은?
A1. text-align
Q2. 문자를 들여쓰는 속성은?
A2. text-indent
Q3. text-decoration 속성의 기본값은?
A3. none
14. 배경
background-color : 요소의 배경 색상
- transparent : 투명함
- 색상 : 지정 가능한 색상
background-image : 요소의 배경 이미지 삽입
- none : 이미지 없음
- url("경로") : 이미지 경로
background-repeat : 요소의 배경 이미지 반복
- repeat : 이미지를 수직, 수평 반복
- repeat-x : 이미지를 수평 반복
- repeat-y : 이미지를 수직 반복
- no-repeat : 반복 없음
background-position : 요소의 배경 이미지 위치
- 0% 0% : 0% ~ 100% 사이 값
- 방향 : top, bottom, left, right, center 방향
- 단위 : px, em, rem 등 단위로 지정
background-size : 요소의 배경 이미지 크기
- auto : 이미지의 실제 크기
- 단위 : px, em, rem 등 단위로 지정
- cover : 비율을 유지, 요소의 더 넓은 너비에 맞춤
- contain : 비율을 유지, 요소의 더 짧은 너비에 맞춤
background-attachment : 요소의 배경 이미지 스크롤 특성
- scroll : 이미지가 요소를 따라서 같이 스크롤
- fixed : 이미지가 뷰포트에 고정, 스크롤 X
- local : 요소 내 스크롤 시 이미지가 같이 스크롤
Q1. 요소 배경에 이미지를 삽입하는 속성은?
A1. background-image
Q2. 요소 배경에 이미지를 삽입할 때 사용하는 함수는?
A2. url("이미지경로")
Q3. 배경 이미지를 반복하지 않는 속성 값은?
A3. no-repeat
Q4. 요소가 스크롤 될 때 배경 이미지는 뷰포트에 고정되는 속성 값은?
A4. fixed
15. 배치(1)
position : 요소의 위치 지정 기준
- static : 기준 없음
- relative : 요소 자신을 기준
- absolute : 위치 상 부모 요소를 기준
- fixed : 뷰포트(브라우저)를 기준
- sticky : 스크롤 영역 기준
top, bottom, left, right : 요소의 각 방향별 거리 지정
- auto : 브라우저가 계산
- 단위 : px, em, rem 등 단위로 지정
16. 배치(2)
요소 쌓임 순서(Stack order)
: 어떤 요소가 사용자와 더 가깝게 있는지(위에 쌓이는지) 결정
- 요소에 position 속성의 값이 있는 경우 위에 쌓임. (기본값 static 제외)
- 1번 조건이 같은 경우, z-index 속성의 숫자 값이 높을 수록 위에 쌓임.
- 1번과 2번 조건까지 같은 경우, HTML의 다음 구조일 수록 위에 쌓임
17. 배치(3)
z-index : 요소의 쌓임 정도를 지정
- auto : 부모 요소와 동일한 쌓임 정도
- 숫자 : 숫자가 높을 수록 위에 쌓임
요소의 display가 변경됨
position 속성의 값으로 absolute, fixed가 지정된 요소는, display 속성이 block으로 변경됨
Q1. position 속성의 기본값은?
A1. static
Q2. 위치상 부모 요소를 기준으로 배치하는 position 속성의 값은?
A2. absolute
Q3. 뷰포트를 기준으로 배치하는 position 속성의 값은?
A3. fixed
Q4. display 속성이 block 값으로 바뀌지 않은 position 속성의 값은?
A4. relative
18. 플렉스(정렬) Container (1)
flex는 수평 정렬
- flex container
- flex items
Flex Container
display : Flex Container의 화면 출력 특성
- flex : 블록 요소와 같이 Flex Container 정의
- inline-flex : 인라인 요소와 같이 Flex Container 정의
flex-direction : 주 축을 설정
- row : 행 축 (좌 -> 우)
- row-reverse : 행 축 (우 -> 좌)
- column : 열 축 (위 -> 아래)
- column-reverse : 열 축 (아래 -> 위)
19. 플렉스(정렬) Container (2)
Flex Container
flex-wrap : Flex Items 묶음(줄 바꿈) 여부
- nowrap : 묶음(줄 바꿈) 없음
- wrap : 여러 줄로 묶음
- wrap-reverse : wrap의 반대 방향으로 묶음
justify-content : 주 축의 정렬 방법
- flex-start : Flex Items를 시작점으로 정렬
- flex-end : Flex Items를 끝점으로 정렬
- center : Flex Items를 가운데 정렬
- space-between : 각 Flex Item 사이를 균등하게 정렬
- space-around : 각 Flex Item의 외부 여백을 균등하게 정렬
align-content : 교차 축의 여러 줄 정렬 방법
- stretch : Flex Items를 시작점으로 정렬
- flex-start : Flex Items를 시작점으로 정렬
- flex-end : Flex Items를 끝점으로 정렬
- center : Flex Items를 가운데 정렬
- space-between : 각 Flex Item 사이를 균등하게 정렬
- space-around : 각 Flex Item의 외부 여백을 균등하게 정렬
align-items : 교차 축의 한 줄 정렬 방법
- stretch : Flex Items를 교차 축으로 늘림
- flex-start : Flex Items를 각 줄의 시작점으로 정렬
- flex-end : Flex Items를 끝점으로 정렬
- center : Flex Items를 가운데 정렬
- baseline : Flex Items를 각 줄의 문자 기준선에 정렬
20. 플렉스(정렬) Items
Flex Item
order : Flex Item의 순서
- 0 : 순서 없음
- 숫자 : 숫자가 작을 수록 먼저
flex-grow : Flex Item의 증가 너비 비율
- 0 : 증가 비율 없음
- 숫자 : 증가 비율
flex-shrink : Flex Item의 감소 너비 비율
- 1 : Flex Container 너비에 따라 감소 비율 적용
- 숫자 : 감소 비율
flex-basis : Flex Item의 공간 배분 전 기본 너비
- auto : 요소의 Content 너비
- 단위 : px, em, rem 등 단위로 지정
Q1. "display:flex;가 지정된 요소의 자식 요소를 Flex ???이라 부릅니다." 에서 ???에 들어갈 용어는?
A1. Items
Q2. Flex Container의 주 축을 지정하는 속성은?
A2. flex-direction
Q3. flex-wrap 속성의 기본값은?
A3. nowrap
Q4. 교차 축의 한 줄 정렬을 위한 속성은?
A4. align-items
Q5. Flex Item의 증가 너비를 지정하는 속성은?
A5. flex-grow
Q6. flex-grow 속성의 기본값은?
A6. 0
Q7. flex-shrink 속성의 기본값은?
A7. 1
21. 전환
transition : 속성명 지속시간 타이밍함수 대기시간; : 요소의 전환 효과를 지정하는 단축 속성
transition-property : 전환 효과를 사용할 속성 이름을 지정
- all : 모든 속성에 적용
- 속성이름 : 전환 효과를 사용할 속성 이름
transition-duration : 전환 효과의 지속시간을 지정
- 0s : 전환 효과 없음
- 시간 : 지속시간(s)을 지정
transition-timing-function : 전환 효과의 타이밍 함수를 지정
- ease : 느리게 - 빠르게 -느리게
- linear : 일정하게
- ease-in : 느리게 - 빠르게
- ease-out : 빠르게 - 느리게
- ease-in-out : 느리게 - 빠르게 - 느리게
- cubic-bezier(n, n, n, n) : 자신만의 값을 정의(0~1)
- steps(n) : n번 분할된 애니메이션
transition-delay : 전환 효과가 몇 초 뒤에 시작할지 대기시간을 지정
- 0s : 대기시간 없음
- 시간 : 대기시간(s)을 지정
Q1. transition-property 속성의 기본값은?
A1. all
Q2. transition 단축 속성의 필수 포함 속성은?
A2. transition-duration
22. 변환(1)
요소의 변환 효과
transform: 변환함수1 변환함수2 변환함수3 ...;
transform: 원근법 이동 크기 회전 기울임;
2D 변환 함수
- translate(x, y) : 이동(x축, y축)
- translateX(x) : 이동(x축)
- translateY(y) : 이동(y축)
- scale(x, y) : 크기(x축, y축)
- scaleX(x) : 크기(x축)
- scaleY(y) : 크기(y축)
- rotate(degree) : 회전(각도)
- skew(x, y) : 기울임(x축, y축)
- skewX(x) : 기울임(x축)
- skewY(y) : 기울임(y축)
- matrix(n, n, n, n, n, n) : 2차원 변환 효과
3D 변환 함수
- translateZ(z) : 이동(z축)
- translate3d(x, y, z) : 이동(x축, y축, z축)
- scaleZ(z) : 크기(z축)
- scale3d(x, y, z) : 크기(x축, y축, z축)
- perspective(n) : 원근법(거리)
- matrix3d(n, n, n, n, n, n, n, n, n, n, n, n, n, n, n, n) : 3차원 변환 효과
- rotateX(x) : 회전(x축)
- rotateY(y) : 회전(y축)
- rotateZ(z) : 회전(z축)
- rotate3d(x, y, z, a) : 회전(x축, y축, z축, 각도)
23. 변환(2)
perspective : 하위 요소를 관찰하는 원근 거리를 지정
- 단위 : px 등 단위로 지정
perspective 속성과 함수 차이점
| 속성/함수 | 적용 대상 | 기준점 설정 |
|---|---|---|
perspective: 600px; | 관찰 대상의 부모 | perspective-origin |
transform: perspective(600px) | 관찰 대상 | transform-origin |
backface-visibility : 3D 변환으로 회전된 요소의 뒷면 숨김 여부
- visible : 뒷면 보임
- hidden : 뒷면 숨김
Q1. transform 속성의 2D 회전을 지정하는 변환 함수는?
A1. rotate()
Q2. 관찰 대상의 부모 요소에 원근법을 지정하는 속성은?
A2. perspective
Q3. skewX 변환 함수에서 값으로 사용하는 단위는?
A3. deg
Q4. perspective 함수에서 원근 거리가 적용되늰 대상은?
A4. 관찰 대상 자체
Q5. 요소의 뒷면을 숨기는 속성과 값은?
A5. backface-visibility: hidden;
