CSS의 모든 것 2부 - Tag이름을 이용한 선택자 사용 방법과 Tag의 상속관계
CSS 1부에서 CSS가 무엇인지, 그리고, 간단한 사용법에 대해 알아보고, CSS선택자에 대해서도 알아봤습니다. 이번 포스트에서는 CSS 선택자 중에서 tag의 이름을 이용하여 스타일을 부여하는 방법에 대해 알아보겠습니다.
1. Tag이름을 이용한 선택자
먼저, 가장 기본적인 tag이름에 대해 스타일을 주는 방법을 알아보겠습니다. 형식은 tag name{ }의 형태 입니다. 아래는 간단히, <h1></h1>tag에 스타일을 주는 방법 입니다.
1
2
3
4
h1{
color: red;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<title>My CSS website</title>
<link rel="stylesheet" href="somewhere/style.css">
</head>
<body>
<h1>Welcome1</h1>
<h1>Title2</h1>
<h1>Title3</h1>
<h1>Title4</h1>
<h1>Title5</h1>
<div>
<p> line 1 </p>
<span><p> line 2 </p><span>
</div>
<p> line 3 </p>
<p> line 4 </p>
</body>
</html>
1.1 Tag의 ID 또는 class속성을 이용하는 방법
HTML에 작성된 모든 tag들 중 특정tag에만 스타일일 적용하고 싶을때는, 다양한 방법이 있지만, 먼저 id속성 또는 class``속성을 이용하는 방법에 대해 말씀드리겠습니다. 먼저, CSS에서 특정id를 지정하려면,#뒤에id name```을 붙여서 선언해 주면 됩니다. 아래는 특정 예시 입니다.
1
2
3
4
#hello {
color: red;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<title>My CSS website</title>
<link rel="stylesheet" href="somewhere/style.css">
</head>
<body>
<h1>Welcome1</h1>
<h1 id="hello">Title2</h1>
<h1>Title3</h1>
<h1>Title4</h1>
<h1>Title5</h1>
<div>
<p> line 1 </p>
<span><p> line 2 </p><span>
</div>
<p> line 3 </p>
<p> line 4 </p>
</body>
</html>
특정 class속성에 스타일을 부여해 주려면, .과 class name을 붙여서 선언해 주면 됩니다. 아래는 해당 예시 입니다.
1
2
3
4
.hello {
color: red;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<title>My CSS website</title>
<link rel="stylesheet" href="somewhere/style.css">
</head>
<body>
<h1 class="hello">Welcome1</h1>
<h1 class="hello">Title2</h1>
<h1>Title3</h1>
<h1>Title4</h1>
<h1>Title5</h1>
<div>
<p> line 1 </p>
<span><p> line 2 </p><span>
</div>
<p> line 3 </p>
<p> line 4 </p>
</body>
</html>
참고로 HTML에서 id는 각 tag를 구분해줄 수 있게 해주는 attribute라고 생각하면 되고, class는 여러 tag를 묶어서 group화 해줄 수 있는 attribute라고 생각하면 됩니다.
1.2 Tag간의 관계를 이용한 스타일 부여 방법
Tag의 상호관계를 비교해서 특정 tag를 선택하는 방법도 있습니다. Tag간의 관계는 부모자식, 부모자손, 형제관계 가 있습니다.
먼저, 부모 자손 관계는 부모의 tag와 자손의 tag 2개를 띄어쓰기로 구분하여 표시합니다. 아래는 부모 자손 관계의 예시이다.
1
2
3
4
div p {
color: red;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
<title>My CSS website</title>
<link rel="stylesheet" href="somewhere/style.css">
</head>
<body>
<h1 class="hello">Welcome1</h1>
<h1 class="hello">Title2</h1>
<h1>Title3</h1>
<h1>Title4</h1>
<h1>Title5</h1>
<div>
<p> line 1 </p>
<span><p> line 2 </p><span>
</div>
<p> line 3 </p>
<p> line 4 </p>
</body>
</html>
위에서 <div></div>tag안 쪽에서 <p> line 1 </p>은 자식관계 이지만, <p> line 2 </p>은 <span>tag에 감싸져 있기 때문에, 자손관계이 아니다.계 즉, CSS파일에서 div p라고 명시하면, <p> line 2 </p>부분이 스타일이 적용됩니다.
부모자식 간의 관계는 >기호를 이용하여 명시합니다. 구체적으로, 아래의 예시와 같습니다.
1
2
3
4
div > p {
color: red;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
<title>My CSS website</title>
<link rel="stylesheet" href="somewhere/style.css">
</head>
<body>
<h1 class="hello">Welcome1</h1>
<h1 class="hello">Title2</h1>
<h1>Title3</h1>
<h1>Title4</h1>
<h1>Title5</h1>
<div>
<p> line 1 </p>
<span><p> line 2 </p><span>
</div>
<p> line 3 </p>
<p> line 4 </p>
</body>
</html>
CSS파일에서 div > p라고 명시해 두면, HTML 코드내에서, <p> line 1 </p>에 해당하는 부분이 스타일이 적용됩니다.
형제관계는 동일한 부모tag를 가지는 tag들을 의미 합니다. 가령 위의 예시에서 <body></body>안쪽의 여러<h1></h1>tag들, <div></div>tag, <p> line 3 </p>tag, <p> line 4 </p>tag 는 모두 <body></body>tag의 자식tag들 입니다. 즉, 여러<h1></h1>tag들, <div></div>tag, <p> line 3 </p>tag, <p> line 4 </p>tag 모두 형제관계 입니다.
이런 형제관계에서, +를 이용하면 바로 인접한 tag를 지정할 수 있습니다. 가령 <div></div>tag 바로 다음에 나오는 <p> line 3 </p>는 인접한 tag로, 아래 예시와 같이 표현할 수 있습니다.
1
2
3
div + p {
color: red;
}
만약, <div></div>tag 다음에 나오는 모든 p tag에 대해 적용하고 싶다면 ~표시를 해주면 됩니다.
1
2
3
div ~ p {
color: red;
}
2. 여러 tag를 한번에 선택하기
번외로, 모든 tag에 적용하고 싶다면, 아래와 같이 *를 적용하면 된다.
1
2
3
* {
color: red;
}
여러 tag들을 적용하고 싶다면 아래와 같이 ,로 여러개를 선택해 주면 된다.
1
2
3
h1, div {
color: red;
}
한편 위와 같이 적용을 하면, <div></div>내부의 tag에도 style이 적용이 되는것을 알 수 있는데, 이는 내부 tag들 중에 style이 지정이 되지 않은 tag들은 부모의 style을 상속(inheritance) 받아서 적용이 되기 때문입니다.
이는 객체지향 프로그래밍 언어에서 사용하는 class에서 동작하는 것과 비슷하다고 생각하면 되겠습니다.
3. Tag 선택법 정리
최종적으로, 정리하면 다음과 같습니다.
- 특정태그
- id 속성값:
#hello - class 속성값:
.hello
- id 속성값:
- 태그관계
- 부모 자손:
div p - 부모 자식:
div > p - 인접 형제:
div + p - 모든 형제:
div ~ p
- 부모 자손:
- 여러태그
- 모든태그: *
- 여러태그:
h1, div