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

DAY 20

🔖 오늘 읽은 범위 :

☃️01/30(금) 진도표 알림
❄️공부 내용: 13 CSS 고급 선택자(2)
❄️ 쪽수: 415~449쪽

---

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

가상 클래스와 가상 요소

• 사례 : 메뉴의 몇번째 항목 지정 하는 경우, 단락의 첫번째 글자만 지정하는 경우 등등.

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

• 사용자가 특정 동작을 할 때, 스타일이 바뀌도록 만들고 싶은 경우 사용함.
• 자주 사용하는 가상 클래스 선택자 : LoVe HAte
  1. :link : 방문하지 않은 링크에 스타일 적용.
  2. :visited : 방문한 링크에 스타일을 적용.
  3. :hover : 특정 요소에 마우스 포인터를 올려놓으면 스타일을 적용.
  4. :active : 웹 요소를 활성화 했을 때 스타일 적용.
  5. :focus : 웹 요소에 초점이 맞추어졌을 때 스타일을 적용.
• 가상 클래스 선택자는 순서대로 적용해야 함. 그렇지 않으면 적용이 안 됨.

.navi a {
  background: yellow;
}
.navi a:link, .navi a:visited {
  display: block;
  font-size: 14px;
  color: #000;
  padding: 10px;
  text-decoration: none;
  text-align: center;
}
.navi a:hover, .navi a:focus {
  background-color: #222;
  color: #fff;
}
.navi a:active {
  background: #f00;
}

요소 상태에 따른 가상 클래스 선택자

요소 상태에 따라 스타일을 적용할 경우 사용함.

자주 사용하는 가상 클래스 선택자

• :target : 앵커 대상에 스타일을 적용.
• :enabled, :disabled : 요소 사용 여부에 따라 스타일을 적용.
• :checked : 선택하거나 선택 된 항목의 스타일을 적용.

/* input 요소에 checked 속성이 추가되었을 때 label 요소의 스타일 */
#signup input:checked + label {
   color: red;
   font-weight: bold;
}

문서 구조를 사용하는 가상 클래스

웹 문서 구조 기준으로 특정 위치에 위치한 요소를 찾을 때 사용함.

보통 클래스나 id 를 지정해 놓고 선택해서 사용하지만, 항목이 많으면 그 중에서 위치를 사용해서 항목을 선택할 수 있음.

• 구조 가상 클래스 선택자

  선택자	설명
  :first-child	여러 요소 중에서 첫번째 자식 요소 선택.
  :last-child	여러 요소 중에서 마지막 자식 요소 선택.
  :only-child	여러 요소 중에서 자식 요소가 하나일 때 선택.
  :nth-child(숫자 또는 수식)	지정한 위치의 자식 요소를 선택.
  A:nth-of-type(숫자 또는 수식)	A 요소 기준으로 지정한 위치의 자식 요소를 선택.

• :first-child, :last-child, :only-child

  • 앞서 적용된 스타일이 있어도 CSS 우선 순위에 따라 가장 마지막에 지정한 스타일이 적용됨.

    /* .container -> 첫 번째 자식 요소가 -> p라면 선택 */
    .container p:first-child {
    background: red;
    }
    .container :last-child {
    background-color: #2cf;
    }
    .container div:only-child {
    background-color: #f0c8fc;
    }

• :nth-child

  • 여러 개 자식 요소 중에서 특정 위치 요소 선택.

    .container :nth-child(3) {
    background-color: beige;
    }
    .container :nth-child(even) {
    background-color: red;
    }
    .container :nth-child(odd) {
    background-color: blueviolet;
    }
    .container :nth-child(4n) {
    background-color: aquamarine;
    }
    .container :nth-child(n+4) {
    background-color: yellowgreen;
    }
    .container :nth-child(-n+4) {
    background-color: yellow;
    }
    .container :nth-child(n+3):nth-child(-n+5) {
    background-color: indianred;
    }

  • 복잡한 패턴을 처리하기 좋음. 일정한 반복 패턴이 있는 여러 자식 요소를 한꺼번에 선택할 수도 있음.

• :nth-of-type

  • 같은 타입의 요소들 사이에서 순서를 지정.

    .container p:nth-of-type(1) {
    background-color: #fc2;
    }
    .container div:nth-of-type(2) {
    background-color: #2cf;
    }

  • :nth-child 와 다른 점.

    • 동일한 결과를 나타냄.
    • 동적으로 만들어지는 웹 사이트 특성에서 따라서 다른 내용이 나타날 수 있음.
    • 정확하게 몇번째로 지정하는 것은 정적인 부분.
    • 동적인 지정이 필요하다. 제목 태그를 사용한 요소 중에서 몇 번째, 단락 태를 사용한 요소 중에서 몇 번째로 선택하는 것이 더 편리한 상황이다.

논리적으로 조합하는 가상 클래스

여러 선택자와 가상 클래스 등을 사용하면 웹 문서 특정 부분에 스타일을 적용할 수 있음.

• 그러나 웹 요소가 많을수록 선택자도 많아지고 CSS 코드가 길어지는 문제가 발생함.

• 최대한 간결한 표현을 위해서 특정 조건의 코드를 묶어 표현하는 가상 클래스

• :not 가상 클래스 선택자

  • 특정 요소를 제외하고 스타일을 적용함.

    #signup input:not([type=radio]) {
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 5px;
    width: 200px;
    }

• :is 가상 클래스 선택자

  • 같은 스타일을 여러 요소에 적용할 때, 묶어서 표현할 수 있음.

    :is(h1, h2, h3):hover {
      color: red;
    }

• :has 가상 클래스 선택자

  • A 요소가 괄호 안의 B 요소를 가지고 있는지 확인함.

    ```css
    nav:has(a:hover) a:not(:hover) {
    opacity: 0.3;
    }
    /*

  1. nav 요소에 a:hover 선택자가 있다면,
  2. :hover 선택자가 적용되지 않은 a 태그에 스타일 적용.

  */

가상 요소

• 문서 특정 부분에 가상으로 요소를 만들어 추가한다.

• 실제 내용에 영향을 주지 않고, 눈에 띄게 꾸며 줄 때 사용함.

• 태그를 사용하지 않고 필요할 때 마다 만들어서 사용함.

• 가상 요소는 이름 앞에 콜론 2개(::)를 붙여서 표시함.

• ::first-line, ::first-letter 요소

  • 1번째 줄, 1번째 글자에 스타일을 적용한다.

  • ::first-letter 적용 시 주의 사항

    • 첫 번째 글자는 반드시 첫 번째 줄에 있어야 함.

    • 태그 안에
      태그가 있어서, 첫 번째 글자가 첫 번째 줄에 없을 경우 적용이 안됨.

    p::first-letter {
    color: red;
    font-size: 2em;
    font-weight: bold;
    }

• ::before, ::after 요소

  • 내용 앞뒤에 콘텐츠를 추가함.

  • 새로운 요소 추가 없이, 앞이나 뒤에 내용이나 스타일을 넣을 수 있음.

  • 마크업 추가 없이 꾸미는 요소를 만들거나 시각적인 힌트를 만들 수 있어 편리함.

  • 항상 content 속성을 사용해야 함. 내용이 없어도 동일함.

    h1::before {
    content: "*";
    color: red;
    margin-right: 5px;
    }
    h1::after {
    content: "😁";
    color: red;
    margin-left: 10px;
    }

기타

• 기존 요소 검사해서 가상 요소가 있는지 확인 필요하다. 추가로 인해 요소가 중복되어 예상과 다른 결과가 나타날 수 있으니 주의 바람.

CSS 함수 살펴보기

• 세밀한 스타일 제어를 위한 CSS 함수.
• 복잡하고 다양한 디자인을 처리하는데 효율적인 방법.

:root 가상 클래스

• :root 가상 클래스 : 문서의 최상위 요소를 선택함. CSS 에서 변수를 전역적으로 사용하기 위해서 사용함.

• CSS 변수 : 웹 문서의 CSS 코드 어디에서나 사용할 수 있음.

    :root {
        --bg-color: #222; /* --bg-color 변수 */
    }

  • CSS 변수 이름 앞에 반드시 하이픈(-) 2개를 붙여야 한다.
  • 변수 이름은 대소문자를 구별한다. 보통 단순하게 소문자로만 사용하는 경우가 많다.
  • 변수 이름은 공백을 사용할 수 없다.
  • 이름만으로도 변수와 용도를 알 수 있도록 이름을 지어야 한다.

• CSS 코드에서 최상위에 작성한다.

• :root 가 아닌 요소에서 사용할 경우, 해당 요소와 그 하위 요소에서만 사용할 수 있다.

• 기존에 자주 반복하며 사용하는 것들을 변수 형태로 지정해서 이름만 가져다 사용하는 것이 더 효율적임.

var() 함수 : CSS 변수 값을 가져온다

• 사용자가 미리 만들어 놓은 CSS 변수 값을 가져올 때 사용함.

    :root {
        --main-bg-color: #222;
    }
    body {
        backgroud-color: var(--main-bg-color);
    }

• 나중에 해당 변수 값만 변경하는 것으로 일관된 디자인 적용이 가능함.

calc() 함수 : 계산식으로 값을 결정한다

• 계산식을 사용해서 속성 값을 사용하게 해준다.

    calc(계산식)
  
    nav {
        width: calc(100% - 80px);
    }

  • 연산자 앞뒤에 공백을 둬야 함.

min(), max() 함수 : 최솟값, 최댓값을 적용

• 화면 너비에 따라 속성값을 다르게 적용할 때 고려해볼 함수들임.
• 간단하게 미디어 쿼리를 사용하지 않더라도 화면 너비에 따라 대응하게 하는 것이 일부 가능함.

clamp() 함수 : 값의 범위를 제한

• 클램프는 대상 2개를 물리적으로 고정하는 장치.

• 특정 값의 범위를 고정하거나 제한하는 역할.

    clamp(최솟값, 최적값, 최댓값)

• 최적값으로 지정하되, 최솟값도 작을 수 없고 최댓값보다 클 수 없다.

filter 속성과 함수 : 다양한 시각 효과 추가

• 시각 효과를 추가하기 위해 사용함.
  • filter: 함수
• 필터 함수
  • blur()
  • brightness()
  • constrast()
  • drop-shadow()
  • grayscale()
  • invert()
  • sepia()
  • opacity()
  • hue-rotate()
  • saturate()

.blur { filter: blur(5px); } /* 흐리게 * /
.brightness { filter: brightness(2); } /* 2배 밝게 */
.contrast { filter: contrast(200%); } /* 대비 2배 높게 */
.drop-shadow { filter: drop-shadow(16px 16px 10px black ); } /* 그림자 추가 */
.grayscale { filter: grayscale(100%); } /* 회색조 적용 */
.invert { filter: invert(100%); } /* 색상 반전 */
.sepia { filter: sepia(100%); } /* 세피아 톤으로 변경하기 */
.opacity { filter: opacity(50%); } /* 반투명하게 */
.hue-rotate { filter: hue-rotate(90deg); } /* hue 색상 90° */
.saturate { filter: saturate(200%); } /* 채도 2배 높게 */

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

• Android Selector 와 비슷한 로직으로 동작하는 가상 클래스 선택자 동작 설계 방식이 이해가 쉬었음.
• CSS 함수가 스타일에 풍성함 더해주는 것이 있어서 이것도 주요한 포인트로 생각함.

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

• https://drafts.csswg.org/selectors/
• 에디터에서 이모티콘 삽입하기
  • 윈도우 : Win + .
  • 맥 : Command + Control + Space

---

🤟소감 3줄 요약

• CSS 요소를 좀 더 편리하게 할 방안들임.
• CSS 는 웹 디자인 분야에서 필수적이군.