🏃♂️What I learned
1. CSS 선택자2
- 기본 속성 선택자 : 특정 태그를 선택하는 선택자
[작성법]
선택자(태그명) [속성명="속성값"]{ css 코드; }
- 자식선택자 : 하위 태그 속성을 선택하는 선택자
[작성법]
부모선택자 > 자식선택자 { css 코드; }
- 후손선택자 : 하위의 모든 요소를 선택하는 선택자
[작성법]
조상선택자 후손선택자 { css 코드; }
- 반응 선택자 : 사용자의 움직임에 반응하는 선택자
- : active - 클릭하고 있는 경우
- : hover - 마우스가 올라간 경우
선택자:active / :hover { css 코드; }
- 상태 선택자 : input, input 관련 태그
- : focus - 요소에 초점이 맞춰졌을 때
- : checked - 요소가 체크되었을 때(radio, checkbox)
- : enabled / disabled - 요소 사용 여부에 따라
조상선택자 후손선택자 { css 코드; }
transition duration -> 반응 속도 조절 가능
- 동위선택자 : 동등한 위치(형제 관계)의 요소를 선택하는 선택자
- '+' - 바로 뒤의 요소 선택
- '~' - 뒤에 있는 전체 요소 선택
A선택자 + B선택자 { css 코드; }
A선택자 ~ B선택자 { css 코드; }
2. CSS 선택자3
- 문자열 속성 선택자 : 속성 값에 문자열을 확인여 스타일을 적용
- 선택자[속성명 ~= "특정값"] : 여러 속성값 중 하나라도 특정값을 포함하는 경우
- 선택자[속성명 |= "특정값"] : 특정값이 "-" 앞에 있는 경우
- 선택자[속성명 ^= "특정값"] : 특정값으로 '시작하는' 요소
- 선택자[속성명 $= "특정값"] : 특정값으로 '끝나는' 요소
- 선택자[속성명 *= "특정값"] : 특정값을 포함하는 요소
3. CSS 선택자 4
- 일반 구조 선택자 :형제 관계에 있는 요소를 선택 (위치 기준)
- : first-child - 첫번째 요소
- : last-child - 마지막 요소
- : nth-child(수열) - n번째 요소
- : nth-last-child(수열) - 뒤에서 n번째 요소
[작성법]
- : first-child - 첫번째 요소
- : last-child - 마지막 요소
- : nth-child(수열) - n번째 요소
- : nth-last-child(수열) - 뒤에서 n번째 요소
- 형태 구조 선택자 : 형제 관계에 있는 요소 를 선택 (태그 기준)
[작성법]
- : first-of-type - 첫번째 요소
- : last-of-type - 마지막 요소
- : nth-of-type(수열) - n번째 요소
- : nth-last-of-type(수열) - 뒤에서 n번째 요소
일반구조선택자는 해당 순서와 태그가 맞지 않으면 작동 안함
vs 형태구조선택자는 해당 태그부터 순서 시작
- 부정 선택자 : 일부를 제외한 나머지 요소를 선택
[작성법]
선택자1 : not(선택자2) { css 코드; }
4. 기타
- HTML과 CSS 연결 방법 : 헤드 태그에 link태그 이용< link rel="stylesheet" href="파일위치" type="text/css" >
- 속성값은 띄어쓰기로 구분 가능
e.g.) div name="aaa bbb ccc" => name속성이 3개
- 체크박스 모양 바꾸기
[준비물]- 동위 선택자(+)
- 상태 선택자(:checked)
- input type="checkbox"
- label 태그
- 체크박스 이미지
1. 체크박스와 레이블을 생성
2. id속성과 for를 이용해 레이블과 체크박스 연결
3. 레이블을 원하는 크기와 형태로 변경
4. 체크된 상태(:cecked)의 체크박스 뒤(+) 레이블의 배경에 이미지 삽입
(repeat: no-repeat, size: cover;)
5. 체크박스 숨김처리 (display: none;)
