CSS 문법

CSS 문법

CSS 구문을 이해하기 위해서는 선택자(selector), 속성(property) 그리고 속성값(value) 이 3가지를 이해하여야 합니다. CSS 구문은 아래의 그림처럼 선택자(selector)와 선언으로 구성되며, 선언은 속성(property)과 값(value)으로 구성됩니다. 우리말로 선택자라고 하면 어감이 좀 이상한데 보통의 경우 선택자는 HTML 태그 중 하나 입니다. 위의 그림에서는 <p>태그가 선택자로 사용되었습니다. CSS 고급단계에서는 속성의 상속(inherit)과 겹침(cascade)을 제대로 이해해야 하기에 이 선택자(selector)의 개념이 아주 중요해집니다. 위에서 제시한 예제의 의미는  문단(p)의 색상(color)을 red로 지정하라는 말입니다. 속성과 속성값은 계속적으로 추가가 가능합니다. 이때 ; 기호를 사용하여 추가합니다. p {color:red ; width:200} 선택자 역시도 추가할 수 있습니다. 이때 , 기호를 사용하여 추가합니다. p, td {color:red ; width:200} 문단(p)뿐 아니라 테이블의 셀(td)의 스타일도 {}안의 내용처럼 지정하라는 의미입니다.

클래스(class)와 아이디(id)

클래스(class) 선택자 위의 예에서 p {color:red}로 지정하면 모든 문단의 색깔이 붉은색으로 지정됩니다. 그럼 특정 문단의 색깔만 붉은색으로 지정할려면 어떻게 할까요? 클래스(class)를 이용하면 됩니다. <style type="text/css"> <!-- p.red {color:red} //--> </style> <p>일반적인 문단입니다.</p> <p class="red">red라는 이름의 클래스가 지정된 문단입니다.</p> 위의 예에서 red라는 클래스는 문단에 적용시켰습니다. 특정 HTML 요소에 적용시키지 않고 독립적으로 클래스를 사용해도 됩니다. <style type="text/css"> <!-- .red {color:red} //--> </style> <h3 class="red">소제목에도 red 클래스를 지정합니다.</h3> <p class="red">red라는 이름의 클래스가 지정된 문단입니다.</p> 이와 같이 클래스를 독립적으로 지정하는 방법이 편리하므로 더 많이 사용됩니다. 아이디(id) 선택자 클래스는 .을 이용하여 정의하고 아이디는 #을 이용하여 정의합니다. <style type="text/css"> <!-- #red {color:red} //--> </style> <p id="red">이 문단의 id는 red입니다.</p> <p>일반적인 문단입니다.</p> 클래스와 아이디의 차이점은 클래스는 여러개를 사용할 수 있지만 아이디는 고유성을 가지므로 한 문서에 한번만 사용할 수 있습니다.

홈페이지 전체적인 스타일을 일관성있게 지정하기 위해서는 클래스(class)의 사용이 필수적입니다. 실무에서도 클래스(class)의 사용은 빈번하게 이루어지고 있습니다. 문서의 내용중에 중요한 내용은 "붉은색으로 표현한다"는 방침을 정했다면 위의 예제와 같이 red라는 클래스를 지정한 다음(보통 외부 CSS 파일로 지정합니다.) 중요한 내용 부분에 <span class="red">내용</span> 이와 같이 지정해 줍니다. 이렇게 클래스로 지정하면 만일 "붉은색이 너무 강하므로 중요한 내용을 표시할때는 녹색으로 하고 밑줄을 그어주자"라는 방침이 정해지더라도 red 라는 클래스의 스타일만 바꾸면 홈페이지의 모든 페이지의 스타일이 변경됩니다. 곧 개별적으로 스타일을 지정하는 것보다는 클래스(class)와 외부 CSS 파일을 이용하는 것이 문서 전체의 일관성은 물론 스타일 변경시에도 작업의 효율성을 높여줍니다.

※출처 : http://www.homejjang.com/