
CSS) Transformations ( ++ 박스 라운드로 만들기)
2020. 11. 1. 15:31
Frontend
박스 모델을 원으로 만들기 border-radius: 50%; rotate 회전시키기 transform: rotateY("num"deg) 그밖의 transformation rotateY, rotateZ scaleX scaleY(12) scale(2, 2) = 2배 transflateX(-60px) skewY 3가지 동시에 쓰기 transformation은 박스 엘리먼트를 변형시키지 않는다. 응용 hover 일때 transition 추가 (root에 넣어야함, 여기에 root는 hover가 아니라, img) 복수로 이펙트 주기 더 많은 transform은 transform mdn 검색

CSS) Transitions
2020. 11. 1. 10:51
Frontend
transition 사용법 transition: (셀렉트) (걸리는 시간) (변화하는형태) 대부분 셀렉트는 all로 지정 복수개를 셀렉트할 때는 " , " 로 연결 all로 모든 것을 선택 border-radius, text-color, font-size 등에도 적용 가능 여러가지 애니메이션 애니메이션 체크 홈페이지 Ceaser - CSS Easing Animation Tool - Matthew Lein Choose an easing type and test it out with a few effects. If you don’t quite like the easing, grab a handle and fix it. When you’re happy, snag your code and off you go. ..

CSS) Colors and Variables
2020. 10. 30. 00:48
Frontend
3가지 컬러 적용 방법 1. 컬러코드 2. rgb rgba (알파) 얼마나 투명하게 만들지 정하기 :root 모든 근원, 출발점 반복적인 것이 많을 때, 근원을 바꾸기 var로 컬러를 변수에 저장하기 색깔만 아니라 다른것도 적용가능 css custom properties 검색 developer.mozilla.org/en-US/docs/Web/CSS/--*

CSS) pseudo selector -3 ( placeholder, selection, first-letter)
2020. 10. 30. 00:32
Frontend
placeholder 선택 selection first-letter first-line