태그매니아 HTML 부문

아디

비번

0 분

19 분

CSS 강좌 1. 스타일시트 특강1
	[1][2][3]

기존에 태그매니아 고급강좌부분에 스타일 시트를 2페이지 분량의 간단하게 올려 놨었는데요..... 많은 분들이 그것으로만은 스타일 시트가 뭔지 감이 잡히질 않는 다는 말씀을 하셔서 이번 업데이트 때 스타일 시트 특강을 마련하게 되었습니다. 스타일 시트 역시 기초부터 차근차근 설명해드릴 텐데요...... 제 강좌만 잘 따라오신다면 스타일시트는 자바스크립트 보다는 훨씬 쉽기 때문에 태그처럼 일주일안에 다 배우 실 수 있을 겁니다. 단, 태그나 자바스크립트 역시 마찬가지이지만 태그매니아에서는 어느 정도 중급수준까지는 올려 주지만 나머지 응용부분에서는 여러분들이 직접 웹서핑을 하면서 하나하나 경험하면서 배우셔야 할 겁니다. 그래야 실력도 금방 금방 늘게되고...또한 제가 늘 시간이 많은 게 아니라서요.....응용강좌까지 할려면 내년 이맘때 쯤이 되어야 할 수 있을 까요? 물론 그때까지 태그매니아 홈페이지가 존재한다면은요...^^ 그전까지는 자기가 직접 찾아가면서 배우셔야 할 겁니다. 흠.....^^ 왠지 두부(頭部)가 길어지는데......그럼 이제부터 스타일 시트 특강을 시작하도록 하겠습니다. 잘 보고 배우시길 바랍니다.

※ 스타일 시트(Style Sheets)란?
뭔가를 배우더라도 자신이 지금 배우고 있는 것이 무엇인지는 알고 있어야 겠죠? ^^ 스타일 시트(css)란 쉽게 말해서 HTML의 단점을 보완하기 위해서 나온 언어(?) 라고 할 수 있습니다. 기존에 HTML의 경우 일일이 폰트, 색상, 크기 등을 다 적어주어야 했는데요.....하기사 요즘은 워낙 좋은 웹에디터들이 많이 나와서 일일이 다 태그를 입력하는 일은 없을 텐데요....웹에디터가 없었을 땐 태그명령어를 모두 다 손으로 키보드를 눌러가며 입력해서 홈페이지를 만들 었답니다. 이렇게 하다보니깐 홈페이지 하나 만들려면 시간과 노력이 엄청나게 들어가게 되었죠. 그래서 생각해 낸게 스타일 시트랍니다.

※ 스타일 시트의 장점

일단 웹페이지 관리가 쉬워 집니다.
태그를 입력할 때보다 손이 덜 아프답니다. -_- ;;;
웹페이지를 전보다 멋지게 꾸밀 수 있습니다.
로딩시간도 오래 걸리지 않습니다.
배우기 쉽습니다.
왠지 멋져보입니다. ^^

구체적으로 말하자면 기존에 태그만을 이용할 때는 웹페이지의 2개 이상의 폰트를 정해줄 때 글자마다 각기 다른 폰트명을 적어 주어야 했었는데...스타일 시트를 사용하면 간단하게 몇 줄만 적어주면 모든게 끝나게 되죠. 예를 한번 볼까요?

<html>
<head></head>
<body>
이건 예제입니다 
태그매니아 
예제 끝입니다.
</body>
</html>

<html>
<head>
<style type="text/css">
font { font-size: 12px; font-family: 궁서체; }
b { font-size: 14px; color : red; font-family : 돋움체; }
</style>
</head><body>
이건 예제입니다. 태그매니아 
예제 끝입니다.</body>
</html>

위에 예제를 보면...흠...글쎄....하시는 분들도 계실텐데..... 언듯 보기에는 글자수가 비슷해 보일지는 몰라도 웹페이지가 위에 예제처럼 딸랑 3줄로 끝나고 마는 웹페이지는 없죠. 대부분이 엄청난 양의 태그명령어를 필요로 하지만 스타일 시트를 이용하면 각각의 태그를 공통분모로 잡아줘서 그 상태를 설정해주기 때문에 훨씬 간단하게 웹페이지를 만들 수 있답니다.
흠....-_-;;; 몇 마디 하다보니 벌써 웹페이지 한장이 가득 찼네요. 다음 페이지에서 계속 하도록 하겠습니다.

메인 페이지로 || 태그연습장 || 다음 페이지로



연습장	메모장	알FTP	wsftp

유용한 팁