1. CSS란?

html이 웹개발의 기본 뼈대를 담당했다면 CSS는 그 뼈대를 꾸며주는 꾸미기 요소라고 할 수 있다. CSS의 경우에는 <head>태그 안에 <style>태그를 만들어 사용한다.

<!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>
    <style>
        /* CSS가 들어가는 공간 */
    </style>
</head>
<body>
    
</body>
</html>

2. CSS 선택자 - 기본

html파일에 있는 각각의 태그에 서로 다른 꾸미기를 적용해야할텐데 이 때, 어떤 요소에 스타일을 적용할지 알려주는 것이 CSS선택자라고 할 수 있다.

<h1>css 선택자 연습입니다</h1>
<p>css 스타일 적용하기</p>

<style>
	h1 {
            color: red;
            background-color: aliceblue;
        }

        p {
            color: aqua;
            background-color: black;
        }
</style>

각각을 살펴보면 h1 태그와 p태그에 css를 주기 위해 h1과 p 선택자를 사용했다. 이렇게 h1이나 p라는 태그를 사용하게 될 경우 html 내에 있는 모든 h1과 p태그에 css 속성값이 적용된다.

3. CSS 선택자 사용법 - 단순 선택자

위처럼 기본적인 태그 선택자를 사용하는 방법을 제외하고도 선택자의 종류는 많다. 그 중에서 먼저 단순 선택자에 대해서 알아보려고 한다.

전체 선택자
- 전체 선택자는 * 를 사용한다.
- html의 모든 태그에 적용하는 선택자이다.
타입 선택자
- 타입 선택자는 h1, p 등과 같은 태그의 이름을 사용하는 선택자이다.
클래스 선택자
- 클래스 선택자는 .클래스이름을 사용하는 선택자이다.
- 태그에 class를 부여하여 클래스 이름과 같은 태그에 적용한다.
ID 선택자
- ID 선택자는 #아이디이름을 사용하는 선택자이다.
- 태그에 ID를 부여하여 ID 이름과 같은 태그에 적용한다.

<style>
    
    /* 전체 선택자 */
    * {
        color: red;
    }
    
    /* 타입 선택자 */
    h1 {
        color: red;
        background-color: aliceblue;
    }

    p {
        color: aqua;
        background-color: black;
    }

    /* 클래스 선택자 */
    .classname {
        color: beige;
    }

    /* ID 선택자 */
    #IDname {
        font-size: 10px;
    }
</style>

4. CSS 선택자 사용법 - 복합 선택자

다음은 단순 선택자가 아닌 복합 선택자를 사용하는 방법을 알아보려고 한다.

자식 선택자
- 자식 선택자는 선택자 div의 모든 자식 중 선택자 p와 일치하는 요소를 선택한다.
- 선택자 두개를 사용하며 중간에 > 를 사용한다.
후손 선택자
- 후손 선택자는 선택자 div의 모든 자손 중 선택자 p와 일치하는 요소를 선택한다.
- 선택자 두개 사이에 공백을 준다.

<style>
    /* 자식 선택자 */
    div > p {
        color: red;
        background-color: aliceblue;
    }

    /* 자손 선택자 */
    div p {
        color: brown;
    }
</style>

* 자식과 자손의 차이 : 자식은 부모 바로 밑 요소들을 말하며, 자손은 좀 더 포괄적인 개념으로 부모 밑의 모든 요소들을 말한다.

5. 가상 클래스 선택자

선택자 뒤에 :가상이벤트를 추가하면 특정 이벤트에 스타일을 추가할 수 있다. 일반적인 클래스와 달리 가상클래스는 직접 정의할 수 없고 실제 HTML에서도 보이지 않는다는 특징을 가진다.

:link = 방문한 적이 없는 링크
:visited = 방문한 적이 있는 링크
:hover = 마우스를 올렸을 때
:focus = 포커스 되었을 때(input 태그)
:active = 마우스로 클릭했을 때
:first = 첫번째 요소
:last = 마지막 요소
:first-child = 첫번째 자식
:last-child = 마지막 자식

<!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>
    <style>
        .hello {
            background-color: beige;
        }

        button {
            color: black;
        }
        button:hover {
            color: red;
        }

        a:hover {
            background-color: blue;
            color: white;
        }
    </style>
</head>
<body>
    <div class="hello">
        <h1>안녕하세요.</h1>
        <a href="https://www.naver.com">네이버로 이동하기</a>
        <a href="https://www.daum.net">다음으로 이동하기</a>
        <button>버튼입니다</button>
    </div>
</body>
</html>

저작자표시 비영리 동일조건

티스토리

CSS 선택자 종류와 사용법 공부하기