CSS 튜토리얼 (4) 웹 페이지에 CSS를 삽입하는 방법

처음 두 장에서는 CSS의 구문에 대해 배웠지만 브라우저에 효과를 표시하려면 브라우저가 이를 인식하고 호출할 수 있도록 해야 합니다. 브라우저는 스타일 시트를 읽을 때 텍스트 형식으로 읽어야 합니다. 페이지에 스타일 시트를 삽입하는 방법에는 외부 스타일 시트 연결, 내부 스타일 시트, 외부 스타일 시트 가져오기, 내장 스타일 등 4가지가 있습니다.

외부 스타일 시트에 연결

외부 스타일 시트에 연결한다는 것은 스타일 시트를 스타일 시트 파일로 저장한 다음 ?lt;link> 이 태그는 다음과 같이 페이지의 영역에 배치되어야 합니다.

…

......

위의 예는 브라우저가 정의된 스타일을 읽는다는 것을 나타냅니다. mystyle.css 파일의 문서 형식 시트. rel="stylesheet"는 페이지에서 이 외부 스타일 시트를 사용하는 것을 의미합니다. type="text/css"는 파일 형식이 스타일 시트 텍스트임을 의미합니다. href="mystyle.css"는 파일이 있는 위치입니다.

외부 스타일 시트 파일을 여러 페이지에 적용할 수 있습니다. 이 스타일시트 파일을 변경하면 모든 페이지의 스타일도 이에 따라 변경됩니다. 동일한 스타일의 페이지로 다수의 웹사이트를 만들 때 매우 유용합니다. 중복 작업량을 줄일 뿐만 아니라 향후 수정 및 편집이 용이하고 탐색 시 반복되는 코드 다운로드도 줄어듭니다.

스타일 시트 파일은 텍스트 편집기(예: 메모장)를 사용하여 열고 편집할 수 있습니다. 일반적으로 스타일 시트 파일 확장자는 .css입니다. 콘텐츠는 정의된 스타일 시트이며 HTML 태그를 포함하지 않습니다. mystyle.css 파일의 콘텐츠는 다음과 같습니다.
hr {color: sienna}
p {margin-left: 20px}
body {배경-이미지: url("images/back40.gif")}
(가로줄의 색상을 흙빛 노란색으로 정의합니다. 문단 왼쪽 여백은 20픽셀입니다. 배경 이미지는 페이지는 이미지 디렉토리의 back40.gif 파일입니다.)

내부 스타일 시트

내부 스타일 시트는 페이지의 ?lt;head> 정의된 스타일이 페이지에 적용됩니다. 스타일 시트는 삽입됨으로 표시되며,

… >
……


참고: 일부 하위 버전 브라우저는 스타일 태그를 인식할 수 없습니다. 스타일 태그의 콘텐츠를 무시하고 스타일 태그의 콘텐츠를 페이지에 직접 표시되는 텍스트로 바꿉니다. 이러한 상황을 피하기 위해 HTML 주석()을 사용하여 콘텐츠를 표시하지 않고 숨깁니다.

…
< ;style type="text/css">


……


외부 스타일 시트 가져오기

외부 스타일 시트 가져오기는 내부 스타일 시트의