[ Do it! HTML + CSS 웹 표준의 정석 스터디!] 13 CSS 고급 선택자(1)

DAY 19

🔖 오늘 읽은 범위 :

☃️01/29(목) 진도표 알림
❄️공부 내용: 13 CSS 고급 선택자(1)
❄️ 쪽수: 398~414쪽

---

😃 **기억하고 싶은 내용 (복붙해도 상관없어!)**

연결 선택자

• 둘 이상의 선택자를 연결해서 스타일이 적용될 요소가 어느 부분인지 지정하는 것.
• 조합 선택자; 콤비네이션 선택자; 콤비네이션 셀렉터;

하위 요소에 스타일을 적용하는 하위 선택자와 자식 선택자

• 하위 요소 : 특정 요소를 기준으로 그 안에 포함 된 요소.

• 자식 요소 : 현재 요소 기준으로 바로 한 단계 아래 요소.

• 손자 요소 : 자식 요소 한 단계 아래.

• 하위 선택자 descendant selector

  • 부모 요소에 포함된 하위 요소를 모두 선택. 자손 선택자.

  • 하위 선택자는 상위 요소와 하위 요소를 공백으로 구분.

  • 자식 요소 뿐만 아니라, 자식의 자식, 즉 손자 요소까지 적용됨.

    section p {
    color: blue;
    }

• 자식 선택자 child selector

  • 자식 요소에만 스타일을 적용.

  • 두 요소 사이에 ‘>’ 기호를 표시하여 부모 요소와 자식 요소를 구분함.

  • 특정 부모 요소의 자식 요소에 스타일 적용한다는 것.

  • 바로 한단계 요소인 자식 요소에만 스타일이 적용 됨.

    section > p {
    color: blue;
    }

형제 요소에 스타일을 적용하는 인접 형제 선택자와 형제 선택자

• 형제 관계 : 부모 요소가 같은 경우.

  • 형 요소 : 먼저 나오는 요소
  • 동생 요소 : 나중에 나오는 요소

• 인접 형제 선택자 adjacent selector

  • 형제 요소 중에서 첫 번째 동생 요소만 선택하는 것.

  • 요소1 와 요소2 사이에 ‘+’ 기호를 표시. 요소 1 이후 가장 먼저 오는 요소2를 선택.

    /* h1 요소의 형제 요소 중에서 첫 번째 형제인 p 요소에 적용. */
    h1 + p {
    background-color: #222;
    color: #fff;
    }

• 형제 선택자 sibling selector

  • 형제 요소의 스타일을 정의. 모든 형제 요소에 적용됨.

  • 요소1과 요소2 사이에 ‘~’ 기호를 표시함.

  • 요소 1과 형제 요소인 2 를 모두 선택한다.

    h1 ~ p {
    background-color: #222;
    color: #fff;
    }

속성 선택자

특정 속성이 있는 요소를 선택 : [속성] 선택자

• HTML 태그 속성 값에 따라 원하는 요소를 선택한다.

• 대괄호([ ]) 사이에 원하는 속성을 입력한다.

    a[href] {
        background: yellow;
        border: 1px solid #ccc;
        font-weight: normal;
    }

특정 속성값이 있는 요소를 선택 : [속성 = 속성값] 선택자

• 주어진 속성과 속성값이 일치하는 요소를 찾아 스타일을 지정함.

• 대괄호 안에 속성과 속성값을 넣고 그 사이에 ‘=’ 기호를 표시함.

    a[target = "_blank"] {
        padding-right: 30px;
        background: url(images/newwindow.png) no-repeat center right;
    }

여러 값 중에서 특정 속성값이 포함된 속성 요소를 선택 : [속성 ~= 값] 선택자

• 여러 속성값 중에서 해당 속성값이 포함된 요소를 선택함.

• 속성이 하나이면서 속성값이 여러 개일 때 특정 속성값을 찾는 데 편리함.

• 주의할 점 : 값과 정확하게 일치하는 요소를 선택하는 것. 다른 글자가 속성값에 포함되어 있으면 선택하지 않음.

    [class ~= button] {
        box-shadow: rgba(0, 0, 0, 0.4) 4px 4px;
        border-radius: 5px;
    }

특정 속성값이 포함된 속성 요소를 선택 : [속성 |= 값] 선택자

• 특정 속성값이 포함된 속성에 스타일을 적용함.

• 속성값은 한단어로 일치해야 함.

• [속성 ~= 값] 선택자와 비슷함.

• 지정한 값과 정확하게 일치하는 값 또는 하이픈(-)으로 연결된 단어도 선택함.

  • ex) us, us-

    a[title |= us] {
      background: url("images/us.png") no-repeat left center;
    }

특성 속성값으로 시작하는 속성 요소를 선택 : [속성 ^= 값] 선택자

• 속성값이 지정한 속성값으로 시작하는 요소를 찾는다.

• 일부 속성값이 지정한 값으로 시작하면 모두 적용된다.

    a[title ^= us] {
        background: url(images/us.png) no-repeat left center lightblue;
    }

특정한 값으로 끝나는 속성의 요소를 선택하는 [속성 $= 값] 선택자

• 지정한 속성값으로 끝나는 요소를 선택해서 적용한다.

    a[href $= hwp] {
        background: url(images/hwp_icon.gif) no-repeat right center;
        padding-right: 30px;
    }
  
    a[href $= xls] {
        background: url(images/excel_icon.gif) no-repeat right center;
        padding-right: 30px;
    }

일부 속성값이 일치하는 요소를 선택 : [속성 *= 값] 선택자

• 지정한 속성값이 포함되어 있을 경우 해당 요소를 선택함.

    a[href *= w3] {
        background: blue;
        color: white;
    }

최종 정리

선택자	선택 요소	CSS 예시
[속성]	해당 속성이 있는 요소	[required]
[속성 = 값]	지정한 속성값이 있는 요소	[target = _blank]
[속성 ~= 값]	지정한 속성값이 단어별로 포함된 요소	[class ~= button]
[속성 |= 값]	지정한 속성값이 하이픈(-)을 포함해서 단어별로 포함된 요소	[title |= us]
[속성 ^= 값]	지정한 속성값으로 시작하는 요소	[title ^= us]
[속성 $= 값]	지정한 속성값으로 끝나는 요소	[title $= us]
[속성 *= 값]	지정한 속성값의 일부가 일치하는 요소	[title *= us]

🤔 **오늘의 파트에 대한 소감 (매우 주관적주의)**

• 선택자의 모양새가 약간 정규표현식 느낌이 있음.
• 선택자를 이용해서 여러 조건으로 스타일 매길 수 있겠다.

🔎 **추가로 알게 된 것 (책 내용 +알파로 궁금한 것, 이해가 가지 않는 것 등)**

• https://developer.mozilla.org/ko/docs/Web/CSS/Guides/Selectors
• https://inpa.tistory.com/entry/CSS-%F0%9F%93%9A-%EC%84%A0%ED%83%9D%EC%9E%90-%EB%AC%B8%EB%B2%95-%EC%A0%95%EB%A6%AC-%EC%8B%AC%ED%99%94

---

🤟소감 3줄 요약

• 🤔 속성 선택자 이용해서 편리하게 할 수 잇음.
• 코드를 읽으려면 이것도 알아야 할 것 같고, 실제로 많이 사용하는 듯 함.