06-2 스타일과 스타일 시트

>>> 스타일 형식 알아보기

CSS 소스에서 한 줄이 하나의 스타일에 해당하고, 조금 더 들여다보면 줄마다 형태가 비슷하다는 걸 알게 됨. CSS스타일의 형식은 다음과 같음

[기본형] 선택자 { 속성1: 속성값1; 속성2: 속성값2; }

맨 앞의 선택자는 스타일을 어느 태그에 적용할 것인지 알려 주는 것이고, 중괄호 사이에는 스타일 정보를 넣음.

속성과 값이 하나의 쌍으로 이루어진 것을 스타일 규칙이라고 하며, 세미콜론( ; )으로 구분해서 스타일 규칙을 여러 개 지정할 수 있음. 이처럼 CSS를 공부한다는 것은 다양한 속성을 알아보고 각 속성마다 어떤 값을 사용하는지 배워 가는 것임

 

<<<알아 두면 좋아요! === CSS 소스 경량화>>>

CSS소스에 주석을 넣거나 줄 바꿈하는 것은 웹 사이트 작성자가 알아보기 쉽도록 하는 것일 뿐 웹 브라우저에는 아무 의미가 없음. 웹 브라우저에서 CSS소스를 읽을 때는 선택자와 속성, 그리고 속성값만 의미가 있음. 하지만 CSS소스는 네트워크를 이용해 파일로 내려받으므로 되도록이면 파일 크기가 작은 것이 좋음. 그래서 CSS소스가 길면 주석이나 줄 바꿈, 공백 등을 제거하고 꼭 필요한 정보만 남겨서 파일을 작게 만들어 사용함. 이것을 CSS소스 경량화라고 함.

인터넷에서 'css minify' 또는 'css compress'를 검색하면 CSS소스 파일의 크기를 줄여 주는 다양한 툴을 찾을 수 있음

 

>>>스타일 시트 알아보기

웹 문서 안에서는 스타일 규칙을 여러 개 사용함. 이런 스타일 규칙을 한눈에 확인하고 필요할 때마다 수정하기도 쉽도록 한군데 묶어 놓은 것을 스타일 시트라고 함. 

스타일시트 -> 브라우저 기본 스타일(웹 브라우저에 기본으로 만들어져 있음)

               -> 사용자 스타일(제작자가 만듦)  -> 인라인 스타일(스타일시트사용 X : 스타일을 적용할 대상에 직접 표시함)

                                                                  -> 내부스타일 시트(웹 문서 안에서 사용할 스타일을 같은 문서 안에 정리)

                                                                  -> 외부스타일 시트(스타일 정보를 따로 저장해 놓음 .css라는 확장자 사용)

 

>>스타일 정보를 따로 저장해 놓은 외부 스타일 시트

외부 스타일 시트 파일에 스타일을 작성할 때는 <style> 태그를 사용하지 않음. 그리고 이렇게 만든 외부 스타일 시트는 웹 문서에 연결해야 스타일이 문서에 적용됨 외부 스타일 시트를 연결할 때 사용하는 태그는 <link> 태그임

[기본형] <link rel="stylesheet" href="외부 스타일 시트 파일 경로">