스타일시트 css의 문법

css 구문

---

css의 구문을 이해하기 위해서는 3가지를 이해해야한다.

• 선택자 (selector)
• 속성명 (propery)
• 속성값 (value)

<a> 라는 선택자 사용하여 속성명인 백그라운드 컬러 즉 배경색을 속성값 엘로우라는 스타일을 입힌것이다. 즉 <a>라는 선택자의 배경은 노란색입니다.라고 이야기를 하면 쉽다. 속성과 송석값은 계속적으로 추가가 가능한데 이때는 ;의 기호를 사용하여 추가를 한다.

그리고 a와 동일한 속성값을 가지고 싶은 선택자가 있다면

a, td { background-color: yollow; font-size: 16px; }

이런식으로 선택자 , 의 사용으로 중복 사용이 가능하다.

3가지 유형의 선택자

---

선택자중에서는 총 3가지의 선택자 타입을 가진다.

• id 선택자

• class 선택자

• type 선택자

id 선택자

전체 문서에서 하나의 태그를 식별하기 위해서만 사용이 되며 선택자들 중에서 우선순위가 가장 높다. css 선택자에서는 #을 사용해서 id인것을 표시한다.

<style type="text/css">

#test { 

   color:gray; 

}

</style>

<div id="test">

    test

</div>

class 선택자

class 속성은 일련의 태그를 그룹으로 묶어 하나로 제어하기 위해서 사용한다. class 속성에는 공백을 구분으로 여러개의 class가 다중으로 표시될 수도 있다. css 선택자에서는 #아 아닌 '.'를 사용해서 class임을 표시한다.

<style type="text/css">

.red {

  color:red;

}

.ft_15 {

 font-size:15px;

}

</style>

<div class="red">이건 빨간색</div>

<p class="red ft_15">hello 꼼수블로그</p> <--하나의 클래스에 두개의 클래스를 적용시켰다.

type 선택자

특정 태그명을 가진 엘리먼트 전체를 제어한다. css선택자에서는 태그의 이름을 그대로 사용한다.

<style type="text/css">

h1 {

  color : blue;

  font-size : 24px;

}

</style>

<h1>안녕하세요 꼼수블로그</h1>

주석처리

css 파일의 내용이 많아지게 되면 이를 관리하기 위해서 주석을 활용한다. 주석은 소스상에서만 표시될뿐 실제적으로는 아무 영향을 미치지 않닌 소스코드이다. css의 주석은 /*로 시작하여 */로 마무리한다.

<style type="text/css">

<!--

/*해당 클래스의 내용을 설명한다. 폰트의 사이즈는 15px이다.*/

.ft_15 {

  font-size:15px;

}

//-->

</style>

<p class="ft_15">안녕하세요 꼼수블러그</p>

css의 구문이 짧거나 간단할 경우 주석처리가 별로 크게 필요가 없지만 홈페이지의 모든 문서에 연결된 외부 css 파일의 경우 css 구문이 많으면서 복잡하다 이때 주석을 적절하게 사용하면 css문서의 관리가 편해진다.