CSS [선택자]

20234 단어 정리독학CSSCSS

📚선택자

📝선택자란?

선택자(Selector)는 HTML의 요소를 선택하는 부분이다. CSS의 기본 구조에서 보았듯이 선택자는 맨 앞에 위치해있다.

Selector { Property: Value; }

이 선택자에는 크게 6가지가 존재한다. 이는 아래와 같다.

  • 타입 선택자(type selector)
  • 전체 선택자(universal selector)
  • 클래스 선택자(class selector)
  • 아이디 선택자(id selector)
  • 속성 선택자(attribute selector)
  • 의사 선택자(pseudo selector)

📝타입 선택자

타입 선택자는 HTML의 요소 이름을 사용한다. <h1>, <p> 등이 여기에 해당되며, 선택자 위치에 요소의 이름을 적어주면 된다.

h1 { color:aqua; }
p { color:blue; }

내부 스타일 시트로 작성하면 아래와 같다.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            h1 { color:blue; }
        </style>
    </head>
    <body>
        <h1>예시 텍스트</h1>
    </body>
</html>

👉선택자 그룹

선택자는 콤마(,)를 이용해 여러 개를 나열하여 적용할 수 있다.

h1, h2, h3 { color:blue; }

위의 코드에서 선택자는 <h1>, <h2>, <h3>을 요소로 선택한다는 뜻이다.

📝전체 선택자

전체 선택자는 페이지 안에 있는 모든 요소를 선택하는 선택자로, 선택자 위치에 *만 적어주면 된다.

* { color:black; }

내부 스타일 시트로 작성하면 아래와 같다.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            * { color:blue; }
        </style>
    </head>
    <body>
        <h1>예시 텍스트</h1>
        <p> 예시 텍스트</p>
    </body>
</html>

📝아이디 선택자

아이디 선택자는 id가 지정된 특정 요소를 선택하는 선택자이다.
id 이름 앞에 #을 붙여 #아이디 이름의 형태로 작성해준다.

#target { color:blue; }

이 선택자는 다음과 같이 작성된 요소를 지정하게 된다.

<h1 id="target">텍스트</h1>

내부 스타일 시트로 작성하면 아래와 같다.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            #target { color:blue; }
        </style>
    </head>
    <body>
        <h1 id="target">예시 텍스트</h1>
        <h1>예시 텍스트</h1>
    </body>
</html>

📝클래스 선택자

클래스 선택자는 클래스가 지정된 특정 요소를 선택하는 선택자이다.
아이디 선택자와는 다르게 # 대신 .을 넣어주면 된다.

.target { color:blue; }

이 선택자는 다음과 같이 작성된 요소를 지정하게 된다.

<h1 class="target">텍스트</h1>

내부 스타일 시트로 작성하면 아래와 같다.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            .target { color:blue; }
        </style>
    </head>
    <body>
        <h1 class="target">예시 텍스트</h1>
        <h1>예시 텍스트</h1>
    </body>
</html>

📝속성 선택자

html의 요소 중에서 특정한 속성을 가지는 요소를 선택하는 선택자이다.
타입 선택자에서 [ ] 안에 해당 속성을 작성해준다.

h1[title] { color:blue; }

내부 스타일 시트로 작성하면 아래와 같다.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            h1[title] { color:blue; }
        </style>
    </head>
    <body>
        <h1 title="제목">예시 텍스트</h1>
        <h1>예시 텍스트</h1>
    </body>
</html>

📝의사 선택자

👉의사 클래스(Pseudo-class)

의사 클래스는 선택지에 추가하는 키워드로, 요소의 특정 부분에 스타일을 적용할 때 사용된다. 해당 클래스가 해당 요소에 정의된 것으로 간주하고 사용하며, 대표적으로 앵커 태그에서 사용된다.

Selector:PseudoClass { Property:Value; }

의사 선택자는 의사 클래스가 정의된 것처럼 간주하고 해당 클래스를 선택하는 선택자이다. 앵커 태그에서는 이를 이용해 하이퍼링크를 방문하기 전과 방문한 후, 마우스를 가져갔을 때의 스타일을 지정할 수 있다.

a:link { color:blue; }
a:visited { color:green; }
a:hover { color:red;n }
java 디지털 이미지 처리 기반 이미지 파일 쓰기 예시 사용하기
HTTP 웹 기본 지식 -8.HTTP 헤더2 - 캐시와 조건부 요청

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage