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

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

이번 포스팅부터는 CSS를 통해 앞서 배운 태그들에 스타일을 적용하여 웹 페이지를 이쁘게 표현하는 방법들에 대해 포스팅 하고자 합니다. CSS를 공부하기 전 기초 태그들에 대한 지식이 있으면 좋으므로 아래 포스팅을 참고해주세요.




  1. 선택자를 통해 태그 선택하기


선택자란 선택을 해주는 요소를 의미하는데, 앞서 배운 HTML 태그들을 선택하여 선택자에 의해 선택된 태그요소들의 속성값을 변경하는데 사용이 됩니다. CSS에 대한 정의는 head 태그 내부에 style 태그내부에 Rule-Set으로 정의가 됩니다. 그렇다면 이 Rule-Set을 정의하는 방식에 대해 살펴 보겠습니다.


  • 선택자 : 선택자는 특정 태그를 선택을 해주는 요소를 의미합니다. 

  • 속성명 : 선택자에 의해서 선택 된 태그의 특정 속성명을 의미합니다.
  • 속성값 : 선택자에 의해서 선택 된 태그의 특정 속성에 대한 속성값을 지정합니다.
한 개의 Rule-Set에 여러개의 속성에 대한 정의를 넣을 경우 각 속성사이에 세미콜론(;)으로 반드시 구분을 해줍니다. 실제 샘플 예제를 한번 살펴 보겠습니다.

1
2
3
4
5
6
7
8
9
10
11
<!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>CSS 기초 </title>
    <style>
        div { background-color : red; margin : 0px; }    
    </style>
</head>
cs

<head> 태그 내부에 <style> 태그를 통해 Rule-Set을 정의하고 있습니다. 주목해야 할 부분은 9 Line 입니다. 앞서 선택자란 용어를 사용하였는데 위의 div가 바로 선택자에 해당합니다. div는 태그 선택자로 <html> 태그 내부에 사용 된 태그들중에서 div 태그를 선택한다는 의미입니다. 태그를 선택하는 요소 즉 선택자에는 여러 선택자가 있는데 이를 잘 활용한다면 효율적으로 CSS 스타일시트를 작성 할 수 있습니다.


정리하자면 9번 라인에 해당하는 Rule-Set의 경우는 div 태그를 선택하여 background-color 속성의 속성값을 red로 margin 속성값을 0px로 준다는 의미로 해석이 가능합니다. 


다음 포스팅부터는 여러 선택자들을 활용하여 html 내부 태그 요소를 선택하는 다양한 방식에 대해서 알아보도록 하겠습니다.

댓글(0)

Designed by JB FACTORY