div 태그의 사용법에 대해 알아봅시다.

(짤방은 요미코 리드맨. 쭉빵에 긴 생머리 누님 만세! >ㅁ<)

일단 div 태그가 무엇이느뇨...라고 물으신다면

단락 편집 태그로 각 문단 사이에 빈 줄을 추가되지 않는 것을 제외하고는 <P>태그의 기능과 동일하다.라고 하는군요.

정확히 말하면 divide 의 약자인 div 겠지만 divine 태그라고 제맘대로 부르고 있습니다 (.....)

그럼 사용법에 대해 알아봅시다.

일단 가렸다 보였다 하는 태그에 대해 알아보죠.

(표기의 편의상 필요하다 생각하는 부분에서 엔터를 쳐서 줄을 바꿨으나,
원래는 모두 한줄에 기입해야 쓸데없는 줄떨어짐을 막을 수 있습니다)

<div id='71nag_click1'>
<a href="#none" onclick=document.getElementById('71nag_more').style.display='block';document.getElementById('71nag_click1').style.display='none';document.getElementById('71nag_click2').style.display='block'>열기클릭할때 쓸 말</a></div>
<div id='71nag_click2' style="display:none">
<a href="#none" onclick=document.getElementById('71nag_more').style.display='none';document.getElementById('71nag_click2').style.display='none';document.getElementById('71nag_click1').style.display='block'>닫기클릭할때 쓸 말</a></div>
<div id='71nag_more' style="display:none">
글내용
</div>

제가 쓰는 형식의 div 태그입니다.

태그 제공자는 Color님이십니다. 심심한 감사를 드립니다 (__)

보면 more, click1, click2가 있는데, 위에서 같은 타겟(괄호 안의 글자)는 나중에 쓰실때도 같게 해주셔야 합니다.

또한 div 태그를 쓰시는 많은 분들의 실수가, 밑에서 썼던 태그를 그대로 올려와 가져오신다는겁니다.

div 태그에서 열리고 닫히는것은 괄호 안의 글자, 즉 타겟을 지정해서 열리고 닫히는건데, 이것은 위에서부터 검색해서 내려오게 됩니다.

만약 어제 쓴 글과 오늘 쓴 글에 타겟을 같은거로 설정했다면,

어제 쓴 글에서 div 태그를 열려 했을때 어제 쓴 글이 열리는 것이 아니고 더 위에 있는 오늘 쓴 글의 div 태그가 열린다는겁니다.

글 위에서는 상당히 뜬구름잡기지만 한번만 실수하시면 어떤의미인지 아실겁니다.

저같은 경우는 a b c d의 알파벳대로 나가다가 다 쓰고 이제는 숫자로 나가고 있지요.

아무튼 div 태그를 쓰지 않고도 열고 닫는법을 어디선가 본거 같은데 기억이 안나구요...

응용해서 div 태그 안에 div 태그를 넣을수도 있습니다.

배반의 장미

에 사용했던 div 태그입니다.

<div id='10nag_click1'>
<a href="#none" onclick=document.getElementById('10nag_more').style.display='block';document.getElementById('10nag_click1').style.display='none';document.getElementById('10nag_click2').style.display='block'>열기내용 1</a></div>
<div id='10nag_click2' style="display:none">
<a href="#none" onclick=document.getElementById('10nag_more').style.display='none';document.getElementById('10nag_click2').style.display='none';document.getElementById('10nag_click1').style.display='block'>닫기내용 1</a></div>
<div id='10nag_more' style="display:none">
<div id='12nag_click1'>
<a href="#none" onclick=document.getElementById('12nag_more').style.display='block';document.getElementById('12nag_click1').style.display='none';document.getElementById('12nag_click2').style.display='block'>열기내용 2 겸 본내용 1</a></div>
<div id='12nag_click2' style="display:none">
<a href="#none" onclick=document.getElementById('12nag_more').style.display='none';document.getElementById('12nag_click2').style.display='none';document.getElementById('12nag_click1').style.display='block'>닫기내용 2</a></div>
<div id='12nag_more' style="display:none">본내용 3
</div>
</div>






또한, 저기 위에 쓴 베이지색 박스도 div 태그로 만든겁니다.

자세한 사용법은

Moo!! 님

박스 태그
-div 태그 자체를 사용하는 방법입니다.

박스 태그 - 만든 스킨을 사용할 경우
-이글루 스킨 CSS에 약간의 수정을 가해서 편하게 쓰는 방법입니다

박스 태그 - 이미지 배경
-위의 이글루 스킨 CSS 수정버전에서 배경에 이미지를 사용하는 방법입니다.

샐리 님의
포스트에 직접 넣는 박스태그 + 스크롤바 종합
-기본 박스 태그에 위아래길이 제한과 스크롤바를 두는 방법입니다.

에 가셔서 보길 바래요.

각각 용도가 다를테니 스스로 알아서 사용해주세요.


태그를 아는 방법은 무엇보다 소스를 뜯어서 직접 알아내는겁니다.

html 언어는 그다지 어렵다고는 말할수 없으니 하나하나 배워가보는건 어떨까요 '3'/

모르겠다! 라고 조금이라도 느끼신다면 리플을 달아주세요.

가능한한 알려드리도록 하겠습니다.



from ALBATROS.K the Fanatic
by 알바트로스K | 2004/08/17 12:43 | 할것 | 트랙백(8) | 핑백(2) | 덧글(27)
트랙백 주소 : http://albatrosk.egloos.com/tb/238231
☞ 내 이글루에 이 글과 관련된 글 쓰기 (트랙백 보내기) [도움말]
Tracked from 태공과 영어의 판타지 .. at 2004/08/19 21:09

제목 : 알밭 폥의 홈에서 스틸(...)
div 태그의 사용법에 대해 알아봅시다. 고마워요 알밭.. 잘 쓸께요 크흐흑... 편히 잠들어요...more

Tracked from 사각사각의 아스트랄 월드 at 2004/12/26 08:12

제목 : 좋아...
div 태그의 사용법에 대해 알아봅시다. 나도 이제 이 태그를 써서 좀 더 포스팅을 해보는거다 -ㅁ-!! [라고해도 가릴정도로 긴 포스팅이 얼마나 될까...]...more

Tracked from 폭렬 어트레인저 우주모함 at 2005/02/01 04:48

제목 : div 태그 - 응용편
(그래봤자 합성이에요.) 제가 사용하는 div 태그로 열고닫기는 상당히 복잡하지만 그 응용방법도 적지 않습니다. 그럼 조금 어렵더라도 배워보기로 할까요. &lt;div id='71nag_click1'> &lt;a href="#none" onclick=document.getElementById('71nag_more').style.display='block';document.getElementById('71nag_click1').style.display='none';document.getElementB......more

Tracked from Ciao, der Fr.. at 2005/07/05 23:08

제목 : 오늘 배운 태그 하나
div 태그의 사용법에 대해 알아봅시다. <'/div>를 이용한 열고닫기 태그 'ㅁ' more 기능의 '열린다'만 지원하는 것과 '댓글까지 다 나온다', 그리고 '밸리에서 들어올 때 숨김 기능이 지원 안된다!' 는 고질적인 문제점 해결을 위한 디바이드 태그의 기본폼을 담아왔다. ~_~ 이제 열고닫기를 마음대로 할 수 있다 랄랄라 예를 들면... 누르면 닫힌다 오늘의 한 일 : 학원 운동 목욕 엄마랑점심 소포 서점놀이 만화방 오늘의 할 일 : 디아워스 관람 ......more

Tracked from 사바욘의 알프레드 소즈.. at 2005/08/03 14:14

제목 : 블로그실험
드디어 알았다 열기클릭할때 쓸 말 닫기클릭할때 쓸 말 글내용 열기클릭할때 쓸 말 닫기클릭할때 쓸 말 글내용 z 이어지는 내용 이어지는 내용...more

Tracked from ♪、劉즈페이加油 -我都.. at 2005/08/18 20:12

제목 :
div 태그의 사용법에 대해 알아봅시다. 좋다<...more

Tracked from 고시공부하는 연애인. at 2006/10/24 20:39

제목 : 알바트로스크?
div 태그의 사용법에 대해 알아봅시다. 아... 고등학교 때쯤인가. 홈페이지를 만든다고 미친듯이 태그가 어쩌니 명령어가 어쩌니 이런 걸 독학했던 적이 있었다. 꽤나 멋진것들 많이 안다고 뿌듯해 했었는데 이제는 하나도 모르겠다. 심지어 노래 띄우는 법도 기억이 안 나; ...more

Tracked from BLUE at 2007/11/06 17:25

제목 : 아, 오랬동안 찾아 헤맸던 내용...얼마나 찾았던가..
div 태그의 사용법에 대해 알아봅시다. 드뎌 나도 "열기", "닫기" 를 사용할 수 있따아~~~...more

Linked at . . . . : 스킨 변경 아우 at 2007/07/09 17:11

... trio.co.kr/ http://omylove.egloos.com/255194지금 쓰고 있는 이 박스 테그는 알바트로스님에게서 배었습니다http://albatrosk.egloos.com/238231 ... more

Linked at 지옥에서 도망가는 마차에 올라.. at 2008/06/09 02:08

... g:9px; border-width:1px; border-style:dotted; width:100%;"&gt; 내용 &lt;/div&gt; 열고접는 태그 알바트로스.K님 1 2 3 ... more

Commented by 계란소년 at 2004/08/17 13:01
...아, 이 글 보기 7일 전에 알았습니다.
(그냥 소스보기로 해치웠지만...)
Commented by 리오네스 at 2004/08/17 13:02
꽤 어렵군요;

그래도 모어기능보다 보는 사람들이 편리하니 사용해 봐야겠네요.
Commented by Redsoul at 2004/08/17 13:28
와, 이제 더 이쁘게 이글루 포스트를 붙일수 있겠어요ㅋ(근데 어렵군요)
좋은거 배워갑니다!^ㅡ^
Commented by 베라모드 at 2004/08/17 13:55
흐음 그냥.... 대충대충
Commented by 쥬리스 at 2004/08/17 16:32
...저거, 더 단축 시키는 방법이 있을텐데. -버엉
Commented by JOSH at 2004/08/17 16:37
가슴이 다운사이징 ...
Commented by 끄레워즈 at 2004/08/17 16:58
흐으음~ 귀찮아[...]
Commented by leygo at 2004/08/17 17:20
어렵...
그리고 요미코 누님의 중대한 매력이 하나 빠졌죠. "안경"
Commented by 鬼畜の100 at 2004/08/17 17:29
....좋은 정보 감사합니다...
근데 귀차니즘은 못 이깁니다..orz (빠각)
Commented by エルザム at 2004/08/17 18:29
상당히 어려웠다고 생각하는데;;;; 감사합니다.
Commented by chelsea at 2004/08/17 18:33
상당히 유용한 태그네요. 사실 알바트로스K님 블로그의 소스를 보고 대강은 알아챈 거였지만, 몰랐던 부분까지 상세하게 짚어주시니 감사합니다. (하지만 언제 응용할 지는 알 수 없음...OTL)
Commented by 狂風 at 2004/08/17 18:35
유용하군요. 지만, 모르겠다! ...라지만 역시. 궂이 알려주실 필요는 없습니다(...)
Commented by Nakoruru at 2004/08/17 19:31
팁 감사합니다. ^^
Commented by 알트아이젠 at 2004/08/17 20:10
박스태그를 자주 쓰죠~
Commented by arbiter1 at 2004/08/17 22:37
어렵...(좌절 중)
Commented at 2004/08/17 23:05
비공개 덧글입니다.
Commented by 산왕 at 2004/08/18 00:40
봐도 이해가 잘...
Commented by andRe at 2004/08/18 09:07
열고 닫을때의 말을 바꾸지 않는다면 상당부분 줄일수 있지요.
마구 남발하고 마무리에 </div>를 연발하는 것이 포인트
Commented by 캡틴터틀 at 2004/08/19 03:37
유용한 정보 감사합니다.
Commented by 알바트로스K at 2004/08/19 09:52
계란소년님 // 좋은 자세 -ㅂ-/
리오님 // 그냥 긁어서 붙여넣기만 하면 되용.
레드솔님 // 생각보다는 쉽죠;
베라님 // 좋은 자세 겔겔
쥬리스냥 // 어디선가 봤는데 생각이 안나요
조쉬님 // .......
끄레옹 // 그러면서 요새는 잘만쓰잖수 ㅡ_-;
레이고님 // 오호. 그런데 전 별로 안경에 버닝이 아니라서요
귀축님 // ......
엘잠님 // -ㅂ-/
첼시님 // 응용기는 저도 귀찮아서 잘 안써요 흑흑
광풍님 // 절언 (......)
나코루루님 // 'ㅂ'/
알트님 // 옛날부터 자주 쓰시더군요 'ㅅ')
아비터님 // 그냥 넣기만 해주면 되요
산왕님 // 나중에 조교해드릴게요 -_+
앙드레님 // 그것!
거북이님 // '3'/
Commented by 사각사각 at 2004/12/26 08:11
으음 -_- 태그라고 짐작은 했지만 역시 태그였군요 사용법도 알아갈겸 트랙백 하겠습니다 ^^;
Commented by 바퀴벌레가싫어 at 2005/01/29 23:45
저도 테그를 좋아하는 바람에 좋은 테그 구경하고 복사해 갑니다 ~ (?) (일일이 사이트 들어가서 복사후 붙여넣기중..)퍽퍽
Commented by 조짱 at 2005/02/02 08:42
알수가없어 ;ㅁ;
Commented by [박군] at 2005/03/16 14:45
매우 매우 감사합니다. 좋은 참고가 되었습니다.
Commented by ORT-IV at 2005/06/06 18:16
감사합니다.
방금 어느정도 이해하고 블로그에 적용시켜봤습니다.
꽤나 편하군요.
Commented by iamsheep at 2005/10/02 22:20
잇힝 감사합니다 ^^
Commented by 레이나드 at 2006/03/02 00:58
좋은정보 감사합니다 (__)

:         :

:

비공개 덧글

◀ 이전 페이지 다음 페이지 ▶



꾸러기수비대. 발진!
by 알바트로스K
Calendar
메모장



의 블로그에 어서오세요~
(......)

MSN:
albatros-k@hanmail.net
이래저래 공지
Hanirc
채널 egloos
모여봅시다!
자세한건 여기로

이래저래 공지 2
휘긴卿을 따라서 종교지도자가 되기 위한 수련..이 아니고

문과레벨 과학 상담 받습니다. 접근은 e메일, 리플, 트랙백 등등 가능한한 모든 수단으로 가능합니다.

마이너동맹

자기소개


카테고리
전체
볼것
읽을것
할것
생각해볼것
들을것
먹을것
즐거운 일상생활

사람들
장소
야한이야기
미분류
이전 블로그
more...
최근 등록된 덧글
헉(...) 찾아봤는데..
by 쿠락구 at 04:09
12월1일에 봤었는데 별의..
by ㅇ_ㅇ at 12/04
……일하다가 담배피우러..
by 레몬향가득 at 12/04
어제 저거 보고 엄청 웃..
by memi at 12/03
아놔 욕나올라고 한다 이..
by 아놔 at 12/02
오늘은 아까 식당에서 ..
by lchocobo at 12/02
^^ 또 즐겁게 보고 갑..
by 깡지 at 12/02
짝눈이니까... : D 가 ..
by 쿠락구 at 12/02
역시 복숭아는 통조림(..
by 글씀 at 12/02
월요일 하늘이네
by 태공 at 12/02
최근 등록된 트랙백
NeXT의 생각
by next's me2DAY
멜라민 식탁공포 이번만..
by 경남 뉴스 파워 블로그
southstep의 생각
by southstep's me2DAY
멜라민, 모노머와 수지..
by LIFE in Maryland
19세이상만보세요
by 박민성의 연습장
라이프 로그
숨겨진 힘 - 사람
숨겨진 힘 - 사람

또라이 제로 조직
또라이 제로 조직

십이국기 박스 세트 2
십이국기 박스 세트 2

십이국기 박스 세트 1
십이국기 박스 세트 1

엠마 1~6 세트
엠마 1~6 세트

Numbers 넘버스
Numbers 넘버스

영한사전 비판
영한사전 비판

이글루 파인더
rss

skin by zodiac47