[CSS] CSS 문법

CSS 문법

- 선택자(selector) : CSS 를 적용하고자 하는 HTML 요소(element)

- 선언부(declaratives) : 하나 이상의 선언들을 세미콜론(;)으로 구분하여 포함, 중괄호 { } 로 전체를 둘러쌈

- 각 선언은 CSS 속성명과 속성값을 가지며 콜론(:)으로 연결

- CSS 선언은 마지막에 세미콜론(;)으로 끝

 

 

CSS 선택자

- HTML 요소 선택자

- 아이디(id) 선택자

- 클래스(class) 선택자

- 그룹(group) 선택자

 

 

HTML 요소 선택자

- HTML 요소 이름을 직접 사용

<style>
    h2 { color: teal; text-decoration: underline; }
</style>
...
<h2>이 부분에 스타일을 적용합니다.</h2>

 

 

아이디(id) 선택자

- 특정 요소를 선택할 때 사용

- 특정 아이디 이름을 갖는 요소 선택

#아이디

<style>
    #heading { color: teal; text-decoration: line-through; }
</style>
...
<h2 id="heading">이 부분에 스타일을 적용합니다.</h2>

- HTML & CSS 는 여러 요소에 같은 아이디 이름을 사용해도 문제 X

- JS 는 오류 발생 => 되도록 다른 아이디 이름 사용 or 클래스 사용하기

 

 

클래스(class) 선택자

- 특정 집단의 여러 요소를 한 번에 선택할 때 사용

- 같은 클래스 이름을 갖는 요소 모두 선택

.클래스이름

<style>
    .headings { color: lime; text-decoration: overline; }
</style>
...
<h2 class="headings">이 부분에 스타일을 적용합니다.</h2>
<p>class 선택자를 이용하여 스타일을 적용할 HTML 요소들을 한 번에 선택할 수 있습니다.</p>
<h3 class="headings">이 부분에도 같은 스타일을 적용합니다.</h3>

 

 

그룹(group) 선택자

- 여러 선택자를 같이 사용

- 쉼표(,)로 구분하여 연결

- 코드 중복성 최소화, 간결

<style>
    h1 { color: navy; }
    h1, h2 { text-align: center; }
    h1, h2, p { background-color: lightgray; }
</style>

 

 

CSS 주석(comments)

/* 주석내용 */

- 주석 내부에 또 다른 주석 적용 X

 

 

 

 

 

http://tcpschool.com/css/css_intro_syntax

코딩교육 티씨피스쿨