아자아자 화이팅이닷 !

231227 엘리스 SW트랙 1주차 Day3 본문

TIL

231227 엘리스 SW트랙 1주차 Day3

유초23 2023. 12. 27. 22:23
728x90

* CSS 부분에서

transition과 transform이 어떻게 다르게 사용되는지가 궁금해짐 !

 

transition은 CSS 프로퍼티의 값이 변화할 때, 프로퍼티 값의 변화가 일정시간에 걸쳐 일어나는 것 !

transform은 특정 오브젝트를 각도를 튼다거나 크기나 위치를 변경하는 것 !

 

* 참고용

https://it-eldorado.tistory.com/110

 

[CSS] 헷갈리기 쉬운 transition, transform, translate 정리

이번 포스팅에서는 그 이름부터 헷갈리는 CSS의 transition, transform, translate에 대해 한 번 정리해볼 것이다. 단, 각각의 기능에 대한 자세한 설명보다는 이 셋을 구별하기 위한 각각의 개략적인 특징

it-eldorado.tistory.com

 

https://programming4myself.tistory.com/53

 

🎞️ CSS 트랜스폼(Transform)과 트랜지션(Transition) 요약!

인터렉션 디자인에 유용한 트랜스폼, 트랜지션, 애니메이션 CSS 트랜스폼 ⭐ 트랜스폼(Transform)이란? .transition { transform : rotate(45deg); transform : scale(2, 3); } 특정 오브젝트를 각도를 튼다거나 크기나

programming4myself.tistory.com

 

https://parkparkpark.tistory.com/147

 

[CSS] Transform, Transition, Animation에 대해 알아보자

1. Transform transform은 어떤 요소에 대해 회전, 크기 변경 등의 동작을 하도록 하는 CSS 이벤트이다. 종류는 rotate(회전), scale(크기), skew(x축,y축 각도만큼 비틂), translate(좌표 변경)이 있다. 1. rotate(x)

parkparkpark.tistory.com

 

* 그리고 마우스 올려놨을 때 이미지 크게 하려면

#main article img {
    width: 100%;
    transition: all 0.3s;
}

#main article img:hover {
    transform: scale(1.3);
}

 

이런식으로 작성하면 된다 ! scale 사용하기 !

* viewport

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

- 다양한 디지털 기기의 화면 상에 표시되는 영역을 의미

- 너비와 배율을 설정할 때 사용하는 메타태그의 속성 중 하나 !

 

<meta name="viewport" content="width=device-width, initial-scale=1.0">

 

와 같이 사용 !

* prefix와 animation에 대해서도 배움 !

728x90

'TIL' 카테고리의 다른 글

240101 엘리스 SW트랙 2주차 Day6  (0) 2024.01.01
231229 엘리스 SW트랙 1주차 Day5  (0) 2024.01.01
231226 엘리스 SW트랙 1주차 Day2  (0) 2023.12.26
231221 프로그래머스 문제풀기  (0) 2023.12.22
231219 프로그래머스 문제풀기  (0) 2023.12.21
'TIL' Related Articles more