기본 선택자

by

기본 선택기

유형 모양 설명
전체 선택기 * HTML 페이지 내의 모든 태그 선택
태그 선택기 징후 HTML 페이지 내의 모든 특정 태그 선택
ID 선택기 #ID 특정 ID 속성이 있는 태그를 선택할 때 웹 표준에서는 ID 속성이 웹 페이지 내에서 중복되어서는 안 된다고 명시합니다.
규칙이 있으므로 특정 태그를 선택하기 위해 ID 선택기를 사용합니다.
클래스 선택 .수업 특정 클래스의 태그 선택

# 전역 선택자 사용

ㅁ 전체 선택자는 모든 태그의 색상 스타일 속성을 같은 값으로 변경합니다.

<!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> css 선택자 연습</title>
    <style>
        * {
            color :green;
        }
    </style>
  </head>
  <body>
    <h1> 제목 글자 태그 </h1>
    <p> 전체 선택자 연습하기.</p>
  </body>
</html>


'추천 관련글,

# 태그 선택자 적용

ㅁ h1 태그의 color style 속성에 초록색 값을, p 태그의 color style 속성에 주황색 값을 적용하고 싶다면 다음과 같이 작성한다.

<!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> h1 선택자 스타일 변경</title>
    <style>
        h1 { 
            color : green; 
        }

        p {
            color : orange;
        }
    </style>
</head>
<body>
    <h1> 제목 글자는 초록색 </h1> 
    <p> 문단 글자는 주황색</p>
</body>
</html>


ㅁ 쉼표(,)를 사용하여 여러 선택자에 동일한 스타일 속성을 적용할 수 있습니다.

<!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> h1 선택자 스타일 변경</title>
    <style>
        h1, h2, h3 { 
            color : green; 
        }

        p {
            color : orange;
        }
    </style>
</head>
<body>
    <h1> 제목 글자는 초록색 </h1> 
    <h2> 두번째 크기의 제목도 초록색 </h2>
    <h3> 세번째 크기의 제목도 초록색 </h3> 
    <p> 문단 글자는 주황색</p>
</body>
</html>


# 아이디 선택기

id 특성을 적용하고 공간 분할 태그의 id 선택기를 사용하여 레이아웃을 구성할 수 있습니다.

<!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> css 선택자 연습하기 </title>
    <style>
    #header {
        width : 300px; margin : 0 auto;
        background : gray;
    }
    #wrap {
        width : 300px; margin : 0 auto;
        overflow : hidden;
    }
    #aside {
        width : 200px; float : left;
        background : black;
    }
    #content { 
        width : 500px; float : left;
        background : yellow;
    }
    </style>
</head>
<body>
    <div id="header">
        <h1>#header 태그</h1> 
    </div>
    <div id="wrap">
        <div id="aside">
            <h1> #aside 태그 </h1>
        </div>
        <div id="content">
            <h1> #content 태그 </h1>
        </div>
    </div>
</body>
</html>


# 클래스 선택자 사용

ㅁ 클래스 선택은 특정 클래스의 태그를 선택하기 위해 사용합니다. 이것은 가장 일반적으로 사용되는 선택기입니다.

<!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> class 선택자 </title>
    <style>
        .select { 
            color : red;
        }
    </style>
</head>
<body>
    <ul> 
        <li class="select"> 고양이 </li>
        <li> 강아지 </li>
        <li class="select"> 반달곰 </li>
        <li> 뻐꾸기 </li>
    </ul>
</body>
</html>


# 여러 클래스 선택자 사용

여러 클래스를 공백으로 구분하여 여러 속성을 적용하여 사용할 수 있습니다.

<!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> css selector 연습하기</title>
    <style>
        .item {
            color : white;
        }

        .header {
            background-color: black;
        }
    </style>
</head>
<body>
    <h1 class="item header"> 글자는 흰색, 배경은 검은색</h1>
</body>
</html>



끝!