다재다능한 CSS3 선택자

차명미·2020년 3월 23일
가웹사
0

5주차스터디

목록 보기
1/1

12-1 연결 선택자

하위 선택자 - 지정한 모든 하위 요소에 스타일 적용하기

하위선택자는 부모 요소에 포함된 하위 요소 모두 스타일이 적용되는 것으로
자손 선택자라고도 한다. 즉. 자식 요소뿐만 아니라 손자,손자의 손자요소 등
모든 하위 요소까지 적용된다.
지정한 모든하위 요소에 스타일을 적용 할 경우 상위요소와 하위요소 사이를 띄어쓰기로 구분해야 된다.

/* 하위선택자를 이용해 div요소 안에 있는 모든 p 요소에 파란 글자색으로 적용 */
div p { color : blue;}

자식 선택자 - 자식 요소에만 스타일 적용하기

하위 요소 전체에 스타일을 적용하는 것이 아니라 자식 요소에만 스타일을 적용할 수도 있다.
자식 요소에 스타일을 적용할 때는 두 요소 사이에 >를 표시해 부모 요소와 자식 요소를 구분하고, 자식 선택자에서는 바로 아래 요소, 즉 자식 요소에만 스타일이 적용된다.

/* div 요소안에 포함 된 p 요소 중 자식p 요소에만 파란 글자색 적용 */
div > p { color : blue;}

인접 형제 선택자 - 가장 가까운 형제 요소에 스타일 적용하기

같은 부모 요소를 가지는 요소들을 형제관계라고 부르고 형제 관계인 요소들에서 먼저 나오는 요소를 '형 요소', 나중에 나오는 요소를 '동생 요소' 라고 한다.
인접 형제 선택자는 문서 구조상 같은 부모를 가진 형제 요소 중 첫 번째 동생 요소에만 스타일이 적용된다.
이 선택자를 정의할 때는 요소 1과 요소 2 사이에 '+'를 표시한다.

/* h1요소 다음에 오는 p요소들 중 첫 번째 p요소만 밑줄 적용 */
h1 + p {text-decoration: underline;}

형제 선택자 - 형제 요소에 스타일 적용하기

형제 선택자를 정의할 때는 첫 번째 요소와 두 번째 요소 사이에 ~(틸드)를 표시한다.

/* h1 요소 다음에 오는 모든 형제 p 요소에 밑줄 적용 */
h1 ~ p { text-decoration: underline;}

12-2 속성 선택자

[속성] 선택자 - 지정한 속성에 스타일 적용하기

*기본형*
a [속성] {}

지정한 속성을 가진 요소를 찾아 스타일을 적용한다. 사용방법은 대괄호[,] 사이에 찾으려는 속성을 지정하면 된다.

[속성 = 값] 선택자 - 특정 값을 갖는 속성에 스타일 적용하기

*기본형*
a [속성 = 속성값] {}

주어진 속성과 속성 값이 일치하는 요소를 찾아 스타일을 적용할 수도 있다. 이 형식은 대괄호 안에 속성과 속성 값을 넣고 사이에 =를 넣는다.

[속성 ~= 값] 선택자 - 여러 값 중 특정 값이 포함된 속성에 스타일 적용하기

*기본형*
a[속성 ~= 값] {}

~(틸드)와 함께 [속성~=값] 선택자를 사용하면 여러 속성 값 중에 해당 값이 포함되어 있는 요소를 선택한다.
이 선택자는 하나의 속성에 속성 값이 여러 개일 때 특정 속성 값을 찾는데 편리하다.

이 선택자는 class='button'처럼 값이 정확히 일지하거나 class='line button'처럼 두 개 이상의 속성 값 중에 "button"값이 포함되어 있을 때 적용된다.
한 단어로 일치해야지 적용 된다. 예를들어 메뉴 5의 class같은 경우 class='button_box'이기 때문에 요소의 값이 일부만 일치할 때는 적용되지 않는다.

[속성 |= 값] 선택자 - 특정 값이 포함된 속성에 스타일 적용하기

*기본형*
a[속성 |= 값] {}

'값'은 한 단어로 일치해야 한다. [속성 ~= 값] 선택자와 혼동될 수 있지만 [속성 ~= 값]은 '-'(하이픈)으로 연결한 단어에 스타일을 적용하지 않지만, [속성 |= 값] 선택자는 속성 값이 지정한 값이거나 "값-"으로 시작하면 스타일을 적용한다. 다시말해 하이픈(-)으로 연결한 단어가 있더라도 스타일은 적용한다.

[속성 ^= 값] 선택자 - 특정 값으로 시작하는 속성에 스타일 적용하기

*기본형*
a[속성 ^= 값] {}

^(캐럿)이 붙으면 지정한 문자로 시작하는 속성 값에 대해서만 스타일을 적용한다.

[title ^="eng"], [title ^="ko"], [title ^="tai"] 선택자를 써 title 속성 값 전체를 확인하고 각각 배경색을 다르게 지정해줬다. 이렇게 배경 이미지를 지정할 수도 있고 몇 개의 시작 글자만 비교해 스타일을 정의 할 수도 있다.

[속성 $= 값] 선택자 - 특정 값으로 끝나는 속성에 스타일 적용하기

*기본형*
a[속성 $= 값] {}

$가 붙으면 지정 한 값으로 끝나는 요소를 찾아 스타일을 적용한다.

[속성 $= 값] 선택자를 사용해 href에 있는 파일 이름의 마지막 값을 체크하면 그 파일에 맞는 아이콘을 파일 이름 옆에 표시할 수 있다.

[속성 *= 값] 선택자 - 값의 일부가 일치하는 속성에 스타일 적용하기

*기본형*
a[속성 *= 값] {}

* 가 붙으면 사용자가 지정한 속성 값의 어느 위치에든 해당 값이 포함되어 있으면 스타일이 적용된다.

링크를 여러 곳으로 연결할 때 W3C 사이트로 연결하는 링크 텍스트에만 별도 스타일을 지정해봤다. href 속성에 'w3'라는 값이 포함되면 배경 색은 파란색으로 바뀌고 글자 색은 흰색으로 적용 되게 할수있다.

기본형 스타일 적용 경우 예시 - 선택자 예시 - 적용되는 요소
[속성] 지정한 '속성'일 때 [href] < a href="#">메뉴 1< /a>
[속성=값] '값'에 일치할 때 [target="_blank"] < a href="#" target="_blank">HTML < /a>
[속성~=값] 여러 값들 중 특정 '값'이 포함되어 있을 때(단어별) [class~="button"] < a href="#" class="button line">메뉴 4< /a>
[속성|=값] '값'이 포함되어 있을 때(하이픈 포함 단어별) [title|="us"] < a href="#" title="us">영어< /a> < a href="#" title="us-english">영어< /a>
[속성^=값] '값'으로 시작할 때 [title^="eng"] < a href="#" title="english">영어< /a>
[속성$=값] '값'으로 끝날 때 [href$="xls"] < a href="intro.xls">엑셀 파일< /a>
[속성*=값] '값'이 속성 값의 일부일 때 [href*="w3"] < a href="https://www.w3schools.com/">HTML 사이트< /a>

12-3 가상 클래스와 가상 요소

사용자 동작에 반응하는 가상 클래스

1) :link 가상 클래스 선택자 - 방문하지 않은 링크에 스타일 적용

텍스트 링크는 기본적으로 파란색 글자와 밑줄로 표시되는데 링크의 밑줄을 없애거나 색상을 바꾸려고 할 때 :link 선택자를 사용한다.

2) :visited 가상 클래스 선택자 - 방문한 링크에 스타일 적용

방문한 텍스트 링크는 기본적으로 자주색으로 표시되는데 사용자가 방문했던 리으도 일반 텍스트 링크와 색상이 달라지지 않게 하려면 :visited 선택자를 사용해 조절한다.

2) :hover 가상클래스 선택자 - 웹 요소에 마우스 커서를 올려놓을 때의 스타일 적용

이미지 위로 마우스 커서를 올려놓으면 다른 이미지로 바뀌었다가 마우스 커서를 치우면 원래 이미지로 돌아오는 롤오버 효과(rollover)를 만들 수있다.

3) :active 가상클래스 선택자 - 웹요소를 활성화했을 때의 스타일 적용

링크를 클릭했을 때 스타일을 적용한다.

4) :focus 가상클래스 선택자 - 웹 요소에 초점이 맞추어졌을 때의 스타일 적용

input 태그 안에 입력하기 위해 텍스트 필드안에 마우스 커서를 갖다 놓거나 Tab키를 눌러 초점(focus)을 이동했을 때의 스타일을 지정한다.

가상 선택자를 링크와 관련해 사용할 때는 선택자 순서에 주의해야 한다. 순서가 바뀌면 스타일을 정의하더라도 제대로 적용되지 않는다.

  1. :link
  2. :visited
  3. :hover
  4. :focus
  5. :active

UI 요소 상태에 따른 가상 클래스

ui요소의 상태에 따른 가상 클래스는 웹 사이트나 앱 화면을 디자인할 때 웹 요소의 상태에 따라 스타일을 지정하기 위해 사용한다.

  • :enabled 와 :disabled 가상 클래스 선택자 - 요소를 사용할 수 있을 때와 없을 때의 스타일 지정

    1. :enabled - 해당 요소가 사용 가능한 상태일 때의 스타일을 지정할 때 사용한다.
    2. :disabled - 해당 요소가 사용 불가능한 상태일 때의 스타일을 지정할 때 사용한다.

  • :checked 가상 클래스 선택자 - 라디오 박스나 체크 박스에서 해당 항목을 선택했을 때의 스타일 지정

구조 가상 클래스

웹 문서 구조를 기준으로 특정 위치에 있는 요소를 찾아 스타일을 지정할 때 사용하는 가상클래스 선택자다.

  • :root 가상 클래스 선택자 - 문서 전체에 적용하기
    문서 안의 로트 요소에 스타일을 적용한다. HTML 문서에서는 루트 요소가 HTML이므로 HTML 요소에 스타일이 적용된다.
    전체적으로 문서 안에 똑같이 적용할 스타일이 있는 경우, :root 선택자를 이용해 지정한다.
  • :nth-child(n)와 :nth-last-child(n) 가상클래스 선택자 - 자식 요소의 위치에 따라 스타일 적용하기

class나 id를 사용하지 않고 스타일을 지정할 항목이 몇 번째에 있는지를 따져 스타일을 적용할 때 사용한다. 주로 메뉴 항목이든 원하는 위치에 따라 요소를 찾아 스타일을 지정할 때 이 선택자를 많이 사용한다.

  1. :nth-child(n) - 앞에서부터 n번째 자식 요소에 스타일을 적용
  2. :nth-last-child(n) - 끝에서부터 n번째 자식 요소에 스타일을 적용
이렇게 위치에 따라 스타일을 적용하는 선택자는 해당 요소들이 모두 한 부모 요소를 갖고 있어야만 한다. 즉, 문서 구조로 표시했을 때 모두 같은 레벨의 요소여야 한다. 
/* div 요소 안에서 세번째 자식 요소인 p 요소에 스타일 적용 */
div p:nth-child(3)      

/* div 요소 안에서 홀수 번째로 나타나는 자식 요소인 p 요소에 스타일 적용 */
div p:nth-child(odd), div p:nth-child(2n+1)
      
/* div 요소 안에서 짝수 번째로 나타나는 자식 요소인 p 요소에 스타일 적용 */


div p:nth-child(even), div p:nth-child(2n+0), div p:nth-child(2n)

위의 예제는 nth-child 가상 클래스 선택자로 odd(홀수)를 빨간색, 2n+0(짝수)는 파란색으로 배경색을 넣어본 예제이다.

  • :nth-of-type(n), :nth-last-of-type(n) 가상클래스 선택자 - 특정 태그 위치에 스타일 적용하기.
  1. :nth-of-type(n) - 앞에서부터 n번째 요소에 스타일을 적용
  2. :nth-last-of-type(n) - 끝에서부터 n번째 요소에 스타일을 적용

nth-child와 nth-of-type의 차이점은 nth-child는 내형제(같은 태그들) 남의 형재(다른 태그들)할것 없이 다 포함해서 순서를 세지만 nth-of-type은 남의 형제는 아예 *세지도 않는다.*

  • :first-child, :last-child 가상 클래스 선택자 - 첫 번째,마지막 요소에 스타일 적용하기

  • :first-of-type, :last-of-type 가상 클래스 선택자 - 형제 관계 요소의 위치에 따라스타일 적용하기

  • :only-child, :only-of-child 가상 클래스 선택자 - 하나뿐인 자식 요소에 스타일 적용하기.

    • :only-child는 부모 요소 안의 자식 요소가 유일하게 하나일 때 스타일을 적용한다.

    • :only-of-child는 해당 요소가 유일한 요소일 때 스타일을 적용한다. 다른 자식 요소에서 유일한 요소여야 됨.

      ex) 
<div>
  <p></p>
  <p></p>
  <span></span>
  <p></p>
</div>

그외 가상 클래스

  • target 가상 클래스 선택자 - 앵커 목적지에 스타일 적용하기.

  • :not 가상 클래스 선택자 - 특정 요소가 아닐 때 스타일 적용하기

가상요소

  • :first-line 요소와 :first-letter 요소 - 첫 번째 줄, 첫 번째 글자에 스타일 적용하기

:first-line 요소에는 font, background, color, word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, line-height 속성만 사용할 수있다.

  • :before, :after 요소 - 내용의 앞뒤에 콘텐츠 추가하기
    이 요소를 사용하면 특정 요소의 내용 앞(:before),뒤(:after)에 지정한 내용을 넣을 수 있다.

profile
차명미
안녕하세요~

0개의 댓글