선택자

honeyricecake·2022년 7월 23일
CSScss 선택자선택자
0

프론트엔드

목록 보기
22/31

1. 기본 선택자
1. * : 모든 요소를 선택
2. 태그 선택자 : 태그이름이 ~인 요소를 선택
3. 클래스 선택자 : .~ : 클래스 이름이 ~인 요소를 선택
정확히는 HTML class 속성의 값이 ~인 요소를 선택
4. id 선택자 : #~ : HTML id속성의 값이 ~인 요소를 선택

기본 선택자는 순서 역시 중요하다.
기억해두자. *, 태그 선택자, 클래스 선택자, id선택자

2. 복합선택자
우리가 배운 기본 선택자 4개를 조합해서 사용하는 것이다.

  1. 일치 선택자
    기본 선택자 네개 중에 두개를 붙여쓰면 기본 선택자 두개를 동시에 만족하는 요소들을 선택하게 된다.
    태그 선택자를 뒤에 쓸 경우 구분이 되지 않으므로
    ex. .orangespan
    태그 선택자는 맨 앞에 적어주는 것이 맞다.

  2. 자식 선택자
    ABC>DEF : 선택자 ABC의 자식요소 DEF 선택
    ex. ul>.orange
    ul태그의 자식 요소 중 클래스가 orange인 요소들 선택

  3. 하위 선택자(후손 선택자)
    ABC XYZ : 선택자 ABC의 하위요소 XYZ 선택
    '띄어쓰기'가 선택자의 기호!
    ex. div .orange
    div의 후손중 클래스가 orange인 모든 요소 선택
    일반적으로 하위 선택자를 좀 더 많이 사용함

  4. 인접 형제 선택자
    ABC + XYZ : 선택자 ABC의 다음 형제 요소 XYZ 하나를 선택
    ex. .orange + li
    orange클래스의 다음 형제 요소 하나를 선택

    <!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8" />
 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Document</title>
 <link
   rel="stylesheet"
   href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css"
 />
 <link rel="stylesheet" href="./main.css" />
</head>
<body>
 <ul>
   <li>딸기</li>
   <li>당근</li>
   <li class="choiced">수박</li>
   <li>참외</li>
   <li>멜론</li>
 </ul>
 <ul>
   <li>멍멍이</li>
   <li>냐옹이</li>
   <li class = "choiced">코알라</li>
   <li>웜벳</li>
 </ul>
</body>
</html>

```CSS
.choiced + li{
  color: red;
}

이렇게 하면 참외, 웜벳 모두 빨간색으로 표시된다.

  1. 일반 형제 선택자
    ABC ~ XYZ : 선택자의 다음 형제 요소 XYZ 모두를 선택
    ex. .orange ~ li : 클래스가 orange인 요소의 다음 형제 요소 li를 모두 선택

일반적으로 일반 형제보다는 인접 형제를 훨씬 많이 쓴다.

3. 선택자_가상 클래스

동작은 자바스크립트로 제어하는 것이 맞으나 css에서도 일부의 동작을 제어할 수 있다.

그 중 하나가 hover라는 가상 클래스 선택자이다.

.box{
  width: 100px;
  height: 100px;
  background-color: orange;
}

.box:hover{
  width: 300px;
}

이렇게 hover속성을 두면 box클래스 요소에 마우스를 올리면 그 가로길이가 300px이 된다.

변하는게 갑자기 훅 변해서 좀 심심하면

.box{
  width: 100px;
  height: 100px;
  background-color: orange;
  transition: 1s;
}

.box:hover{
  width: 300px;
}

이렇게 transition이라는 속성을 추가하여 value에 1s를 넣어주면 1s라는 시간동안 길이가 서서히 늘어나는 것을 볼 수 있다.

마찬가지로 마우스를 떼도 다시 1초의 시간동안 서서히 줄어든다.

Q. 어떻게 구현한걸까?:
나라면?
original 과 result를 두고
original에서 result까지 색, 길이 등을 프레임을 몇개 잘라 그 프레임을 순서대로 보여주는?

색을 기준으로 치면 original 색의 값이 100 100 100
result가 0 200 200 이라 하면
100개로 자르면
첫 프레임은 99 101 101, 두번쨰는 98 102 102 이런 식으로 되도록 만드는거지

요소가 분명 많아봤자 10개 정도일거고 거기에 대해서 어떻게 할지를 미리 생각해서 구현한 것일거야.

  1. hover는 마우스를 올렸을 때 어떻게 할지를 설정하는 CSS의 선택자이다.
    앞쪽에 있는 선택자에 마우스를 올리면 그제서야 선택되는, 그리고 선택된 요소에 해당하는 CSS 내용이 적용되는 그런 선택자이다.

가상 클래스 선택자의 핵심기호는 :(colon)이다.

  1. active : 선택자에 마우스를 클릭하고 있는 동안 선택
    ex. ABC:active

  2. focus : 선택자가 포커스되면 선택
    ex. ABC:focus
    Focus가 될 수 있는 요소는 정해져 있다.
    HTML대화형 콘텐츠 들이 그러한테, INPUT, A, Button, Label, SELECT 등 여러 요소가 있다.
    그리고 HTML 대화형 콘텐츠 요소가 아니더라도, tabindex 속성을 사용한 요소도 Focus가 될 수 있다.

div는 원래 focus가 불가능하나 tableindex 속성을 통해 Focus가 될 수있는 요소를 만들 수 있다.
이름에서도 알 수 있듯 Tab키를 사용해 Focus할 수 있는 순서를 지정하는 속성인데
-1을 지정하면 연속 키보드 탐색으로는 접근할 수 없으나 JS나 시각적(마우스 클릭)으로는 포커스 가능함을 뜻한다.
보통 JavaScript를 사용한 위젯의 접근성 확보를 위해 사용한다.

위의 것들은 동작을 제어하는 가상 클래스들인데 원래 동작 제어는 JS에서 하고 CSS에서는 극히 일부만 가능하다.

이번에는 기존에 배운 특정 요소를 선택하는 가상 클래스를 한번 살펴보자.

  1. FIRST CHILD

ex. ABD:first-child : 선택자 ABC가 형제 요소 중 첫째라면 선택

.fruits span:first-child{
	color: red;
}

fruits 클래스의 하위요소의 첫째가 span이라면 선택

  1. LAST CHILD

ex. ABC:last-child : 선택자 ABC가 형제요소 중 막내라면 선택

  1. nth-child(n)

ex.ABC:nth-child(2) : 선택자 ABC가 형제요소 중 2번째라면 선택

.fruits *:nth child(2) {
	color: red;
}

fruits클래스의 모든 하위요소가 선택자이다. 그럼 그냥 .fruits클래스의 하위요소 중 2번째를 선택하는 것이다.

여기서 모든 요소를 선택하는 *이 쓰이게 된다.!!

nth-child 는 숫자와 함께 n이라는 키워드를 사용할 수 있다.
n은 0부터 시작한다. (Zero-Based Numbering)

그럼 다음 코드를 보자.

.fruits *:nth-child(2n) {
	color: red;
}

이는 n에 2를 곱한다는 의미이고 즉, 위와 같이 nth-child를 사용하면
클래스가 fruits인 모든 요소들의 모든 하위요소들중 짝수번째 요소들을 선택하게 된다.

부정 선택자
ABC:not(XYZ) : 선택자 XYZ가 아닌 ABC요소 선택

ex. .fruits *:not(span)
fruits의 모든 하위요소중 span이 아닌 것들만 선택!

가상 클래스: 실재로 존재하는 요소에 특정 이벤트나 환경에 맞춰 가상으로 클래스를 줘서 css로 제어하는 것

가상 요소: 실재로 존재하는 요소에 가상으로 클래스를 주던 가상 클래스와 다르게 실재로 존재하지 않는 가상의 요소를 만들어 스타일을 주는 것을 말한다.

보통 콜론을 사용하지만 가상 클래스와의 수분을 하기 위해 이중콜론(::)의 사용을 권장하고 있다.

가상 요소 선택자
1. ABC::before
선택자 ABC 요소의 내부 앞에 내용(Content)를 삽입

이 때 삽입되는 요소는 인라인 요소이다.!

  1. ABC::after
    선택자 ABC 요소의 내부 뒤에 내용을 삽입

실재로 요소를 삽입하는 가상요소선택자에는 반드시 content 라는 css속성을 사용하여야 한다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./main.css">
</head>
<body>
  <div tabindex="-1" class="box"></div>
  <a href="https://www.naver.com/" target="_blank">NAVER</a>
  <input type="text"/>
  <div class="box">
    Content!
  </div>
</body>
</html>
.box{
  width: 100px;
  height: 100px;
  background-color: orange;
  transition: 1s;
}

.box:focus{
  width: 300px;
  background-color: royalblue;
}

a:active{
  color: red;
}

input:focus{
  background-color: orange;
}

.box::before{
  content: "앞!"
}

개발자 도구로 확인하니 ::before이 삽입되어 있고 개발자 도구에서 스타일을 확인할 수 있다.

.box::before{
  content: "";
  display: block;
  width: 30px;
  height: 30px;
  background-color: royalblue;
}

가상요소의 코드를 이렇게 바꿔줘보자

content는 반드시 있어야 하며
display 속성은 인라인 요소를 블락요소처럼 사용하기 위해 필요한 것이다.

이렇게 하면

이렇게 요소를 추가할 수 있다.

속성 선택자

[ABC] : 속성의 이름을 가지고 선택하는 선택자
ex.

[disabled] {
	color: red;
}

disabled라는 속성을 가진 요소들이 선택된다.

[type] {
	color: red;
}

이를 이용하면 type이라는 속성을 가진 input요소들이 모두 선택된다.

[ABC="XYZ"] : 속성 ABC를 포함하고 값이 XYZ인 요소를 선택

profile
honeyricecake
이전 포스트

CSS 기본 문법, 선언 방식

다음 포스트

스타일 상속

0개의 댓글