WEB/CSS_ concepts
[CSS] CSS 기본 선택자 _ Class 선택자 쩜(.) / 권장되는 스타일 구조 (color 설정)
bay07
2024. 3. 10. 09:52
CSS Selectors
선택자. 누굴 선택할 것인가?
HTML 요소를 선택하여 스타일을 적용할 수 있도록 한다
- 전체 (" * ") 선택자
- 요소( tag ) 선택자
- 클래스 (class) 선택자
클래스 선택자는 여러개가 있어도 됨
- 아이디 (id) 선택자
- 속성(attr) 선택자
내가 분홍색으로 만드는 파일 자체를 만들고
그것을 곳곳에 뿌리는 형태로 디자인하기
<style>
/* .pink의 역할은 텍스트를 pink로 바꿔주는 것 */
.pink {
color: pink;
}
</style>
이걸 내가 핑크색으로 바꾸고 싶은 부분에 적용하기
점( .) 을 적용할 때는 class 속성을 사용하면 된다.
왜냐하면 CSS에서 점( .) 은 HTML의 class 속성을 선택하는 걸 의미하기 때문
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* .pink의 역할은 텍스트를 pink로 바꿔주는 것 */
.pink {
color: pink;
}
</style>
</head>
<body>
<h1 class="pink"> h1은 여기예요 </h1>
<h2> h2은 여기예요</h2>
<h3> h3은 여기예요 </h3>
<h4> h4은 여기예요 </h4>
<p>목록</p>
<ul class="pink">
<li>하늘</li>
<li>바다</li>
<li>산
<ol>
<li>나무</li>
<li>꽃</li>
<li>풀</li>
</ol>
</li>
</ul>
<p class="pink">Lorem, <span>ipsum</span> dolor.</p>
</body>
</html>