나만의 홈페이지 만들기 팁

앞선 것은 화면에서 고정되어 있는 녀석입니다.
그래서 화면을 늘이거나 줄여도 화면상에서 같은 위치에 있게 됩니다.

이번 거는 보이는 컨텐츠 내에서 위치가 고정되는 겁니다.
예를 들면 쇼핑몰 오른쪽에 최근 본 목록을 볼 때 항상 상품설명 밖에 위치하고 있고
거기서 상하로 스크롤 될 때도 위치가 고정되는 거죠.

그런 걸 만들어보고자 하는 것입니다.

<script type="text/javascript" language="Javascript">
        jQuery(document).ready(function() {
            jQuery(window).bind("resize", function() {
                jQuery("#quick_menu_div").css("top", 100).css("left", ( document.body.clientWidth / 2) - 525).show();
            }).trigger("resize");
           
            b_width = $(document.body).width(); //페이지 전체크기
            t_height = $(document.body).scrollTop(); //상단 높이
      
      
            width = b_width/2 - 525;
            height = t_height + 100; //상단부터 띄워야 하는 높이
      
            $("#quick_menu_div").css({top:height, left:width, display:'block'});
          
          
            var currentPosition = parseInt($("#quick_menu_div").css("top"));
          
            $(window).scroll(function() {
                var position = $(window).scrollTop(); // 현재 스크롤바의 위치값을 반환합니다.
                $("#quick_menu_div").stop().animate({"top":position+currentPosition+"px"},1000);
            });
        });
    </script>

이걸 head에 넣고

본문에 아래와 같이 넣어야 합니다.
<div id="quick_menu_div">
    여기에 뭘 넣어야 하나?
</div>

마지막으로 css를 넣어줘야겠죠?

#quick_menu_div {
    width: 150px;
    height: 350px;
    position: absolute;
    background-color: #EEE;
    top: 100px;
    display: block;
    z-index: 1000;
}

이렇게 하면 만들 수 있습니다.

상단 script에서 이런 식으로 function으로 만든 다음 원하는 값을 하나로 넣는 식으로 하면 관리가 훨씬 수월합니다.

jQuery(document).ready(function() {
           
            quickMenu("#top_menu", 1, 515, 100);
           
            function quickMenu(Div, leftRight, leftMargin, topMargin){
           
                b_width = $(document.body).width(); //페이지 전체크기
                t_height = $(document.body).scrollTop(); //상단 높이
                if(leftRight == 1){
                    width = b_width/2 - leftMargin;
                    jQuery(window).bind("resize", function() {
                        jQuery(Div).css("top", topMargin).css("left", ( document.body.clientWidth / 2) - leftMargin).show();
                    }).trigger("resize");
                } else {
                    width = b_width/2 + leftMargin;
                    jQuery(window).bind("resize", function() {
                        jQuery(Div).css("top", topMargin).css("left", ( document.body.clientWidth / 2) + leftMargin).show();
                    }).trigger("resize");
                }
               
                jQuery(window).bind("resize", function() {
                    jQuery(Div).css("top", topMargin).css("left", ( document.body.clientWidth / 2) - leftMargin).show();
                }).trigger("resize");
               
                height = t_height + topMargin; //상단부터 띄워야 하는 높이
          
                $(Div).css({top:height, left:width, display:'block'});
              
              
                var currentPosition = parseInt($(Div).css("top"));
              
                $(window).scroll(function() {
                    var position = $(window).scrollTop(); // 현재 스크롤바의 위치값을 반환합니다.
                    $("#top_menu").stop().animate({"top":position+currentPosition+"px"},1000);
                });
            }
        });

중앙정렬된 값을 900으로 놓고 본다면 거기에 따라 중앙정렬에 맞춰 일정한 위치에 퀵메뉴를 놓도록 한다.

1. jquery는 일단 올린다.

2. head에 다음 내용을 넣는다.
<script type="text/javascript">
    $(document).ready(function(){
       
        b_width = $(document.body).width(); //페이지 전체크기
        d_width = $("#head_menu_layout").width(); //본문 전체 크기임
        t_height = $(document.body).scrollTop(); //상단 높이
   
   
        width = (b_width - d_width) <= 0 ? 900 : b_width/2 - 610; //중앙에서 어느 위치에 놓을지 적는다.
//900은 가운데 정렬한 div 값을 적는다.
//-610은 왼쪽으로 +는 오른쪽으로 놓는것이다.
        height = t_height + 150; //상단부터 띄워야 하는 높이
   
        $("#quick_menu_div").css({top:height, left:width, display:'block'});
       
       
        var currentPosition = parseInt($("#quick_menu_div").css("top"));
       
        $(window).scroll(function() {
            var position = $(window).scrollTop(); // 현재 스크롤바의 위치값을 반환합니다.
            $("#quick_menu_div").stop().animate({"top":position+currentPosition+"px"},1000);
        });
    });
</script>

3. body에 들어갈 내용을 올린다.

<div id="quick_menu_div">
    퀵메뉴 테스트
</div>

4. 관련된 CSS파일에 다음 값을 넣어야 한다.
#quick_menu_div {
    width: 150px;
    height: 350px;
    background-color: #FFF;
    position: absolute;
    top: 150px;
    display: none;
    z-index: 1000;
}
이 가운데 position과 top, display, z-index는 넣어야 한다.

ckfinder를 쓰다보니 한글파일이 올라가기는 하는데 이 녀석이 실제로 DB에는 한글을 유니코드로 변환해서 올라간다.

다시 이 녀석을 utf-8환경에서 한글로 보여주기 위해서는 다음과 같이 urldecode를 넣어서 한글로 만들고 보여주어야 한다.
3시간쯤 헤맸나? 휴~~

urldecode($name);

이 녀석을 다시 유니코드로 바꾸는 건 urlencode($name);  이렇게 하면 된다.

<?
global $PHP_SELF;
$thisfilename=basename(__FILE__);
$temp_filename=realpath(__FILE__);
if(!$temp_filename) $temp_filename=__FILE__;
$osdir=eregi_replace($thisfilename,"",$temp_filename);
unset($temp_filename);
$virdir = eregi_replace($thisfilename,"",$PHP_SELF);

echo "현재 디렉토리의 절대경로 : ".$osdir."<br>";
echo "현재 디렉토리의 상대 경로 주소 : ".$virdir."<br>";
 ?>

출처는 http://www.xe.allbaro.net/?document_srl=44099 여기다.
웹서핑하다 알게 되었는데 유용할 것 같아서 챙겨둔다.

별의 별 짓을 다해봤는데 결국 Jquery로 갑니다.

png가 배경으로 되었을 때 position:relative로 하지 않으면 관련 링크가 모두 죽는 것 말고는
가장 확실한 방법인듯 합니다. 따로 설정해줄 것도 없고 배경으로 png쓰기는 그만입니다.

순서
1. jquery.js와 jquery.pngFix.js 다운로드하기
2. head에 첨부시켜주기

<script type="text/javascript" src="/main/js/jquery.js"></script>
<script type="text/javascript" src="/main/js/jquery.pngFix.js"></script>

3. 그 아래 다음과 같은 함수 넣어주기

<script type="text/javascript"> 
    $(document).ready(function(){ 
        $(document).pngFix(); 
    }); 
</script>

4. 링크가 다 죽어버리므로 링크 들어가는 녀석은 position:relative로 변경해주기

끝!

^[-_a-z0-9]+(\.[-_a-z0-0]+)*@[-_a-z0-9]+(\.[-_a-z0-9]+)+$

windows에서는 이걸 사용하려면 putty를 깔아야 하죠.

하지만 osx이 뭔가요? 리눅스 기반 아닙니까?

방법이 없나 찾아보다가 이런 걸 봤네요..

1. 터미널을 연다.

2. 프롬프트에서 ssh username@server.name

ex) ssh euiyoung@sample.com

3. 비밀번호 넣는다.

이러면 바로 접속이 되는군요. 아주 좋아요~

http://tong.nate.com/jupiter0410/36528898에서 퍼왔습니다.

대한민국 프로 야구 역사상 사이클링 히트 기록

1. 오대석(삼성) 1982년 6월 12일 삼미전
2. 이강돈(빙그레) 1987년 8월 27일 OB전
3. 정구선(롯데) 1987년 8월 31일 청보전
4. 강석천(빙그레) 1990년 8월 4일 태평양전
5. 임형석(OB) 1992년 8월 23일 롯데전
6. 서용빈(LG) 1994년 4월 16일 롯데전
7. 김응국(롯데) 1996년 4월 14일 한화전
8. 양준혁(삼성) 1996년 8월 23일 현대전
9. 마르티네스(삼성) 2001년 5월 26일 해태전
10. 전준호(현대) 2001년 7월 6일 삼성전
11. 양준혁(삼성) 2003년 4월 15일 현대전, 2번째
12. 신종길(한화) 2004년 9월 21일 두산전
13. 안치용(LG) 2008년 6월 26일 삼성전
14. 이종욱(두산) 2009년 4월 11일 LG전

출처는 위키페디아네요..

오늘 종욱이의 기록이 바로 올라갔네요.

처음 두산에 왔을 때부터 눈여겨봤고, 시헌이의 절친이라고 하니까 더 관심이 가대요~

(제 두산 유니폼에도 시헌이의 등번호를 넣기 위해 군생활동안 비워뒀었죠~ ^^;)

열심히 하는 당신의 모습이 너무 좋았고, 올 시즌 부상없이 열심히 뛰어주었으면 하는 바람입니다.

제발 다치지마라~~~

랜들은 2005년부터 올해까지 치면 5년쨉니다.