CSS 정리
#CSS 단위
- px : 픽셀
- % : 상대적 백분율
- em : 요소의 글꼴 크기
- rem : 루트 요소의 글꼴 크기
- vw : 뷰포트 가로 너비의 백분율
- vh : 뷰포트 세로 너비의 백분율
#border : 선-두께(border-width) 선(border-style)-종류 선-색상(border-color);
#box-sizing
- content-box : 요소의 내용으로 크기 계산
- border-box : 요소의 내용 + padding + border로 크기 계산
#overflow
요소의 크기 이상으로 내용이 넘쳤을 때, 보여짐을 제어하는 단축 속성
- visible : 넘친 내용을 그대로 보여줌.(기본값)
- hidden : 넘친 내용을 잘라냄.
- scroll : 넘친 내용을 잘라냄. 스크롤바 생성
- auto : 넘친 내용이 있는 경우에만 자르고 스크롤바 생성
#display
요소의 화면 출력 특성
- block : 상자 요소(span은 인라인이지만 block을 통해 너비와 높이를 줄 수 있음.)
- inline : 글자 요소
- inline-block : 글자 + 상자 요소
- flex : 1차원 레이아웃
- grid : 2차원 레이아웃
- none : 보여짐 특성 없음. 화면에서 사라짐
- 기타 : table, table-row, table-cell 등
#opacity
요소 투명도
- 1 : 불투명(기본값)
- 0~1 : 0부터 1사이의 소수점 숫자
#배치
✔️ position
요소의 위치 지정기준
- static : 기준 없음
- relative : 요소 자신을 기준
- absolute : 위치 상 부모 요소를 기준
- fixed : 뷰포트를 기준
✏️position 속성 값으로 absolute, fixed가 지정된 요소는 display 속성이 block으로 바뀜.
✔️ z-index
요소의 쌓임 정도를 지정
- auto : 부모 요소와 동일한 쌓임 정도
- 숫자가 높을 수록 위에 쌓임
#플렉스(정렬) : 1차원 레이아웃
✔️ display
Flex Container의 화면 출력 특성
✔️ flex-direction
주 축을 설정
✔️ flex-wrap
Flex Items 묶음(줄 바꿈) 여부
✔️ justify-content
주 축의 정렬 방법(수평 정렬)
✔️ align-content
교차 축의 여러 줄 정렬 방법
✔️ align-items
교차 축의 한 줄 정렬 방법
#플렉스 Items
✔️ order
Flex Item 순서
✔️ flex-grow
Flex Item의 증가 너비 비율
✔️ flex-shrink
Flex Item의 감소 너비 비율
✔️ flex-basis
Flex Item의 공간 배분 전 기본 너비
#전환
transition : 속석명 지속시간 타이밍함수 대기시간;
요소의 전환(시작과 끝) 효과를 지정하는 단축속성
✔️ transition-property
전환 효과를 사용할 속성 이름 지정
✔️ transition-duration
전환 효과의 지속시간 지정
✔️ transition-timing-fuction
전환 효과의 타이밍 함수 지정
- ease : 느빠느
- linear : 일정
- ease-in : 느빠
- ease-out : 빠느
- ease-in-out : 느빠느
-steps(n) : n번 분활된 애니메이션
✏️ https://easings.net/ko
✏️ https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function
✏️ https://greensock.com/docs/v2/Easing
✔️ transition-delay
전환 효과가 몇 초 뒤에 시작할지 대기시간 지정
#변환
✔️ perspective
하위 요소를 관찰하는 원근 거리를 지정
✔️ backface-visibility
3D 변환으로 회전된 요소의 뒷면 숨김 여부
-> 위에서 정리한 css를 바탕으로 여러가지 예시들을 코딩해보았다.
