● CSS 선택자
1. 전체 선택자
- 스타일을 모든 요소에 적용할 때 사용한다.
- 주로 모든 하위 요소에 한꺼번에 스타일을 적용할 때 사용하고, 전체 선택자는 asterisk(*)기호를 사용한다.
2. HTML 요소 선택자(태그 선택자)
- 특정 태그가 쓰인 모든 요소에 스타일을 적용한다.
- 선택자 위치에 태그명을 작성하면 사용된 모든 해당 태그에 동일한 스타일이 적용된다.
3. 클래스 선택자(class 속성에 부여된 값)
- 클래스 선택자는 특정 집단의 여러 요소를 한 번에 선택할 때 사용한다.
- 같은 클래스 이름을 가지는 요소들을 모두 선택해주고 스타일 적용 시 선택자에 ".클래스명"을 작성해준다.
4. 아이디 선택자(id 속성에 부여된 값)
- 아이디 선택자는 특정 요소를 선택할 때 사용한다.
- 스타일을 지정할 때 사용하며, 중복이 없어야 한다.
- 선택자 부분에 "#아이디명"을 작성한다.
5. 그룹 선택자
- 여러 선택자에 같은 스타일을 적용할 경우 쉼표로 구분해서 여러 선택자를 나열한 후 스타일은 한 번만 정의한다.
※ 아이디와 클래스 선택자의 차이점
- class 속성은 값에 여러 개를 작성할 수 있으며, 각 이름은 공백으로 구분한다.
- id 속성은 값에 단 한개의 이름만 작성할 수 있다.
- 또한 class 속성은 여러 태그에 동일한 값을 줄 수 있으나, id 속성은 다른 태그의 id값과
중복된 값을 사용해서는 안된다. CSS에서는 같은 id에 동일한 스타일이 적용되긴 하지만,
JS 및 다른 연산에서는 id를 중복해서 사용할 시 많은 문제가 발생하게 된다.
- class는 중복 및 여러 이름 설정이 가능하고, id는 중복해서 사용하지 않기로 하며 여러 이름 설정이 불가능하다.
- 만약 스타일을 id와 class속성을 동시에 사용한다면 id의 속성값이 적용된다.
실습(전체 선택자)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>전체 선택자</title>
<style>
* {
color: red;
}
</style>
</head>
<body>
<h1>전체 선택자</h1>
<h2>전체 선택자의 기호</h2>
<p>전체 선택자는 asterisk(*)기호를 사용한다.</p>
</body>
</html>
실습(태그 선택자)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>태그 선택자</title>
<style>
/* h2 태그에는 색상을 파란색으로(color, blue) */
h2 {color: blue;}
/* p 태그에는 font-size를 12px로(기본 글자 크기 : 16px) */
p {font-size: 12px;}
</style>
</head>
<body>
<h1>HTML 요소 선택자</h1>
<h2>특정 태그를 사용한 요소에 스타일 적용하기</h2>
<p>
전체 선택자 다음으로 많은 요소들에 스타일을 적용하는 태그 선택자(tag selector)는<br>
특정 태그가 쓰인 모든 요소에 스타일을 적용한다.
</p>
<p>
예를 들어 p선택자를 정의하면 웹 문서의 모든 p요소들 즉, 모든 단락에 스타일이 적용된다.
</p>
</body>
</html>
실습(클래스 선택자)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>클래스 선택자</title>
<style>
* {
color:lightblue;
}
.blue-text {
color: blue;
}
p {
font-size: 12px;
color: gray;
}
.red-text {
color: red;
}
.green-text {
color: green;
}
</style>
</head>
<body>
<h1>클래스 선택자</h1>
<h2 class="blue-text">특정 부분에 스타일 적용하기</h2>
<p class="blue-text">
태그 선택자를 지정하면 그 태그가 사용된 모든 요소에 적용된다.
</p>
<p>
그런데 같은 태그라도 서로 다른 스타일을 사용하고 싶다면 어떻게 해야할까?
<span class="red-text">특정 그룹에만 스타일을 적용할 때 사용하는 것이 클래스 선택자이다.</span>
클래스 이름은 나중에 기억하기 쉬운 이름으로 지정하고, 여러 번 중복하여 이름을 설정할 수 있다.
</p>
<h2>클래스 선택자</h2>
<p>
<span class="red-text">클래스 선택자는 </span>
<strong class="green-text">class="greentext"</strong>
처럼 적용하여 어느 태그에서나 사용할 수 있다.
</p>
</body>
</html>
실습(아이디 선택자)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>아이디 선택자</title>
<style>
div.container {
border: 3px dotted black;
}
div.container {
border: 2px solid black;
background: red;
width: 400px;
height: 200px;
}
#container1 {
background: yellow;
}
#container2 {
background: green;
}
</style>
</head>
<body>
<div id="container1" class="container"></div>
<div id="container2" class="container"></div>
<div id="container3" class="container"></div>
</body>
</html>
실습(그룹 선택자)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>그룹 선택자</title>
<style>
h1, h2 {
text-align: center;
}
h1 {
color: brown;
}
h2 {
color: coral;
}
/* p 태그는 폰트 크기를 13px로 설정하고, 왼쪽 바깥 여백을 20px로 설정한다. */
/* 단, gray클래스와 red클래스의 p태그만 스타일을 적용한다. */
p.gray, p.red {
font-size: 13px;
margin-left: 20px;
}
/* p태그의 gray클래스는 gray칼라로, p태그의 red클래스는 red칼라로 설정한다. */
p.gray {
color: gray;
}
p.red {
color: red;
}
/* red 클래스와 blue 클래스에 color를 blue로 설정한다. */
/* 단, strong 태그 이외의 blue 클래스는 색상을 변경하지 않는다. */
.red, strong.blue {
color: blue;
}
/* p태그 안에 class가 blue인 strong 태그는 초록색으로 글자색을 변경한다. */
p strong.blue {
color: green;
}
</style>
</head>
<body>
<h1 class="gray">그룹(group) 선택자</h1>
<h2 class="blue">선택자를 이용해 스타일을 정의하다 보면 여러 선택자에 공통된 스타일이 사용되는 경우가 있다.</h2>
<p class="gray">
이럴 때에는 쉼표로 구분해서 여러 선택자를 나열한 후 스타일을 한 번만 정의하면 소스코드 작성이 간편해진다.
</p>
<p class="red">
예를 들어 h1태그와 h2태그를 사용한 내용을 모두 화면 중앙에 정렬하고 싶다면
그룹 선택자에 h1, h2 {<strong class="blue">text-align: center;</strong>}로 스타일을 정의할 수 있다.
</p>
<p>
<strong>끝</strong>
</p>
<strong class="blue">.</strong>
</body>
</html>
'웹 개발 > CSS' 카테고리의 다른 글
| [Web_CSS] 06 (0) | 2022.04.24 |
|---|---|
| [Web_CSS] 05 (0) | 2022.04.23 |
| [Web_CSS] 04 (0) | 2022.04.22 |
| [Web_CSS] 03 (0) | 2022.04.21 |
| [Web_CSS] 01 (0) | 2022.04.19 |
