코드 여행 일기

CSS 선택자 1 본문

CSS

CSS 선택자 1

할짝개발자 2023. 7. 21. 18:31
728x90
반응형

선택자의 종류

 

기본 선택자

그룹 선택자

 

[ 이번엔 위 2가지만 다룰 예정 ]

 

특성 선택자

결합 선택자

의사 클래스

의사 요소

 

[ 나머진 다음 시간에 ]

기본 선택자

 

1. 전체 선택자

 

모든 요소를 선택한다.

*(애스터리스크)는 ‘문서 내의 모든 요소’ 를 의미하는 기호이다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TEST</title>
		<!--전체 선택자-->
    <style>
        *{color: blue;} 
    </style>
</head>
<body>
    <h1>제목 입니다.</h1>
    <p>안녕하세요 예문 111 입니다.</p>
    <p>안녕하세요 예문 222 입니다.</p>
    <p>안녕하세요 예문 333 입니다.</p>	
</body>
</html>

⇒ 문서 내 모든 요소의 글자 색을 파란 색으로 지정한다.

*{color: blue;} 코드 사용 전

 

*{color: blue;} 코드 사용 후

 

2. 태그 선택자

 

주어진 이름을 가진 요소를 선택한다. ‘유형 선택자’ 라고도 한다.

주어진 이름을 가진 요소가 다수일 경우, 해당 요소들을 모두 선택한다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TEST</title>
    <!--태그 선택자-->
    <style>
        p {color : red;}
    </style>
</head>
<body>
    <h1>제목 입니다.</h1>
    <p>안녕하세요 예문 111 입니다.</p>
    <p>안녕하세요 예문 222 입니다.</p>
    <p>안녕하세요 예문 333 입니다.</p>	
</body>
</html>

⇒ 문서 내 모든 p 태그 요소의 글자 색을 빨간 색으로 지정한다.

p {color : red;} 코드 사용 전

 

p {color : red;} 코드 사용 후

 

3. 클래스 선택자

 

주어진 class 속성 값을 가진 요소를 선택한다.

주어진 class 속성 값을 가진 요소가 다수일 경우, 해당 요소를 모두 선택한다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TEST</title>
    <!--클래스 선택자-->
    <style>
        .text {color: blue;}
    </style>
</head>
<body>
    <h1 class="text">제목 입니다.</h1>
    <p>안녕하세요 예문 111 입니다.</p>
    <p class="text">안녕하세요 예문 222 입니다.</p>
    <p>안녕하세요 예문 333 입니다.</p>	
</body>
</html>

⇒ 문서 내 class가 “text” 인 모든 요소의 글자 색을 파란 색으로 지정한다.

.text {color: blue;} 코드 사용 전

 

.text {color: blue;} 코드 사용 후

 

4. 아이디 선택자

 

주어진 id 속성 값을 가진 요소를 선택한다.

id는 고유한 식별자 역할을 하는 전역 속성이다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TEST</title>
		<!--클래스 선택자-->    
		<!--아이디 선택자-->
    <style>
        .text {color: blue;}
        #topic{color: red;}
    </style>
</head>
<body>
    <h1 class="text">제목 입니다.</h1>
    <p id="topic">안녕하세요 예문 111 입니다.</p>
    <p class="text">안녕하세요 예문 222 입니다.</p>
    <p>안녕하세요 예문 333 입니다.</p>	
</body>
</html>

⇒ 문서 내 id 가 ”topic” 인 요소의 글자 색을 파란 색으로 지정한다.

#topic{color: red;} 코드 적용 전

 

#topic{color: red;} 코드 적용 후

 

그룹 선택자

 

다양한 유형의 요소를 한꺼번에 선택하고자 할 때 사용한다.

쉼표(,)를 이용해 선택자를 그룹화 한다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TEST</title>
    <!--그룹 선택자-->
    <style>
        h1, p{color: blue;}
    </style>
</head>
<body>
    <h1 class="text">제목 입니다.</h1>
    <p id="topic">안녕하세요 예문 111 입니다.</p>
    <p class="text">안녕하세요 예문 222 입니다.</p>
    <p>안녕하세요 예문 333 입니다.</p>	
</body>
</html>

⇒ 문서 내 모든 h1, p 태그 요소의 글자 색을 파란 색으로 지정한다.

h1, p{color: blue;} 코드 사용 전

 

h1, p{color: blue;} 코드 사용 후

선택자가 겹치는 경우

 

선택자가 겹치는 경우, 기본적으로 나중에 작성된 스타일이 적용된다.

선택자가 다르지만 요소가 겹치는 경우, 선택자 우선순위에 의해 적용될 스타일이 결정된다.

 

선택자 우선순위

 

아이디 선택자 > 클래스 선택자 > 태그 선택자

 

 

 

위 글은 유튜브 유노코딩 영상을 정리하여 쓴 글 입니다.

728x90
반응형

'CSS' 카테고리의 다른 글

박스모델 2편, margin padding 다루기  (0) 2023.09.24
박스모델 1편, 박스모델 소개  (0) 2023.09.22
블록 레벨 요소 vs 인라인 요소  (0) 2023.09.22
CSS 텍스트 꾸미기 속성  (0) 2023.07.28
CSS 기초  (0) 2023.07.21
'CSS' Related Articles more