CSS는 HTML과 함께 사용하는데요. HTML은 웹페이지의 정보 구조를 정의하고 CSS는 그 페이지를 장식하는 스타일을 지정하는 언어입니다. HTML 태그로 둘러싼 정보에 장식을 주는 것이 CSS의 역할입니다.
CSS 는 "캐스케이딩 스타일 시트(Cascading Style Sheets)" 의 약어로, 이름 그대로 Web 페이지의 스타일 (외관) 을 지정하는 언어입니다. Web 페이지의 외형과 문자의 크기나 색, 배경색을 담당합니다.
CSS에서 HTML 문서 나 XHTML 문서에 스타일 시트를 적용하려면 크게 다음의 3 가지 방법이 있습니다.
|
목차
|
1. 외부에 CSS 파일을 만들고 호출하여 사용하는 방법
스타일 시트를 작성한 CSS 파일을 HTML 파일과는 별도로 작성하여 HTML 파일에서 호출합니다. 호출은 HTML 문서의 <head> 요소에 <link> 요소를 작성하여 외부 CSS 파일을 지정합니다. 적용된 스타일이 CSS인 것을 브라우저 등에 알리기 위해 <link> 요소의 type 속성의 값은 text / css를 지정합니다. XHTML과 호환 및 스타일 수정의 용이성 등을 고려하면이 방법으로 스타일 시트를 설정하는 것을 추천합니다.
스타일화일은 별도의 style.css 라는 화일을 만들어 아래와 같은 내용을 작성
p {color: red; line-height: 1.5;}
HTML 소스에서 상기의 xxx.css라는 화일을 호출해서 적용
<html>
<head>
<link rel= "stylesheet" type= "text/css" href= "style.css">
</head>
<body>
<p>html 에 css 적용하는 첫번째 방법입니다</p>
</body>
</html>
2. HTML 문서의 head 요소에 넣어서 사용하는 방법
HTML 문서의 <head> 요소에 <style> 요소를 설명하는 문서 단위에 스타일 시트를 설정합니다. 적용된 스타일이 CSS인 것을 브라우저 등에 알리기 위해 <style> 요소의 type 속성의 값은 text / css를 지정합니다.
또한, 스타일 시트 부분을 <! - -> 댓글에하는 스타일 시트를 지원하지 않는 오래된 브라우저에서 <style> 요소의 내용이 그대로 표시되어 버리는 것을 방지합니다.
그러나 최근에는 대부분의 브라우저는 <style> 요소를 지원하고 있기 때문에 <! -와 ->를 생략해도 거의 문제 없을 것입니다.
<html>
<head>
<styletype="text/css">
<!-
p{color:red; line-height:1.5;}
->
</style>
</head>
<body>
<p>html 에 css 적용하는 두번째 방법입니다</p>
</body>
</html>
3. 사용하고자 하는 요소에만 style 속성을 넣어서 적용하는 방법
다음은 적용하고 싶은 요소에 style 속성을 추가하여 HTML 소스에서 직접 스타일 지정을 설명합니다. style 속성에 의한 스타일 지정을하는 경우에는 문서에 사용되는 스타일 시트 CSS로 것임 브라우저 등에 알리기 위해 <head> 요소 내에 <meta> 요소를 설명하고 스타일 언어 값을 text / css를 지정합니다. 종종이 지정을하지 않아도 브라우저에 의해 자동으로 결정되지만, 오작동을 피하기 위해 작성하는 것이 좋습니다.
또한, style 속성에 의한 스타일 지정은 부분적으로 스타일을 재정의 할 때 등에 유용하지만, HTML 소스가 복잡해지고 스타일 관리가 복잡해지기입니다. 효율적인 스타일 관리를 목표로하는 경우에는 CSS 부분을 외부 파일 화하는 것이 일반적입니다.
<html>
<head>
<meta name= "Content-Style-Type" content= "text/css">
</head>
<body>
<p style= "color: blue; line-height: 1.5;">html 에 css 적용하는 세번째 방법입니다 </p>
</body>
</html>