Erzsamatory Weblog


인터넷을 돌아다니다보면 화면 상단에 메인 메뉴가 고정되어 있는 것을 자주 볼 수 있을 것입니다. 특히 블로그에서 화면 상단 고정 메뉴를 많이 사용하고 있습니다. 이 블로그에서도 사용하고 있죠. 이와 같은 메뉴를 사용하는 이유는 블로그 방문자가 다른 페이지로 쉽게 이동할 수 있도록 배려하기 위함입니다. 아무래도 스크롤바를 화면 맨 위쪽까지 올려서 다른 페이지로 이동하는 것보다는 당장 화면 상단에 있는 메뉴를 이용하여 다른 페이지로 이동하는 것이 훨씬 더 편하고 빠르겠죠. 이 글에서는 화면 상단에 고정되는 메뉴를 만드는 방법에 대해서 알아볼 것입니다. 특히 매우 부드러운 움직임으로 메뉴가 화면 상단에 고정될 수 있도록 하는 방법에 대해서 알아볼 것입니다. 이 방법은 현재 이 블로그에서 사용하고 있는 방법입니다. 구글 플러스에서 아이디어를 얻어 만들게 된 방법입니다.

부드럽게 화면 상단에 고정되는 메뉴 미리보기
http://goo.gl/iTQFXR


부드럽게 화면 상단에 고정되는 메뉴의 작동 원리


이 블로그에서 스크롤바를 내리면 상단 메뉴가 부드럽게 화면 상단에 고정되는 것을 확인할 수 있을 것입니다. 처음부터 상단 메뉴가 화면에 고정되어 있는 것은 아니고, 스크롤바가 상단 메뉴가 위치하고 있는 곳까지 내려오는 경우에만 상단 메뉴가 화면 상단에 고정이 됩니다. 이와 같은 방법을 사용하고 있는 메뉴는 인터넷에서 쉽게 찾아볼 수 있습니다. HTML5로 만들어진 대부분의 사이트에서 이와 같은 메뉴 시스템을 채용하고 있지요. 티스토리에서 사용할 수 있는 반응형 스킨인 FastBoot도 이와 같은 메뉴를 가지고 있습니다.

저는 구글 플러스를 사용하면서 부드럽게 고정되는 메뉴에 대해서 생각해보게 되었습니다. 구글 플러스를 사용하고 있는 유저분들은 모두 아시겠지만, 구글 플러스에서는 스크롤바를 내리면 상단 메뉴가 부드럽게 고정됩니다. 내 블로그에서도 이런 메뉴를 제공할 수는 없을까 생각하면서 비슷한 기능을 할 수 있는 메뉴를 연구하기 시작하였습니다.

그런데 구글 플러스의 그 메뉴는 처음부터 화면 상단에 고정되어 있는 메뉴인 것을 알고 깜짝 놀랐습니다. 사실 구글 플러스에서 봤던 그 메뉴는 스타일 속성이 position: fixed로 지정되어 있는 것으로, 처음부터 화면 상단에 고정되어 있던 메뉴였습니다. 그렇다면 스크롤바를 내렸을 때 왜 화면 위쪽으로 사라졌을까요? 바로 스크롤바의 위치에 따라 그 메뉴의 top 속성을 변경하는 자바스크립트를 사용했던 것이었습니다. 스크롤바를 내리면 해당 메뉴의 top 속성에 마이너스되는 방식으로 화면 위쪽으로 메뉴가 올라가고 일정한 위치가 되면 top이 0으로 고정이 되는 것입니다. 이 글에서 소개하는 메뉴 역시 이와 같은 방법을 사용하고 있는 메뉴입니다.

자바스크립트 소스코드


이 메뉴를 만들 때 사용되는 자바스크립트 소스코드는 매우 간단합니다. jQuery를 사용하여 매우 간단하게 해결할 수 있었습니다. jQuery를 블로그에서 사용하는 방법에 대해서는 [2014. 2. 13 외부 링크 방식으로 jQuery를 블로그에서 사용하는 방법] 글을 참고하시기 바랍니다.

한 가지 꼭 알아두어야 하는 사실은 이 예제에서 jQuery는 비동기식으로 실행된다는 사실입니다. 따라서 이 예제에서 사용되고 있는 jQuery는 HTML를 불러오는 도중에는 사용될 수 없으며, HTML이 모두 화면에 출력된 후에 jQuery를 사용할 수 있습니다. 따라서 아래 소스코드에서 보는 것과 같이 window.onload 이벤트를 사용하여 화면에 모두 출력된 후에 jQuery가 실행될 수 있도록 하였습니다.

// 현재 스크롤바의 위치를 저장하는 변수 (px)
var currentScrollTop = 0;
    
// 비동기식 jQuery이므로 window load 후 jQuery를 실행해야 함
window.onload = function() {
    // 새로고침 했을 경우를 대비한 메소드 실행
    scrollController();
    
    // 스크롤을 하는 경우에만 실행됨
    $(window).on('scroll', function() {
        scrollController();
    });
}
    
// 메인 메뉴의 위치를 제어하는 함수
function scrollController() {
    currentScrollTop = $(window).scrollTop();
    if (currentScrollTop < 150) {
        $('#blog-header-container').css('top', -(currentScrollTop));
        $('#menu-container').css('top', 150-(currentScrollTop));
        if ($('#menu-container').hasClass('fixed')) {
            $('#menu-container').removeClass('fixed');
            $('#menu-container .menu-icon').removeClass('on');
        }
    } else {
        if (!$('#menu-container').hasClass('fixed')) {
            $('#blog-header-container').css('top', -150);
            $('#menu-container').css('top', 0);
            $('#menu-container').addClass('fixed');
            $('#menu-container .menu-icon').addClass('on');
        }
    }
}



자바스크립트 소스코드 설명


이 자바스크립트 소스코드에서 가장 중요한 것은 #menu-container의 class를 변경하는 jQuery의 addClass() 메소드와 removeClass() 메소드입니다. jQuery에서는 HTML 객체의 클래스를 매우 간편하게 변경할 수 있는데, 이 때 사용되는 것이 바로 addClass() 메소드와 removeClass() 메소드입니다. addClass() 메소드는 HTML 객체에 클래스를 추가할 때 사용됩니다. 한 개의 객체에 여러 개의 클래스를 추가할 수도 있습니다. 그리고 removeClass() 메소드는 기존에 있던 클래스를 삭제할 때 사용됩니다.

위 예제에서 고정되었을 때의 클래스인 fixed 클래스와 on 클래스는 다른 스타일 구역에서 정의되어 있는 것이고, 이 클래스에서 포함하고 있는 내용은 padding-left 속성과 left 속성입니다. 더 자세한 내용은 아래 스타일 소스코드 설명 파트에서 설명하도록 하고 이 파트에서는 자바스크립트에 대한 설명을 자세하게 하도록 하겠습니다.

위에서도 언급했듯이 이 예제에서 jQuery 비동기식으로 불러와지기 때문에 window.onload 이벤트를 통하여 HTML이 모두 출력된 후에 jQuery가 실행될 수 있도록 하였습니다. 스크롤바가 움직일 때마다 실행되는 scrollController() 함수는 HTML이 모두 로드된 후에 바로 실행될 수 있도록 하여 스크롤바를 내린 후에 새로고침을 했을 때에만 메뉴가 화면 상단에 고정되지 않는 문제점을 해결하였습니다.

스크롤바를 내리면 상단 타이틀 부분인 #blog-header-container의 top 속성을 마이너스 값으로 지정하여 화면에서 보이지 않도록 하였으며, #blog-header-container의 높이인 150px를 넘어 스크롤바가 이동되는 경우에는 #blog-header-container의 top 속성은 -150px으로 고정시키고, 메인 상단 메뉴인 #menu-container의 top 속성은 0으로 고정시켰습니다. 이렇게 함으로써 두 개의 객체 모두 position:fixed 속성을 가지고 있지만, 스크롤바를 내리면 화면 위쪽으로 그 내용이 올라가 마치 해당 객체가 화면에 고정되어 있지 않는 느낌을 받을 수 있도록 하였습니다. 하지만 실제로는 이 두 객체는 화면에 고정되어 있는 객체입니다. 단지 top 속성을 사용하여 방문자의 눈에만 그렇게 보이는 것입니다.

#menu-container에서 사용되는 fixed 클래스와 on 클래스는 각각 padding-left 속성과 left 속성을 가지고 있습니다. 사실 자바스크립트에서 해당 속성을 직접 지정할 수도 있지만 클래스만 변경하는 것이 좀 더 효율적이기 때문에 이 예제 소스코드에서는 클래스를 변경하는 방법을 사용하였습니다. 해당 클래스가 어떠한 속성을 가지고 있는가는 아래에서 자세히 보도록 하겠습니다.


스타일(CSS) 소스코드


이 메뉴를 만들 때에는 스타일 CSS 소스코드가 가장 복잡하다고 할 수 있습니다. 왜냐하면 이 예제에서는 최대한 빠른 속도를 구현하기 위하여 되도록이면 자바스크립트의 사용을 자제하였기 때문입니다.

CSS가 자바스크립트보다 빠르다 라는 사실은 프로그래머들 사이에서 증명된 기정사실로서 받아들여지고 있습니다. 그래서 대다수의 프로그래머들이 자바스크립트보다는 CSS의 사용을 적극 권장하고 있습니다. 특히 jQuery는 그 속도가 일반 CSS보다 매우 속도가 느리기 때문에, 대체가 가능하다면 jQuery보다는 CSS를 사용하는 것이 훨씬 더 좋습니다.

html, body {
    margin: 0px;
    padding: 0px;
     
    font-size: 12px;
}
     
#blog-header-container {
    position: fixed;
    top: 0px;
    left: 0px;
     
    width: 100%;
    height: 150px;
     
    background-color: #fff;
}
     
#blog-header-container h1 {
    position: relative;
    top: 40px;
    left: 20px;
     
    font-size: 2.0em;
    font-weight: bold;
}
     
#menu-container {
    position: fixed;
    top: 150px;
    left: 0px;
     
    width:100%;
    height: 50px;
    padding-left: 20px;
    padding-top: 15px;
    box-sizing: border-box;
     
    background-color: #3a3b40;
     
    -webkit-transition: padding-left 200ms linear;
    -moz-transition: padding-left 200ms linear;
    -ms-transition: padding-left 200ms linear;
    -o-transition: padding-left 200ms linear;
    transition: padding-left 200ms linear;
}
#menu-container.fixed {
    padding-left: 70px;
    opacity: 0.95;
    -webkit-box-shadow: 0 1px 5px 1px rgba(0,0,0,0.2);
    box-shadow: 0 1px 5px 1px rgba(0,0,0,0.2);
}
#menu-container .menu-item {
    font-size: 1.4em;
    font-weight: bold;
    color: #fff;
}
#menu-container .menu-icon {
    display: block !important;
    position: absolute;
    left: -50px;
    top: 14px;
     
    font-size: 1.6em;
    font-weight: bold;
    color: #fff;
     
    -webkit-transition: left 300ms linear;
    -moz-transition: left 300ms linear;
    -ms-transition: left 300ms linear;
    -o-transition: left 300ms linear;
    transition: left 300ms linear;
}
#menu-container .menu-icon.on {
    left: 15px;
}
     
#blog-container {
    margin-top:200px;
    padding: 20px;
}



스타일(CSS) 소스코드 설명


앞서 봤었던 자바스크립트보다는 스타일 소스코드가 좀 더 길고 복잡합니다. 스타일 소스코드에서 가장 중요한 것은 #menu-container와 #menu-container.fixed입니다. #menu-container의 속성은 메뉴를 포함하고 있는 메뉴 전체의 박스 객체에 적용되는 속성입니다. 그리고 #menu-container.fixed는 #menu-container에 적용되는 fixed 클래스에 대한 속성입니다.

여기에서 한 가지 꼭 알아야 하는  점은 #menu-container.fixed와 #menu-container .fixed는 완전히 다른 선택자라는 것입니다. [2014. 7. 4 CSS 선택자에 관한 매우 기초적인 지식 / CSS Selector] 글에서는 따로 언급하지 않았지만, #menu-container.fixed과 같이 띄어쓰기를 하지 않고 HTML 객체를 선택하는 방법은 하위 객체에 대한 속성이 아니라 해당되는 객체의 또 다른 속성을 지정할 때 사용됩니다. 예를 들어 쉽게 설명하자면, 다음과 같습니다.

#menu-container.fixed와 #menu-container .fixed의 차이
1. #menu-container.fixed는 아래와 같은 소스코드에서 #menu-container의 속성을 지정할 때 사용됩니다.
<div id="menu-container" class="fixed">
    고정된 메뉴
</div>

2. #menu-container .fixed는 아래와 같은 소스코드에서 fixed 클래스를 선택할 때 사용됩니다.
<div id="menu-container">
    <div class="fixed">
        고정된 메뉴
    </div>
</div>

즉, #menu-container.fixed는 동일한 객체에서의 스타일 속성을 지정할 때 사용되는 방법이고, #menu-container .fixed는 해당 객체의 하위에 있는 fixed 클래스로 지정된 객체의 속성을 지정할 때 사용되는 방법입니다. 이 점을 꼭 알고 있어야 합니다.

다시 본론으로 돌아가서, #blog-header-container는 블로그 상단에 출력되는 블로그 타이틀입니다. 블로그 타이틀이 화면 맨 위쪽에 출력되므로 메인 상단 메뉴는 그만큼 아래쪽으로 내려와 있어야 할 것입니다. 그래서 #menu-container의 top 속성을 #blog-header-container의 높이인 150px로 지정한 것입니다.

CSS3에서는 transition이라는 새로운 스타일 속성을 사용할 수 있습니다. transition 속성은 자바스크립트 필요 없이 CSS만으로 애니메이션을 만들 때 사용됩니다. 위 소스코드에서는 #menu-container와 #menu-container .menu-icon에서 transition 속성이 사용되었습니다. transition 속성의 사용방법은 매우 간단하므로 이 글에서는 따로 설명하지 않겠습니다. 다만 #menu-container의 transition 속성은 padding-left 속성 값에 대해서만 작동하고, #menu-container .menu-icon의 transition 속성은 left 속성 값에 대해서만 작동한다는 사실은 꼭 알고 있어야 합니다.

#menu-container.fixed에서는 150px 넘게 스크롤되었을 때의 메인 메뉴 객체의 속성을 정의합니다. 150px 넘게 스크롤되는 경우에는 블로그 타이틀이 사라지기 때문에 메뉴에 인식 가능한 아이콘을 표시해야 하는데, 이 예제에서는 Erz. 이라는 아이콘을 넣었습니다. 아이콘이라고 하기에는 뭐 조금 어렵지만, 방문자가 접속중인 블로그가 어떤 블로그인지는 충분히 인지할 수 있을 것이라 생각합니다. 이 아이콘이 표시되기 위해서는 기존의 메뉴 아이템들이 오른쪽으로 밀려나야 하므로, 이 예제에서는 padding-left 속성을 사용하여 메인 메뉴 아이템들을 오른쪽으로 이동시켰습니다. padding-left 속성에 대해서는 transition 속성이 작동되므로, 메뉴 아이템들은 애니메이션이 만들어져 부드럽게 오른쪽으로 이동합니다.

#menu-container .menu-icon.on에서는 150px 넘게 스크롤되었을 때의 메뉴 아이콘 속성을 정의합니다. 메뉴 아이콘에 대해서는 위에서 설명했습니다. 150px 넘게 스크롤하지 않았을 때의 메뉴 아이콘의 위치는 왼쪽으로 -50px 입니다. 따라서 화면에서는 보이지 않습니다. 하지만 150px 넘게 스크롤되는 경우에는 위 자바스크립트에 의하여 이 객체에 on 클래스가 적용되고 이 클래스에 따라 left 속성이 15px로 변경됩니다. 메뉴 아이콘에서는 transition이 left 속성에 대해서 작동하므로, 메뉴 아이콘은 부드러운 애니메이션을 보이며 오른쪽으로 이동합니다.


HTML 소스코드


이제 완성된 HTML소스코드를 보아야 할 때입니다. 위에서 설명했던 자바스크립트 소스코드와 스타일 소스코드를 적용한 HTML은 다음과 같습니다.

이 HTML에서 jQuery는 외부 리소스를 사용하였으며, script defer 속성을 이용하여 HTML 출력이 모두 된 후에 사용이 가능하도록 하였습니다. 이 방법은 비동기적 자바스크립트를 구현할 때 사용되는 방법입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8" />
    <title>화면 상단 고정 메뉴 만드는 방법</title>
    <script defer src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <style>
        /* 위에서 설명했던 스타일(CSS) 소스코드가 들어가는 위치 */
    </style>
    <script>
        // 위에서 설명했던 자바스크립트 소스코드가 들어가는 위치
    </script>
</head>
<body>
    <div id="blog-header-container">
        <h1>블로그 화면 상단 메뉴 고정 테스트</h1>
    </div>
    <div id="menu-container">
        <div class="menu-icon" style="display:none;">Erz.</div>
        <div class="menu-item">블로그 상단 메뉴 예시</div>
    </div>
    <div id="blog-container">
        안녕하십니까? 에르차마토리 다이어리박스 운영자입니다.
        <br /><br />
        이 페이지는 상단에 고정되는 블로그 메뉴를 테스트하는 페이지입니다.
        <br /><br />
        스크롤바를 내리시오. (br 태그를 추가하시오)
        <!-- <br /> 태그를 이곳에 무한정 추가합니다. //-->
    </div>
</body>
</html>


위의 HTML 소스코드가 그대로 적용된 페이지를 인터넷에 업로드하였습니다. http://goo.gl/iTQFXR 이 페이지에 접속하면 위 소스코드가 모두 적용된 실제 화면을 직접 볼 수 있습니다. 위 소스코드가 어떻게 작동하는지 직접 확인해보십시오.

이 테스트 페이지의 디자인은 이 블로그의 디자인과 동일합니다. 그 이유는 이 글에서 설명하고 있는 모든 소스코드는 이 블로그에서 실제로 사용되고 있는 소스코드이기 때문입니다.

필자는 지금까지 블로그 스킨을 많이 수정했었지만, 그 수많은 수정 사항들 중에서도, 이 글에서 설명한 블로그 상단에 부드럽게 고정되는 메인 메뉴가 가장 획기적인 수정 사항이었다 라고 저는 생각합니다. 왜냐하면 저는 지금까지 이렇게 작동하는 메인 메뉴를 가지고 있는 블로그를 본 적이 없었기 때문입니다.

블로그 화면 상단에 부드럽게 고정되는 메뉴를 만드는 방법 테스트 페이지 화면

블로그 화면 상단에 부드럽게 고정되는 메뉴를 만드는 방법 테스트 페이지 화면



테스트 페이지에 접속하면 위와 같은 화면이 나타납니다. 이 블로그의 디자인과 같죠. 이제 스크롤바를 내리면 상단 타이틀은 사라지고 메인 메뉴만 화면 상단에 고정되는 모습을 볼 수 있을 것입니다. 그냥 얼핏 보면 상단 메뉴는 고정되지 않은 객체 즉, position:fixed 속성이 적용되지 않은 객체라고 인식하기 쉽지만, 실제로는 position:fixed 속성이 적용된 객체입니다. 그리고 메뉴가 고정될 때에는 메뉴 아이템들이 부드럽게 오른쪽으로 이동하는 transition 애니메이션 효과가 적용된 모습도 볼 수 있을 것입니다.

하지만 transition 속성은 CSS3 최신 버전에서부터 포함하고 있는 애니메이션 속성이기 때문에 구 버전의 웹브라우저에서는 작동하지 않습니다. 따라서 IE8과 같이 오래된 웹브라우저에서는 애니메이션 효과는 나타나지 않고 그냥 깜빡이는 모습을 볼 수 있을 것입니다.


마무리


지금까지 화면 상단에 부드럽게 고정되는 메뉴를 만드는 방법에 대해서 알아보았습니다. 구글 플러스에서 이 기능을 제대로 활용하고 있던데, 저는 이 기능을 블로그에 어떻게 적용시킬 수 있을까 연구하다가 이와 같은 방법을 개발해내었습니다. 사실 이 방법은 제가 최초로 만든 것은 아니고 여러 블로그에서 종종 사용되었던 방법이라고 알고 있습니다. 하지만 이렇게 문서로 정리한 것은 제가 처음이라고 알고 있습니다.

이 글에서 설명하고 있는 모든 소스코드는 지금 당장 블로그에 적용시킬 수 있는 매우 잘 정리된 소스코드입니다. 만약 이 글을 읽고 있는 분들 중 본인의 블로그에 상단 고정 메뉴를 넣고 싶다면, 위의 소스코드를 한 번 활용해보십시오. 매우 좋은 결과를 얻을 수 있을 것입니다.
http://www.erzsamatory.net/trackback/132
  1. Tracked from 1730
    2014/10/19 00:02
    웹사이트의 메뉴바가 평소에는 원래 위치에 있다가 스크롤을 하여 메뉴가 올라갈 때 메뉴를 상단에 고정 시켜주는 jQuery 소스 입니다. 메뉴 바에는 대부분의 블로그나 사이트의 중요 링크가 되어있어 스크롤 중에도 메뉴 클릭이 용이하여 방문자의 체류 시간을 늘리는데 도움이 되고 방문객에게 사이트 이동이 쉬워지기 때문에 운영자나 방문객 모두에 도움이 됩니다. <div class="menuWrap"> <div class="blogmenu"> [\##_blo..

건전한 댓글 문화를 만들어주시기 바랍니다 ^^
불건전한 댓글이 등록되는 경우 관리자의 임의적 판단으로 삭제될 수 있음을 미리 공지드립니다.

비밀글로 작성하기
  1. 비밀방문자
    비밀방문자
    2014/11/11 17:23
    관리자만 볼 수 있는 댓글입니다.
    • Walter E.
      Walter E.
      2014/11/11 20:14
      티스토리에 적용하셨나요?
      그렇다면 jQuery 함수를 사용해보시기 바랍니다.
      ex: $(window) → jQuery(window)
      티스토리나 텍스트큐브에서 제이쿼리를 사용할 때 종종 충돌하는 상황이 생겨서 그럴 수 있습니다.
    • 2014/11/11 22:53
      계속 삽질해도 안되서, 포스팅 하신 소스 참고해서 자바스크립트로 만들었습니다.

      말씀하신대로도 한 번 해봐야겠네요. 답변 감사합니다^^
  2. 오미자
    오미자
    2014/12/28 01:10
    좋은 소스 감사합니다^^*
    위에 알려주신 대로 제로보드4에 적용을 해보았는데요,
    목록형 게시판에서는 정상 동작하는데,
    방명록 같이 컨텐츠가 드러나는 페이지에서는
    (목록형 게시판에서 게시물 클릭한 경우도 마찬가지)
    헤더와 메뉴부분이 통으로 픽스돼 있기만 할뿐
    위와 같이 동작하지 않습니다ㅠㅠ
    그리고 익스플로러에서도 동작을 안 하네요ㅠㅠ(이 블로그는 정상 작동합니다.)
    혹시 원인에 대한 조언을 구할 수 있을까요?
    • Walter E.
      Walter E.
      2014/12/28 10:49
      콘텐츠가 출력되는 페이지에서만 작동되지 않는다면 콘텐츠 페이지에 있는 어떤 소스코드와 충돌되는 현상이 나타나는 것입니다. 고정된 상태에서 그대로 있는다면 자바스크립트 소스가 다른 소스코드와 충돌을 일으키는 것 같습니다. 자세한 내용은 소스코드를 보아야 알 수 있습니다.

      인터넷익스플로러에서 작동을 하지 않는다면, 웹브라우저 버전에서 지원을 하지 않기 때문입니다. 이 소스코드는 인터넷익스플로러10에서 테스트되었습니다.
  3. thanks
    thanks
    2015/08/05 15:36
    좋은 소스 감사합니다~
    • Walter Erzsa
      Walter Erzsa
      2015/08/05 16:49
      많은 도움이 되셨길 바랍니다. ^^
  4. 비밀방문자
    비밀방문자
    2015/08/20 09:52
    관리자만 볼 수 있는 댓글입니다.
    • Walter Erzsa
      Walter Erzsa
      2015/08/20 10:34
      혹시 스크린샷으로 첨부가능한지요?
      반응형 웹으로 작성하신 것 같은데, 모바일기기에서 메뉴와 영상이 겹친다는 뜻인가요?
    • 비밀방문자
      비밀방문자
      2015/08/20 11:40
      관리자만 볼 수 있는 댓글입니다.
    • Walter Erzsa
      Walter Erzsa
      2015/08/20 11:44
      댓글에 자체적으로는 이미지를 첨부할 수 없습니다.
      http://imgur.com/
      이곳에 업로드한 후 링크를 걸어주시면 됩니다. ^^
  5. 비밀방문자
    비밀방문자
    2015/08/20 11:45
    관리자만 볼 수 있는 댓글입니다.
    • Walter Erzsa
      Walter Erzsa
      2015/08/20 11:58
      블로그 화면을 줄일 때 동영상의 높이는 달라지는데, 상단 메뉴의 top은 150으로 고정되어 있어서 발생하는 문제입니다.

      자바스크립트의 150으로 고정되어 있는 값을 영상이 삽입되어 있는 부분, #blog-header-container의 top으로 바꾸어주면 해결될 것 같습니다.

      var header_height = $('#blog-header-container').height();

      이렇게 상단 영상 부분의 높이를 구할 수 있습니다.
  6. 비밀방문자
    비밀방문자
    2015/08/20 14:15
    관리자만 볼 수 있는 댓글입니다.
    • Walter Erzsa
      Walter Erzsa
      2015/08/20 17:06
      스킨 파일이 잘못되어 있었습니다. 지금은 수정되어 대댓글이 잘 달립니다. ^^
      해결되셨다니 다행입니다.
  7. 좋은날
    좋은날
    2015/10/31 09:17
    안녕하세요..
    좋은자료 감사합니다.^^

    처음에는 [블로그 화면 상단 메뉴 고정 테스트] 이부분만 있고
    [블로그 상단 메뉴 예시] 이 상단메뉴 부분은 안보이고
    스크롤을 내릴 경우에 [블로그 상단 메뉴 예시] 이 상단메뉴 부분이 보이게도 가능한가요?
    감사합니다.
    • Walter Erzsa
      Walter Erzsa
      2015/11/03 21:55
      네, 가능합니다.
      현재 스크롤의 위치는 자바스크립트를 이용하여 감지하고 있습니다.
      따라서 자바스크립트에 다음과 같이 메뉴 영역에 스타일을 지정해주면 됩니다.

      $('#menu-container').css('display', 'none');

      or

      $('#menu-container').css('display', 'block');
  8. 비밀방문자
    비밀방문자
    2015/12/02 08:39
    관리자만 볼 수 있는 댓글입니다.
    • Walter Erzsa
      Walter Erzsa
      2015/12/02 21:47
      상단 메뉴의 상하 위치를 변경하기 위해서는 CSS 소스코드 중 top 속성을 변경하면 됩니다. ^^
  9. 비밀방문자
    비밀방문자
    2015/12/15 13:37
    관리자만 볼 수 있는 댓글입니다.
    • Walter Erzsa
      Walter Erzsa
      2015/12/16 15:21
      아닙니다. 따로 수정해야하는 부분은 없습니다. 그리고 티스토리에서 css 부분에 내용을 추가하면 자동으로 적용이 됩니다. 자세한 내용을 알기 위해서는 제가 직접 확인해야하는데, 스크린샷을 올려주시면 더 빨리 해결할 수 있을 것 같습니다.
  10. 이기욱
    이기욱
    2016/01/14 11:08
    유용한 정보 정말 감사합니다~. 홈페이지 만드는 데 큰 도움이 되었네요.
    궁금한 점이 있는데, 위와같은 메뉴를 각각의 페이지마다 적용시켜야 하는데 아무래도 각페이지마다 소스를 넣으면 편집하는데 불편함이 있을 것 같습니다. 하나의 페이지로 다른페이지를 각각 적용하려고 하는데 어떤 방식으로 적용시켜야 할까요.
    • Walter Erzsa
      Walter Erzsa
      2016/01/14 23:08
      PHP, ASP, JSP와 같은 웹 프로그래밍 언어를 사용하면 쉽게 해결할 수 있습니다. 먼저 위의 메뉴를 포함하고 있는 HTML 파일을 만든 후, 다른 파일에서 불러오면 됩니다. PHP의 경우에는 include 함수를 사용하면 됩니다.
  11. hwaniwow
    hwaniwow
    2016/02/19 15:19
    안녕하세요~
    티스토리 블로그를 운영하는 블로거 입니다~
    블로그에서 설치는 해보았는데요
    홈화면에서
    메뉴 container가 스크롤시 글 아래로 보이는 현상이 있습니다. ㅠㅠ ( 티에디션 설정 되어 있습니다. )
    그리고, 포스트에서는 이런현상이 없는데.. 구글 광고가 메뉴위로 스크롤 되는 현상이 있네요 ㅠ
    그리고 월터님 메뉴처럼 카테고리가 버튼으로 하려면 어떻게 해야할가요?

    답변 부탁드립니다~
    • Walter Erzsa
      Walter Erzsa
      2016/02/27 15:22
      답변이 늦어 죄송합니다. 메뉴가 글 아래로 가리는 이유는 메뉴의 위치가 아래에 있기 때문입니다. 이 문제는 menu-container에 z-index: 100000 CSS 속성을 추가하면 해결될 것으로 보입니다.

      그리고 카테고리가 버튼으로 구성되었다는 말씀의 의미를 잘 모르겠습니다. 혹시 카테고리명 왼쪽에 위치한 아이콘을 말씀하시는 것이라면 이것은 FontAwesome 기능을 사용한 것입니다. 이 블로그에서 FontAwesome을 찾아보시면 쉽게 이해하실 수 있으실 겁니다. ^^
  12. 2016/02/25 07:36
    배우고 갑니다~
  13. 방문자
    방문자
    2016/05/11 14:31
    좋은 정보 감사합니다~
  14. 파트라슈
    파트라슈
    2016/05/24 15:13
    글 잘봤습니다.
    혹 스크롤바를 내릴 때, 상단 메뉴에 나오는 글자를 버튼식으로 만들 수 있는 방법이 없을까요?
    만들어 보려고 하니 자꾸 위치가 안맞거나 엉뚱한데 생기네요..
    • Walter Erzsa
      Walter Erzsa
      2016/05/27 18:53
      버튼 방식이 정확히 어떤 것인지요?
      버튼을 사용한다고 특별히 위치가 안 맞지는 않을 겁니다.
    • 파트라슈
      파트라슈
      2016/05/30 00:26
      음.. 그 스크롤을 내렸을때 "상단메뉴 예시"글자에 이미지를 넣는 식으로 버튼을 만들어 보려고 했습니다만, 버튼이 안보이네요.. 혹 상단메뉴에 나오는 글자 자체를 버튼으로 만들 때 #menu-container .menu-icon > div {}이 부분에다 넣는게 아닌가요?
      (입문단계라 많이 헷갈리네요ㅠ)
    • Walter Erzsa
      Walter Erzsa
      2016/06/04 20:36
      메뉴를 만들기 위해서는 #menu-container .menu-item 아래에 각종 링크 텍스트를 추가하면 됩니다. menu-icon은 스크롤을 아래로 내렸을 때 나타나는 블로그 식별 문자입니다. ^^
  15. homa
    homa
    2016/08/29 15:02
    좋은 정보 감사합니다^^ 소스 설명이 꼼꼼하게 되어있어서 이해하기 좋았습니다.