CSS 가상 클래스 선택자

선택자 뒤에, 가상 이벤트를 붙이게 되면, 설정한 이벤트마다 스타일을 적용할 수 있습니다. 가상 클래스 선택자로 마우스 포인터 이벤트, 혹은 애니메이션 등의 설정, 그리고 대화형 컨텐츠를 제작할 수 있어,웹 사이트를 관리하시는 분들이라면 알면 유용한 기능이니 꼭 참고해주시길 바랍니다.

서론 

1. 가상 클래스 선택자의 종류

1. hover : 마우스 포인터가 올라가 있는 동안 설정한 이벤트가 발생하는 것을 말합니다.
2. transition-duration : 마우스 포인터가 올라갈 때 애니메이션 이벤트가 발생하는 것을 말합니다. (전환속성 중 일부)
3. active : 마우스로 누르고 있는 동안 이벤트가 발생하는 것을 말합니다.
4. focus : 선택자가 포커스 된 동안에만 시행되며 대화형 컨텐츠 (input, img, tabindex)에서 사용이 가능합니다.
5. frist -  child : 형제 요소 중 가장 첫 번째 요소로 온다면 선택가능한 것을 말합니다.
6. nth-child 선택자가 형제 요소 중 n 번째로 오는 요소라면 선택할 수 있습니다.
7. li:nth-child(n) 연산 괄호 안에 n을 사용하면 0부터 시작해서 1씩 증가되며, n을 이용한 곱셈 연산시에는 연산자는 사용하지 않으며, n 앞에 숫자가 위치해야합니다
8. nth-of-type() 지정한 태그와 동일 타입(태그)의 형제 요소 중 n번째 요소라면 선택합니다.
9. first-child 첫번째 자식
10. last-child 마지막 자식

2. 예제를 위한 설정값 등록

body에 들어 갈 코드를 미리 작성해놓는 것이니, 가상 클래스 선택자에 대한 예제를 보고 싶으시다면 미리 스킵해주세요. 하지만, 이 설정값이 있어야 이해가 더 쉬울테니 아래를 참고해주시길 바랍니다. 하이퍼링크는 구글 사이트를 등록하고, 단락에 박스 1과 박스 2를 설정하고, 그리고 fruits이라는 클래스에는 과일들을 담아줄게요. 

    <a href="https://www.google.com">Google</a>

    <div class="box1"></div>

    <div class="box2"></div>

    <input type="text"/>

    <ul class="fruits">

        <li>딸기</li> <!-- first-child -->

        <li>사과</li>

        <li>오렌지</li>

        <li>망고</li> <!-- last-child -->

    </ul>

 

본론

기본적으로 가상클래스를 담아줄 때는 쌍점(:) 을 사용해서 달아주어야합니다. 만일 가상클래스를 담아줄 때, 지정한 클래스가 있다면 '.클래스명:가상클래스 선택자' 이런 형태로 달아주면 될텐데요. 아래의 예제를 확인해주세요.

1. hover "마우스 포인터 갖다놓으니 바뀌네?" 속성

        a:hover{

            color: pink;

            /글자 굵기를 조절하는 속성/

            font-weight: bold;

            font-size: 20px;

        }

 

이렇게 hover라는 선택자를 달게 되면 마우스 포인터를 설정된 문구인 구글에 갖다댄다면, 20px의 굵은 글씨체, 그리고 핑크색으로 바뀌게 됩니다.

2. transition-duration ( 가상클래스 X, 전환속성 일부 ) "웬 애니메이션이야 속성"

transition-duration은 마우스 포인터를 이동시켰을 때 애니메이션을 실행시킵니다. 사실, 가상 클래스라는 개념보다는 트랜지션 전환 속성 이라는 명칭으로 불리고 있지만, 가상 클래스만큼 많은 이용을 하기 때문에 함께 포함시켰습니다.

 

트랜지션 전환에서는 클래스명을 불러오고, 괄호를 열어주면 되는데 실행시간을 함께 적어주면 됩니다.

애니메이션 실행 시간은 초단위인 'ms'을 이용하며, 만약 상세한 초 단위가 필요하지 않다면 's'를 이용하면 됩니다.

 .box1{

            width: 100px;

            height: 100px;

            background-color: tomato;

            /*애니메이션 실행 시간

            단위 초단위 1000ms -> 1초

            뒤 s  

            */

            transition-duration: 1s;

3. active "갖다대는거 안돼, 쭉 클릭하면 변해버려 속성"

active 선택자를 마우스로 누르고 있는 동안에 속성 값으로 변경되는 것을 말하는데, 제가 마우스를 클릭하게 되면, 기존에 있던 박스2의 색상은 skyblue 색상으로 변경될 것입니다.

 .box2:active{

            width: 200px;

            background-color: skyblue;

        }

 

4. focus "뭐 좀 보려고 눌렸더니 변해버리네 속성" 

focus는 선택자가 포커스 된 동안에만 이벤트가 발생하는데, 대화형 컨텐츠인 (input : 입력),(img : 이미지), tabindex 에서 사용이 가능합니다. 아래와 같이 설정을 하게 되면, 입력 값을 넣는 창의 속성은 입력창이 핑크색이며 너비가 100px 이고, 입력창을 감싸는 빨간색 테두리가 3px, 그리고 1초동안 애니메이션 효과를 볼 수 있죠. 그런데, 실제로 우리가 입력하려고 눌러서 포커스를 두고 있으면 너비가 200으로 넓어지며 옐로우그린 입력창이 보이게 됩니다.

        input{

            width: 100px;

            background-color: pink;

            /input태그는 outline으로 선의 외곽선들어간다./

            outline:none;

            border: 3px solid red;

            padding: 5px;

            transition-duration: 1s;

        }

        input:focus{

            width:200px;

            background-color: yellowgreen;

            border: 3px solid blue;            

        }

 

5. frist-child : 너희 애들 중에 첫 번째 놈만 와라

지금부터 작성하는 선택자는 자식 클래스에 있는 몇 번재 요소에 있는 아이의 속성을 바꾼다고 생각하시면 되겠는데요. 처음, 나오는 이 frist-child는 첫 번째 요소를 가져오는 것입니다. 문법의 구조는 아래의 사진과 같이 진행됩니다.

        .fruits > li:first-child {

            color: red;

        }

        .fruits > li:last-child {

            color: aqua;

        }

그럼 서론에 작성한 아이들 중에 딸기가 frist child가 되는거죠. 속성이 변하는 것은 fruits 클래스에 있는 딸기가 될 것입니다. [서론 참고하면서 보세요]

7. nth-child (n): 너희 애들 중에 n 번째로 오는 애가 와라

선택자가 형제 요소 중 n 번째 요소라면 속성 값을 바꿔주는 것입니다. 그렇다면, fruits의 2번째 요소는 어떤 것일까요? 아래의 설정 값에서 "사과" 가 브라운색상으로 변하는 것으로 볼 수 있습니다.

<ul class="fruits1">

        <li>딸기</li>

        <li>사과</li> <!-- nth-child(2) -->

        <li>오렌지</li>

        <li>망고</li>

    </ul>

        .fruits1 li:nth-child(2) {

            color: brown;

        }

 

 

8. li:nth-child(n) : 세부적으로 살펴보기 : 짝수/홀수/n번 째 이후의 요소/태그에 관한 이야기

연산 () 안에 n을 사용하면 0부터 시작해서 1씩 증가 되는데요. n을 이용한 곱셈 연산 시에 연산자인 "*" 사용하지 않으며, "n" 앞에, 숫자가 위치하면 n 앞에 숫자가 위치해야합니다

<ul class="fruits2">

        <li>딸기</li> <!-- nth-child(2n) -->

        <li>사과</li> <!-- nth-child(2n + 1) -->

        <li>오렌지</li> <!-- nth-child(2n) -->

        <li>망고</li> <!-- nth-child(2n + 1) -->

    </ul>

8-1. 짝수번째 요소를 선택할 때?

2n을 이용해서 속성의 값을 변경시킬 수 있습니다.

        /* 짝수번째 모든 요소를 선택합니다. */

        .fruits2 li:nth-child(2n) {

            color:blue;

        }

8-2. 홀수번째 요소를 선택할 때?

홀수 번째는 2n에서 +1을 작성해주면 됩니다.

        /* 홀수번째 모든 요소를 선택합니다 */

        .fruits2 li:nth-child(2n + 1) {

            color: greenyellow;

        }

8-3. ~번 째 이후의 모든 요소의 속성 값을 변경하고 싶을 때?

~번 째 이후의 모든 요소의 속성 값을 변경하고 싶을때는 n의 값에 + 그리고 기준값을 설정해주면 되는데요. 여기서의 +는 더하기 연산이 아닌, "~를 이어" 라고 생각하시면 조금은 간편하게 풀 수 있지 않을까 생각이 듭니다.

  <ul class="fruits3">

        <li>딸기</li>

        <li>사과</li>

        <li>오렌지</li> <!-- nth-child(n + 3) -->

        <li>망고</li> <!-- nth-child(n + 3) -->

    </ul>

 

        /* 3번 째 이후에 모든 요소를 선택한다 */

        .fruits3 li:nth-child(n + 3) {

            color: hotpink;

        }

 

8-4. 중요 ! 만일, 클래스의 자식 요소가 여러 태그들이 중첩되어있을 때 n번째 요소는 어떻게 판단할까?

아래의 설정값들을 보면, 딸기는 div 태그로, 사과와 오렌지는 p태그로, 망고는 span 태그로 묶여져있는 것을 볼 수 있는데요. 이 때 만약 우리가 n번째 값을 불러온다고 하면, 과연 어떤 값이 나올까요? n번째 값을 불러온다고 하면 사실 태그를 어떻게 지정했는가가 중요한데요. 

이 예제를 보기 전에 이전에 작성한 포스팅에서 cascading을 먼저 기억해주시길 바랍니다.

 

    <ul class="fruits4">

        <div>딸기</div>

        <p>사과</p>

        <p>오렌지</p>

        <span>망고</span>

    </ul>

사실은 간단합니다. 클래스안의 순서가 결국 값의 지정이 되는건데요. 예를 들면 아래의 딸기는 1번 째 값, 사과는 2번째 값, 오렌지는 3번째 값, 망고는 4번째 값으로 생각하시면 됩니다. 왜냐하면 이유는, 이들은 "자손"의 영역의 해당하게 되서인데요. 자손영역에 해당되는 클래스들은 인덱스 번호가 1부터 시작한다고 생각하시면 되겠습니다.

        /* class의 첫 번째 자식 요소가 p태그가 아니고 div태그이므로 선택이 되지 않는다. */

        .fruits4 p:nth-child(1) {

            color: skyblue;

        }

8-5 "분명 자식 클래스인데? 자손이라니?"

다음 포스팅을 참조해주세요

        /* p태그를 선택하고 싶다면  태그의 순서가 아니라 전체 자식(자손의 순서)로 선택을 해야

            적용이 됩니다. 

        .fruits4 p:nth-child(2) {

            color: skyblue;

        }

 

하나의 예를 들어 p태그의 1번째 값을 가져온다고 작성해보면, 출력화면에서 속성이 skyblue로 변하지 않습니다. 왜냐하면 fruit4의 1번째 값은 div태그로 이루어진 '딸기'이기때문이죠. 그럼 우리가 사과의 속성 값을 바꾸고 싶다고 한다면? 전체 목록 중 두 번째로 입력한 값과, p태그를 만들어 속성 값을 변경해주어야합니다.

9. nth-of-type() "얘네 뺴고 다 해줘" 

n번째를 제외하고 모두 속성의 값을 변경하고 싶을 때는 사용하는 가상클래스로,  부정연산자를 이용해서 작성해주면 쉽게 처리할 수 있습니다.

    /* nth-of-type()

    지정한 태그와 동일 타입(태그)의 형제 요소 중 n번째 요소라면 선택한다. */

    .fruits1 p:nth-of-type(1) {

        color: blue;

    }

    /* 얘네 빼고 색깔이나 스타일을 주고 싶다라면, *not를 사용해봅니다.

    부정연산자로 ()안에 지정된 요소가 아닌 요소를 선택해서 꾸며준다 */

    .fruits3 li.apple{

        color: chartreuse;

    }

    .fruits3 li:not(.apple){

        color: cyan;

    }

 

 

가상 클래스 선택자 - Chrome 2023-11-16 07-08-01.mp4

12.64MB