![[HTML & CSS] CSS 선택자(selecter)](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FcwEkkW%2FbtrMkM2yWVt%2FAAAAAAAAAAAAAAAAAAAAAN-RviXJ7qs4VsHwc8LqEGCyoQPtgRpvYePTFyXLXjN-%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1753973999%26allow_ip%3D%26allow_referer%3D%26signature%3DtALiPY12umU0Wnbl%252FryvdSuI3nA%253D)
728x90
- CSS문법은 선택자와 선언블록으로 구성됩니다.
- 선택자는 스타일을 입힐 특정 HTML Tag를 선택합니다.
- 선언은 CSS 속성명과 속성값으로 구성되며, 콜론으로 구분합니다.
- 선언은 세미콜론으로 마무리하여 중괄호로 감싸줍니다.
예시)
<!DOCTYPE HTML>
<html>
<head>
<title>css</title>
<meta charset="UTF-8">
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>1번째 문단입니다.</p>
<p>2번째 문단입니다.</p>
</body>
</html>css는 <head>~</head>태그의 <style>~</style>태그안에 적어줍니다.
위의 코드는 <p>태그를 사용하는 모든 <body>태그안의 속성의 색상을 빨강으로 하라는 뜻입니다.
결과)
2. 선택자의 종류
2-1. 단일 선택자
2-1-1. Tag 선택자
예시)
<!DOCTYPE HTML>
<html>
<head>
<title>css</title>
<meta charset="UTF-8">
<style>
h2 {
color: red;
}
p {
color: green;
}
</style>
</head>
<body>
<h2>h2 입니다</h2>
<p>문단 입니다</p>
</body>
</html><h2>태그의 전부를 빨강으로 <p>태그의 전부를 초록으로 색칠하는 태그 선택자입니다.
결과)
2-1-2. id 선택자
특정한 Tag를 지정하기 위해 HTML Tag의 id속성을 사용합니다.
id속성은 HTML문서에서 고유(unique)하기 때문에 하나만 선택할 수 있습니다.
#문자와 id이름으로 정의하고 지정합니다.
예시)
<!DOCTYPE HTML>
<html>
<head>
<title>css</title>
<meta charset="UTF-8">
<style>
p {
color: green;
}
#core {
color: red;
background-color: yellow;
}
</style>
</head>
<body>
<p>문단 1</p>
<p id="core">핵심 문단 입니다.</p>
<p>문단 3</p>
</body>
</html>
결과)
2-1-3. class 선택자
1. class선택자는 id선택자와 다르게 하나의 선택자만 변경하지 않고 class속성을 가진 모든 Tag를 변경해줍니다. 즉, id선택자는 단일 tag변경을, class선택자는 여러개의 tag변경을 도와줍니다.
2. .문자와 class이름으로 정의하고 저장합니다.
예시)
<!DOCTYPE HTML>
<html>
<head>
<title>css</title>
<meta charset="UTF-8">
<style>
p {
color: green;
}
.core {
color: red;
text-align:center;
}
</style>
</head>
<body>
<p class="core">핵심 class 사용 문단</p>
<p class="core">핵심 class 사용 문단</p>
<p>일반문단</p>
</body>
</html>
결과)
2-2. 그룹 선택자
그룹 선택자는 같은 스타일이 적용되는 여러 Tag들에 대해, 쉼표(,)를 이용하여 선택자들을 그룹핑하여 스타일 적용합니다.
예시)
<!DOCTYPE HTML>
<html>
<head>
<title>css</title>
<meta charset="UTF-8">
<style>
h1, h2, p {
text-align:center;
color:red;
}
</style>
</head>
<body>
<h1> h1 크기의 글자입니다.</h1>
<h2> h2 크기의 글자입니다.</h2>
<p>일반문단</p>
</body>
</html>h1, h2, p를 묶어서 각 태그를 가진 속성들을 모두 같은 CSS스타일에 적용해 주었습니다.
결과)
예시2)
쉼표를 사용하지 않고 선택자들을 그룹핑을 했을경우
h1 p {
text-align:center;
color:red;
}
<h1>태그안에 있는 <p>태그들에 대해 적용해 준다는 의미가 되어버립니다.
728x90
'[WEB]' 카테고리의 다른 글
| [HTML & CSS] CSS 색상(color) 다루기 (0) | 2022.09.18 |
|---|---|
| [HTML & CSS] CSS3를 HTML5에 적용하기 (0) | 2022.09.17 |
| [HTML & CSS] HTML video & audio (2) | 2022.09.17 |
| [HTML & CSS] HTML5에 새롭게 추가된 input 속성 (0) | 2022.09.17 |
| [HTML & CSS] input의 속성들 (0) | 2022.09.16 |