CSS속성

ch 8. CSS 속성
 

1. 박스 모델
 

width : 요소의 가로 너비
height : 요소의 세로 너비
(px, em, vw 등 단위로 지정)
 

min- 최소 / max- 최대
 

* 단위 px, %, em, rem, vm, vh
 

외부여백 : margin
 

내부여백 : padding
 

테두리선 :
border: 선-두께 선-종류 선-색상;
색상지정 border-color
 

모서리선 : border-radius
 

요소의 크기 계산 기준을 지정: box-sizing
content-box : 요소의 내용(content)으로 크기 계산
border-box : 요소의 내용 + padding + border로 크기 계산
 

넘침 제어 : overflow
visible : 넘친 내용을 그대로 보여줌
hidden : 넘친 내용을 잘라냄
scroll: 넘친 내용을 잘라냄, 스크롤바 생성
auto: 넘친 내용이 있는 경우에만 잘라내고 스크롤바 생성
 

화면 출력(보여짐) 특성: display
block: 상자(레이아웃) 요소
inline : 글자 요소
inline-block : 글자 + 상자 요소
flex : 플렉스 박스(1차원 레이아웃)
grid : 그리드 (2차원 레이아웃)
none : 보여짐 특성 없음, 화면에서 사라짐
기타 : table, table-row, table-cell 등..
 

투명도 :opacity
 

2. 글꼴, 문자
 

글꼴
두께 : font-weight
normal, 400 : 기본 두께
bold, 700 :두껍게
bolder : 상위(부모) 요소보다 더 두껍게
lighter : 상위(부모) 요소보다 더 얇게
100~900 : 100단위의 숫자 9개, normal 과 bold 이외 두께
 

사이즈: font-size
 

한 줄의 높이, 행간과 유사 : line-height
 

문자
 

색상 : color
rgb(0,0,0) , #색상코드
 

정렬방식 :
text-align : left, right, center, justify(양쪽정렬)
문자의 장식(선) :
text-decoration: none, underline(아랫줄), overline(윗줄), line-through(중앙선)
문자 첫 줄의 들여쓰기 : (음수를 사용, 반대는 내어쓰기(outdent))
text-indent: 0, 단위, %
 

3. 배경
 

이미지 삽입 :
background-image : url("경로")
 

이미지 배경 위치:
background-position: top, bottom, left, right, center
 

이미지 스크롤 특성:
background-attachment: scroll(이미지가 요소를 따라서 같이 스크롤), fixed(이미지가 뷰포트에 고정, 스크롤 X)
 

4. 배치
 

요소의 위치 지정 기준: position
static :기준없음
relative :요소 자신을 기준
absolute: 위치 상 부모 요소를 기준
fixed: 뷰포트(브라우저)를 기준
sticky : 스크롤 영역 기준
 

요소 쌓임 순서(Stack order) : 어떤 요소가 사용자와 더 가깝게 있는지(위에 쌓이는지) 결정
1. 요소에 position 속성의 값이 있는 경우 위에 쌓임.(기본값 static 제외)
2. 1번 조건이 같은 경우, z-index 속성의 숫자 값이 높을수록 위에 쌓임
3. 1번과 2번 조건까지 같은 경우, HTML의 다음 구조일 수록 위에 쌓임
 

요소의 쌓임 정도를 지정 : index
auto: 부모 요소와 동일한 쌓임 정도
숫자: 숫자가 높을 수록 위에 쌓임
 

*요소의 display가 변경됨 :
position 속성의 값으로 absolute,fixed가 지정된 요소는 display 속성이 block으로 변경됨.
 

5. 플렉스(정렬)
 

Flex Container의 화면 출력(보여짐) 특성
 

flex : 블록 요소와 같이 Flex Container 정의
inline-flex: 인라인 요소와 같이 Flex Container 정의
 

주 축을 설정(수평, 수직)
flex-direction
:row 행 축(좌>우)
:row-reverse 행 축(우>좌)
:column 열 축(위>아래)
:column-reverse 열 축(아래>위)
 

Flex Items 묶음(줄 바꿈) 여부
flex-wrap
:nowrap : 묶음(줄 바꿈) 없음
:wrap :여러 줄로 묶음
:wrap-reverse : wrap의 반대 방향으로 묶음
 

주 축의 정렬방법(수평)
justify-content
:flex-start : Flex Items를 시작점으로 정렬
:flex-end : Flex Items를 끝점으로 정렬
:center : Flex Items를 가운데 정렬
:space-between : 각 Flex Items 사이를 균등하게 정렬
:space-around : 각 Flex Items 의 외부 여백을 균등하게 정렬
 

교차 축(수직)의 여러 줄 정렬 방법(수평)
align-content
:stretch : Flex Items를 시작점으로 정렬
:flex-start : Flex Items를 시작점으로 정렬
:flex-end : Flex Items를 끝점으로 정렬
:center : Flex Items를 가운데 정렬
:space-between : 각 Flex Items 사이를 균등하게 정렬
:space-around : 각 Flex Items 의 외부 여백을 균등하게 정렬
 

Flex Item의 순서
order
0 : 순서없음
숫자 : 숫자가 작을 수록 먼저
 

Flex Item의증가 너비 비율
flex-grow
0 : 증가비율 없음
숫자 : 증가비율
 

Flex Item의 감소 너비 비율
flex-shrink
1: Flex Container 너비에 따라 감소 비율 적용
숫자: 감소 비율
 

Flex Item의 공간 배분 전 기본 너비
flex-basis
auto: 요소의 Content 너비
단위 :px, em,rem 등 단위로 지정
 

6. 전환
 

요소의 전환(시작과 끝) 효과를 지정하는 단축 속성
transition: 속성명 지속시간 타이밍함수 대기시간
 

전환 효과를 사용할 속성 이름을 지정
transition-property
all: 모든 속서에 적용
속성이름 : 전환 효가를 사용할 속성 이름 명시



전환 효과의 지속시간을 지정
transition-duration
0s : 전환효과없음
시간 : 지속시간(s)을 지정
 

전환 효과의 타이밍(Easing) 함수를 지정
transition-timing-function
ease : 느리게 - 빠르게 - 느리게
linear : 일정하게
ease-in : 느리게 - 빠르게
ease-out : 빠르게 - 느리게
ease-in-out : 느리게 - 빠르게 - 느리게
cubic-bezier(n,n,n,n) : 자신만의 값을 정의(0~1)
steps(n) : n번 분할된 애니메이션
 

*참조사이트 : https://easings.net/
 

전환 효과가 몇 초 뒤에 시작할지 대기시간을 지정
transition-delay
0s : 대기시간 없음
시간 : 대기시간(s)을 지정
 

7. 변환
 

요소의 번환효과
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축)
scal3d(x,y,z) : 크기(x축, y축, z축)
rotateX(x) : 회전(x축)
rotateX(y) : 회전(y축)
rotateZ(z) : 회전(z축)
rotate3d(x,y,z,a) :회전(x축, y축, z축, 각도)
perspective(n) : 원근법(거리)
matrix3d(n,n,n,n,n,n) : 3차원 변환 효과
 

하위 요소를 관찰하는 원근 거리를 지정
perspective
단위: px 등 단위로 지정
 

3D 변환으로 회전된 요소의 뒷면 숨김 여부
backface-visibility
visivle : 뒷명 보임
hidden : 뒷면 숨김
 

8. 띄움
9. 애니메이션
10. 그리드
11. 다단
12. 필터