CSS는 스타일과 레이아웃을 결정하는 데에 사용되며, 선택자는 CSS에서 가장 중요한 개념 중 하나입니다. 선택자는 원하는 HTML 요소를 선택하는 데에 사용됩니다. 이번 글에서는 CSS 선택자의 종류와 사용 방법에 대해 다뤄보도록 하겠습니다.
기본 선택자
가장 기본적인 선택자는 태그 선택자입니다. 태그 선택자는 HTML 요소의 태그 이름을 사용하여 스타일을 지정합니다. 다음은 h1 태그를 선택하는 태그 선택자의 예시입니다.
h1 {
color: red;
}또 다른 기본 선택자는 클래스 선택자입니다. 클래스 선택자는 클래스 이름을 사용하여 HTML 요소를 선택합니다. 클래스 이름은 .으로 시작합니다. 다음은 클래스 이름이 "example"인 HTML 요소를 선택하는 클래스 선택자의 예시입니다.
.example {
font-size: 16px;
}아이디 선택자는 HTML 요소의 아이디를 사용하여 스타일을 지정합니다. 아이디 선택자는 #으로 시작합니다. 다음은 아이디가 "myDiv"인 HTML 요소를 선택하는 아이디 선택자의 예시입니다.
#myDiv {
background-color: yellow;
}조합 선택자
선택자를 조합하여 더 구체적인 선택을 할 수 있습니다. 예를 들어, 클래스 선택자와 태그 선택자를 함께 사용하여 클래스 이름이 "example"인 div 요소를 선택할 수 있습니다.
div.example {
color: blue;
}또 다른 조합 선택자는 자식 선택자입니다. 자식 선택자는 부모 요소와 직접적으로 관련된 하위 요소를 선택합니다. 다음은 div 요소의 자식 요소인 p 요소를 선택하는 자식 선택자의 예시입니다.
div > p {
font-weight: bold;
}속성 선택자
속성 선택자는 HTML 요소의 속성을 기반으로 선택합니다. 속성 선택자는 다음과 같이 작성됩니다.
[attribute=value] {
/* CSS styles */
}다음은 class 속성의 값이 "example"인 HTML 요소를 선택하는 속성 선택자의 예시입니다.
[class="example"] {
font-size: 18px;
}가상 클래스 선택자
가상 클래스 선택자는 콜론(:)으로 시작합니다. 다음은 링크를 방문한 경우 스타일을 지정하는 가상 클래스 선택자의 예시입니다.
a:visited {
color: purple;
}또 다른 가상 클래스 선택자는 마우스 커서가 요소 위에 있는 경우를 나타내는 :hover입니다. 다음은 요소 위에 마우스 커서가 있는 경우 스타일을 지정하는 가상 클래스 선택자의 예시입니다.
button:hover {
background-color: gray;
}가상 요소 선택자
가상 요소 선택자는 HTML 요소의 특정 부분에 스타일을 적용합니다. 가상 요소 선택자는 콜론 두개(::)로 시작하며, ::before와 ::after와 같은 가상 요소를 선택하는 데 사용됩니다. 다음은 가상 요소 선택자를 사용하여 요소의 내용 앞에 콘텐츠를 추가하는 예시입니다.
h1::before {
content: "Chapter ";
}예제
위에서 말한 CSS를 사용한 예제입니다.
<!DOCTYPE html>
<html>
<head>
<title>CSS 선택자 예제</title>
<style>
/* 태그 선택자 */
h1 {
color: red;
}
/* 클래스 선택자 */
.my-class {
background-color: yellow;
}
/* ID 선택자 */
#my-id {
font-size: 20px;
}
/* 자식 선택자 */
.container span {
font-weight: bold;
}
/* 인접 형제 선택자 */
h2 + p {
color: blue;
}
/* 가상 클래스 선택자 */
a:visited {
color: purple;
}
button:hover {
background-color: gray;
}
/* 가상 요소 선택자 */
h1::before {
content: "Chapter ";
}
</style>
</head>
<body>
<h1>제목</h1>
<p class="my-class">클래스 선택자</p>
<p id="my-id">ID 선택자</p>
<div class="container">
<span>자식 선택자</span>
</div>
<h2>제목 2</h2>
<p>내용</p>
<h2>제목 3</h2>
<p>내용</p>
<a href="#">링크</a>
<button>버튼</button>
</body>
</html>'[R&D] 프로그래밍 > Web (HTML, CSS)' 카테고리의 다른 글
| [HTML/CSS] table 태그를 활용한 표 만들기 방법 (0) | 2023.03.01 |
|---|---|
| [HTML/CSS] Form 요소들과 디자인 방법 (0) | 2023.02.28 |
| [HTML/CSS] CSS Grid를 사용한 웹페이지 레이아웃 설계 (0) | 2023.02.27 |
| [HTML/CSS] CSS Flexbox를 활용한 웹페이지 레이아웃 설계 (0) | 2023.02.26 |
| [HTML/CSS] 자주 쓰이는 HTML 태그 (0) | 2023.02.25 |
| [HTML/CSS] 웹 페이지에서 이미지와 비디오 사용하기 (0) | 2023.02.24 |
| [HTML/CSS] HTML과 CSS로 반응형 웹 페이지 만들기 (2) | 2023.02.23 |
| [HTML/CSS] HTML5와 CSS3에서 추가된 기능 (0) | 2023.02.22 |
댓글