CSS 기본 구조와 CSS 문서 적용 방법

CSS 기본 구조와 CSS 문서 적용 방법

 

CSS 개요

CSS 는 HTML 단점을 보완하기 위한 스타일 시트입니다.

CSS 장점

 

다양한 기능의 확장

CSS를 사용하면 다양한 기능을 추가 시킬 수 있으며 기능의 변경도 가능합니다.

 

통일된 문서 양식 제공

CSS를 사용하면 한 번의 속성 정의로 여러 문서에서 동시에 다양하게 적용할 수 있습니다.

 

사용자 환경과 상관없는 독립된 문서 제작 가능

 

문서 형식의 다양화

CSS를 사용함으로써 더욱 다양하고 멋진 HTML 문서를 만들 수 있습니다.

 

로딩 시간 단축

통일된 문서 양식을 제공함으로써 브라우저가 읽어야 하는 문자의 수가 작아지기 때문에 로딩 시간이 단축됩니다.

 

CSS3

 

CSS2에 비해 다양한 속성들이 추가되었습니다.

이미지 파일이 했던 역할들을 CSS에서 처리할 수 있게 됨으로써 유지 보수 측면에서 유리하게 되었고 이미지 파일 로딩으로 웹 페이지의 로딩 시간 딜레이를 상당히 줄여 줄 수 있게 되었습니다.

모듈 기반으로 개발이 되으므로 필요에 따라 해당 모듈만 교체하면 되기 때문에 빠른 업데이트가 가능합니다.

 

CSS 기본 구조

형식

선택자 { 속성: 값; }

HTML 과는 다르게 CSS는 값에 두따옴표(“) 나 한따옴표(‘ ’)를 사용하지 않습니다.

HTML에서는 해당 속성에 해당하는 값을 지정할 때  등호( = ) 를 사용하지만 CSS는 콜론( : )을 사용합니다.

속성을 여러 개 사용하는 경우는 HTML 에서는 띄어쓰기로 구분하지만 CSS는 세미콜론( ; ) 을 사용하여 구분합니다.

선택자(selector)

스타일을 고칠 HTML 요소를 의미합니다.

고칠 스타일은 여러 개의 선언으로 지정이 가능합니다.

반드시 { }(중괄호)로 묶어야 합니다.

 

선언(declaration)

콜론(:)으로 구분 된 CSS 속성 이름과 값이 포함됩니다.

세미콜론(;)으로 끝나야 합니다.

 

CSS 문서 적용 방법

 

임베디드 방식(내부 스타일 시트)

 

HTML 문서에 CSS를 삽입하는 방식을 의미합니다.

head 요소 안에 style 요소를 사용하여 스타일을 정의합니다.

하나의 페이지에서만 적용되므로 HTML 문서마다 다른 스타일을 적용하고자 할 때 편리하게 사용이 가능합니다.

예제

 

링크 방식(외부 스타일 시트)

 

HTML 문서와는 별도로 스타일만을 설정한 CSS 파일을 만들어 사용하는 방법을 의미합니다.

CSS 만을 작성한 확장자가 css인 *.css 를 따로 만들어야 하고, head 요소 내에 해당 CSS 파일을 링크시켜야 합니다.

예제

 

인라인 방식

 

각 요소에 직접 스타일을 적용하는 방법을 의미합니다.

임베디드 방식이 페이지 전체에 적용된다고 하면 인라인 방식은 하나의 요소 안에서만 적용됩니다.

예제

 

CSS 적용 우선순위

① 인라인 방식으로 적용한 스타일
② 임베디드 방식(내부 스타일 시트)으로 적용한 스타일
③ 링크 방식(외부 스타일 시트)으로 적용한 스타일