[CSS] CSS Selectors
2023. 6. 20. 01:00ㆍ기술 창고/CSS
728x90
SMALL
CSS 스타일을 지정해줄 때 어떤 CSS 를 어떤 태그에 적용시킬 것인지 지정을 해주어야 원하는 스타일을 입힐 수 있습니다.
바로 Selectors 가 그러한 지정해주는 역할을 합니다.
Selectors 에 대해 알아보겠습니다.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Selectors</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<h1>CSS Selectors</h1>
<h2>Applying CSS to Different Parts of HTML</h2>
<p class="note">1. The element selector targets elements based on their HTML tag name.</p>
<ol>
<li class="note" value="2">Class selectors target elements based on the value of the class attribute.</li>
<li class="note" id="id-selector-demo" value="3">ID selectors target elements based on the value of the id
attribute.</li>
<li class="note" value="4">Attribute selectors target elements based on their attributes and values.</li>
<li class="note" value="5">The universal selector targets all elements.</li>
</ol>
</body>
</html>
style.css
ol {
margin-left: -40px;
margin-top: -20px;
list-style-position: inside;
}
p{
color: red;
}
* {
text-align: center;
}
.note{
font-size: 20px;
}
#id-selector-demo{
color: green;
}
li[value="4"]{
color: blue;
}
index.html 에 style.css 를 적용시켜 스타일을 주었습니다.
Selector들과 적용 요소에 대해 설명하겠습니다.
- ol{
margin-left: -40px;
margin-top: -20px;
list-style-position: inside;
}
: ol 태그의 내용들을 margin-left (왼쪽 마진 여백) -40px, margin-top (상단 마진 여백) -20px, life-style-position: inside 마커 문단 안쪽(들여쓰기) 으로 스타일 적용합니다. - p{
color: red;
}
: p 태그의 내용 색상을 빨간색으로 스타일 적용합니다. - * {
text-align: center;
}
: 모든 태그 Selector들을 가운데로 스타일 적용합니다. - .note{
font-size: 20px;
}
: note class 속성을 가진 태그들의 폰트 크기를 20px 로 스타일 지정합니다. - #id-selector-demo{
color: green;
}
: id-selector-demo 라는 id 속성을 가진 태그의 색상을 초록색으로 지정합니다. - li[value="4"]{
color: blue;
}
: li 태그에서 value 속성이 "4" 인 내용의 색상을 파란색으로 스타일 지정합니다.
여기서 Selector들을 지정하는 키워드들을 확인하면,
1. 태그명{ ~ }
일반적인 아무런 기호없이 태그명만 기입된 Selector는 태그 자체를 지칭하여 CSS 스타일을 적용하는 것입니다.
예) p{ ~ }, ol{ ~ } 등등
2. .class 속성값{ ~ }
.(마침표) 키워드와 함께 태그에 존재하는 class 속성값을 기준으로 CSS 스타일을 적용하는 Selector입니다.
3. #id 속성값{ ~ }
# 키워드와 함께 태그에 존재하는 id 속성값을 기준으로 CSS 스타일을 적용하는 Selector입니다.
4. 태그명[{원하는 속성명}={속성값}]{ ~ }
적용하고자 하는 태그에 적용하고자하는 속성값을 가진 내용을 지정하는 Selector입니다.
+ 추가적으로 id 속성과 class 속성의 차이는 id는 각 태그마다 고유한 속성입니다.
class 는 여러 다중 태그들이 동일하게 가져도 되는 속성입니다.
728x90
반응형
LIST
'기술 창고 > CSS' 카테고리의 다른 글
| [CSS] CSS 적용 순서 (0) | 2023.06.22 |
|---|---|
| [CSS] 박스 영역을 생성하는 div 태그 / 테두리, 안쪽 여백, 바깥쪽 여백, 박스 크기 CSS (0) | 2023.06.22 |
| [CSS] 글자 크기, 두께, 글꼴, 정렬 (0) | 2023.06.21 |
| [CSS] Color 설정 (0) | 2023.06.20 |
| [CSS] CSS 추가하는 3가지 방법 (0) | 2023.06.20 |