웹마당넷 |CSS 강좌 - [제01강] 스타일 시트(CSS)의 기본 개념 및 3가지 사용방법

제 목

CSS 강좌 - [제01강] 스타일 시트(CSS)의 기본 개념 및 3가지 사용방법

작성자

컴쟁이

등록일

2008-12-12 15:41:41

조회수

14,088

HTML을 사용하다보면 글자의 속성을 바꾸어야 할 경우가 많이 발생한다. 이때마다 글자 속성을 바꾸면 HTML 코드도 길어질 뿐만 아니라 계속해서 바꿔주어야 하는 번거로움이 있다. 아래아한글이나 MS-워드의 스타일 기능과 같이 글자의 속성을 미리 정해 놓고 전체 또는 부분적으로 이를 적용해 주는 기능이 바로 CSS이다. 자~~ 지금부터 강좌를 시작해 보려한다.

1. 스타일 시트(CSS)란?

CSS는 Cascading Style Sheet의 줄임말로 일관성있는 웹 페이지를 작성하도록 도와준다. 또한 수정시에도 일괄적으로 변경이 가능하므로 웹 페이지 제작 측면에서도 상당히 효율적이라 할 수 있겠다. 짜임새 있는 웹페이지를 구성하며 코드의 길이도 줄일 수 있는 웹 페이지 방법론 중 하나라 보면 된다.

2. CSS의 3가지 방법

◈ 외부 스타일 시트 ☏ (External Style Sheet)	확장자를 CSS로 하여 스타일 파일을 별도로 만들어 웹 문서와 외부에서 연결하여 사용하는 방법이다. HTML 코드내에 있지 않으므로 웹 문서의 길이를 가장 많이 줄일 수 있는 있지만 계속적인 외부 스타일 시트 파일을 관리해 주어야 하는 번거로움이 있다. 하나의 파일이 아닌 여러개를 만들어 사용하다보면 복잡해지지만 볼륨이 웹 페이지 제작시에 사용하면 그 효과를 극대화시킬 수 있겠다.
◈ 내부 스타일 시트 ☏ (Internal Style Sheet)	하나의 웹 페이지내(Head 태그 내)에 매번 한 번씩만 정의해 주는 방법으로 따로 파일을 만들필요는 없다. HTML 코드내에 노출이 되어 있으므로 외부 스타일 시트보다 웹 문서의 길이가 길어진다.
◈ 문장내 스타일 ☏ (Inline Style)	웹 페이지 문장내에서 사용하는 방법으로 외부나 내부처럼 미리 정의해 놓은 것이 아니라 즉흥적으로 사용이 가능한 방법이다. 웹 문서의 길이가 제일 길어지고 일괄적인 수정이 힘들어지므로 비효율적으로 보일 수도 있지만 때로는 강조를 위해서는 필요하기도 하다.

3. 외부 스타일 시트 (External Style Sheet)의 사용방법

[Source]	[Description]
<html> <head> <link rel="stylesheet" type="text/css" href="extnlstyle.css"> </head> <body> <h1>외부 스타일 시트 사용</h1> </body> </html>	-> extnlstyle.css에 스타일을 정의(내부스타일과 정의하는 방법 동일)하여 저장하고 이를 연결 -> 본문 내용에 외부 스타일 적용

[External File Source] => extnlstyle.css	[Description]
h1 { font-size:10pt; font-family:바탕; color:green; }	-> 스타일 이름은 h1 -> 글자 크기는 10포인트 -> 글자체는 바탕 -> 글자색은 초록으로 지정

[Result]

외부 스타일 시트 사용

4. 내부 스타일 시트 (Internal Style Sheet)의 사용방법

[Source]	[Description]
<html> <head> <style tpye="text/css"> <!-- h1 { font-size:10pt; font-family:굴림; color:red; } --> </style> </head> <body> <h1>현재 적용된 스타일은 h1</h1> </body> </html>	-> 외부스타일을 따로 정의 하지 않고 HTML <Head> 태그내에 정의 -> 스타일 이름은 h1 -> 글자 크기는 10포인트 -> 글자체는 굴림 -> 글자색은 빨강으로 지정 -><head> 태그 내 정의된 스타일을 본문 내용에 적용

[Result]

현재 적용된 스타일은 h1

[☞Information]

스타일 시트를 정의하지 않고 <h1> 태그를 사용한다면 글자 크기는 24pt 정도의 출력되어질 것이다. 그러나 <h1>의 스타일을 위와 같이 10포인트, 굴림체, 빨강으로 지정하고 본문에 <h1> 태그를 적용한다면 본래의 속성은 없어지고 스타일에 정의된 속성으로 바뀌어 출력되게 되는 것이다.

5. 문장내 스타일(Inline Style)

[Source]	[Description]
<html> <body> <p style="font-family:궁서">본문에 바로 적용한 스타일</p> </body> </html>	-> 본문 글씨체를 궁서로 스타일 적용