💡CSS
transition
스타일 변경 시 부드럽게 전환
호버링이랑 같이 사용
선택자가 변화되는 것을 시간의 흐름을 줘 변화시키는 속성 ➡️속성 시간 속도 지연시간
| ease | 기본값 느리게 시작한 다음 빠르게 전환한 다음 천천히 종료 |
| linear | 처음부터 끝까지 같은 속도로 전환 |
| ease-in | 가속 느린 시작으로 빠른 끝(느린 느낌을 받을 수 있다) |
| ease-out | 감속 빠른 시작과 느린 끝(빠른 느낌을 받을 수 있다) |
| ease-in-out | 느린시작과 느린 끝으로 전환 효과 지정 |
| cubic-bezier(n,n,n,n) | 3차 베지어 함수에서 자신의 값을 임의적으로 정함 n에 숫자를 직접 넣어 커스 |
가상클래스(의사클래스 pseudo class)
별도의 class를 지정하지 않아도 지정한 것처럼 요소를 선택 가능
| :hover | 마우스를 롤오버 했을 때 |
| :active | 마우스를 클릭했을 때 |
| :focus | input 태그 등이 포커스 됐을 때 |
| :first-of-type | 모든 자식 요소 중에서 첫 번째 등장하는 특정 요소를 선택 선택한 태그 중에서 첫번째를 의미 ➡️클래스 설정한 태그 안에 <span><p><p> 라고 작성되어있으면 p:first-of-type은 첫번째 p가 스타일을 적용해서보임 중간에 존재하지만 클래스의 첫번째 p임 |
| :last-of-type | 모든 자식 요소 중에서 마지막으로 등장하는 특정 요소 선택 |
| :first-child | 모든 자식 요소 중에서 첫번째에 위치하는 자식을 선택 전체 중에서 첫번째를 의미 ➡️클래스 설정한 태그 안에 <span><p><p> 이렇게 지정되어있으면 p:first-child는 존재하지 않음 span:first-child해야 span 스타일을 적용해보임 ➡️span이 클래스의 첫번째 자식이기 때문 |
| :last-child | 모든 자식 요소 중에서 마지막에 위치하는 자식을 선택 |
자식 결합자(>)
두 CSS 셀렉터 사이에 배치
.container-two>div
container-two 클래스를 꾸미는 것이 아닌 해당 클래스 안의 div만 꾸미는 것
가상 요소(의사요소 pseudo element)
가상 클래스처럼 셀렉터에 추가되며, 존재하지 않는 요소를 존재하는 것처럼 부여해 문서의 특정 부분 선택가능
| ::before | 요소의 콘텐츠 시작부분에 생성된 콘텐츠를 추가 ➡️추가 시 li::before{컨텐츠: '';} 컨텐츠가 꼭 있어야함 |
| ::after | 요소의 콘텐츠 끝 부분에 생성된 콘텐츠를 추가 ➡️추가 시 li::after{content: '';} 컨텐츠가 꼭 있어야함 |
| ::selection | 마우스 드래그로 선택한 텍스트 콘텐츠 영역을 선택 |
| ::marker | 목록 아이템 앞에 붙는 마커를 선택 |
| ::first-letter | 현재 웹 브라우저에 보이는 상태를 기준으로 요소의 텍스트 콘텐츠의 첫 글자 선택 |
| ::first-line | 현재 웹 브라우저에 보이는 상태를 기준으로 요소의 텍스트 콘텐츠의 첫 줄 내용 선택 |
가상 클래스와 가상 요소를 동시에 작성할 수 있다