6/24 TIL : CSS 전환, 반응형, 실습(오버워치 캐릭터 선택창)

전환(transition)

transition: 속성명 지속시간(필수) 타이밍함수 대기시간;

- transition-property: 전환 효과를 사용할 속성 이름 지정

- transition-duration: 시간

- transition-timing-function: ease / linear / ease-in / ease-out / ease-in-out

- transition-delay: 시간

 

전환(transform)

transform: 변환함수1 변환함수2 ... ;

 

2D 변환 함수

- translate(x, y), translateX(x), translateY(y): px

- scale(x, y), scaleX(x), scaleY(y): 배수

- rotate(degree), skew(x, y), skewX(x), skewY(y): deg

 

3D 변환 함수

- perspective(n): 원근법(제일 앞에 작성)

- translateZ(z), translate3d(x, y, z): px

- scaleZ(z), scale3d(x, y, z): 배수

- rotateX(x), rotateY(y), rotateZ(z), rotate3d(x, y, z, a): deg

 

perspective 속성과 함수 차이점

perspective: 600px;

- 적용 대상: 관찰 대상의 부모

- 기준점 설정: perspective-origin

transform: perspective(600px)

- 적용 대상: 관찰 대상

- 기준점 설정: transform-origin

 

backface-visiblity: 3D 변환으로 회전된 요소의 뒷면 숨김 여부

- visible / hidden

 

responsive web

미디어 쿼리: 서로 다른 미디어 타입에 따라 별도의 CSS를 지정하게 하는 기술

- @media 미디어유형(all / print / screen) and 크기 규칙(min / max)

 

 

실습: 오버워치 캐릭터 선택창 만들기

브라우저의 기본 css 속성 초기화: https://www.jsdelivr.com/package/npm/reset-css 

 

완성본: https://kdt-624-ex.netlify.app/

Document

코드: https://github.com/ebulsok/KDT-624.git

GitHub - ebulsok/KDT-624