CSS를 적용하는 방법은 여러 가지 방법을 제공한다. 우선 CSS를 적용하기 위해서 위치를 정의해야 한다. 이 위치를 선택자라 부른다. 선택자는 태그명이 될 수 있고 미리 정의된 id나 class가 될 수 있다.
선택자와 함께 다음과 같은 형식으로 CSS를 적용한다. { }안에 속성명과 속성값을 나열하며 속성명과 속성값은 “:”으로 속성과 속성은 “;”으로 구분한다.
선택자{CSS속성명:속성값;속성명:속성값…}
Inline으로 CSS적용하기
태그 내에 “style”속성을 정의하고 “”안에 속성명과 속성값을 정의한다.
다음과 같이 코드를 추가한다. “color”속성은 글자의 색상을 정의할 수 있는 속성이다. 실행하면 글자의 색상이 파란색으로 변경되어 있다.
<head>태그 내에 정의하고 적용하기
<head>태그 내에 <style></style>태그를 이용하여 정의한 후 사용한다. 선택자로 태그명을 지정하면 해당 태그에 스타일 시트 속성이 적용된다. 다음과 같이 작성한 후 실행해보자.
<p>태그를 선택자로 지정했기 때문에 <p>태그에 해당하는 부분의 문자열이 모두 “red”가 적용되었다. 다만, 맨 첫 번째 문장은 inline방식으로 “blue”가 적용되었기 때문에 변경되지 않은 것을 알 수 있다. <p>태그에서 가장 가까운 곳에 정의된 inline방식이 우선 순위가 가장 높은 것을 알 수 있다.
외부 문서로 정의하기
CSS속성을 외부 문서에 정의한 후 적용하는 방법이 가장 많이 사용되는 방법이다. 사이트를 제작하면서 모든 웹 페이지에 동일한 서식을 적용하기 위해서 이 방법을 이용해야 한다. 우선 외부 파일을 저장할 폴더를 “WebContent”폴더 아래 다음과 같은 구조로 작성한다.
공통의 서식이므로 “common\css”폴더를 작성하고 외부 CSS파일을 저장할 것이다. 외부 CSS파일의 확장자는 “.css”이며 추가된 “css”폴더를 선택하고 단축메뉴를 나타낸 후 [New]-[Other]를 선택한다.
[New]대화 상자가 나타나면 “Web”에서 “CSS File”목록을 선택한다.
추가된 CSS파일에 다음과 같이 속성을 정의한다.
정의한 CSS외부 문서는 <link>태그를 이용하여 연결하며 다음과 같은 방법으로 연결한다. 실행하면 CSS가 적용된 결과가 나타나는 것을 확인할 수 있다. 이렇게 외부 문서를 이용하여 공통 서식을 적용한 후 연결하여 작업하는 방법이 CSS에서 가장 많이 사용되는 방법이다.
