본문 바로가기
CSS

가상 클래스와 가상 요소

mukom 2022. 10. 26. 17:36

1. 가상 클래스(pseudo class)

 

사용자의 특정한 동작에 반응하여 스타일을 줄 수 있도록 하는 가상 클래스 선택자이다.

 

1️⃣ :link 가장 클래스 선택자 : 방문하지 않은 링크에 스타일 적용

텍스트 링크의 경우 기본적으로 파란색(blue) 글자와 밑줄로 표시되는데,

이를 표시할 때에 링크의 밑줄을 없애거나, 색상을 변경하는 등의 스타일을 적용할 수 있다.

    <style>
        a {
            display: block;
            width: 300px;
            height: 20px;
            padding: 1em;
            text-align: center;
        }
        .link:link {
            text-decoration: none;
            color: crimson;
            background-color: antiquewhite;
        }
    </style>
</head>
<body>
    <a href="#">link 가상 클래스 선택자 적용 안 함</a>
    <a href="#" class="link">link 가상 클래스 선택자 적용 함</a>
</body>

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

링크에 한 번 이상 방문하게 되면 기본적으로 자주색(purple)으로 표시되는데,

방문했던 링크에 대해 스타일이 변경되지 않게 하려면 적용할 수 있는 선택자이다.

    <style>
        a {
            display: block;
            width: 300px;
            height: 20px;
            padding: 1em;
            text-align: center;
        }
        .link:link {
            text-decoration: none;
            background-color: antiquewhite;
            font-weight: bold;
        }
        .link:visited {
            color: darkred;
        } 
    </style>
</head>
<body>
    <a href="https://www.naver.com" target="_blank">visited 가상 클래스 선택자 적용 안 함</a>
    <a href="https://www.naver.com"  target="_blank" class="link">visited 가상 클래스 선택자 적용 함</a>
</body>

 

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

    <style>
        a {
            display: block;
            width: 300px;
            height: 20px;
            padding: 1em;
            text-align: center;
        }
        .link:link {
            text-decoration: none;
            background-color: antiquewhite;
            font-weight: bold;
        }
        .link:hover {
            background-color: cornflowerblue;
        }
        
    </style>
</head>
<body>
    <a href="https://www.naver.com" target="_blank">hover 가상 클래스 선택자 적용 안 함</a>
    <a href="https://www.naver.com"  target="_blank" class="link">hover 가상 클래스 선택자 적용 함</a>

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

:hover 가상 클래스 선택자와 달리 실제 클릭을 해야 적용되는 스타일을 작성할 수 있다.

    <style>
        a {
            display: block;
            width: 300px;
            height: 20px;
            padding: 1em;
            text-align: center;
        }
        .link:link {
            text-decoration: none;
            background-color: antiquewhite;
            font-weight: bold;
        }
        .link:active {
            background-color: cadetblue;
            color: chocolate;
        }
    </style>
</head>
<body>
    <a href="https://www.naver.com" target="_blank">active 가상 클래스 선택자 적용 안 함</a>
    <a href="https://www.naver.com"  target="_blank" class="link">active 가상 클래스 선택자 적용 함</a>
</body>

5️⃣ :focus 가상 클래스 선택자 : 웹 요소에 초점이 맞춰졌을 때의 스타일 적용

input 태그 텍스트 필드 에 마우스 커서를 놓거나, [tab] 키를 이용하여 초점을 이동하였을 때에 적용할 수 있는 선택자이다.

    <style>
        a {
            display: block;
            width: 300px;
            height: 20px;
            padding: 1em;
            text-align: center;
        }
        .link:link {
            text-decoration: none;
            background-color: antiquewhite;
            font-weight: bold;
        }
        .link:focus {
            background-color: aquamarine;
            color: black;
        }
        .link:active {
            background-color: cadetblue;
            color: chocolate;
        }
    </style>
</head>
<body>
    <a href="https://www.naver.com" target="_blank">active 가상 클래스 선택자 적용 안 함</a>
    <a href="https://www.naver.com"  target="_blank" class="link">active 가상 클래스 선택자 적용 함</a>
</body>

2. 구조 가상 클래스 

 

웹 문서 구조를 기준으로 특정한 위치에 있는 요소를 찾아 스타일을 지정하는 선택자이다.

 

1️⃣ :root 가상 클래스 선택자 : 문서 전체에 적용하기

문서 안의 루트를 기준하는 것인데, 여기서의 루트는 <html> 태그를 가리킨다.

 

2️⃣ :nth-child(n) 와 :nth-last-child(n) 가상 클래스 선택자 : 자식 요소의 위치에 따라 스타일 적용하기

자식 태그 중 몇 번째의 자식 태그에 적용할 것인지를 지정할 수 있는 선택자이다.

:nth-child(n) 는 위에서부터 순서를 따지고, :nth-last-child(n) 는 아래에서부터 순서를 따진다.

    <style>
        body :nth-child(2n) {color: red;}    
	</style>
<body>
    <div>
        <h2>h2 1</h2>
        <h3>h3 -------- 1</h3>
        <h2>h2 2</h2>
        <h2>h2 3</h2>
        <h3>h3 -------- 2</h3>
        <h2>h2 4</h2>
        <h2>h2 5</h2>
        <h3>h3 -------- 3</h3>
        <h2>h2 6</h2>
    </div>
    <div>
        <p> pppp </p>
        <p> pppp </p>
        <p> pppp </p>
        <p> pppp </p>
        <p> pppp </p>
    </div>
    <div>
        <p> pppp </p>
        <p> pppp </p>
        <p> pppp </p>
        <p> pppp </p>
        <p> pppp </p>
    </div>
</body>

body 태그에 :nth-child(2n) 선택자를 사용해 보았다.

여기서 2n은 짝수를 나타내는 것으로 짝수 번째에 있는 태그의 색상을 변경하도록 하였다.

 

body 태그의 직접적인 자식 태그는 <div> 태그 세 개이다.

따라서 여기서의 짝수 번째에 있는 <div> 태그는 모두 빨간색으로 색상이 변경되었다.

 

그 다음 첫 번째와 세 번째는 해당 태그 내부의 짝수 번째에 있는 모든 태그가 태그 명에 상관없이 변경된 것을 확인할 수 있다.

div :nth-child(2n) {color: red;}

코드를 이렇게 바꾸게 되면 div 태그 내부의 짝수 번째의 태그에만 영향을 줄 수 있게 바뀐다.

3️⃣ :nth-of-type(n), :nth-last-of-type(n) 가상 클래스 선택자 : 특정 태그 위치에 스타일 적용하기

위의 child 는 타입 명에 상관없이 순서에 따라서만 적용했다.

하지만 of type 은 이름에서도 알 수 있듯이 타입 명이 중요하기 때문에

해당되는 타입 중에서의 순서에 따르게 된다.

h2:nth-of-type(3n) {color: blue;}

위의 선택자를 해석하면, 

h2 태그의 타입에서만 순서를 따질 것이고 3n 즉, 3의 배수 순서에 있는 태그에만 영향을 미치겠다는 것이다.

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

이는 자식 요소 중 첫번째 또는 마지막 요소에만 스타일을 적용하는 것이다.

        body :first-child {
            color:aqua;
        }
        body :last-child {
            color:chartreuse;
        }

body 태그의 첫번째 요소인 div 태그는 첫번째 자식이기 때문에 전부 민트색으로 변경되었다가 마지막 요소에만 연두색이 다시 적용되었다.

두번째 div 태그에서는 첫번째 요소에만 민트색이 적용되었고, 마지막 요소에만 연두색이 적용되었다.

세번째 div 태그에서는 마지막 요소이기 때문에 모두 연두색이 적용되었다가 첫번째 요소에만 민트색이 적용되었다.

 

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

of-type 이기 때문에 한 태그 종류에서만 따지게 된다.

        h2:first-of-type {
            color:aqua;
        }
        p:last-of-type {
            color:chartreuse;
        }

h2 태그의 첫번째 요소만 민트색으로 변경되었고,

p 태그의 마지막 요소에만 연두색으로 변경된 것을 확인할 수 있다.

 

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

child 를 사용하게 되면 부모 요소 안의 자식 태그가 단 하나만 존재해야 적용되고

type 을 사용하게 되면 부모 요소 안의 자식 태그가 타입별로 하나씩만 존재하면 적용된다.

<style>
        h1:only-child {
            color: crimson;
        }
        h1:only-of-type {
            color: chocolate;
        }
        p:only-child {
            color: yellow;
        }
        p:only-of-type {
            color: darkgreen;
        }
    </style>
<body>
    <div>
        <h2>h2 1</h2>
        <h3>h3 -------- 1</h3>
        <h2>h2 2</h2>
        <h2>h2 3</h2>
        <h3>h3 -------- 2</h3>
        <h2>h2 4</h2>
        <h2>h2 5</h2>
        <h3>h3 -------- 3</h3>
        <h1>h1 1</h1>
    </div>
    <div>
        <p> pppp 1</p>
    </div>
    <div>
        <p> pppp </p>
        <p> pppp </p>
        <p> pppp </p>
        <p> pppp </p>
        <p> pppp </p>
    </div>
</body>

h1 단 하나의 태그를 자식 태그로 가진 부모 태그는 없기 때문에 빨간색은 적용되지 않았고,

h1 태그를 여러 태그 중 하나만 가지고 있는 부모 태그는 있기 문에 주황색은 적용되었다.

 

또한 p 태그 를 하나만 가지고 있는 부모 태그이고 타입도 하나이기 때문에 노란색과 초록색 모두 나타야 하지만

스타일 적용은 겹치게 되는 경우 마지막에 작성한 스타일이 적용되어 초록색만 보이는 것이다.

 

 

3. 가상 요소

가상 클래스 선택자는 여러 태그 중에서 원하는 태그를 선택하기 위하여 사용하는 선택자라면

가상 요소는 내용의 일부만을 선택하여 스타일을 적용할 때에 사용한다.

둘을 구분하기 위하여 가상 요소는 콜론을 두 개 사용하지만 한 개만 사용하더라도 사용 가능하다.

 

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

    <style>
        p::first-line {
            color: cornflowerblue;
        }
        p::first-letter {
            background-color: cadetblue;
        }
    </style>
</head>
<body>
    <p>
        끓는 가지에 예가 피어나기 무엇이 뼈 별과 있는 약동하다. 인류의 우리 것은 무엇이 꽃이 할지라도 보는 평화스러운 것이다. 얼마나 그와 품에 부패뿐이다. 반짝이는 구할 평화스러운 위하여서. 있음으로써 이상의 피고, 부패뿐이다. 꽃이 뼈 청춘의 이상을 하는 되려니와, 곳이 사막이다. 별과 영원히 그들을 평화스러운 인간은 오아이스도 그들은 피에 싶이 부패뿐이다. 풀밭에 이것이야말로 내는 가는 방황하여도, 인간은 되려니와, 풀이 위하여서. 청춘을 구하지 작고 붙잡아 것은 동력은 거친 더운지라 듣는다. 풍부하게 바이며, 청춘의 내려온 가치를 웅대한 있으랴?<br>
        가지에 가장 할지니, 할지라도 부패를 것이다. 사랑의 유소년에게서 트고, 많이 싶이 가는 있다. 우리 불어 기쁘며, 풍부하게 꽃 이것이다. 방황하여도, 눈에 있는 있다. 인생을 눈에 넣는 피가 뜨거운지라, 착목한는 눈이 밥을 것이다. 끓는 천자만홍이 풍부하게 생의 영원히 실현에 목숨이 속잎나고, 그들을 피다. 못할 싶이 원질이 얼마나 미묘한 철환하였는가? 있으며, 두손을 천자만홍이 하여도 뜨거운지라, 거선의 청춘의 약동하다. 되려니와, 보배를 같이 끓는다. 있는 끓는 우리 바이며, 뿐이다.
    </p>
</body>

이 요소를 사용하는데에 주의할 점은 첫 줄이 구분되어야 사용 가능하다는 것이다.

때문에 위의 예시처럼 <br> 태그로 줄을 구분해주는 등의 적용이 필요하다.

 

2️⃣ ::before, ::after 요소 : 내용의 앞뒤에 콘텐츠 추가하기

특정 요소를 기준하여 앞 또는 뒤에 콘텐츠를 추가할 수 있다.

    <style>
        ul li {
            margin: 15px;
        }
        li.hot::marker{list-style:none;}
        li.hot::after {
            content:"NEW!!";
            font-size: x-small;
            padding: 2px 4px;
            margin: 0 10px;
            border-radius: 2px;
            background: #f00;
            color: #fff;
        }
    </style>
</head>
<body>
    <ul>
        <li class="hot">제품 A</li>
        <li>제품 B</li>
        <li>제품 C</li>
        <li class="hot">제품 D</li>
    </ul>
</body>

 

'CSS' 카테고리의 다른 글

transition : 전환  (0) 2022.10.28
transform : 변형  (0) 2022.10.28
속성 선택자  (0) 2022.10.26
combination selector : 연결 선택자  (0) 2022.10.26
HTML5 시멘틱 태그  (0) 2022.10.24

'CSS' Related Articles

티스토리툴바