728x90
태그 선택자
저번 시간에 한 것이 태그 선택자이다. 예제를 다시보자.
<html>
<head>
<meta charset="utf-8">
</head>
<style>
h1{
color : red;
}
</style>
<body>
<h1 >
hello world!
</h1>
<h1>
hello world!
</h1>
</body>
</html>
h1태그를 선택자로 했다. 이러면 h1태그인것들이 전부 해당 색으로 바뀌게 된다.
아이디 선택자
<html>
<head>
<meta charset="utf-8">
</head>
<style>
#select{
color : red;
}
</style>
<body>
<h1 id = "select">
hello world!
</h1>
<h1>
hello world!
</h1>
</body>
</html>
아이디 선택자는 앞에 #을 붙여서 만들어 준다.
첫번째 h1태그를 select로 해주었다.
그러면 실행결과를 보자.
위와 같이 아이디를 설정해준 태그만 색이 바뀐 것을 볼 수 있다.
클래스 선택자
클래스 선택자는 앞에 .을 붙여서 만들어 준다.
<html>
<head>
<meta charset="utf-8">
</head>
<style>
.select{
color : red;
}
</style>
<body>
<h1 class = "select">
hello world!
</h1>
<h1>
hello world!
</h1>
</body>
</html>
id와 같은 결과가 나온다. 하지만 클래스를 쓰는 이유는 같이 것이 이 웹사이트에서 반복적으로 나온다면 아이디 선택자를 쓰면 안되고 클래스 선택자로 그룹핑을 해줘야 하므로 웹사이트에서 여러번 나온다면 클래스를 써야한다.
728x90
'css 기초' 카테고리의 다른 글
| [CSS 기초][CSS - 레이아웃] (0) | 2021.11.23 |
|---|---|
| [CSS 기초][CSS - 타이포그래피(font-size,color,text-align)] (2) | 2021.11.19 |
| [CSS 기초][CSS - 부모 자식 선택자] (2) | 2021.01.07 |
| [CSS 기초][CSS - HTML에 CSS 쓰기] (0) | 2021.01.06 |