CSS란?
Cascading Style Sheet 의 약자.
마크업 요소에 스타일을 적용하기 위해 W3C에서 고안한 언어.
테이블 방식의 레이아웃 때문에 마크업 코드가 복잡해지는 문제를 해결할 수 있고,
표현과 관련된 요소(font, b, i 등)의 사용을 제한하면서 CSS 속성으로 대체할 수 있음.
CSS 방식의 디자인은 웹 사이트의 성능 향상에 기여.
웹 접근성이나 웹 사용성을 높이는데도 효과적.
CSS 서식
1. Rule set
CSS 서식은 ‘선택자’와 ‘선언부’로 나눌 수 있음.
선택자는 스타일을 적용할 대상을 의미.
선언부는 선택자에 적용할 디자인 관련 속성과 값을 의미.
selector { property : value; } // 선택자 { 속성 : 값; }
2. CSS 적용하기
- External Style Sheet (외부 스타일시트)
CSS 파일을 독립적으로 생성하여 웹 문서에 삽입하는 방법.
@import 와 link 요소를 이용하는 두 가지 방법이 있음.
구 버전 웹 브라우저에서는 @import 를 해석하지 못하는 경우가 있으니 주의.
<link rel=”stylesheet” type"=”text/css” href=”연결하려는 css 파일 경로와 파일명” />
<style type=”text/css”>
@import url(“연결하려는 css 파일 경로와 파일명”);
</style>
외부에서 css 파일을 지정할 경우 css 파일이 캐시에 저장되기 때문에
사용자가 웹 사이트에 다시 방문했을 때 로딩 속도를 빠르게 할 수 있음.
css를 외부에 분리하여 적용할 경우 문자 코드 세트를 첫 줄에 선언해야 함. (@charset “utf-8”;)
- Internal Style Sheet (내부 스타일시트)
html 문서 내의 style 요소에 css 코드를 포함하는 형식.
특정 웹 문서에만 적용할 경우 외부 문서로 선언하는 것보다 효율적일 수 있음.
<style type=”text/css”>
css 선언
</style>
- Inline Style Sheet (인라인 스타일시트)
특정 요소에 직접 style 속성을 이용하여 적용하는 방법.
기존 font 요소를 이용하는 것과 차이가 별로 없으므로 권장하는 방법은 아님.
<p style=”css 선언”>텍스트</p>
