illust by 천년의겨울
조회 수 15950 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
많은 분들이 커뮤니티 제작가이드를 원하시고 저스스로도 그런 가이드가 있으면 비툴커뮤니티가 더 활성화 될거라는 생각이 있어서
간단하게 아는 것만 짤막짤막하게 다뤄보려고합니다.
저도 야매로 배운거라서 더 좋은방법이 많을터이지만 유용하게 잘 써주시기바랍니다.
다른 고수분들의 참여도 얼마든지 환영입니다. 1편은 비록 제가 썼지만 2편이든 3편이든 다른분들이 그냥 마음대로 이어주시면 감사하겠습니다. 

비툴 커뮤니티 제작에 필요한 소스는 많지않습니다.
주로 비툴커뮤니티에서는 세계관, 룰, 자유비툴란과 관계비툴란, 몇몇 제로보드 게시판이 쓰이죠.
따라서 별로 어려운 코딩은 필요하지 않습니다.

홈페이지를 시작 하실 때 가장먼저 레이아웃을 나누는데  크게는 프레임형식과 노프레임으로 나뉩니다.
프레임 형식은 일반적으로 비툴 커뮤니티에서 쓰이는 형식인데요
주로 좌측에 메뉴프레임을 배치하고 우측에 내용을 배치하는 형식이 많이 쓰입니다.
이런 경우에는 메뉴가 특별히 길지 않은 이상 모든 해상도의 모니터에서 잘 보인다는 장점이 있습니다.


<html>
<head>
<meta name="GENERATOR" content="Namo WebEditor(Trial)">//이 소스가 나모에서 작성됨
<meta http-equiv="content-type" content="text/html; charset=euc-kr">//인코딩은 euc-kr
<title>제목 없음</title>//페이지의 제목
</head>
<frameset rows="1*" cols="250,*" border="0">//프레임셋을 설정하는내용. 1줄에 2칸이고 왼쪽칸은 250픽셀이고 오른쪽 칸은 창의 크기에 따라 변한다.
<frame name="menu" scrolling="no" marginwidth="0" marginheight="0" namo_target_frame="main" src="list.php">//왼쪽 칸에 list.php를 링크한다. 여기서 링크를 클릭하면 main이라는 이름의 프레임에 내용이 나타나게 된다.
<frame name="main" scrolling="auto" marginwidth="0" marginheight="0" namo_target_frame="_self" src="main.php">//내용이 오는 프레임이고 타겟 프레임은 _self로 자기 자신이다.
<noframes>
<body bgcolor="#FFFFFF" text="#000000" link="#0000FF" vlink="#800080" alink="#FF0000">

<p>To view this page correctly, you need a Web browser that supports frames.</p>
</body>
</noframes>
</frameset>
</html> 


간단하게 나모에서 작성된 동맹홈페이지의 프레임 소스를 가져와봤습니다.

인코딩의 경우에는 만약 ncity에서 계정을 사셨을 경우에는 직접 지정을 하셔야하고, hostple에서 사신다면 자동으로 utf-8로 되고, 그 이외에는 모두 euc-kr을 지원하는 것으로 알고있습니다.

utf-8의 경우에는 일반적으로 제로보드 4를 깔 수없고 제로보드 xe만 깔 수있기 때문에 그 점을 잘 생각하셔서 호스팅업체를 선택하시는 것이 좋습니다.




디자인 적인 측면을 강조한 비툴 커뮤니티의 경우, 최근에는 상단 메뉴형식을 차용하는 경우가 늘고있습니다.

상단에 메뉴를 레이아웃 할 경우, 메뉴의 디자인 혹은 내용의 디자인이 더 확 눈에 들어오게 된다는 장점이 있습니다.

그렇지만 상단메뉴에서 만약 프레임형식을 사용한다면 해상도가 작은 분들이 사용하시기에는 불편한 점이 많습니다. 세로 높이가 250픽셀만 되더라도 이용자에게 상당한 압박감을 주게됩니다.


<html>
<head>
<meta name="GENERATOR" content="Namo WebEditor(Trial)">//이 소스가 나모에서 작성됨
<meta http-equiv="content-type" content="text/html; charset=euc-kr">//인코딩은 euc-kr
<title>제목 없음</title>//페이지의 제목
</head>
<frameset rows="50,1*" cols="1" border="0">//프레임셋을 설정하는내용. 2줄에 1칸이고 윗쪽 칸은 50픽셀이고 아랫쪽 칸은 창의 크기에 따라 변한다.
<frame name="menu" scrolling="no" marginwidth="0" marginheight="0" namo_target_frame="main" src="list.php">//왼쪽 칸에 list.php를 링크한다. 여기서 링크를 클릭하면 main이라는 이름의 프레임에 내용이 나타나게 된다.
<frame name="main" scrolling="auto" marginwidth="0" marginheight="0" namo_target_frame="_self" src="main.php">//내용이 오는 프레임이고 타겟 프레임은 _self로 자기 자신이다.
<noframes>
<body bgcolor="#FFFFFF" text="#000000" link="#0000FF" vlink="#800080" alink="#FF0000">

<p>To view this page correctly, you need a Web browser that supports frames.</p>
</body>
</noframes>
</frameset>
</html> 


위의 소스를 그대로 가져와서 프레임셋 부분만 수정한 코드입니다.


위에서 설명한것 처럼, 상단메뉴가 더 길어질 경우에는 모든 해상도에서 적합하게 나오기 힘들기 때문에 많은 경우에는 노프레임방식을 사용합니다.

노프레임 방식은 프레임셋 없이, 테이블이나 div태그를 이용하여 전체 페이지를 작성하고, 메뉴를 눌렀을 때는 페이지 자체가 바뀌는 형식입니다.

이 경우에는 이용자가 클릭할 때 마다 더 많은 데이타를 불러와야 하므로 트래픽에는 아주 약간 더 무리가 갈 가능성이 있지만 그다지 큰 문제는 아닙니다. 


하지만 무엇보다 노프레임 형식의 홈페이지에서는 자비란과 같이 많은 분들이 새창으로 띄워서 사용하는 페이지들을 새창으로 띄울수 없다는 단점이 있습니다. 새창으로 띄워도 메뉴가 함께 표시되기 때문입니다.


그래서 아이프레임으로 자비란을 불러오고 아이프레임의 길이를 내용의 길이에 따라서 바뀌는 방법을 생각해 보았습니다.

이경우에는 일반적인 아이프레임에서 스크롤이 두개가 생겨서 보기에 썩 좋지 않았던것에 반해 스크롤은 하나만 생기고 자비란을 새창으로 열수 있다는 장점이 있습니다.


하지만 자비란의 배경화면을 투명하게 할 경우에 ie와 크롬에서 완벽하게 호환하기 위해서는 자비란의 배경 이미지와 색상을 지정할 수 없고, 배경이미지만 지정할 경우에는 ie에서는 배경이미지가 한 번 뜨고 그 이후에 투명하게 적용되고 크롬에서는 새창에서는 여전히 배경이미지가 뜨지 않는 디자인적인 문제가 있습니다.


즉, 아이프레임 안으로 불러오는 문서의 배경이 투명해야만 양 쪽 브라우저에서 완벽하게 호환된다는 것입니다.


그래서 저는 배경 투명화는 포기하고 메뉴의 길이만큼 배경을 잘라서 따로 적용시키는 방법을 사용했는데 여전히 작은 문제점들이 있습니다...


어쨌든 간에 그 소스는 여기있습니다.

저도 어디선가 퍼와서 수정한 소스인데 출처를 까먹어서..;


<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
<head>
<link href="style.css" rel="stylesheet" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<script>
function iframe_autoresize(arg) 
{
    아이프레임 프레임 이름.height = eval(300); //처음에 로드할때 아이프레임의 길이를 300으로 줄였다가
    arg.height = eval(arg.name+".document.body.scrollHeight"); //다시 내용의 스크롤만큼 길이를 늘려줍니다.
}
</script>
</head>
<body style="background:url(img/bg.jpg) fixed TOP LEFT #000;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
	<tr width="100%" height="250px">
		<td>
			<table width="100%" height="100%" align="center">
				<tr align="center">
					<td> 상단메뉴가 들어가는 부분</td>
				</tr>
			</table>
		</td>
	</tr>
	<tr>
		<td>
			<table width="100%" height="100%">
				<tr width="100%">
					<td><div align="center"><iframe name="아이프레임 이름" id="아이프레임 이름" src="불러올 문서의 이름" width="100%" frameborder="0" marginwidth="0" marginheight="0"  allowTransparency="false" onload="iframe_autoresize(this)" scrolling="no"></iframe></div></td>
				</tr>
			</table>
		</td>
</tr>
</table>
</body>
</html>


중간에 테이블 안에 테이블을 둔 건 제가 플래시 메뉴를 삽입해서 정렬이 용이하게 만드려고 그랬는데 딱히 꼭 그래야되는건 아닙니다.

아이프레임의 경우에도 테이블이 있으면 제어가 더 쉬울 수 있습니다.

아이프레임을 일반적으로 어떻게 적용해야되는지 설명하기가 참 까다롭네요.

링크의 타겟을 _self로 하란 말밖엔.. 말주변이 없어서 개별적으로 질문을 주시면 열심히 답변해드리도록 하겠습니다.

질문은 반드시 공개로 댓글로 달아주세요. 다른분들도 참고할 수있게요


List of Articles
번호 분류 제목 글쓴이 날짜 조회 수
14 기타 [수정]Java8 이상 사용시 치비페인트 로드 불가 문제 3 file 네이시 2014.11.30 3972
13 기타 MnM 스킨 주사위/접기오류 패치 file 욉인2 2014.04.22 14216
12 기타 엔시티계정 비공개설정 오류문제 ff 2014.03.22 6228
11 기타 아이프레임으로 불러오는 도큐먼트의 길이에 따라 아이프레임 높이 조절하기 검정치마 2014.01.20 12129
10 기타 프레임에서 불렀을 때와 새창에서 불렀을 때 배경 이미지(색상) 다르게 하기 검정치마 2014.01.20 6521
» 기타 비툴 커뮤니티 만들기 1- 프레임, 노프레임, 아이프레임 href 2013.01.14 15950
8 기타 [Tip] 개인 홈페이지 링크란 롤오버 배너 2 Hui 2013.01.03 15943
7 기타 제로보드4 프로필 게시판 52 노드 2012.10.28 35295
6 기타 제로보드4 업로드 게시판 18 노드 2012.09.12 27690
5 기타 몰라도 상관 없지만, 알아두면 커뮤니티나 홈페이지 디자인에 좋을것들. 5 file 황제의 기사 2012.01.15 35610
4 기타 음악파일을 swf(플래시 재생바)로 바꿔주는 프로그램과 플래시 투명화 방법. 3 file 황제의 기사 2012.01.15 29491
3 기타 하이퍼나비가 엑스박스로 뜨시는 경우 1 알보칠 2009.12.25 24984
2 기타 에스카르고 강좌 (링크) 1 네이브런 2009.11.22 21922
1 기타 비툴에 대한 블로그 (링크) 2 네이브런 2009.10.17 26365
목록
Board Pagination Prev 1 Next
/ 1
커뮤모아 안드로이드 앱