📌 Class 속성
- CSS로 특정 요소를 대상으로 지정가능
- 요소에 클래스를 추가
- 여러 요소가 동일한 클래스를 가질 수 있음
- 요소는 공백으로 구분된 클래스를 여러 개 가질 수 있음
transition : <property> <duration>
- 스타일 변경시 부드럽게 전환 (주로 호버링시 사용)
- 선택지가 변화되는 것을 시간의 흐름을 줘서 변화시키는 속성
ease-in : 변화되는 시간에 ease(가속 감속) 처리
| ease | 기본값, 느리게 시작한 다음 빠르게 전환한 다음 천천히 종료 |
| linear | 처음부터 끝까지 같은 속도로 전환 |
| ease-in | 가속, 느린시작으로 빠른 끝 - 느린 느낌 받을 수 있음 |
| ease-out | 감속, 빠른시작으로 느린 끝 - 빠른 느낌 받들 수 있음 |
| ease-in-out | 느린 시작과 느린 끝으로 전환 효과 지정 |
box-shadow : <offset-x> <offset-y> <blur> <color>
📌 가상클래스(Pseudo-Class)
- 별도의 클래스를 지정하지 않아도 지정한 것처럼 요소 선택할 수 있음
| :hover | 마우스 롤오버시 |
| :active | 마우스 클릭시 |
| :focus | input 태그 등이 포커스 되었을 때 |
| :first-of-type | 모든 자식 요소 중에서 첫 번째로 등장하는 특정 요소 선택 |
| :last-of-type | 모든 자식 요소 중에서 마지막 등장 특정 요소 선택 |
| :first-child | 모든 자식 요소 중에서 첫 번째 위치 자식 선택 |
| :last-child | 모든 자식 요소 중에서 마지막 위치 자식 선택 |
부모 <div>가 있고 그 아래 자식들이 첫 번째 <span> 두 번째, 세 번째 <p>가 있을 경우
: p에 color가 적용되지 않음 ➡ <p>의 부모는 <div>의 두 번째 자식
즉,
◾ first-child ➡ <div class="parent">의 두 번째 자식 ➡ 처음 자식 아니기 때문에 🙅
◾ first-of-type ➡ <p> 타입 처음 등장 ➡ <p> 타입의 처음 자식이기 때문에 🙆
📌 가상요소(Pseudo-Element)
- 가상 클래스처럼 선택자(selector)에 추가되며, 존재하지 않는 요소를 존재하는 것처럼 부여하여 문서의 특정 부분 석택이 가능
::before,::after은 꼭 content와 같이 사용해야하며 이 content는 가짜 속성
| ::before | 요소 콘텐츠 시작 부분에 생성된 콘텐츠 추가 |
| ::after | 요소 콘텐츠 끝 부분에 생성된 콘텐츠 추가 |
| ::selection | 마우스 드래그로 선택한 텍스트 콘텐츠 영역 선택 |
| ::marker | 목록 아이템 앞에 붙는 마커 선택 |
| ::first-letter | 현재 웹 브라우저에 보이는 상태 기준으로 요소 텍스트 콘텐츠 첫 글자 선택 |
| ::first-line | 현재 웹 브라우저에 보이는 상태 기준으로 요소 텍스트 콘텐츠 첫 줄 내용 선택 |
📌 Float CSS 속성
- 컨테이너 왼쪽 또는 오른쪽에 요소를 배치하여 텍스트 및 인라인 요소가 주위를 둘러쌀 수 있도록 함
- 요소는 페이지의 정상적인 흐름에서 제거되지만 여전히 흐름의 일부로 남아있음
- Layout 구현
📌 Clear CSS 속성
- float 의 영향 받지 않도록 하기 위함
- float 속성 사용하고 아래쪽 다음 요소를 원할 때 clear 속성 사용
- float 요소 옆에 있는 요소에 어떤 일이 발생해야 하는지 지정
- clear 속성은 다음 값중 하나를 가질 수 있음
| none | 요소가 왼/오 부동 요소 아래로 푸시X => 기본값 |
| left | 요소가 왼쪽 부동 요소 아래로 푸시 |
| right | 요소가 오른쪽 부동 요소 아래로 푸시 |
| both | 요소가 왼/오 부동 요소 아래로 푸시 |
| inherit | 요소는 부모로부터 clear 값 상속 |
- float을 지울 때 float와 clear 일치시켜야함
- 요소가 왼쪽으로 float되어있으면 왼쪽으로 지워야 함 :
float:left; => clear:left - 플로팅 된 요소는 계속 플로팅되지만 지워진 요소는 웹 페이지에서 그 아래에 나타남
📒 John Ahn - <따라하며 배우는 HTML, CSS> https://inf.run/MzQn
