CSS 속성
position
position의 속성으로는 static, relative, absolute, fixed가 있다.
- static은 요소를 고정시킨다.
- relative는 요소 자신을 기준으로 배치를 한다.
- absolute는 위치 상 부모 요소를 기준으로 배치한다.
- fixed는 뷰포트(브라우저)를 기준으로 배치한다.
요소 쌓임 순서(Stack order)
어떤 요소가 사용자와 더 가깝게 있는지를 결정한다.
1. 요쇼에 position 속성값이 있는 경우 위에 쌓임.(static 제외)
2. 1번 조건이 같은 경우 z-index 속성의 숫자 값이 높을 수록 위에 쌓임.
3. 1번과 2번의 조건이 같은 경우, HTML의 다음 구조 일수록 위에 쌓임.
position 속성의 값으로 absolute, fixed가 지정된 요소는 display의 속성이 block으로 변경됨.
배경
- background-color : 요소의 배경 색상
- 그라데이션 컬러를 백그라운드 요소로 삽입이 가능하다.
- background:linear-gradient()
- 색상1 | 색상2: 상하로 색 2개 지정
- 방향 | 색상1 | 색상2: 해당 방향으로 색상 2개 지정(ex,90deg blue red)
- 방향 | 색상1 | 색상1의 비중 | 색상2: 색상1의 비중을 %로 지정
- 방향 | 색상1 | 색상2 | 색상3: 색상 3개 사용
- background-image: 백그라운드 컬러위에 이미지를 삽입
- url속성으로 이미지의 경로를 적어 이미지를 삽입한다.
- url속성으로 이미지의 경로를 적어 이미지를 삽입한다.
- background-repeat: 요소의 배경 이미지를 반복
- repeat: 이미지를 수직, 수평으로 반복
- repeat-X: 이미지를 수평 반복
- repeat-y: 이미지를 수직 반복
- no-repeat: 반복 없음
- background-position: 배경의 이미지를 위치 시킨다.
- 방향: top, bottom, left, right, center 방향
- 단위: px, em, rem등 단위로 지정
- background-size: 요소 배경 이미지 크기
- auto: 이미지의 실제 크기
- 단위: px, em, rem등 단위로 지정
- cover: 비율 유지, 요소의 더 넓은 너비에 맞춤
- contain: 비율 유지, 요소의 더 짧은 너비에 맞춤
- background-attatchment
- scroll: 이미지가 요소를 따라 같이 스크롤
- fixed: 이미지가 뷰포트에 고정, 스크롤 X
Flex
요소의 화면 출력의 특성
display:
- block, inline, inline-block: 각 요소에 이미 지정되어 있는 값.
- flex, gid, none: 따로 지정해서 사용하는 값.
- flex: 플렉스 박스(1차원 레이아웃)
- grid: 그리드(2차원 레이아웃)
- none: 보여짐 특성 없음, 화면에서 사라짐.
flex를 요소의 display 특성으로 주게되면, flex요소들은 수직정렬에서 수평 정렬로 default값이 바뀌게 된다.
-
flex-direction: 주 축을 설정
- row: 행 축(좌 -> 우)
- row-reverse: 행 축(우 -> 좌)
- column: 열 축(상 -> 하)
- column-reverse: 열 축(하 -> 상)
-
flex-wrap: flex item 묶음(줄 바꿈) 여부
- nowrap: 묶음(줄 바꿈) 없음
- wrap: 여러 줄로 묶음
- wrap-reverse: wrap의 반대 방향으로 묶음
-
justify-content: 주 축의 정렬 방법
- flex-start: flex items를 시작점으로 정렬
- flex-end: flec 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를 각 줄의 문자 기준선에 정렬
-
align-content: 교차 축의 여러 정렬 방법
- stretch: flex items를 시작점으로 정렬
- flex-start: flex items를 시작점으로 정렬
- flex-end: flex items를 끝점으로 정렬
- center: flex items를 가운데 정렬
- space-between: 각 flex item 사이를 균등하게 정렬
- space-around: 각 flex item의 외부 여백을 균등하게 정렬
Trasnform
transform: 요소의 변환 효과
- 2D 변환 함수
- translate(x,y): (x축, y축) 이동
- scale(x,y): (x축, y축) 크기 // scale은 x,y축을 따로 쓰지 않고, 같이 사용한다.
- rotate(degree): 회전 (각도)
- skew(x,y): (x축, y축)기울임 // skew는 x,y축을 함께 쓰지 않고, 따로 사용한다.(음수값 사용 가능)
- 3D 변환 함수
- rotateX(x), (y): 회전 X,Y축 // x와 y축으로는 3D 형상을 나타 낼 수 없으므로 perspective를 함께 사용한다.
- perspective(n): 원근법 (거리) // 원근법 함수는 제일 앞에 적어야 한다.
- backface-visibility
- visible: 뒷면 보임
- hidden: 뒷면 숨김
Transition
요소의 전환(시작과 끝) 효과를 지정하는 단축 속성
transition: 속성이름(property) 지속시간(duration) 타이밍함수(timing-function) 대기시간(delay);
// 단축 속성으로 작성 할 때, 필수 포함 속성으로 지속시간은 꼭 기입해야 한다.
- transition-timing-function: 전환 효과의 타이밍 함수를 지정
- ease: 느리게 - 빠르게 - 느리게
- linear: 일정하게
- ease-in: 느리게 - 빠르게
- ease-out:빠르게 - 느리게
- ease-in-out: 느리게 - 빠르게 - 느리게
Animation
@keyframe
- CSS의 애니메이션 효과를 개발자가 직접 지정하는 기능.
- 애니메이션의 중간 지점마다 CSS속성 값을 지정하여 세밀하게 애니메이션 조절하는 기능
- 키프레임을 변수에 선언하고 해당 변수를 CSS에서 불러와서 사용 할 수 있다.
@keyframes로 설정되는 값
- from ~ to
- 0% ~ 100%
Animation 속성
- animation-name 이름: keyframes로 지정한 애니메이션 이름
- animation-duration 지속시간: 애니메이션이 지속 시간
- animation-delay 지연시간
- animation-timig-function 진행형태: 애니메이션이 진행되는 형태 // ease, linear 등등
- animation-count 반복횟수: 반복되는 횟수를 지정, 소수점 가능, infinite
- animation-direction 애니메이션 방향
단축속성: name /duration /timing-function /delay /iteration-count /direction
animation: ani-name 2s ease-in 5s Infinite alternates;
