CSS 선택자란?
CSS 선택자는 HTML 문서에서 스타일을 적용하고 싶은 특정 요소를 "선택"하는 도구입니다. 마치 가게
에서 물건을 고를 때 " 이거 주세요!" 라고 손으로 가리키는 것처럼, 선택자는 "이 요소에 스타일을 입히고 싶어요!" 라고
CSS에게 알려주는 역활을 합니다.
예를 들어,HTML에 <p> 태그가 여러 개 있을 때, "모든 문단을 파란색으로 만들자"거나 "특정 클래스가 붙은 문단만
굵게 하자" 같은 작업을 선택자가 가능하게 해줍니다.
<h1> 태그를 선택해서 제목을 크게 만들기.
warning 클래스를 가진 요소를 빨간색으로 강조하기
#header라는 ID를 가진 부분에 배경색 추가하기.
선택자의 중요성
-웹 페이지의 디자인과 레이아웃을 제어하는 첫 단계.
기본 문법
-선택자 {속성: 값} 형태
기본 선택자 정리
| 명칭 | 선택지 | 설명 |
| 전체 선택자 | {속성:속성 값;} | 페이지에 있는 모든 요소를 대상으로 스타일을 적용한다. |
| 태그 선택자 | 태그{속성:속성 값;} | 특정 태그에 스타일을 적용한다. |
| 클래스 선택자 | .클래스이름{속성: 속성 값;} | 특정 클래스에 스타일을 적용한다. |
| id선택자 | #id이름{속성: 속성 값;} | 특정 id에 스타일을 적용한다. |
===============================================================
2. 선택자의 종류
1.전체 선택자(*)
전체 선택자는 HTML 문서에 있는 모든 요소를 한꺼번에 선택합니다. 이름 그대로 "모두 다!" 라는 뜻이에요.
CSS에서* 기호를 사용하며, 특정 태그나 조건 없이 페이지의 모든 요소에 스타일을 적용할 때 유용합니다.
-주로 초기화 작업에 사용됩니다. 예를 들어, 브라우저마다 기본적으로 설정된 여백(margin)이나 패딩(padding)이 달라서
디자인에 혼란이 올수 있는데, 이걸 한 번에 없애줄 때 많이 써요.
{
margin: 0; // 예를 들어 글이 써진 페이지의 위치를 옮긴다.
padding: 0; // backgroud color를 찍어보면 알겠지만 범위가 있는데 그 사이의 공백을 의미한다.
}:위 코드는 페이지의 모든 요소에서 여백과 패딩을 제거합니다. <h1>,<p>,<div>등 뭐든 적용.
2.태그 선택자
태그 선택자는 HTML 태그 이름을 직접 써서 해당 태그를 가진 모든 요소를 선택합니다. 예를 들어, <p>
태그를 선택하면 페이지에 있는 모든 문단에 스타일을 줄 수 있어요.
- 특정"종류"의 요소를 한꺼번에 다루고 싶을 때 유용합니다.
P {
color: blue;
font-size: 16px;
}: 이 코드는 모든 <p> 태그의 글자를 파란색으로 만들고 ,크기를 16픽셀로 설정합니다.
3.클래스 선택자(.class)
클래스 선택자는 HTML 요소의 class 속성을 기준으로 선택합니다. .뒤에 클래스 이름을 붙여서 사용하며, 같은 클래스를
가진 여러 요소에 동시에 스타일을 적용할 수 있어요.
- 개발자가 직접 요소에 "이름표"를 붙이는 셈이라, 원하는 대상을 더 구체적으로 골라낼 수 있습니다.
<div id="header">헤더 영역</div>
#header {
background-color: gray;
padding: 20px;
}
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>기본 선택자 실습</title>
<!-- <link rel="stylesheet" href="styles.css"> -->
<style>
* {
margin: 0;
padding: 0;
} /* 전체 초기화 */
h1 {
font-size: 24px; (글 크기)
}
.content {
color: purple;
}
#special-box {
background-color: yellow;
border: 2px solid black; //(1.테두리의 굵기 , 테두리의 선 형태 , 색깔)
}
</style>
</head>
<body>
<h1 class="title">제목</h1>
<p class="content">내용 1</p>
<p class="content">내용 2</p>
<div id="special-box">특별한 박스</div>
</body>
</html><!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>기본 선택자 연습 2</title>
<link rel="stylesheet" href="styles1.css" />
<style>
/* 문제 1: 모든 요소 글자 색상 회색 */
/* 문제 2: 모든 <span> 태그 배경색 연한 파란색 */
/* 문제 3: note 클래스 스타일링 */
/* 문제 4: main-content ID 를 선택해서 원하는 대로 스타일링 */
/* 문제 5: 모든 <header> 태그를 선택해서 원하는 대로 스타일링 */
</style>
</head>
<body>
<header>헤더 영역입니다.</header>
<h2>제목입니다.</h2>
<span class="note">중요한 메모입니다.</span>
<p>일반 문단입니다.</p>
<span class="note">또 다른 메모입니다.</span>
<section id="main-content">메인 콘텐츠입니다.</section>
</body>
</html>'HTML CSS' 카테고리의 다른 글
| (HTML/CSS/JavaScript) CSS 선택자(가상 클래스 선택자) - 11 (1) | 2025.05.29 |
|---|---|
| (HTML/CSS/JavaScript)CSS 선택자(결합 선택자) - 10 (1) | 2025.05.29 |
| (HTML/CSS/JavaScript)CSS 크기와 단위, 색상 - 8 (0) | 2025.05.28 |
| (HTML/CSS/JavaScript) CSS(Cascading Style Sheets)란 뭘까? - 7 (0) | 2025.05.28 |
| (HTML/CSS/JavaScript)시멘틱 태그란 - 6 (0) | 2025.05.28 |