반응형
CSS Selectors란?
CSS Selector은 HTML 요소중 스타일을 바꿀 부분을 선택한다.
CSS id Selector
- id Selector는 고유한 id 특성을 가진 HTML 요소를 선택한다.
- id 요소들은 페이지에서 고유하기 때문에 id Selector은 특정한 하나의 요소를 선택하게 된다.
- 특정한 id를 선택하기위해서는 '#'을 사용해야한다.
* 절대 id는 처음에 숫자가 올 수 없다.
예시코드
<!DOCTYPE html>
<html lang="ko">
<head>
<style>
#ex{
color: blue;
font-family: 'Courier';
font-size: 20px;
}
</style>
</head>
<body>
<p id="ex">이것만 바뀐다</p>
<p>이건 안바뀜</p1>
</body>
</html>결과
CSS Class Selector
Class Selector 특정 클래스 속성을 가진 HTML 요소를 선택한다.
- 특정 클래스가 있는 요소를 선택하기 위해서는 마침표(.) 문자를 쓰고 그 뒤에 클래스 이름을 입력한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<style>
.ex{
color: blue;
font-family: 'Courier';
font-size: 20px;
}
</style>
</head>
<body>
<h1 class="ex">이것은 제목입니다.</h1>
<p class="ex">이것은 단락임</p>
</body>
</html>위와 같이 코드를 작성하면 <h1>과 <p>모두 스타일이 변한다.
다음과 같이 코드를 작성하면 단락 부분만 바뀌게 된다.
<!DOCTYPE html>
<html lang="ko">
<head>
<style>
p.ex{
color: blue;
font-family: 'Courier';
font-size: 20px;
}
</style>
</head>
<body>
<h1 class="ex">이것은 제목입니다.</h1>
<p class="ex">이것은 단락임</p>
</body>
</html>
CSS Selector Universe
HTML 요소들을 (*) <- 이것을 사용하면 모두 바꿀 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<style>
*{
color: blue;
font-family: 'Courier';
font-size: 20px;
}
</style>
</head>
<body>
<h1 class="ex">이것은 제목입니다.</h1>
<p class="ex">이것은 단락임</p>
</body>
</html>
CSS Grouping Selector
또한 그룹을 지어서도 HTMl 요소들의 스타일을 변경할 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<style>
h1,p{
color: blue;
font-family: 'Courier';
font-size: 20px;
}
</style>
</head>
<body>
<h1 class="ex">이것은 제목입니다.</h1>
<p class="ex">이것은 단락임</p>
</body>
</html>반응형
'웹프로그래밍 > CSS' 카테고리의 다른 글
| [CSS] CSS Backgrounds 배경 꾸미는 법 (0) | 2023.09.10 |
|---|---|
| [CSS] CSS 주석달기 (0) | 2023.09.09 |
| [CSS] CSS 추가하는 3가지 방법(External CSS, Internal CSS, Inline CSS) (0) | 2023.09.09 |
| [CSS] CSS 문법 (0) | 2023.09.09 |
| [CSS] CSS란 무엇인가? (0) | 2023.09.09 |
댓글