CSS?
HTML5 웹 문서를 구성하는 3가지 요소.
- HTML : 웹 페이지 문서 담당
- CSS : 웹 페이지 디자인 담당
- JS : 웹 페이지 이벤트 담당
Cascading Style Sheets의 약자
스타일 사용이유
- 웹 문서의 내용과 상관 없이 디자인만 바꿀 수 있다.
- 다양한 기기에 맞게 탄력적으로 바뀌는 문서를 만들수 있다.
웹 페이지를 표현하기 위한 스타일 규칙을 모아 놓은 문서
웹 브라우저 별 CSS3 지원.
- site : http://css3test.com
CSS 규칙은 선택자와 선은 두 부분으로 구성.
선택자는 규칙이 적용되는 엘리먼트.
선언 부분에서는 선택자에 적용될 스타일 작성.
선언은 중괄호로 감싸며, 속성과 값으로 이루어짐.
속성은ㅊ 선택자에서 바꾸고 싶은 요소.
값은 속성에 적용할 값.
여러 선택자에 동일한 스타일을 적용할 때, comma로 구분하여 나열.
선언 안에 하나 이상의 속성을 작성할 수 있으며, 각 속성은 semi-colon으로 구분.
주석 /* 내용 */
외부 스타일 시트 적용
<link>를 사용하여 외부 스타일 시트를 적용
<link>는 <head>안에 작성하며 rel, type, href 3가지 속성을 주로 사용
rel은 HTML 페이지와 링크도니 파일간의 관계를 의미
href는 CSS file 경로를 의미함.
@import를 사용하여 외부 스타일 시트를 적용.
@import는 스타일 시트 중 최상단에 위치해야 함.
@import url("file path"); 또는 @import "file path"; 형태로 사용.
<link>와 달리 <style>의 media 속성을 통해 보여지는 미디어 타입을 설정.
내부 스타일 시트 적용
<style>을 사용하여 내부 스타일 시트를 적용
<style> tag 내부에 CSS 규칙을 작성.
외부 스타일 시트보다 우선 적용.
<head> tag 내부에 작성
인라인 스타일 적용
개별 element 마다 스타일을 지정하므로 유지보수에 용이하지 않다.
스타일 적용 우선순위는 인라인> 내부> 외부 순
Style 속성을 사용하고 속성값으로 CSS규칙을 작성
스타일 우선순위
인라인 > 내부 > 외부 스타일 시트 순.
요약
<link rel = "stylesheet" href ="../css/style.css">를 사용하여 외부 스타일 시트 적용.
내부 스타일 시트는 <head> tag 내부에 <style></style> tag를 정의하고 CSS를 정의.
내부 스타일시트는 외부 스타일시트보다 우선 적용.
인라인 스타일을 이용하여 각 element마다 스타일을 적용할 수 있는 방법도 있지만 유지보수에 용이하지 않다.