상세 컨텐츠

본문 제목

[html TIP] 홈페이지 만들때 유용한 html 팁 앤 테크닉

DESIGN/tip&tech

by B라이프 2010. 9. 14. 01:26

본문

반응형

  
  [TIP] 홈페이지 만들때 유용한 팁 몇가지
　
반복 안되게 배경 넣기  (HEAD 사이에 넣어주세요)

<style type="text/css">
body {background:url(배경 파일 주소) no-repeat}
</style>
반복 되게 하려면 no-repeat 빼주면 됨

비지엠  ( 홈페이지 배경 음악 )

<html>
<head>
<title></title>
</head>
<frameset rows="0,*" frameborder="NO" border="0" framespacing="0" cols="*">
<frame name="top" scrolling="NO" noresize src="http://도메인/bgm.html(bgm 소스 넣어놓은 페이지 주소)" >
<frame name="main" src="http://도메인/main.html(메인페이지 주소)">
</frameset>
</html>


주소고정

<html>
<head>
<meta http-equiv=content-type content=text/html; charset=euc-kr>
<title>홈페이지 이름</title>
</head>
<frameset rows="*,0" cols="1*" border=0>
<frame src="처음에 보일 페이지 주소" frameborder=0 scrolling=auto>
</frameset>
</body>
</html>

툴바 없애기 (head 사이에서 넣어주세요)


<meta http-equiv=imagetoolbar content=no>


마우스 오른쪽메뉴, 드래그, 선택복사 금지하기 (body 옆에 붙여넣기)

<body oncontextmenu='return false' ondragstart='return false' onselectstart='return false'>



아이프레임
<iframe src="주소" name="down" width="630" height="440" frameborder="2" marginwidth="0" marginheight="0" scrolling="auto" allowTransparency="true"></iframe>


게시판 배경색
<body style="background-color:transparent;">


스크롤바
<style type="text/css">
<!--
body {scrollbar-3dlight-color:white;
         scrollbar-arrow-color:화살표색깔;
         scrollbar-track-color:white;
         scrollbar-darkshadow-color:white;
         scrollbar-face-color:white;
         scrollbar-highlight-color:white;
         scrollbar-shadow-color:white;}
-->
</style>

이미지맵 사용시 링크 점선 없애는 소스

onfocus='blur()'



탑버튼 (제일 위에다가 넣어주세요)

<? include "top.php"; ?>

여백

<div style="padding-left:숫자;">


탑버튼 파일 (top.php) 소스
<?
/*
* 본 파일은 PHP School(http://www.phpschool.com), 지우(http://www.ziwoo.net), SGUMG(http://blog.naver.com/sgumg)님의
팁을 참고해 MissFlash(http://blog.missflash.com)가 최종정리한 것입니다.

* 본 파일은 저작권 정보를 남겨두시는 한 아무 제한없이 사용하실 수 있습니다. :)
* 혹 다른 분의 저작권을 침해한 부분이 있을 때는 MissFlash(http://blog.missflash.com)에 알려주시기 바랍니다. ^^
*/
?>

<div id="divMenu" style="width:20px; height:20px; position:absolute;">
    <img src="탑버튼 이미지 파일 주소" border="0" onClick="document.body.scrollTop=0;" style="cursor:pointer">
</div>
<script language="JavaScript">
<!--
function moveRightEdge() {
    var yMenuFrom, yMenuTo, yOffset, timeoutNextCheck;
    yMenuFrom = parseInt(document.getElementById('divMenu').style.top,10);

    // Y축 위치 설정방법(상단으로부터 40픽셀을 의미)
    yMenuTo = document.body.scrollTop + 350;
    timeoutNextCheck = 500;
    if (yMenuFrom != yMenuTo) {
        yOffset = Math.ceil(Math.abs(yMenuTo - yMenuFrom) / 20);
        if (yMenuTo < yMenuFrom)
        yOffset = -yOffset;
        document.getElementById('divMenu').style.top = parseInt (document.getElementById('divMenu').style.top, 10) + yOffset;
        timeoutNextCheck = 10;
    }
    setTimeout ("moveRightEdge()", timeoutNextCheck);
}
function setRightX() {
    // X축 위치 설정방법 1(가운데 정렬의 경우에 적용가능, 화면의 중심에서부터 410(800/2+10)픽셀 떨어진 위치를 의미)
    document.getElementById('divMenu').style.left = document.body.clientWidth/2 + 800/2 + 10;

    // X축 위치 설정방법 2(왼쪽 정렬의 경우에 적용가능, 800픽셀을 의미)
    // document.getElementById('divMenu').style.left = 0;
    moveRightEdge();
}
function setRightY() {
    document.getElementById('divMenu').style.top = document.body.scrollTop + 0;
    document.getElementById('divMenu').style.visibility = "visible";
    setRightX();
}
setRightY();
//-->
</script>
<script for="window" event="onresize">setRightX();</script>
반응형
저작자표시

'DESIGN > tip&tech' 카테고리의 다른 글

포토샵 버젼별 단축키 모음  (0) 2009.08.18
그녀의 변신은 무죄! - 포토샵과 화장으로 도브모델 변신!  (0) 2009.07.29
마우스 우측버튼 사용금지, 마우스 드래그 무력화 소스  (1) 2009.07.21
사진 잘 찍는 방법 강좌  (0) 2009.02.23
[익스플로러 에러해결] HTTP Status : 404 - 404 Not Found 오류  (0) 2008.11.04

관련글 더보기

댓글 영역

티스토리툴바