앞서 포스팅에서는 HTML의 tag이름과, tag들간의 관계를 이용하여 스타일을 부여할 대상을 선택하는 방법에 대해 알아봤습니다. 이번 글에서는 tag의 attribute이름, 내용 그리고 이벤트를 이용한 방법에 대해 알아보겠습니다.
1. Tag의 속성이름을 이용한 선택자
이미 앞서 소개하였듯이, HTML 코드를 작성할때, tag를 선언하고, 그 내부에 attribute를 할당해 줄 수 있습니다. 여기서 특정 attribute 이름을 가진 tag에 스타일을 적용하는 방법을 알아보겠습니다. 특정 attribute 이름에 스타일을 적용하는 방법은 []symbol을 두고, 그 안에 attribute 이름을 적으면 됩니다. 아래는 class attribute 이름을 가지는 tag에 스타일을 할당하는 예시 입니다.
1
2
3
| [class] {
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>
|
만약, 특정 tag와 특정 attribute 이름을 동시에 가지고 있는 부분에 style을 적용하고 싶다면, [] symbol앞에 특정 tag를 적어주면 됩니다. 아래는 ptag에 속하는 class attribute에 해당하는 부분에만 style을 적용시켜줄때의 예시이다.
1
2
3
| p[class] {
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 class="line_what"> line 3 </p>
<p> line 4 </p>
</body>
</html>
|
또한 특정한 attribute 값을 검색해서 그것에만 style을 적용할수도 있다. 그럴때는 []안에 attribute를 적어두고 =기호를 이용해서 attribute 값을 적으면, 조건을 만족하는 tag에만 스타일을 적용할 수 있습니다. 아래는 그것에 대한 예시 입니다.
1
2
3
| [class=hello] {
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 class="line_what"> line 3 </p>
<p> line 4 </p>
</body>
</html>
|
2. Tag내용의 일부를 선택하는 방법
Tag를 할당하고, 그에 해당하는 contents의 일부 내용에만 스타일을 할당하는 방법으로, pseudo-element를 이용하는 방법이 있습니다. pseudo-element는 :: symbol을 이용하여 할당합니다. 보다 구체적으로, tag name::pseudo-element의 형태로 할당합니다. 아래는 contents에서 첫번째 글자에만 스타일을 적용하는 방법의 예시 입니다.
1
2
3
| p::first-letter {
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 class="line_what"> line 3 </p>
<p> line 4 </p>
</body>
</html>
|
아래는 첫째줄만 선택하는 방법 입니다.
1
2
3
| p::first-line {
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 class="line_what"> line 3 </p>
<p> line 4 </p>
</body>
</html>
|
아래와 같이, p tag 내용 전후로도 지정이 가능합니다.
1
2
3
4
5
6
7
8
| p::before {
color: red;
content: "((("
}
p::after {
color: red;
content: ")))"
}
|
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 class="line_what"> line 3 </p>
<p> line 4 </p>
</body>
</html>
|
3. Event를 이용하는 방법
Tag에 이벤트가 발생하거나, 특정한 상태가 되었을때만 스타일을 적용하고 싶다면, pseudo-class를 이용합니다. pseudo-class 선택자에는 a tag와 input tag 와 관련된 것 2가지가 있습니다.
먼저 a tag와 관련된 pseudo-class들은 아래와 같습니다. 여기서 유의할 부분은 a tag와 관련된 pseudo-class들은 반드시 아래와 같은 순서로 작성해야 동작한다는 점 입니다.
1
2
3
4
5
6
7
8
9
10
11
12
| a:link {
color: pink;
}
a:visited {
color: green;
}
a:hover {
color: yellow;
}
a:active{
color: red;
}
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <!DOCTYPE html>
<html>
<head>
<title>My CSS website</title>
<link rel="stylesheet" href="somewhere/style.css">
</head>
<body>
<a href="http://www.zzzz.com">somewhere website</a>
<br>
<br>
<br>
<input type="text" name="name"><br>
<input type="time" name="time" disabled><br>
<input type="date" name="date" required><br>
숫자입력(1~10)<input type="number" name="qty" min="1" max="10">
</body>
</html>
|
위에서 작성한 pseudo-class들은 :link, :visited, :hover, :active으로, 각 요소들의 기능은 아래와 같습니다.
:link: 링크가 표시되는 부분에 적용될 스타일을 지정할 수 있습니다.:visited: 링크를 클릭하고 난 후에 적용될 스타일을 지정할 수 있습니다.:hover: 마우스 커서를 링크 위에 올리면 적용될 스타일을 정의합니다.:active: 링크를 누르고 있을때 적용될 스타일을 지정합니다.
아래는 input tag에서 사용할 수 있는 pseudo-class의 예시 입니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| input:enabled {
color: green;
}
input:disabled {
color: pink;
}
input:valid {
color: yellow;
}
input:invalid{
color: red;
}
input:empty{
color: blue;
}
input:focus{
color: red;
}
input:checked{
color: red;
}
|
위의 pseudo-class에 대한 정리는 아래와 같습니다.
:enabled: 활성화 된 상태에있는 사용자 인터페이스 요소를 나타냅니다.:disabled: 비활성화 된 상태에있는 사용자 인터페이스 요소를 나타냅니다.:valid: 유효한 내용을 가진 요소와 일치하면, 스타일을 적용합니다. 예를 들어, 유효한 이메일 주소가 적용되면 스타일을 적용합니다.:invalid: 입력된 내용이 형식과 맞지 않으면, 스타일을 적용합니다. 예를 들어 입력이 이메일 유형과 다르면 스타일이 적용됩니다.:empty: 입력할 내용이 비어있다면, 스타일을 적용합니다.:focus: 마우스 커서를 입력할 내용에 클릭을 하면, 스타일을 적용합니다.:checked: radio나 checkbox에서, 선택을 하면, 스타일을 적용합니다.
사실, pseudo-class의 종류는 위에서 소개해준 것들 보다 더 많지만, 해당 포스팅에서는 이정도만 소개하겠습니다.