우선 본 내용에 들어가기 앞서서, 용어 정리를 조금 하고 넘어가겠습니다. 우리가 흔히 '태그'라고 사용하는 것과 '요소(element)'라고 사용하는 경우가 있습니다. 예를 들어 어떠한 스타일을 '태그'에 적용했다고 표현하기도 하고, '요소'에 적용했다고 하는 경우가 있죠.
정확히는, "스타일을 요소에 적용했다."는 표현이 맞는 표현입니다. 엄격하게 이야기하면, 태그는 말 그대로 <p> </p>와 같은 태그 자체를 표현하는 것이고, 요소는 아래와 같이 태그 사이에 포함된 텍스트를 모두 포함하는 범위이기 때문이죠. 앞으로는 스타일을 요소에 적용한다는 표현이 많을 것이니, 미리 정리하고 가겠습니다.
<p>태그 사이의 텍스트 예시입니다.</p>
○ 전체 선택자(universal selector)
이름에서 알 수 있듯이, 전체 선택자는 해당 스타일이 적용되는 웹 문서 전체의 요소에 적용되는 선택자입니다. 일종의 문서 초기화에 사용하기도 하고, 강제로 모든 요소에 적용해야 하는 스타일이 있을 경우에 사용하죠. 선택자는 ' * ' 입니다. 간단하게 예시를 살펴볼까요? 아래와 같이 이미지를 삽입할 때, 브라우저 기본 스타일을 통해 margin 값이 적용되는 경우가 대부분인데 이 마진을 모두 없앤다고 가정하고 스타일을 내부에서 적용해 보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
}
</style>
</head>
<body>
<img src="https://blog.kakaocdn.net/dn/SbhEt/btrIvoMfh92/EvK1VVbLDqVEFbkYsDrIe1/img.png">
</body>
</html>
○ 타입 선택자(type selector)
타입 선택자는 특정 태그를 사용한 모든 요소에 일괄적으로 적용하는 스타일을 만들 때 사용하게 됩니다. 이 경우, 설정된 태그를 사용하는 모든 요소에 적용됩니다. 예를 들어, <p> 태그를 사용하는 모든 텍스트는 일괄적으로 이탤릭을 적용하고 싶을 때, 다음과 같이 작성할 수 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p {
font-style: italic;
}
</style>
</head>
<body>
<h1>h1 태그 영역입니다.</h1>
<p>p태그 영역입니다.</p>
<p>p태그 영역 2 입니다.</p>
<p>p태그 영역 3 입니다.</p>
그냥 텍스트입니다.
</body>
</html>
참고로 타입 선택자의 경우, 용어가 태그 선택자 또는 요소 선택자로 불리기도 하는데 W3C 공식 문서에서 사용 중인 용어인 '타입 선택자'로 통일하여 사용하도록 하겠습니다.
○ 클래스 선택자(class selector)
위와 같은 타입 선택자를 사용하게 되면 당연하겠지만, 모든 태그와 요소에 일괄적으로 스타일이 적용되므로 한계가 있습니다. 똑같은 태그라도 상황과 위치에 따라 다른 스타일을 적용해야 하겠죠? 이럴 경우를 위해 사용하는 것이 바로 '클래스 선택자'입니다.
우선, 클래스 선택자를 사용하기 위해서는 기본적으로 각각의 태그에 [class] 속성 값을 지정해 둬야 합니다. 예를 들어 <p class=“accent bg”>와 같이 속성을 부여한다면, 클래스 ‘accent’와’bg’가 부여된 것입니다.
이제 이렇게 부여해 둔 클래스명을 지정하여 스타일을 부여할 때는, 다음과 같은 형태로 스타일을 지정하면 됩니다.
.클래스명 { 스타일 적용 규칙 }
위에서 만든 예시와 같이, 클래스에는 복수의 클래스 명도 부여될 수 있으니 요소 하나에 두 개 이상의 스타일도 부여가 가능하다는 점도 알 수 있겠죠? 다음 예시를 살펴보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p {
font-style: italic;
}
.accent {
border: 2px solid #000; /* 테두리 */
padding: 6px;
}
.bg {
background-color: blueviolet;
}
</style>
</head>
<body>
<h1 class="accent bg">h1 태그 영역입니다.</h1>
<p>p태그 영역입니다.</p>
<p>p태그 영역 2 입니다.</p>
<p>p태그 영역 3 입니다.</p>
<p>이 부분에는 span을 사용합니다. <span class="accent">바로 여기</span></p>
</body>
</html>
○ id 선택자(id selector)
id 선택자는, 사실 위에서 설명한 클래스 선택자와 사용법이 거의 똑같습니다. 단지 스타일에서 선택자를 표시하는 방법이 다를 뿐입니다. 그럼 id 선택자와 클래스 선택자의 차이는 무엇일까요? id 선택자는 해당 웹 문서에서 단 한 번만 적용할 수 있다는 점이 가장 큰 차이점입니다. 특정 태그에 클래스처럼 id 속성값을 부여하고, 스타일 규칙 선언 시 다음과 같이 적용하게 됩니다.
#아이디명 { 스타일 적용 규칙 }
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#container {
width: 400px; /* 너비 */
margin: 10px auto; /* 중앙 배치 */
padding: 10px; /* 테두리와 내용 패딩 */
border: 1px solid #000 /* 테두리 굵기, 색깔 */
}
</style>
</head>
<body>
<div id="container">
<h1>예시 텍스트 container</h1>
<p>예제 샘플입니다.</p>
</div>
</body>
</html>
○ 그룹 선택자(group selector)
그룹 선택자의 경우 '동일한 스타일을 적용하는 다른 태그'가 존재할 때 사용할 수 있습니다.
선택자1, 선택자2, ... { 스타일 규칙 }
h1, p {
text-align: center;
}
'Programming > HTML+CSS' 카테고리의 다른 글
| [CSS] 2. 텍스트 스타일(1) - 폰트 스타일 속성 (0) | 2023.03.25 |
|---|---|
| [CSS] 1. CSS의 기본 개념(4) - Cascading (0) | 2023.03.23 |
| [CSS] 1. CSS의 기본 개념(2) - 스타일 시트란? (0) | 2023.03.20 |
| [CSS] 1. CSS의 기본 개념(1) - CSS란? (0) | 2023.03.19 |
| 3. 입력 양식 작성(3) - 다양한 데이터, 텍스트 입력 태그 2 (0) | 2023.03.16 |
