[CSS] 6-3. CSS 기본 선택자
6-3. CSS 기본 선택자
스타일 규칙은 태그뿐만 아니라 웹 문서의 어떤 요소에도 적용할 수 있습니다.
전체 요소에 스타일을 적용하는 전체 선택자
전체 선택자는 말 그대로 스타일을 문서의 모든 요소에 적용할 때 사용합니다. 주로 모든 하위 요소에 스타일을 한꺼번에 적용할 때 사용하죠.
전체 선택자로는 다음과 같이 *(별표)를 사용합니다.
*{속성: 값; ...}
또한 전체 선택자는 웹 브라우저의 기본 스타일을 초기화할 대 자주 사용합니다.
예를 들어 웹 문서 내용을 브라우저 창에 바짝 붙지 않도록 문서 내용과 테두리 사이에 여백을 약간 두는데, 이것을 마진과 패딩이라 합니다. 전체 선택자를 이용하여 이 마진과 패딩을 지정할 수 있습니다.
👍 예시: 전체 선택자 사용하기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>상품 소개 페이지</title>
<style>
* {
margin:0;
padding:0;
}
</style>
</head>
<body>
<img src="images/cat.jpg">
</body>
</html>
특정 요소에 스타일을 적용하는 타입 선택자(태그 선택자, 요소 선택자)
타입 선택자는 특정 태그를 사용한 모든 요소에 스타일을 적용합니다.
태그명 {스타일 규칙}
👍 예시: 전체 선택자 사용하기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>상품 소개 페이지</title>
<style>
p {
font-style: italic;
}
</style>
</head>
<body>
<div>
<h1>레드향</h1>
<p>껍질에 붉은 빛이 돌아 레드향이라 불린다.</p>
<p>레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
<p>비타민 C와 비타민 P가 풍부해 혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.</p>
</div>
</body>
</html>
특정 부분에 스타일 적용하는 클래스 선택자
같은 태그라도 일부는 다른 스타일을 적용하고 싶을 수 있습니다. 이런 경우에 클래스 선택자를 사용합니다.
클래스 선택자는 클래스 이름을 사용해서 다른 선택자와 구별하는데, 이때 클래스 이름 앞에 마침표( . )를 반드시 붙여야 합니다. 클래스 이름은 작성자가 임의로 정하면 됩니다.
.클래스명 {스타일 규칙}
클래스 선택자를 사용해 만든 스타일을 클래스 스타일이라고 하는데, 이미 만들어 둔 클래스 스타일을 적용할 때는 태그 안에 class=”클래스명”처럼 class 속성을 이용하여 지정합니다.
👍 예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>상품 소개 페이지</title>
<style>
p {
font-style: italic; /* 이탤릭체 */
}
.accent {
border:1px solid #000; /* 테두리 */
padding:5px; /* 테두리와 내용 사이의 여백 */
}
.bg {
background-color:#ddd; /* 배경색 */
}
</style>
</head>
<body>
<div>
<h1 class="accent bg">레드향</h1>
<p>껍질에 붉은 빛이 돌아 <span class="accent">레드향</span>이라 불린다.</p>
<p>레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
<p>비타민 C와 비타민 P가 풍부해 혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.</p>
</div>
</body>
</html>
특정 부분에 스타일을 한 번만 적용할 수 있는 id 선택자
id 선택자는 마침표(.) 대신 샾 기호(#)를 사용한다는 점을 제외하면 스타일을 정의하는 방법은 클래스 선택자와 같습니다.
#아이디명 {스타일 규칙}
클래스 선택자와 id 선택자의 가장 큰 차이는 클래스 선택자가 문서에서 여러 번 적용할 수 있는 반면, id 선택자는 문서에서 한 번만 적용할 수 있다는 것입니다. 이처럼 id 선택자는 중복해서 적용할 수 없으므로 주로 문서의 레이아웃과 관련된 스타일을 지정하거나 웹 요소에 자바스크립트 프로그램을 사용하면서 요소를 구별할 때 사용합니다.
👍 예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>상품 소개 페이지</title>
<style>
#container {
width:500px; /* 너비 */
margin:10px auto; /* 바깥 여백 */
padding:10px; /* 테두리와 내용 사이 여백 */
border:1px solid #000; /* 테두리 */
}
</style>
</head>
<body>
<div id="container">
<h1>레드향</h1>
<p>껍질에 붉은 빛이 돌아 레드향이라 불린다.</p>
<p>레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
<p>비타민 C와 비타민 P가 풍부해 혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.</p>
</div>
</body>
</html>
위 처럼 문서를 중앙에 배치하고 테두리를 그릴 수 있습니다.
같은 스타일 규칙을 사용하는 요소들을 묶어주는 그룹 선택자
선택자를 이용해 스타일을 정의하다 보면 여러 선택자에서 같은 스타일 규칙을 사용하는 경우가 있습니다. 이럴 때는 쉼표( , )로 구분하여 여러 선택자를 나열한 후 스타일 규칙을 한 번만 정의하면 됩니다.
선택자1, 선택자2 {스타일 규칙}
👍 예시
h1{
text-align: center; /* 중앙 정렬 */
}
p{
text-align: center; /* 중앙 정렬 */
}
h1, p{
text-align: center; /* 중앙 정렬 */
}
위와 아래 코드는 같은 효과를 냅니다.
정리
- 전체 선택자는 ‘*(별표)’를 사용하고 문서 전체에 적용합니다.
- 타입 선택자는 ‘태그명’을 사용하고 해당 태그 전체에 적용합니다.
- 클래스 선택자는 ‘.클래스명’을 사용하고 class 속성을 해당 클래스명으로 지정한 태그에 적용합니다.
- id 선택자로 ‘#id명’을 사용하고 id 속상을 해당 id명으로 지정한 단 하나의 태그에만 적용합니다. 즉, id 선택자는 중복 사용될 수 없습니다.
- 그룹 선택자는 선택자들을 ‘, (쉼표)’로 묶어서 하나의 스타일로 묶을 수 있게 해줍니다.
Leave a comment