HTML5와 CSS3 개요 5 – IT와 전인적 사고

웹페이지에서 CSS를 쓴다는 지정을 하려면 CSS 파일을 연결해주어야 한다. 연결하는 방법으로는 크게 두가지 유형이 있는데, 내부 스타일시트와 외부 스타일시트가 그것이다.

내부 스타일시트는 HTML 문서 안에 스타일시트를 직접 지정해서 기재하는 방법이고, 외부 스타일시트는 별도의 파일에 지정해서 기재해놓고 HTML에 연결시켜 쓰는 기법이다.

보통 외부 스타일시트를 추천한다. 내부 스타일시트를 쓰게 되면 HTML 문서마다 각각 기재해야 하므로 수정보완을 해야 할때 번거로워진다. 스타일에 변화를 주어야 할때 HTML마다 각각의 다 고쳐야 해서 번거로워지기 때문이다. 외부 스타일시트를 쓰면 스타일시트 파일 하나에서 고칠 수 있어서 좋다. 물론 경우에 따라 스타일시트 파일을 여러개 만들 수 있는데 이역시도 각각의 HTML 파일을 고치는 것보다 편리하게 고칠 수 있을 것이다.

내부 스타일시트 지정 방법
웹페이지의 HTML 코드 안에 <style> 태그를 써서 그 블록 안에 스타일시트를 지정하는 방법이다.

<style>
	body { 
		margin-top: 10px; 
	}
	
	p {
		line-height: 160%;
	}
</style>

이 기능은 HTML 코드의 일부분인 <style> 태그를 써서 웹페이지 파일에 직접 지정하는 방법이다. 보통 <head> 태그 블록 사이에 둔다.

HTML5 미만 버전에서는 <style type=”text/css”> 라고 type 속성을 기재해야 했다. HTML5는 <style> 이라고만 해도 된다.

내부 스타일시트는 모든 HTML 페이지에 다른 CSS가 지정되어 있으면 수정보완이 번거롭게 된다. 그래서 외부 스타일시트를 추천한다.

외부 스타일시트 지정 방법
외부 스타일시트는 독립된 CSS 파일에 스타일을 지정하고 이를 HTML 파일에 연결하는 방법이다. 하나만 정의해두면 여러 HTML 파일에서 참조가 가능하게 할 수 있어서 편리하다.

HTML5에서는 <head> 태그 안에

<link rel="stylesheet" href="style.css">

라고 하면 된다.

HTML4.01에서는

<link rel="stylesheet" type="text/css" href="style.css">

처럼 type 속성을 주어야 하고 XHTML에서는 태그 마지막에 /를 더해야 한다.

<link rel="stylesheet" type="text/css" href="style.css" />

아래와 같은 연결 방법도 있다.

<style>
     @import url(style.css);
</style>

CSS 스타일 여러개를 지정하려면

<style>
    @import url(style1.css);
    @import url(style2.css);
</style>

처럼 하면 된다.

이 글은 “세상에 없던 가장 꼼꼼한 매뉴얼” (원제: CSS3 The Missing Manual) 을 읽고 제 스스로의 표현으로 정리한 글입니다. 참고가 되실 것입니다.

답글 남기기 응답 취소