스킨제작을 위한 CSS 기초강의 [1] - CSS를 사용해야만 하는 이유
코덕질/해탈내역들 2009/02/14 13:23
요즈음 제 주위에서 CSS에 대한 질문이 많이 오는 터라서, 비록 고수는 아니지만 스킨 제작에 도움이 될 법한 간단한 CSS 기초강의를 써 보려고 합니다 ^^;..
CSS 조작을 위한 본격 강의 전에, 왜 CSS에 대한 기초지식이 스킨제작에 중요한 비중을 차지하는지를 통해서 동기부여를 하려고 합니다.
먼저, CSS는 이런 형식으로 적용이 가능합니다 -
하지만 이런 식으로도 적용이 가능할 겁니다 -
그렇다면 굳이 왜 같은 결과를 낼 수 있는 방법이 있는데도 CSS를 사용하게 되는 걸까요? 바로 통일성입니다.
div 태그의 경우만 해도, width와 height 속성이 전부가 아닌 id, class부터 onclick, onmouseover과 같은 이벤트 핸들러까지 다양한 인수를 가집니다. 그런데 이 속성들이 div 태그의 외형을 결정하는 다른 태그들과 섞여버린다면 복잡성이 증가함은 두말 할 필요가 없겠죠. 그래서, style 속성을 이용하여 외형을 결정하는 인수들을 한번에 묶어버릴 수 있습니다.
또한, style은 통일된 규격을 사용하기 때문에 어떤 속성에 대해서 한정된 태그가 아닌 다른 태그에도 써먹을 수 있다는 장점이 있습니다. 예시를 보여주자면,
a 태그의 style 속성에 그대로 써먹을수가 있습니다. 일관성이 있다는 것도 또 하나의 장점이 되는 것이죠.
다량의 div 태그들이 있다고 합시다. 이 태그들 모두에 경계선을 지정하려고 합니다. 그렇다면 아마도 이렇게 해야만 하겠죠.
하지만 CSS를 조금 다르게 이용하면 -
이런 방식으로도 쓸 수 있습니다.
타이핑이 줄어들 뿐만 아니라, 훨씬 보기에도 깔끔하고 좋습니다. 작업의 효율성을 증대시켜줌을 알 수 있습니다.
제가 쓴 말들이 모두 올바른 건지, 과연 이점이 되는 건지도 사실 불확실합니다 ^^;.. 하지만 개인적으로나마 제가 생각하는 CSS가 가지고 있는 이점을 쭉 정리해 본 내용인데, 공감하실지는 모르겠지만 동기부여가 되셨다면 그것으로 충분합니다.
다음 포스팅에서는 CSS가 가지고 있는 기초 속성들에 대해서 다루어 보겠습니다. 도움 되셨으면 좋겠습니다.
CSS 조작을 위한 본격 강의 전에, 왜 CSS에 대한 기초지식이 스킨제작에 중요한 비중을 차지하는지를 통해서 동기부여를 하려고 합니다.
1. 통일성
먼저, CSS는 이런 형식으로 적용이 가능합니다 -
<div style="width:500px; height:600px;"></div>
굵은 부분이 바로 CSS(스타일시트)가 적용되는 부분입니다
하지만 이런 식으로도 적용이 가능할 겁니다 -
<div width=500px height=600px></div>
그렇다면 굳이 왜 같은 결과를 낼 수 있는 방법이 있는데도 CSS를 사용하게 되는 걸까요? 바로 통일성입니다.
div 태그의 경우만 해도, width와 height 속성이 전부가 아닌 id, class부터 onclick, onmouseover과 같은 이벤트 핸들러까지 다양한 인수를 가집니다. 그런데 이 속성들이 div 태그의 외형을 결정하는 다른 태그들과 섞여버린다면 복잡성이 증가함은 두말 할 필요가 없겠죠. 그래서, style 속성을 이용하여 외형을 결정하는 인수들을 한번에 묶어버릴 수 있습니다.
2. 일관성
또한, style은 통일된 규격을 사용하기 때문에 어떤 속성에 대해서 한정된 태그가 아닌 다른 태그에도 써먹을 수 있다는 장점이 있습니다. 예시를 보여주자면,
<div style="border-bottom:#f0f0f0 dotted 1px;">ㅇㅁㅇb</div>
border-bottom은 밑의 경계선의 속성을 결정합니다.
div 태그의 속성 style을,<a style="border-bottom:#f0f0f0 dotted 1px;">ㅇㅁㅇb</a>
a 태그의 style 속성에 그대로 써먹을수가 있습니다. 일관성이 있다는 것도 또 하나의 장점이 되는 것이죠.
3. 효율성
다량의 div 태그들이 있다고 합시다. 이 태그들 모두에 경계선을 지정하려고 합니다. 그렇다면 아마도 이렇게 해야만 하겠죠.
<div style="border:1px #cccccc solid">1번 div</div>
<div style="border:1px #cccccc solid">2번 div</div>
<div style="border:1px #cccccc solid">3번 div</div>
<div style="border:1px #cccccc solid">4번 div</div>
<div style="border:1px #cccccc solid">5번 div</div>
......
<div style="border:1px #cccccc solid">2번 div</div>
<div style="border:1px #cccccc solid">3번 div</div>
<div style="border:1px #cccccc solid">4번 div</div>
<div style="border:1px #cccccc solid">5번 div</div>
......
div 태그에 1px 굵기의 경계선을 지정한다는 뜻입니다.
하지만 CSS를 조금 다르게 이용하면 -
<style>
div { border:1px #cccccc solid; }
</style>
<div>1번 div</div>
<div>2번 div</div>
<div>3번 div</div>
<div>4번 div</div>
<div>5번 div</div>
......
div { border:1px #cccccc solid; }
</style>
<div>1번 div</div>
<div>2번 div</div>
<div>3번 div</div>
<div>4번 div</div>
<div>5번 div</div>
......
본문의 모든 div 태그에 1px 굵기의 경계선을 지정한다는 뜻입니다.
이런 방식으로도 쓸 수 있습니다.
타이핑이 줄어들 뿐만 아니라, 훨씬 보기에도 깔끔하고 좋습니다. 작업의 효율성을 증대시켜줌을 알 수 있습니다.
제가 쓴 말들이 모두 올바른 건지, 과연 이점이 되는 건지도 사실 불확실합니다 ^^;.. 하지만 개인적으로나마 제가 생각하는 CSS가 가지고 있는 이점을 쭉 정리해 본 내용인데, 공감하실지는 모르겠지만 동기부여가 되셨다면 그것으로 충분합니다.
다음 포스팅에서는 CSS가 가지고 있는 기초 속성들에 대해서 다루어 보겠습니다. 도움 되셨으면 좋겠습니다.
댓글을 달아 주세요
으음 CSS라는 개념이 머릿속에 없어서(...)
그래도 덕분에 요즘 뭔가 배워가는 느낌입니다.
아직 첫강이라서 별거 없어요 ^^;
감사합니다 :)
CSS라... 그놈 때문에 고생한다는;;;
닫을때 }; 으로 닫아버리면
IE에서는 잘나오는데 나머지 브라우저는 전부 "ㅅㅂ 에러임"이 뜸..
닫을 때에는 반드시 }로 닫아서 웹표준을 지킵시..(도주)
}; 로 닫아도 뜨나여 ㄷㄷㄷㄷㄷ
}로 안닫으시는 분은 처음 봤.. [도주]
하지만 난점은 스타일시트의 문법성이랍니다. 각 브라우져마다 호환이 되지 않기 때문에 CSS핵도 써야 하고, 또한 레이아웃이 제대로 안보일때가 많더라구요. 고게 참 어렵죠;
문법성이기도 하지만 호환성이랄까요?
IE6이 제일 심해요.. 정말 CSS 버그가 셀 수 없이 많아서 -_-;;.. 파이어폭스를 기준으로 CSS를 맞추면 어느 정도는 잘 맞아 들어가더라고요 ㅎ. 핵까지 써야 할 정도로 심하게 일그러진 적은 없었습니다.
Oh, come on, please speak Korean... (음??)
용캐도 스팸 필터링 안되신 건가요 ㄷㄷ [아웃오브안중]
프로그래머, 디자이너의 분업따윈 필요없기에 전 한 페이지에 넣으려고 생ㅈㄹ을 떨어본 적도...;;
무슨 뜻인지 이해가 갈 것 같으면서도 참 어렵군요 (?!)
...역시 난해하군요[마치 시그마를 보는 듯 했습니다 ㄷㄷ]
ㅠ_ㅠ. 나름 쉽게 쓰려고 노력했는데 말이죠.
알 것 같으면서도 모를 것 같은 세상...(먼산)
ㅠ_ㅠ
굳굳! 좋은정보!