엘리스 레이스 1주차-03

01. Transform

transform이란? 특정 영역을 회전 시키거나,

확대/축소 시키거나

각도를 변경하여 비틀거나

위치를 변경하는 등의 효과를 적용할 때 사용된다.

transform을 계속 사용 할 경우 마지막에 있는 속성만 적용됨.

 

 

* rotate, scale

.rotate(45deg); 입력한 각도만큼 회전. 음수도 입력 가능

.scale(2,3); width를 2배, height를 3배 확대. 축소는 소숫점으로 활용

* skew, translate

입체적으로 각도를 바꿀 때

.skew(10deg,20deg); x축 y축 기준으로 입력한 각도만큼 비틂

.translate(100px, 200px); 선택한 오브젝트의 좌표 이동

 

* prefix 접두사

다른 버전의 브라우저에서의 실행을 원할 경우

최신 버전을 사용한다면 prefix를 제외시키고 사용한다.

 

* transform 연습 사이트

https://css-playground.com/view/38/css-transforms

CSS Transforms

 

https://css-transform.moro.es/

CSS Transform

 

 

02. Transition

Transition이란? 

어떠한 변화하는 과정을 보여주고자 할때 사용하는 것

 

* property, duration

.property : 효과를 적용하고자 하는 css 속성

.duration : 효과가 나타나는데 걸리는 시간

 

* timing-function, delay

.timing-function : 효과의 속도 linear은 '일정하게'라는 의미

.delay : 특정 조건 하에서 효과 발동. 1s는 '1초 후'라는 의미

 

* 가상 선택자 :hover

css에서 미리 만들어 놓은 클래스

'마우스를 올렸을 때' 라는 조건 

 

*transition 종합

마우스를 올리면 1초 후에 width 값이 300px로, 2초동안, 속도 일정하게 변하는 애니메이션 효과 발동

숫자가 하나인 경우 duration이 적용된다.

 

03. Animation

Animation이란? 조건에 상관 없이 이벤트를 적용할 때 사용하는 속성

웹사이트에 접속을 하자마자 object가 회전,움직임 등의 효과를 만들 때 사용

 

* iteration-count, direction

 

animation-name : 임의로 작성한 애내메이션 이름

iteration-count : 애니메이션 반복 횟수 (infinite은 무한 반복)

direction : 애니메이션 진행 방향

- alternate : from -> to -> from (시작 -> 끝 -> 시작)

- normal : from -> to , from -> to ( 시작 ->끝, 시작 -> 끝)

- reverse : to -> from, to -> from( 끝 -> 시작 , 끝 -> 시작)

@keyframes 애니메이션이름

 변화되는 결과값 지정

animation : changeWidth 3s linear 1s 6 alternate;  로 한 줄 가능

 

 

04. 애니메이션 응용

 

* Transform & Animation 결합 유의사항

 

- 순서는 상관이 없지만 첫 번째는 duration, 두번 째 값은 delay 이다.

- 1000 ms = 1초

 

 

* Animation의 prefix 유의사항

 

애니메이션 영역 추가 실습1)

- 메뉴 버튼의 a태그에 1초동안 색깔을 변경 시키겠다 . a태그에 마우스에 올렸을 때 색깔 적용.

 

애니메이션 영역 추가 실습2)

- 배경색 변경) 마우스를 올려 놓았을 때 1초간 (지정)색깔로 변화를 주겠다.

- 이미지 크기 확대) 마우스를 올려 놓았을 때  1초간 모든 속성 값에 영향을 주겠다.(1.1배 크기증가) 

 

 

 

미디어 쿼리

 

01. 미디어쿼리 소개

미디어쿼리란?

- PC 뿐만 아니라 모바일과 태블릿에도 대응되는 웹사이트를 만들기 위해

- 모바일에 대응되는 반응형 또는 적응형 웹사이트를 만들 때 사용되는 CSS 구문

반응형 : 브라우저의 폭을 줄이거나 늘렸을때 자연스럽게 적용되는 사이트

적응형 :  뚝뚝 끊기며 사이즈가 바뀌는 사이트

 

* 미디어쿼리 사용 방법

min-width와 max-width로 브라우저 가로폭 설정

브라우저의 가로폭이 최소 320px ~ 최대 800px이 되었을 경우, 중괄호 안의

css 속성으로 대체하겠다는 의미

 

참고) 위의 소스에서 @midia 안에 .meia{ } 형식으로 추가를 해 주어야 한다.

 

- 미디어 쿼리에서 코드를 작성 하지 않는다면 미디어 쿼리 바깥쪽에 있는 코드를 상속 받는다.

 

* 미디어 쿼리가 정상적으로 출력되는지 확인하는 법

크롬 개발자 도구 접속 = f12

 

 

02. 미디어쿼리 사용시 주의사항

 

* 메타태그 삽입

- 미디러쿼리가 제대로 작동하지 않는 문제가 발생할 수 있으므로 viewport로 너비와 배율을 설정해야 모바일 디바이스에서 의도한 화면을 볼 수 있음

- viewport는 디지털 기기를 의미한다. 화면상에 표시되는 영역. 너비와 배율을 설정할 때 사용하는 메타 태그의 속성 중 하나

.width = device-width // viewport의 가로폭 = 디바이스의 가로폭으로 설정 

.initial-scale = 1.0 // 초기 비율값 1.0

 

* css 속성 상속

- 미디어쿼리 외부 영역에 있는 css 속성을 상속 받음

- 상속받고자 하지 않는다면 속성 값에 none 입력

 

 

03. 미디어쿼리 적용하기 (쇼핑몰 적용하기)

 

 

 

 

 

 

 

 

 

 

 

- 교육 자료 출처 : 엘리스 -