c01. CSS 구문 및 선택자

CSS 구문 및 선택자

CSS 규칙은, 선택자(Selector) 와 선언부로 구성됩니다.

<style>
p {color: blue; text-align: center;} 
</style>
<h3>CSS 세상에 들어오신 것을 환영합니다.</h3>
<p>이 문단에 CSS 스타일을 입혔습니다.</p>

---

여기서 CSS 선택자(selector) [예에서는 p] 는 스타일을 지정하고 싶은 HTML 태그입니다.

선언부 [위 예에서는 { } 괄호 사이의 내용] 는 세미콜론 [;] 으로 구분하여 하나 이상의 선언 내용으로 구성됩니다.

각 선언 내용들은 콜론[:] 을 사이에 두고 CSS 속성 이름과 속성 값을 쌍으로 가지고 있습니다.

그리고 CSS 선언 내용은 항상 세미콜론으로 끝나고 선언부 전체는 { } 괄호로 둘러 싸야 합니다.

---

CSS 선택자 들은 결국 HTML 태그를 찾는 역할을 하는데, 태그의 이름이나, id, class 이름, 속성 등을 이용해서 찾습니다.

태그 선택자 (element Selector) 는 태그의 이름을 바탕으로 스타일을 적용할 태그를 선택합니다.

위의 예에서는 모든 <p> 태그 들이 선택되어, 청색 글자에 가운데 정렬이 적용될 것입니다.

---

id 선택자 (id selector) 는 HTML 태그내에 특정 id 속성을 찾습니다. 

이렇게 하면, 같은 태그 종류 내에서도 특정 id 를 갖는 태그만 선택할 수 있습니다.

---

특정 id 를 갖는 태그를 지정하려면, 해시 (#) 문자를 id 앞에 붙입니다.

그렇게 하면, id="id1" 을 속성으로 갖는 그 HTML 태그에 스타일이 적용됩니다. 

다만, id 이름은 숫자로 시작할 수 없습니다.

<style>
#id1 {text-align: center;color: blue;}</style>
<h3>id 속성 적용안한 경우</h3>
<p id="id1">id 속성을 적용한 경우</p>

id 속성 적용안한 경우

id 속성을 적용한 경우

---

클래스 선택자 (class selector) 는 특정 이름의 클래스 속성을 갖는 태그를 선택합니다.

특정 클래스를 갖는 태그를 선택하려면 점 (.) 문자를 클래스 이름 앞에 붙입니다.

<style>
.싼타마을 {text-align: center;color: red;}
</style>
<h3 class="싼타마을">싼타마을 클래스 빨강 글자, 가운데 맞춤</h3>
<p class="싼타마을">p 태그에도 같은 클래스를 적용</p>


싼타마을 클래스 빨강 글자, 가운데 맞춤
p 태그에도 같은 클래스를 적용


이때 같은 클래스 속성을 갖지만, 특정 HTML 태그에 대해서만 적용할 수도 있습니다.

예를 들면 <div>태그만 "루톨프마을" 클래스를 적용하려면 아래와 같이 합니다.

<style>
div.루돌프마을 {text-align: center;color: red;}
</style>
<h2 class="루돌프마을">루돌프마을 클래스 이지만 h2 태그임</h2>

<div class="루돌프마을">div 태그의 "루돌프마을" 클래스에만 스타일 적용</div>

루돌프마을 클래스 이지만 h2 태그임

div 태그의 "루돌프마을" 클래스에만 스타일 적용

---

HTML 태그에 하나 이상의 클래스를 적용할 수 있습니다.

<div> 태그에 class="파랑" 클래스, class="크게" 클래스, class="가운데" 클래스를 동시에 적용하려면,

<style>
h3.파랑 {color: blue;}
h3.크게 {font-size: 200%;}
h3.가운데 {text-align: center;}
</style>
<h3 class="파랑">파랑</h3>
<h3 class="크게">크게</h3>
<h3 class="파랑 크게 가운데">파랑 크게 가운데</h3>

파랑

크게

파랑 크게 가운데

---

몇 개의 태그에 대해 스타일이 동일한 경우, 그룹 선택자 (group selectors) 를 콤마 (,) 로 구분하여 한꺼번에 표기할 수 있습니다.

<style>
h2, h5 {
    font-size: 150%;
    text-align: right;
    color: blue;
    /* 그룹 선택자의 예입니다. */
}</style>
<h2>h2 태그</h2>
<h5>h5 태그</h5>

h2 태그

h5 태그

---

[광고] Udemy 동영상 강의로 보기