웹마스터 팁

  2. Support
  3. 웹마스터 팁

DHTML의 시작 - CSS와 객체 관계

2002.04.12 19:19

Legend

저번시간에는 객체지정법에 대해서 알아보았죠..
오늘은 이어서 DHTML의 필수인 CSS의 전반적인 개념과 객체의 종류에
대해서 알아보도록 하겠습니다. (이번에 내용이 제일 중요할 듯..)
먼저 CSS(Cascading Style Sheet)는 좀더 효율적으로 웹문서를 제작하기
위해 개발된 것으로 구조적인 웹문서 제작을 위해서 필수적이라 할수 있지요.
(익스3.0이상 넷스4.0이상부터 지원)

문서에서 스타일을 지정하는방법은 3가지가 있는데 아래와 같이 사용됩니다.
link, embed, inline방식이 있지요. 이름은 잘 몰라도 태그를 보시면 금방 아실 겁니다.
link방식 : <link rel="StyleSheet" HREF="스타일파일(style.css)" type="text/css" title="style">
embed방식 : <style type="text/css">스타일</style>
inline방식 : <태그 style="스타일">

여기서 CSS라 함은 link방식과 embed방식을 말하지요.
또한 link방식과 embed방식은 단지 파일로 따로 만드는 것을 제외하고는 동일하므로
embed방식 만을 설명하도록 하지요.

CSS문법도 양이 상당하므로 간단히 주로 쓰는 것만 소개하고 넘어가지요.
<style type="text/css">
tag { 스타일1;스타일2; }    예>> input { width:100; height:20 }   적용>  <input ... >
.class { 스타일1;스타일2; } 예>> .input { width:100; height:20 }  적용>  <input class=input... >
#id { 스타일1;스타일2; }    예>> #input { width:100; height:20 }  적용>  <input id=input... >
</style>

다음으로 객체 선택자의 종류를 알아보도록 하지요.
id, name 2가지가 있지요.. 그럼 차이점을 알아보도록 하지요.
일단 객체의 특성은 문서내의 유일성이라고 생각하시면 됩니다.
문서내에 오로지 하나만이 존재하는 것이 객체인 것이지요.

아! 먼저 또 그림하나 그려보구 보면서 설명하는 것이 쉽겠네요.

     document
        |
------------------
|                |
all    forms, images, links <<-- 객체그룹(객체그룹도 all에 포함됨)
|                |
id             name, id  <<-- 객체지정

위 그림은 대충 이해하기 쉽도록 객체의 상하 관계를 도식화 한 것이지요.
무슨 그림인지 모르시겠다구요? 그럼 설명을 드리지요..
id, name 두개 다 객체를 지정하는 선택자입니다. 요건 다들 아실 겁니다.

차이점을 에를 들어 설명하는 것이 쉽겠군요.
<div id="test">, <div name="test">
위 둘중 객체로 지정할 수 있는 것은 어느 것일까요?
물론 첫번째 것만 가능하지요..

<img id="test">, <img name="test">
그럼 위에 것은 어떨까요? 둘다 가능하겠지요?

네.. 바로 객체그룹이 있는 것은 name과 id로 객체지정이 가능하지만 객체그룹이
없는 것은 id로만 지정이 가능하답니다. 그리고 CSS에서는 name에 대해서는 속성을
지정하는 것이 없고 id는 속성 지정이 가능하므로 id는 참 기능이 많은 넘이지요.

CSS에서는 id를 부여한 선택자의 스타일을 다양하고 보기 좋게 지정하고
Script로는 id로 지정된 그 객체에 움직임을 주어 동적인 홈페이지를 꾸미는 것이
바로 DHTML(Dynamic HTML)의 핵심이지요. (그래서 DHTML = HTML + CSS + Script(js or vbs)이지요)

어제 배운 내용과 조금은 겹치는 내용이지만 또 객체를 지정하는 방법을 알아봅시다..

먼저 document.all이란 놈을 좀더 자세히 알아봅시다..
alert(document.all) 해보면 [object]라는 경고창이 뜨지요.
좀 싱겁지요. "난 객체야!" 그러구 마니까요.
document.all 안에 도데채 뭐가 들었을까?. 더 궁금하지요? 그럼 한번 확인해보도록 하지요

궁금하신 분들은 아래를 코드를 실행해 보세요.
<script>
var txt=""
for(i=0; i<document.all.length; i++)
  txt+=document.all(i).tagName + " "
alert(txt)
<script>

문서에 들어있는 태그들이 줄줄이 나오지요?
HTML HEAD TITLE .. 주욱 나올겁니다.
(document.all은 문서에 태그가 아무것도 없어도 HTML HEAD TITLE은 기본으로 가지고 있음)
확인해보니 all이란 놈은 문서내의 최상위 객체로 모든 태그를 객체화해서 배열로 담고 있는
놈임을 알수 있을 겁니다. 이런 생각이 안들면 다른 태그들도 좀 넣어보시고 코드를 다시 실행해
보세요. 자바스크립트에서 중요한 부분이니 꼭 이해하시셔야 합니다.

그럼 다음으로 넘어가서..이미지 태그를 예로 들어보도록 하지요.

<html>
<head>
</head>
<body>
<img src="test.jpg" width="100" height="100" id="test">
</body>
</html>

위 태그는 객체로 지정되었음을 id를 보구선 알수 있겠지요.
(객체그룹은 id, name 아무거나 쓰셔도 상관없습니다. 둘다 쓰셔도 되구요)
그럼 어떻게 객체를 부르는지 적어보도록 하지요.
document.all.test 기본적으로 이렇게 적을 수 있겠지요.
document.all(4) 위에서 배운 것을 토대로 요렇게도 되지요.(HTML:0, HEAD:1, TITLE:2, BODY:3, IMG:4 <<-- 요렇게)
document.all[4]
document.all('test') 배열으로 보면 id는 key값이 되지요..
document.all['test']
document.images.test 객체그룹을 이용하여.. 이렇게도..
document.images[0]
document.images(0)
document.images['test']
document.images('test')
.....
이밖에도 여러가지 있지요.. 대부분 한가지만 알고 계신 분들이 많은데..
이런 방법도 있구나 아시면 다음에 도움이 될겁니다.
많으면 해깔리기만 하지 뭐가 좋을까 하고 생각할수 있지만
많으면 여러가지 편리한 점이 많답니다. 코딩시 코드를 단순화하는데 도움이 많이 되므로
좀더 빠른 응답성과 메모리 사용을 줄일 수 있으므로 좋지요.
(요즘은 컴터들이 좋아서 못느끼시는 분들이 많겠지만..
저같이 아직 셀466같은 저사양의 컴을 쓰시는 분들은 스크립트에 따라
속도 차이를 많이 느끼지요.. ^^;)
암튼 그렇습니다.

그럼 이제 마무리 하면서 정리 몇가지 하도록 하지요.
객체그룹이 있는 것은 name과 id로 객체 지정이 가능하고 객체그룹이 없는 것은 id로만 가능하고
객체그룹은 또한 all이라는 최상위 객체그룹으로 대체가 가능하다.
CSS와 같이 쓰는 id란 넘은 무쟈게 중요하다. 요정도 겠군요..

중요한 걸 빼먹었군요.. 객체그룹이 있는 태그에서 객체를 name으로 지정시 객체그룹을 생략해도
무방하지요.. 단 id로 지정시는 꼭 객체그룹을 지정하여야 합니다.
<img src="test.jpg" width="100" height="100" name="test">
document.test <<-- 가능
<img src="test.jpg" width="100" height="100" id="test">
document.test <<-- 불가능

음.. 빠진 내용이 없는가 모르겠네요.. 생각나는데로 막 적다보니.
왠지 원래 할려던 얘기가 딴얘기만 흐른듯 한 기분이 드네요.. 다쓰구 나니 제목도 좀 고쳐야 할듯..
암튼 내용중 궁금한 점은 코멘트에 남겨주세요. ^^;
PS. 제가 사용하는 용어들은 표준 용어인지 어떤지는 몰라욤.. 그냥 생각나는데로 지껄이는 거라..
역시 용어가지구 딴지 걸지 마시길..
이 게시물을
수정 삭제
좋아요
목록
태그 쓰기