카테고리 없음
[CSS] 주석 및 선택자
김씨 학생
2024. 1. 20. 17:15
주석
CSS 주석
/* 주석 내용 */
CSS 선택자
| 전체 선택자 | 스타일을 모든 요소에 적용할 때 사용한다. 주로 모든 하위 요소에 한꺼번에 스타일을 적용할 때 사용하고 전체 선택자는 asterisk(*) 기호를 사용한다. |
| 태그 선택자 | 특정 태그가 쓰인 모든 요소에 스타일을 적용한다. 선택자 위치에 태그명을 작성하면 사용된 모든 해당 태그에 동일한 스타일이 적용된다. |
| 클래스 선택자 | 클래스 선택자는 특정 집단의 여러 요소를 한 번에 선택할 때 사용한다. 같은 클래스 이름(class="")을 가지는 요소들을 모두 선택해주고 스타일 적용 시 선택자에 ".클래스명"을 작성해준다. |
| 아이디 선택자 | 아이디 선택자는 특정 요소를 선택할 때 사용한다. 스타일을 지정할 때 사용되며, 선택자 부분에 "#아이디명"을 작성한다. |
| 그룹 선택자 | 여러 선택자에 같은 스타일을 적용할 경우 쉼표로 구분해서 여러 선택자를 나열한 후 스타일은 한 번만 정의한다. |
선택자 예시
1. 전체 선택자
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>전체 선택자</title>
<style>
/* CSS 문법 사용 가능 */
* {
color: red;
}
</style>
</head>
<body>
<h1>전체 선택자</h1>
<h2>전체 선택자의 기호</h2>
<p>전체 선택자는 asterisk(*) 기호를 사용한다.</p>
</body>
</html>
- 모든 요소에 대해 스타일을 적용합니다. 해당 코드에서는 h1, h2, p 태그의 글자가 빨간색으로 바뀝니다.
그러나 요즘은 최적화 문제로 '*' 대신 'body'를 사용합니다.
- 주로 페이지의 웹 사이트의 폰트를 설정할 때 많이 사용합니다.
2. 태그 선택자
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>태그 선택자</title>
<style>
/* h2 태그의 글자색을 파란색으로 설정 */
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>
</body>
</html>
- 해당 HTML 문서내에 모든 h2 및 p 태그에 각각 스타일이 적용됩니다.
3. 클래스 선택자
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>클래스 선택자</title>
<style>
.blue-text {
color: blue;
}
/* span태그를 빨간색 색상으로 설정 */
.red-text {
color: red;
letter-spacing: 2px; /* 글자 간격 조정 */
}
.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>
- 태그 속성의 'class' 값이 'blue-text' , 'red-text' , 'greem-text' 인 값을 각각의 스타일을 적용시킵니다.
id 선택자와 함께 가장 많이 사용됩니다.
".클래스명"으로 선택할 수 있습니다.
4. 아이디 선택자
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>아이디 선택자</title>
<style>
#container {
border: 2px solid black;
background-color: red;
width: 400px;
height: 200px;
}
</style>
</head>
<body>
<div id="container"></div>
</body>
</html>
HTML 문서 내에 태그 속성이 'id'값이 'container'인 것에 해당 스타일을 적용합니다.
그러나 ID는 클래스와 달리 하나만 선택이 됩니다.
"#아이디명"으로 선택할 수 있습니다.
5. 그룹 선택자
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>그룹 선택자</title>
<style>
h1, h2 {
/* 블록요소에 사용가능한 스타일, 내부에 있는 내용 또는 인라인 요소를 정렬한다.*/
text-align: center;
}
h1 {
color: brown;
}
h2 {
color: coral;
}
p.gray, p.red {
padding: 10px;
}
.gray {
color: gray;
}
.red {
color: red;
}
</style>
</head>
<body>
<h1>그룹(group) 선택자</h1>
<h2>
선택자를 이용해서 스타일을 정의하다 보면,
여러 선택자에 공통된 스타일이 사용되는 경우가 있다.
</h2>
<p class="gray">
이럴 때에는 쉼표로 구분해서 여러 선택자를 나열한 후
스타일을 한 번만 정의하면 소스코드 작성이 간편해진다.
</p>
<p class="red">
예를 들어 h1 태그와 h2 태그를 사용한 내용을 모두 화면 중앙에 정렬하고 싶다면,
그룹 선택자에 h1, h2 {<strong>text-align: center;</strong>}로
스타일을 정의할 수 있다.
</p>
</body>
</html>
- 그룹 선택자를 사용하면 같은 스타일이 필요한 요소를 하나의 클래스를 만들어 공통으로 사용하게 할 수 있습니다.
h1, h2 { /* 스타일 내용 */ } 으로 하면 h1, h2 태그가 모두 아래 정의된 스타일 내용이 적용됩니다.
ID 선택자와 Class 선택자의 차이
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>id 속성과 class 속성</title>
<style>
#a {
color: coral;
}
.x {
color: blueviolet;
}
.y {
color: magenta;
}
.z {
color: maroon;
}
</style>
</head>
<body>
<span>클래스와 아이디 속성</span>
<span id="a" class="x y z">
아이디는 단 한 개의 값만 작성할 수 있고, 클래스는 여러 개의 값을 작성할 수 있다.
</span>
</body>
</html>
- ID 선택자는 HTML 문서 내에서 같은 이름의 아이디명 하나만 만들고 사용할 수 있고, 한 태그 내에서 여러 개의 아이디를 사용할 수 없습니다.
- 반면 Class 선택자는 여러 개의 클래스명을 쓸 수 있으며 여러 개의 클래스를 적용할 수 있습니다.