5주차 : html, css언어 : 선택자
선택자
후손선택자★
부모태그 안의 모든 자식태그들을 말한다.
공백으로 표기한다.
선택자A 선택자B
자손선택자★
부모선택자의 바로 아래계층에 있는 자식태그들을 말한다.
'>'로 표기한다.
선택자A > 선택자B
동위 선택자(= 형제선택자)
동위 선택자(형제 선택자)는 형제관계에서 뒤에 위치한 동생태그들을
선택할때 사용하는 선택자이다.
- 선택자A + 선택자B
: 선택자A 바로 아랫줄에 있는 선택자B를 선택함.
만약 바로 아랫줄에 선택자B가 없으면 적용되지 않는다.
- 선택자A ~ 선택자B
: 선택자A 뒤에 있는 선택자B를 선택함.
만약 동일한 태그가 여러개 있으면 다중 선택한다.
속성 선택자
속성 선택자를 사용하면 특정 속성을 가진 html태그를 선택할 수 있다.
선택자 뒤에 [ ]를 붙여 표현한다.
- 선택자[속성]
: 선택한 태그 중 해당 속성을 가진 태그만 선택한다.
- 선택자[속성 = 값]
: 선택한 태그 중 해당 속성과 값이 일치하는 태그를 선택한다.
구조 선택자
부모태그안에 자식태그들이 동일한 태그로 구성되어 있을 때
특정 위치에 있는 자식태그만 선택할 때 사용한다.
선택자:first-child★
부모태그안에 동일한 태그 형제 중 첫 번째에 위치한 태그만 선택함.(첫째)
선택자:last-child★
부모태그안에 동일한 태그 형제 중 마지막 번째에 위치한 태그만 선택함.(막내)
선택자:nth-child(수열)★
부모태그안에 동일한 태그 형제 중 특정 순번째에 위치한 태그를 선택한다.
이때 수열 자리에 2를 쓰면 형제 중 두번 째 위치에 있는 태그만 선택해준다.
짝수 - 2n, even
홀수 - 2n + 1, odd
선택자:nth-last-child(수열)★
부모태그안에 동일한 태그 형제 중 특정 순번째에 위치한 태그를 선택한다
단, last가 붙으면 밑에서 위로 순번을 센다. 마찬가지로 수열자리에는 숫자나
배수가 들어갈 수 있다.
형태 구조 선택자
형태 구조 선택자는 부모태그안에 자식태그들이 각각 다른 태그로
구성되어 있을 때 사용한다.
구조 선택자는 부모태그안에 자식이 태그가 모두 동일해야 쓸 수 있다.
선택자:first-of-type
부모태그안에 첫번째에 위치한 자식태그를 선택할 때 사용한다.
선택자:last-of-type
부모태그안에 마지막번째에 위치한 자식태그를 선택할 때 사용한다.
선택자:nth-of-type(수열)
부모태그안에 수열번째에 위치한 자식태그를 선택할 때 사용한다.
수열의 의미는 구조선택자와 똑같다.
선택자:nth-last-of-type(수열)
부모태그안에 아래에서 수열번째에 위치한 자식태그를 선택할 때 사용한다.
반응 선택자
반응 선택자는 사용자에 행동에 따라 반응하여 css디자인을 바꿀때
사용하는 선택자이다. 예를 들면 사용자가 마우스를 특정 태그 위에
올리거나 클릭했을때 상태를 말한다.
선택자:hover★
사용자의 마우스 커서가 위치한 태그를 선택한다.
선택자:active
사용자가 마우스로 클릭한 태그를 선택한다.
단, 클릭하고 있는 동안만 반응한다. 잘 안씀
상태 선택자
상태 선택자는 서치바나 로그인창, 체크 박스 등 입력양식의 상태를
선택할때 사용하는 선택자이다.
- 선택자:checked
체크 상태의 input태그를 선택할때 사용한다.
- 선택자:focus
포커스 상태(무언가를 입력하거나 클릭할 수 있도록 요소가 활성화 된 상태)의
태그를 선택할때 사용한다.
- 선택자:enabled
사용가능한(입력 가능한) 상태의 태그를 선택할 때 사용한다.
선택자:disabled
사용불가능한 상태의 태그를 선택할 때 사용한다.
가상요소 선택자★
html코드에는 존재하지 않는 구조요소를 만들어 스타일을 부여하는 선택자.
html문서내에는 보이지 않지만 미리 정의한 위치에 가상의 요소를 넣어 표현할 수 있다.
가상요소 선택자로 만들어지는 가상요소들은 inline속성을 갖는다.
선택자::before
선택자의 앞에 가상요소를 생성한다. 필수 속성으로 content속성을 넣어 표현한다.
선택자::after
선택자의 뒤에 가상요소를 생성한다. 필수 속성으로 content속성을 넣어 표현한다.
부정 선택자
부정 선택자는 선택된 태그 중 제외하고 싶은 태그가 있을 경우 사용한다.
선택자:not(제외시킬 요소)
태그를 다중 선택하는데 특정 요소는 제외하고 선택한다.
is선택자
같은 스타일을 여러 요소에 적용할때 사용하는 선택자이다.
최근에 발표된 선택자로 같은 스타일을 여러 요소에 적용할때 간편하게 선언할 수 있다.
:is(선택자1, 선택자2, 선택자3...){ }
has선택자
has선택자는 태그안에 특정 태그가 있으면 선택해주는 선택자이다.
선택자:has(태그)
