CSS에 대한 기본내용
CSS(Cascading Style Sheets) : HTML을 보완하기 위해 만들어진 것으로 폰트, 색상, 공백 공간과 그 밖의 문서 표현 측면을 자유롭게 지정할 수 있는 기능을 제공하는 스타일 시트 언어.
- HTML로 일일이 세부 스타일을 지정해주는 것에 대한 보안
- 완성 후 스타일 변경 및 유지보수의 간편화
- HTML의 표현 한계 보완
- 문서의 컨텐츠와 스타일을 분리함으로 작업의 효율성 향상
CSS의 문법
h1 { color: #FF0000; background: #00FF00 }
h1 : 선택자
{ } : 선언부
color, background, … : 속성명
#FF0000, #00FF00 : 속성값
: : 콜론
; : 선언 구분자
CSS의 문법은 선택자와 선언부로 구성된다.
선택자는 CSS를 적용하고자 하는 HTML요소를 가리킨다.
선언부는 하나 이상의 선언들을 세미콜론으로 구분하여 포함할 수 있으며, 중괄호를 사용해 둘러싼다.
각 선언은 속성명과 속성값을 가지며, 콜론으로 연결된다. 선언의 마지막은 세미콜론으로 끝낸다.
CSS적용 방법
1. 인라인 스타일 : HTML요소 내부에 style속성을 사용, 해당 요소에만 스타일 적용하므로 변경하기 번거로움
<body>
<h2 style="color:green; text-decoration:underline">
인라인 스타일을 이용하여 스타일을 적용하였습니다.
</h2>
</body>
2. 내부 스타일 시트 : HTML문서 내 <head>태그에 <style>태그를 사용, 해당 HTML문서에만 적용
<head>
<style>
body { background-color: lightyellow; }
h2 { color: red; text-decoration: underline; }
</style>
</head>
3. 외부 스타일 시트 : .css확장자를 사용하여 파일생성, 스타일을 적용할 페이지의 <head>태그에 <link>태그를 사용하여 외부 스타일 시트를 포함해야만 스타일 적용됨
<head>
<link rel="stylesheet" href="/examples/media/expand_style.css">
</head>expand_style.css
body { background-color: lightyellow; }
p { color: red; text-decoration: underline; }스타일 적용 우선순위 : 인라인 스타일 > 내부/외부 스타일 시트 > 웹 브라우저 기본 스타일