Navigation menu & button | Page Layout Series Part VII

Home > Document > CSS > Page Layout Series > PLS Part VII

Navigation menu의 위치

Page layout 을 구성하는 요소로써 CSS box model, Visual formatting, Positioning 등의 형태적인 요소 들이 있다면, page layout을 구성하는 또 다른 요소로는 '기능적 요소' 가 있습니다. '기능적 요소' 라는 것은 크게 나누어 web page designer 자신이 방문자에게 전달하려고 하는 '정보'를 담고있는 본문들(articles)과 본문들을 연결시켜주는 연결고리 역할을 하는 'link button' 들이 있겠습니다. 이 중에 연결고리 역할을 하는 link button 들이 모여있는 집단을 통상 navigation menu 또는 navigation bar 라고 부르게 되죠.

그런데 이 navigation menu 를 만드는데 있어서 위치나 형태를 어떻게 design 하느냐에 대한 원칙은 정해진 것이 없는 걸로 알고 있습니다. 그도 그럴 것이 navigation menu의 형태나 위치를 design 하는 것은 어디까지나 designer의 권한이기 때문이겠죠. 그렇다면 아무 위치에다 아무런 모양으로 만들어도 괜찮다는 뜻 일까요? 물론 그렇지는 않다고 봅니다. 예를 들어 navigation menu를 문서의 하단에 만들었다고 칩시다. 그래 놓고 그게 designer의 권한이라고 주장한다면 할 말은 없겠지만 navigation을 하기 위해서는 항상 페이지 아래까지 scroll을 해야 되기 때문에 불편할 것은 뻔 한 사실입니다. 그렇다면 가장 많이 사용하는 화면 왼쪽이나 상단은 어떨까요. 이건 물론 좋은 방법입니다. 가장 많이 사용되는 위치이기 때문이죠. 그런데 왜 왼쪽이나 상단을 가장 많이 사용하는지를 생각해 보면 '남들이 다 그렇게 하니까' 라기 보다는 좌측과 상단이 문서의 기준점이 되기 때문입니다. 따라서 문서간의 이동으로 페이지가 바뀌어도 좌측과 상단이 언제나 먼저 보이므로 원하는 문서로 이동하는 navigation menu를 찾기 쉽다는 거죠. 그러므로 좌측이나 상단은 navigation menu가 놓이는 위치로 지극히 타당하다고 할 수 있습니다.

Navigation menu의 형태

Navigation menu의 형태란 문서를 연결하는 각각의 link button 들이 모인 집단의 모양을 뜻 합니다. 이 navigation menu를 구성하고 있는 link button 들은 지난 페이지의 JavaScript Template의 sample file 에서 사용한 <a> tag 이 가장 간단하면서 기본적인 link button 이라고 할 수 있습니다. 그런데 <a> tag 이 가장 간단하면서 기본적이라고 해서 무시 해서는 절대 안됩니다. 네이버, 야후 등의 포탈 사이트는 물론이고, W3C 같은 사이트에서도 역시 <a> tag을 사용하여 문서를 link 하고 있으며, Google 같은 검색 사이트의 검색 robot 이 인터넷 server의 정보를 수집할 때 우선적으로 수집하는 정보 중에 하나가 <a> tag과 연결된 문서의 정보 입니다. 따라서 특별한 경우가 아니라면 <a> tag을 사용한 link를 거는 것이 가장 타당한 방법이라고 할 수 있습니다.

Navigation menu 만들 때의 고려 사항

Navigation menu 제작시 고려 사항이란 각 button이 문서를 link 시키는 기본적인 목적 이외로 갖추고 있으면 좋은 몇 가지 기능들 입니다. W3C에서도 웹 접근성 향상을 위한 지침(WAI : Web Accessibility Initiative Guidelines)이라는 것을 만들고, 그 중에는 link 에 관한 지침도 포함시키고 있는데 그 중에는 'link 걸린 text(HyperText) 는 일반 text와 구분이 가도록 할 것', '여러 단계를 거치지 않고 원하는 문서로 직접 이동할 수 있을 것', '현재 내가 보고 있는 문서의 위치가 어디인지 알수 있을 것', '항상 사이트의 첫 페이지(대문 페이지)로 이동하는 link를 제공할 것', 등등 여러 가지 권장 사항들이 있지만 간추려 보면

Link button이 link button이라는 것을 알아 볼 수 있을 것.
원하는 문서로 이동하는 도중에 헤매는 일이 없을 것.
현재 보고 있는 문서의 위치를 알 수 있을 것.

정도로 압축할 수 있습니다. 따라서 이 번 페이지에서는 위의 3 가지 사항을 만족 시킬 수 있는 navigation menu 및 button에 대해서 알아 보도록 하겠습니다.

Link button에 효과 주기

button 의 형태 자체를 볼 때 이 사항은 <a> tag을 사용 하는 것 만으로도 어느 정도 만족 시킬 수 있습니다. 즉, body element의 속성인 text(본문등의 link 걸리지 않은 일반 text), link(link 걸린 hypertext color), vlink(visited link : 방문한 문서의 text color), alink(active link : 현재 click 한 link 의 text color) 등을 사용하지 않더라도 link(blue)와 vlink(purple)는 자동으로 지정 되므로 <a> tag의 사용이 가장 간편한 방법 이라는 말 입니다. 그리고 결코 뒤떨어지는 방법이 아닙니다. 오히려 자기 만의 독특한 효과를 내려고 어설프게 만든 button 보다는 훨씬 아름답다고 할 수 있습니다.

또한 button의 위치는 우리가 관습적으로 link button을 찾는 곳이 좌측 또는 상단이므로 button이 좌측이나 상단에 있으면 'navigation의 관습법'을 적용했을 때 큰 문제가 없다고 할 수 있습니다. 하지만 만약에 제가 '<a> tag을 사용하는 것도 훌륭하므로 그냥 <a> tag을 사용하세요' 하면서 결론을 내리면 '겨우 그거 설명할라고 앞에 말이 그렇게 무쟈게 많았냐' 고 하실게 뻔 하므로 이제 부터 CSS를 사용하여 a tag에 효과를 주는 방법에 대해 구체적으로 알아 보도록 하겠습니다. 이 series 에서는 CSS를 사용한 page layout 에 대해 다루므로 Link 관련 CSS 에 대해 잘 모르면 이 사이트 CSS > Pseudo class > Link를 참조 하시기 바랍니다. 그러면 예를 들어 아래의 Sample file과 같은 형태의 navigation menu button을 사용했을 경우 navigation menu의 실제 예는 아래의 iframe으로 불러들인 페이지와 같으며, 해당 CSS selector는 iframe 밑의 표와 같이 Mouse event 별로 구분할 수 있습니다.

Button action sample file의 iframe

위의 sample file을 새로 띄워보면 알겠지만 sample file에는 index.html, html.html, css.html, xhtml.html, javascript.html, xml.html 의 총 6 개의 파일이 서로 link 되어 있습니다.

Sample file의 event 별 mouse action

Mouse event 별 button 모양

button 모양

Mouse event

CSS property & value

Button

onMouseOut, 평상시

a.button_off{
text-decoration:none;
font-weight:bold;
line-height:21px;
padding:3px;
color:#333;
border:1px solid #ddd;
background-color:#ddd;
}

Button

onMouseOver

a.button_off:hover, a.button_on:hover{
text-decoration:none;
font-weight:bold;
line-height:21px;
padding:3px;
color:#f00;
border:1px solid #666;
background-color:#ccc;
}

Button

onClick

a.button_on{
text-decoration:none;
font-weight:bold;
line-height:21px;
padding:3px;
color:#f00;
border:1px solid #666;
background-color:#fff;
}

하지만 위의 표의 경우 공통적으로 사용되는 {text-decoration:none; font-weight:bold; line-height:21px; padding:3px;}는 link button이 사용하는 class에 공통적으로 사용되므로 각 class 마다 매번 지정하지 않고 해당 부분만 떼어서 따로 정리하여 code를 줄이면 아래와 같이 정리 할 수 있습니다.

각 class에 공통 적용되는 CSS property와 value 부분을 따로 뽑아서 정리한 표

Mouse event 별 button 모양

button 모양

Mouse event

CSS property & value

button_off와 button_on에 공통으로
적용되는 css property와 value

a.button_off, a.button_on{
text-decoration:none;
font-weight:bold;
line-height:21px;
padding:3px;
}

Button

onMouseOut, 평상시

a.button_off{
color:#333;
border:1px solid #ddd;
background-color:#ddd;
}

Button

onMouseOver

a.button_off:hover, a.button_on:hover{
color:#f00;
border:1px solid #666;
background-color:#ccc;
}

Button

onClick

a.button_on{
color:#f00;
border:1px solid #666;
background-color:#fff;
}

그래서 이 부분을 위의 iframe으로 불러들인 sample file 중에서 html.html 을 예로 들어 CSS 만을 사용하여 정리하면 body 부분의 code는 아래와 같습니다.

*** PLS 의 모든 페이지가 그렇지만 아래의 code는 앞 페이지의 'Layout with Template'과 연결된 내용이므로 앞 페이지를 알고 있다는 가정 하에서 진행하므로 앞 페이지를 숙지하고 봐야 됩니다.

body.js를 template으로 사용하지 않고 full code를 입력한 html.html의 code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
		
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>HTML</title>
        <script type="text/javascript" src="head.js"></script>
    <body>
        <!-- body.js 의 시작 -->
        <div id="header">
            <h1 class="title" onclick=location.href="index.html" style="cursor:pointer;">Home</h1>
        </div>
        <div id="wrap">
            <div id="left_column" class="column">
                <a class="button_on" href="html.html">HTML</a><br />
                <a class="button_off" href="css.html">CSS</a><br />
                <a class="button_off" href="xhtml.html">XHTML</a><br />
                <a class="button_off" href="javascript.html">JavaScript</a><br />
                <a class="button_off" href="xml.html">XML</a><br />
            </div>
            <div id="right_column" class="column">
            <!-- body.js 의 끝 -->
            <h1>HTML 입니다.</h1>
            <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        <script type="text/javascript" src="tail.js"></script>
    </body>
</html>

이렇게 위의 code에서와 같이 body.js 부분이 template으로 삽입되지 않고 full code로 들어가 있습니다. 이렇게 될 경우 css.html을 예로 들면 아래와 같이 css.html의 해당 a tag 에

로 button_on class를 지정해야 되며, link된 각 file 마다 같은 식으로 해당 a tag에 button_on class를 지정해야 된다는 말이 됩니다. 그런데 이렇게 각 페이지 마다 body.js 부분에 해당되는 code를 몽땅 다 입력하게 되면 지난 'Layout with Template' 페이지에서 사용한 JavaScript template이 무의미해 지게 됩니다.

Template을 그대로 사용하면서 Scripting으로 button에 action 주기

따라서 template을 그대로 둔 채로 어떤 방법을 사용해서 각 file에 해당하는 a tag에 button_on class를 적용시킬 방법을 강구해 봐야 될 필요가 있겠습니다.

물론 여기에는 여러 가지 방법이 있을 수 있겠지만 관리자가 선택한 방법은 body tag에 onload event 를 사용하여 지정하는 a tag의 class를 button_on으로 지정하는 방법으로서 구체적인 내용은 아래의 순서와 같습니다. html.html file을 예로 들면 우선 my_style.css file을 열고 아래의 button_on, button_off class를 추가 합니다.

1. my_style.css 에 아래의 class 추가 지정

...
...
a.button_off, a.button_on{
text-decoration:none;
font-weight:bold;
line-height:21px;
padding:3px;
}

a.button_off{
color:#333;
border:1px solid #ddd;
background-color:#ddd;
}

a.button_on{
color:#f00;
border:1px solid #666;
background-color:#fff;
}

a.button_off:hover, a.button_on:hover{
color:#f00;
border:1px solid #666;
background-color:#ccc;
}

다음은 scripting을 할 수 있도록 body.js를 열고 각 a tag에 아래와 같이 id를 지정 합니다.

2. body.js 의 a tag에 id 추가 지정

...
...
<div id="left_column" class="column">
    <a class="button_off" id="html" href="html.html">HTML</a><br />
    <a class="button_off" id="css" href="css.html">CSS</a><br />')
    <a class="button_off" id="xhtml" href="xhtml.html">XHTML</a><br />
    <a class="button_off" id="javascript" href="javascript.html">JavaScript</a><br />
    <a class="button_off" id="xml" href="xml.html">XML</a><br />
</div>
...
...

head.js file을 열고 아래의 currentButton function을 추가 합니다.

3. head.js에 currentButton() function 추가 지정

        ...
        ...
        function currentButton(aButton){
        document.getElementById(""+aButton+"").className = "button_on";
        }

html.html file을 열고 body tag에 onload event로 currentButton function 을 호출할 수 있도록 합니다.

4. html.html의 body tag에 onload event로 currentButton function 을 호출

    ...
    ...
        <script type="text/javascript" src="head.js"></script>
    <body onload="currentButton('html');">
        <script type="text/javascript" src="body.js"></script>
            <h1>HTML 입니다.</h1>
    ...
    ...

이제 navigation menu 에 button action 을 줄 수 있는 과정을 마쳤습니다. Button action sample file을 열어서 button action을 확인 하도록 합니다.

currentButton function의 위치

반드시 currentButton function을 body tag의 onload event로만 호출 할 수 있는 것은 아닙니다. 아래와 같이 body 속에 script block을 사용하여 호출 할 수도 있습니다.

body 속에 script block을 넣어서 currentButton function 을 호출

<script type="text/javascript">
<!--
currentButton('html')
// -->
</script>

하지만 이 경우에 신경써야 할 것은 script block이 나타나는 위치 입니다. 즉, 아래와 같이

body.js 보다 script block이 먼저 들어가서 error가 난 경우

        <script type="text/javascript">
        <!--
        currentButton('html')
        // -->
        </script>
        <script type="text/javascript" src="body.js"></script>

script block이 body.js 앞 부분에 들어가면 error 가 발행하게 된다는 거져... 왜냐하면 html에서 사용되는 JavaScript code의 경우도 위에서 아래로 순차적인 처리를 하기 때문에 currentButton function을 호출하는 script block이 나타난 시점에서는 id="html"을 가진 tag이 나타나지 않았기 때문에 생기는 error 입니다. 따라서 올바른 위치는

script block 이 body.js 뒤에 나와서 올바른 위치

        <script type="text/javascript" src="body.js"></script>
        <script type="text/javascript">
        <!--
        currentButton('html')
        // -->
        </script>

와 같이 id="html"이 포함된 body.js file 이후에 script block 이 들어 가야 됩니다.

list-style-image를 이용한 button action

위에서 소개한 button action을 사용한 navigation menu 이외에도 CSS를 잘 활용하면 각자의 개성을 가진 navigation menu를 만들 수 있습니다. 따라서 여러분 들도 참신한 아이디어로 자기만의 개성을 나타 낼 수 있는 navigation menu를 만들어 보시기 바랍니다. 또한 그런 navigation menu를 만들어 이 사이트에 소개해 주신다면 더 바랄 나위가 없겠죠. 그러면 PLS Part VIII 에서 다시 뵙기로 하고 list-style-image를 이용한 navigation menu에 대한 자세한 내용은 아래의 sample을 참고하여 분석해 보시고, 또한 각 sample file을 압축한 file은 Data Room 에 올려 놓겠습니다.

list-style-image를 이용한 button action sample file의 iframe

Top

Back

New

검색