03장-1 선택자(Selector)

CSS3 문법과 선택자

CSS3 규칙은 선택자와 선언 블록으로 구성된다.
선택자는 스타일을 입힐 특정 HTML Tag를 지정한다.
선언은 CSS 속성명과 속성값으로 구성됩니다, 이들은 콜론으로 구분한다.
선언은 세미콜론으로 마무리하며 중괄호로 감싸준다.

예시

 <!DOCTYPE HTML>
 <html>
 <head>
 <meta charset="UTF-8">
 <title>title</title>
 <style>
 p
{
    color:red;
}
 </style>
 </head>
 <body>
 <p>1 문단입니다</p>
 <p>2 문단입니다</p>
 </body>
 </html>

결과

선택자(Selector)의 종류

단일 선택자
그룹 선택자

Tag 선택자

스타일을 적용할 Tag의 이름을 하며, 다수의 같은 Tag에 적용된다.

예시

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
h2
 {
   color:red;
 }
p
 {
    color:green;
 }
</style>
</head>
<body>
<h2>h2 입니다</h2>
<p> 문단 입니다</p>
</body>
</html>

결과

id 선택자

특정한 Tag를 지정하기 위하여 HTML Tag의 id 속성을 사용한다.
id 속성은 하나의 HTML문서에서 고유(Unique)해야 한다. 즉, 하나의 Tag만 선택된다.
#문자와 id 이름으로 정의하고 지정한다.

예시

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
p
   {
     color:green;
   }
#core
   {
       background-color:gray;
    }
</style>
</head>
<body>
<p> 문단 1 </p>
<p id="core"> 핵심 문단 입니다</p>
<p> 문단 3 </p>
</body>
</html>

결과

class 선택자

class 속성을 갖는 모든 Tag에 스타일 적용한다.
.문자와 class 이름으로 정의하고 지정한다.

예시

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
 p
 {
   color:green;
 }

.core
{
   color:red;
   text-align:center;          
}
</style>
</head>
<body>
<p class="core"> 핵심클래스 사용 문단 </p>
<p class="core"> 핵심클래스 사용 문단 </p>
<p>일반  문단 </p>
</body>
</html>

결과

그룹 선택자

그룹선택자는 같은 스타일이 적용되는 여러 Tag들에 대해, 쉼표를 이용하여 선택자를 그룹핑하여 스타일 적용.

예시

h1
{
    text-align:center;
    color:red;
}
h2
{
    text-align:center;
    color:red;
}
p
{
    text-align:center;
    color:red;
}

위의 예시를 토대로 그룹 선택자를 이용한다.

h1, h2, p 
{
    text-align:center;
    color:red;
}

쉼표를 사용하지 않고 공백을 사용한다면?

그룹 선택자와는 완전히 다른 의미가 된다.

 h1 p
       {
            text-align:center;
            color:red;
       }

<h1> Tag 안에 <p>에 스타일을 주는것을 뜻한다.

예시

<!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>title</title>
    <style>
     h1 p
       {
            text-align:center;
            color:red;
       }    
    </style>
    </head>
    <body>
    <h1>
       <p>h1 Tag안에 있는 p Tag 입니다.</p>
    </h1>
    <p>h1 Tag안에 있지 않는 p Tag 입니다.</p>
    </body>
    </html>

결과