--> [HTML5/CSS3] 선택자(Selector)를 통해 CSS를 적용해보자 #1

[HTML5/CSS3] 선택자(Selector)를 통해 CSS를 적용해보자 #1

안녕하세요. 저번 포스팅에서는 CSS 스타일시트 작성법과 선택자의 개념에 대해 알아보았습니다. 이번 포스팅에서는 태그를 선택하는 여러 종류의 선택자들에 대해 알아보겠습니다. 


 [HTML5/CSS3] CSS 기초강좌 #1 - CSS 스타일시트 작성법과 선택자에 대해 알기



  1. 태그 선택자


태그 선택자는 태그명을 통해 태그를 선택하는 선택자입니다. 간단한 예로 아래의 스타일시트를 살펴 보겠습니다.



<style> 태그 내부에 정의 된 Rule-Set을 해석해보자면 다음과 같습니다.

  • h1 태그의 border 속성값을 1px solid red로 줘라

  • h2 태그의 border 속성값을 1px solid blue로 줘라

  • h3 태그의 border 속성값을 1px solid green으로 줘라

아래 전체적인 샘플예제와 웹페이지에 표현되는 것을 살펴보겠습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>img 태그</title>
    <style>
        h1 {border : 1px solid red}
        h2 {border : 1px solid blue}
        h3 {border : 1px solid green}
    </style>
</head>
<body>
   <h1>Hello!!</h1>
   <h2>Hello!!</h2>
   <h3>Hello!!</h3>
</body>
</html>
cs


body 영역에 h1, h2, h3 태그를 사용하여 Hello!! 라는 Text를 뿌려주는 간단한 HTML 입니다. 그리고 <style> 태그 내부에서 h1, h2, h3 태그를 선택 태그자로 선택을 하여 Border 속성의 속성값을 주고 Color를 다르게 지정합니다.


 

이렇게 웹 페이지에서 확인을 해보면 CSS가 정상적으로 적용 된 것을 확인 할 수 있습니다.



  2. 전체 선택자


전체 선택자는 말그대로 HTML 문서내의 모든 태그를 선택하는 태그입니다. 일반적으로 전체 태그들의 특정 속성값에 대한 초기값을 주기 위해 많이 사용이 됩니다. 사용방법은 선택자 기호 '*' 사용하여 전체선택자를 사용 할 수 있습니다.


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 lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>img 태그</title>
    <style>
        * {margin : 0px} 
        h1 {border : 1px solid red}
        h2 {border : 1px solid blue}
        h3 {border : 1px solid green}
    </style>
</head>
<body>
   <h1>Hello!!</h1>
   <h2>Hello!!</h2>
   <h3>Hello!!</h3>
</body>
</html>
cs


위 소스에서 추가 된 라인은 10번 라인입니다. 전체선택자 기호인 '*'을 사용하여 margin 값을 0px로 지정하는 코드입니다. 웹 페이지에서 실행 된 화면을 살펴 보겠습니다.


캡쳐화면이 조금 이상하지만 어찌 되었든 h1, h2, h3 태그들의 Margin 값이 0px로 들어간 것을 확인 할 수 있습니다.


  3. ID선택자


ID선택자는 특정 태그의 ID 속성값을 사용하여 태그를 선택하는 선택자입니다.



사용방법은 #기호를 사용하여 뒤에 CSS를 적용하고자 하는 특정 태그의 ID속성값을 지정하시면 됩니다. 아래 샘플 예제를 확인 해보겠습니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>선택자</title>
    <style>
        #div1{
            background-color : red
        }
    </style>
</head>
<body>
    <div id = "div1">Hello</div>
    <div id = "div2">Hello</div>
    <div id = "div3">Hello</div>
</body>
</html>
cs


<body> 태그 내부에 3개의 div 태그를 작성하였고 각각 다른 ID속성값으로 지정을 하였습니다. CSS가 적용되는 9~11 Line을 해석하자면 'ID 속성값이 "div1"인 태그를 선택하여 background-color를 red로 설정하라' 라고 해석 할 수 있습니다. 


그렇다면 <body> 태그 내부의 첫 번째 <div>태그가 선택되어 배경이 빨강색으로 나올것입니다. 아래는 웹페이지에서 표현된 형태입니다.



첫 번째 Hello 영역만 배경색이 빨강색으로 나오는 것을 확인 할 수 있습니다.



  4. Class선택자


Class 선택자는 태그의 class 속성값을 사용하여 태그를 선택하는 선택자입니다. 사용방식은 ID선택자와 거의 비슷한데 기호를 #대신 .을 사용하여 나타냅니다. 아래 샘플 예제를 살펴 보겠습니다. 


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 lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>img 태그</title>
    <style>
        .div1{ background-color : red; }
        .div2{ background-color : blue; }
    </style>
</head>
<body>
    <div class = "div1">Hello</div>
    <div class = "div2">Hello</div>
    <div class = "div2">Hello</div>
</body>
</html>
cs


첫 번째 <div>태그의 class 값을 div1으로 지정하고 나머지 2개의 <div>태그의 class 값을 div2로 지정을 하였습니다. 스타일시트의 각각의 Rule-Set을 해석하자면 다음과 같습니다.

  • 11Line : class 속성값이 'div1'인 태그를 선택하여 배경색을 red로 지정
  • 12Line : class 속성값이 'div2'인 태그를 선택하여 배경색을 blue로 지정
11Line에 의해서 <body>태그내의 첫 번째 <div>태그가 선택 될 것이고 12Line에 의해서 나머지 두 개의 <div>태그가 선택 될 것입니다. 아래는 웹페이지에서 표현된 형태입니다.


위와같이 CSS가 정상적으로 적용 된 것을 확인 할 수 있습니다. 다음 포스팅에서 다른 선택자들에 대해 계속 알아보도록 하겠습니다. 

댓글(0)

Designed by JB FACTORY