CSS[cascading style sheets]: 외부스타일시트 웹페이지 삽입
- CSS [cascading style sheets]
기존의 HTML은 웹 문서를 다양하게 설계하고 수시로 변경하는데 많은 제약이 따르는데, 이를 보완하기 위해 만들어진 것이 스타일 시트이고 스타일 시트의 표준안이 바로 CSS이다. 간단히 스타일 시트라고도 한다.
HTML을 이용해서 웹 페이지를 제작할 경우 전반적인 틀에서 세세한 글꼴 하나 하나를 일일이 지정해주어야 하지만, 웹 페이지의 스타일(작성형식)을 미리 저장해 두면 웹 페이지의 한 가지 요소만 변경해도 관련되는 전체 페이지의 내용이 한꺼번에 변경되므로, 문서 전체의 일관성을 유지할 수 있고 작업 시간도 단축된다.
따라서 웹 개발자들은 보다 풍부한 디자인으로 웹을 설계할 수 있고, 글자의 크기, 글자체, 줄간격, 배경 색상, 배열위치 등을 자유롭게 선택하거나 변경할 수 있으며 유지·보수도 간편하게 할 수 있다.
출처 : CSS [cascading style sheets] (두산백과)
- 외부스타일시트 웹페이지 삽입
01. 외부 스타일시트(CSS)를 웹페이지에 삽입하는 방법
① 링크를 이용하는 방법
<link rel="stylesheet" type="text/css" href="/css/mystyle.css" >
② 임포트하는 방법
<style>
<!--
@import url("/css/mystyle.css");
-->
</style>
몇몇 브라우저 벤치마크 테스트 결과 스타일시트를 링크하는 것보다 임포트하는 것이 느린경우가 있어 링크하는 방법을 더 선호한다.
02. 외부 스타일시트 파일의 구조
관리의 편의를 위해서 스타일시트를 여러 부분의 덩어리로 구조화 하는것이 좋다. 구조화를 할때는 주석을 사용한다.
ex) /* Carousel 시작 */
'Web Design > CSS & CSS3' 카테고리의 다른 글
CSS Property (속성 ) : Font (0) | 2018.04.16 |
---|---|
CSS Vendor Prefixes (브라우저 접두사)로 부터 자유를... (0) | 2018.04.16 |
CSS - Embedding Styles (HTML에 CSS 적용 방법) (0) | 2018.04.16 |
CSS Vendor Prefixes = CSS browser prefixes (브라우저 접두사) (0) | 2018.04.14 |
CSS 3 의 역사와 브라우저별 지원현황 (0) | 2018.04.14 |