1. 하나의 class에 여러 값을 넣을 수 있다.
ex)
<div class ="abc xyz">
...
</div>2. cubic-bezier
cubic-bezier() function은 CSS에서 transition 속성 혹은 transition-timing-function 속성에서 전환 시작과 끝까지의 효과를 제어하는데 쓰인다.
cubic-bezier 애니메이션 타이밍 함수는 x, y, x', y' 즉, 4개의 값을 인자로 전달받아 에니메이션의 타이밍을 조절한다. x, y는 첫 번째 가이드 포인트(Guide Point)의 좌표, x', y'은 두 번째 가이드 포인트의 좌표다. 가이드 포인트란 곡선의 형태에 영향을 주는 조절 가능한 점을 뜻한다.
3차 베지에 곡선이란 이 두 가이드 포인트의 위치에 따라 그려지는 곡선을 말한다. cubic-bezier는 이 곡선을 이용해 애니애이션의 타이밍을 조절한다.
출처 : https://blog.coderifleman.com/2017/01/02/bezier-curves-for-frontend-engineer-1/
아래 사이트를 이용하여 적용원리를 알 수 있다.
https://matthewlein.com/tools/ceaser
3. 가상 요소 (::before ::after)
가상 클래스(pseudo-classes)처럼, 가상 요소(pseudo-element)는 선택자(selector)에 추가되지만 특별한 상태를 기술하는 대신, 문서의 특정 부분을 스타일할 수 있다.
::before - 요소의 컨텐츠 시작부분에 적용
::after - 요소의 컨텐츠 끝부분에 적용
- before, after 사용시 content 스타일 속성을 이용하여 콘텐츠를 추가할 수 있음
예) content : '추가할 콘텐츠 문자열 작성, 스타일로만 활용가능함'
의미없는 태그를 쓰지 않도록 도와줌, 태그 최소화.
- 목록형 꾸밈
- 버튼 꾸밈
- 간단한 아이콘 만들기(닫기버튼, 화살표 등) ** 도형을 만들 때 주의할 점: 보여지는 픽셀두께가 세밀하지 않기 때문에 비주얼적으로 중요한 아이콘이면 이미지를 쓰는 것을 추천
- 이미지 아이콘을 넣고 싶을 때
- 꾸밈 한글을 넣고 싶을 때 (tag의 #, 또는 콤마 등)
참고하기 https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-elements
