CSS의 서식 및 적용

 

CSS 실습을 위한 도구

1.웹브라우저

2.메모장 또는 textedit(맥 사용시)

 

메모장을 사용할 수도 있지만 웹 에디터 프로그램을 사용하는 것이 효과적이다.

에디트플러스(Editpus),울트라에디트(Ultra Edit), 압타나(Aptana), 드림위버(Dream Weaver), 나모 웹 에디터등이 있다.

 

※파이어폭스(Firefox)의 부가기능 활용

파이어폭스 웹페이지에서 웹개발툴, 파이어 버그 등을 이용하면 웹표준에 도움이 될 수 있다.

웹표준을 지켜서 사이트를 제작하면 향후에 사이트를 리뉴얼 할 때 비용과 시간을 절약할 수있다.

 

Firefox 웹 개발툴(Web developer)은 웹 개발 시 필수적인 플러그인으로 CSS 적용을 해제하거나

웹페이지의 이미지를 제거하여 대체 텍스트를 확인하는 등의 점검 시에 활용할 수 있다.

 

파이어버그(Firebug)는 웹 페이지 디버깅 툴로, 마크업 코드, CSS 코드, 자바스크립트 오류, DOM 구조

레이아웃 구조 객체별 다운로드 속도등과 같은 다양한 기능을 제공한다.

 

 

CSS 서식

 

CSS 서식은 크게 "선택자"와 "선언부"로 구분된다.

선택자는 스타일을 적용할 대상을 의미,

선언부는 선택자에 적용할 디자인 관련 속성과 값을 의미한다.

각각의 선언은 CSS 속성과 값으로 이루어져 있다.

 

구조)

 

속성         값                    속성         값

 ↓           ↓                      ↓          ↓

 p    { color : red; background-color : yellow; }

 ↑           ↑                      ↑

선택자     선언                    선언

 

기본 형식에서 선택자에 대한 속성값은 { 으로 시작해서 } 로 끝나는 선언부에 지정한다.

선언문에는 하나 이상의 선언을 지정할 수 있으며 속성과 값으로 구성된다.

선언 부분의 속성에 값을 지정할 때는 콜론(:)을 사용해야 하며

값을 선언한 후에는 세미콜론(;)을 사용하여 선언이 종결되었음을 알려야 한다.

선언이 하나이거나 마지막 선언인 경우 종결의 의미를 생략할 수 있다.

 

세미콜론(;)은 1개 이상의 속성값을 선언할 때 구분하기 위해 사용한다.

하나의 속성만 선언하거나 마지막에 사용하는 경우에는 p {color: red}와

p {color: red; border:1px}처럼 생략할 수 있다.

마지막에 세미콜론을 쓰는 것은 스타일 속성을 추가 및 수정할 때 실수를 줄이고

코드 정렬시 가독성을 높이기 위해서이다.

 

CSS적용하기

웹 사이트에 디자인을 적용하다 보면 다양한 스타일 정보가 필요한데 이 정보를

웹페이지 내부에서 표현하거나 외부에서 스타일시트 파일을 사용하여 표현할 수 있다.

 

1. External Style Sheet(외부 스타일시트)

CSS 파일을 독립적으로 생성하여 웹 문서에 삽입하는 방법을 외부스타일 시트(External Style Sheet)라고

한다. @import와 link 요소를 이용하여 CSS를 마크업 문서에 적용하는 방법으로 사용하는데

구버전의 웹 브라우저에서는 @import를 해석하지 못한다.

 

<link ref="Stylesheet" type="text/css" href="연결하려는 CSS 파일" />

 

import 명령을 이용하여 CSS 파일을 마크업 문서에 적용하는 방법에는

두가지 경우가 있는데 먼저 마크업 문서의 <style> 요소 안에 CSS파일을

import 하는 방법과 다음으로 CSS 파일 안에서 다른 CSS 파일을 import 하는 방법이 있다.

하나의 CSS 파일에서 여러 개의 CSS 파일을 import하는 경우에는 가장 먼저 import 할 CSS 파일에

@chatset을 선언하거나 여러 개를 import할 CSS 파일에 @charset을 선언하면 된다.

여러개의 CSS 파일을 사용한다해도 @charset은 한번만 선언해야 한다.

 

 

※ @import 명령 형식

 

1) 마크업 문서에서 CSS 파일을 import할 경우

 

<style type="text/css">

     @import url("연결하려는 CSS 파일");

</style>

 

2) CSS 문서에서 여러 개의 CSS 파일을 import 할 경우

 

@import url("연결하려는 CSS 파일");

 

 

CSS파일을 외부에서 지정시 CSS 파일이 캐시에 저장되기 때문에 사용자가 웹사이트에

재방문했을때 로딩 속도를 바르게 할 수 있다.

CSS를 외부에서 분리하여 적용할 경우, 웹문서의 문자 코드 세트와 같은 문자 코드 세트를

CSS 문서의 첫줄에 선언해야 한다.

 

@charset "euc-kr";

body { margin:0; padding:0 }

 

 

2. Internal Style Sheet(내부 스타일시트)

내부 스타일 시트는 HTML 문서 내의 style 요소에 CSS 코드를 포함하는 형식으로 사용한다.

해당 방식을 사용하면 웹 페이지를 로드할 때마다 매번 CSS 파일을 다운로드 하기 때문에 로딩속도가 느려진다.

특정 웹 문서에만 적용하려는 CSS의 경우 외부 문서로 선언하기보다 내부에 선언하는 것이 효율적이다.

 

<style type="text/css">

   CSS

</style>

 

3.Inline Style Sheet(인라인 스타일시트)

인라인 스타일 시트는 특정 요소에 직접 style 속성을 이용하여 CSS 스타일을 적용하는 방법이다.

 

<h1 style="CSS 선언" >

 웹 접근성과 웹 표준

</h1>