[SCSS] 마우스 오버 시 채워지는 테두리 애니메이션 효과
개발하는 프로젝트에서 디자이너가 요청해서 만들게 되었는데, 추가로 생기는 요소나 CSS 라인을 최소화 해야 했다. 그래서 온라인에 나도는 팁들을 쓰지 않고 약간 치트성? 으로 만들었다.
css
[CSS] 일반 요소 혹은 테이블에서 말 줄임표 (..) 적용
위 코드를 상황에 맞게 수정해서 사용하자.
PC, 모바일 화면 크기 정보 확인 사이트
https://www.mydevice.io/ 실제 표현되는 가로, 세로 크기나 pixel-ratio 등을 확인 가능하다.
[CSS] 요소를 비율로 사이즈 적용하기
위와 같이 있을 때, 아래와 같이 CSS를 적용한다.
[SCSS] 반응형 미디어쿼리 mixin을 이용해서 조금 더 쉽게 사용하기
두 파일을 만들어서 한 파일에는 반응형 기준을 저장하고, 다른 한 파일에서는 import로 불러와서 사용하는 방식이다.