드롭다운 메뉴 버튼 만들기 li 태그와 span태그의 차이

오늘은 지난 시간에 이어 드롭다운 메뉴 바 만들기를 하면서 주 메뉴버튼을 hover 했을때 서브 메뉴들이 가로로 정렬 되도록 하는 방법을 알아 보도록 하겠습니다.
우선 코딩배우기, 와 html/css,그리고 Javascript라는 주메뉴 버튼3개를 만들고 서브메뉴 영역에 주어진 span태그와 li 태그에 따라 주메뉴 버튼을 클릭 했을때 서브메뉴버튼이 어떻게 정렬이 되어 나타나는지 변화를 살펴 보도록 합니다.

아래는 스타일 소스 입니다.

CSS

  div, ul, li{

     margin:0;

     padding:0;

   }

  body{

   font-size:12px; font-family:"맑은고딕", arial;

  }

  ul{

    list-style:none;

   }

  a{

    color:#000; 

     text-decoration:none;

   }

  .dop{

  width:440px; height:250px; margin:auto; margin-top:50px; 

    background:pink; border:1px solid red; }

  .dop>ul{

 width:420px; height:30px; background:#ccc; 

 padding:20px 0 0 20px; 

  }

  .dop>ul>li{

         float:left; width:110px; height:30px; margin-right:5px;

         position:relative; list-style:none;

  }

    .dop>ul>li>a{

        display:block; width:100%; height:100%;

       font:bold 13px/30px "맑은고딕", arial; font-famliy:'Malgun Gothic','맑은고딕','AppleGothic','sans-serif;font-size:13px; 

       text-align:center; color:purple; background:#7093db; 

   }

    .dop ul li a:hover{

       color:orange; background:blue; text-decoration:none;

   }

   .dop ul ul{

          display:none;

   }

   .dop>ul>li:hover ul{

         display:block; width:400px; height:25px;

        position:absolute; left:0; top:30px; 

}

   .dop li li{

      width:110px; height:25px; background-color:lime; margin-right:5px; text-align:center; 

       list-style:none; overflow:hidden;

        }

   .dop span{

       width:110px; height:25px; background-color:red; margin-right:5px; text-align:center; 

        list-style:none; overflow:visible;

            }

   .dop span a{

   font:bold 12px/25px "맑은고딕", arial; font-famliy:'Malgun Gothic','맑은고딕','

           Apple Gothic','sans-serif; font-size:15px; text-align:center;

                }

   .dop li li a{

   display:inline-block; width:100%; height:100%;

     font:bold 12px/25px "맑은고딕", arial; font-famliy:'Malgun Gothic','맑은고딕','

          Apple Gothic','sans-serif; font-size:13px; text-align:center;

  }

   .dop li li a:hover{

     color:white; background:none; valign:middle; 

  }

아래는 바디부에 코딩 한 HTML 태그의 소스 입니다.

HTML

<div class="dop">

        <ul>

             <li><a href="#">코딩배우기</a>

                <ul class="spn">

                        <span> <a href="./61#1">코딩의 개념</a></span>&nbsp;

                        <span><a href="#"> DTD 선언</a></span>&nbsp;

                        <span><a href="#">ASCII코드</a></span>

                        <span><a href="#">유니코드 도표</a></span>

                        <span><a href="#">utf8</a></span>

                 </ul> 

            </li>

           <li><a href="#">html/css</a>

              <ul class="non">

                       <li><a href="#">html</a></li>

                       <li><a href="#">CSS의미</a></li>

                      <li><a href="#">선택자</a></li>

                      <li><a href="#">목록태그</a></li>

                </ul>

           </li>

          <li><a href="#">Javascript</a>

                <ul>

                         <li><a href="#">Javascript응용</a></li>

                         <li><a href="#">document.getElementById</a></li>

                         <li><a href="#">사용자함수 정의</a></li>

                 </ul>

            </li>

        </ul>

</div>

아래는 결과 입니다.

메뉴버튼을 클릭하면 실제로 드롭다운이 됩니다.

• 코딩배우기
  코딩의 개념  DTD 선언  ASCII코드 유니코드 도표 utf8
• html/css
  • html
  • CSS의미
  • 선택자
  • 목록태그
• Javascript
  • Javascript응용
  • document.getElementById
  • 사용자함수 정의

위의 결과에서 "코딩배우기" 버튼은 클릭 했을때 서브메뉴 버튼들이 가로로 정렬이 되고 나머지 "html/css" "Javascript" 는 세로로 정렬이 되는것을 확인 할수가 있는데요 

이것은 "코딩배우기" 의 버튼은 span태그를 사용 했고 나머지는 li 태그를 사용 해 코딩 했기 때문 입니다.

지난 글에서도 언급 한 것 처럼 span태그는 inline레벨 엘리먼트 이고 li태그는 블록레벨 열리먼트 이기 때문 이죠

이렇게 li 태그 대신 span태그를 사용 해서 서브 메뉴목록 들을 가로로 정렬 해 주는 방법 이 있고요
li태그는 그대로 사용 하면서 가로로 정렬 하는 방법이 있는데요 그렇게 하기 위해서는 클릭 시에 나타날 상위의 서브영역의 가로폭에 영향을 받게 되므로 이때 리스트 영역의 수의 합이 서브영역 가로폭 과 같거나 작아야 합니다.

설명 하기는 너무 길어서 지난글 페이지를 참고 하도록 합니다.

지난 페이지 보기

위의 결과를 보시면 알겠지만 span a에는 hover를 주지 않아 상위 영역에 적용된 hover가 상속 되어 적용 되어 졌는데요 사실 이같은 것은 원하지 않은 일이였는데 아마 주  스킨 에디트의 스타일 시트에 영향을 받은것 같고요 

이것을 수정 하기는 매우 힘든 상황 이네요 제가 사용 하고 있는 주 스킨html편집 에디트와 css는 부트스트랩의 프레임 워크를 리디즈님이 편집한 것인데요 여기서 주어진 스타일과 주 에디트의css에서 주어진 스타일이 서로 상충 하여 충돌 하는 부분들이 많은 것 같아 실제 적용 하기가 매우 힘든 상황 입니다.

상위의 css의 영향을 상쇄 하는 스타일 에는 clear라는 속성 이 있고요 이속성은 float의 영향을 상쇄 하는 속성 이지만 연결고리가 어떻게 이루어져 있는지를 확실히 파악할수 없어 위 속성을 사용 하긴 했지만 일부분에만 결과가 나타 나며 완전히 해결이 안되는 상태 이네요 그래도 다소 사이드바 일부가 일그러 지긴 해도 주 내용면에는 문제가 없어 그대로 진행 하기로 했습니다.

바디부에는 아래와 같이 코딩을 합니다.

<div class="dop">

  <ul>

      <li><a href="./125#1">코딩배우기</a>

   <ul>

                      <span> <a href="./61#1">코딩의 개념</a></span>&nbsp;

                      <span><a href="#"> DTD 선언</a></span>&nbsp;

              <span><a href="#">ASCII코드</a></span>

              <span><a href="#">유니코드 도표</a></span>

      <span><a href="#">utf8</a></span>

            </ul> 

</li>

<li><a href="./125#1">html/css</a>

     <ul class="non">

                        <li><a href="#">html</a></li>

                        <li><a href="#">CSS의미</a></li>

<li><a href="#">선택자</a></li>

<li><a href="#">목록태그</a></li>

     </ul>

         </li>

  <li><a href="./125#1">Javascript</a>

      <ul>

                     <li><a href="#">Javascript응용</a></li>

     <li><a href="#">document.getElementById</a></li>

     <li><a href="#">사용자함수 정의</a></li>

     </ul>

  </li>

    </ul>

</div>

이렇게 위와 같이 코딩을 했다면  이번엔 스타일 시트를 손 봐 줘야 하겠죠

<style> 

 div, ul, li{margin:0; padding:0;}

 body{font-size:12px; font-family:"맑은고딕", arial}

 ul{list-style:none}

 a{color:#000; text-decoration:none}

 .dop{

width:440px; height:250px; margin:auto; margin-top:50px; 

background:pink; border:1px solid red; }

  .dop>ul{

 width:420px; height:30px; background:#ccc; 

 padding:20px 0 0 20px; 

}

  .dop>ul>li{

 float:left; width:110px; height:30px; margin-right:5px;

 position:relative; list-style:none; radius:1em;

}

.dop>ul>li>a{

 display:block; width:100%; height:100%;

 font:bold 13px/30px; font-famliy:'Malgun Gothic','맑은고딕','Apple Gothic','arial',sans-                         serif;font-size:13px;

 text-align:center; color:purple; background:#7093db; 

}

.dop ul li a:hover{color:orange; background:blue; text-decoration:none;}

.dop ul ul{display:none}/*

위부분은 주메뉴 영역과 리스트 영역 이므로 변경할 필요가 없겠죠

아래는 서브영역과 리스트 영역 입니다. 

이부분에 추가 하거나 변경 해주어야 합니다.*/

.dop>ul>li:hover ul{

  display:block; width:400px; height:25px;

  position:absolute; left:0; top:30px; 

}/*주 메뉴버튼을hover시에 출력되는 서브 영역 전체를 제어 하는 부분 입니다.*/

.dop>ul>li:hover .non{

   display:block; width:480px; height:25px;

   position:absolute; left:0; top:30px; 

}/* 두번째의 주 메뉴버튼을hover시에 출력되는 서브 영역 이며

코딩을 할때 class명을non으로 한 서브 영역인ul태그 의 영역을 변경 해 주기 위해 추가 한  스타일 입니다.

이때 아래의 리스트 메뉴갯수의 합산한 값보다 작으면 리스트블록 중 마지막 블록이 아래로 내려 붙게 되니 유의  하도록 합니다.그래서 480픽셀을 주었습니다.

그리고 불릿을 없애기 위해 list-style:non;으로 속성변경을 해 줍니다.

리스트의 합산 보다 가로폭이 넓은 경우 위의 스타일에  적용된.non li{float:left;} 스타일의 정의로 인해 가로 정렬이 됩니다.*/

.non li{float:left;

width:110px; height:25px; background-color:lime; margin-right:5px; text-align:center; list-style:none; overflow:hidden;

}/*두번째 주메뉴 아래의 서브 메뉴 가로정렬을 위해 추가*/

.dop li li{

width:110px; height:25px; background-color:lime; margin-right:5px; text-align:center; list-style:none; overflow:hidden;

}

.dop span{

width:110px; height:25px; background-color:red; margin-right:5px; text-align:center; list-style:none; overflow:visible;

}/*코딩배우기 주메뉴 아래의 서브 영역으로4개의 a태그 가 위치하고 있습니다.*/

 .dop span a{

 font:bold 12px/25px "맑은고딕", arial; font-famliy:'Malgun Gothic','맑은고딕','Apple                                 Gothic','sans-serif; font-size:15px; text-align:center;

        }

 .dop li li a{

 display:inline-block; width:100%; height:100%;

 font:bold 12px/25px "맑은고딕", arial; font-famliy:'Malgun Gothic','맑은고딕','Apple                                 Gothic','sans-serif; font-size:13px; text-align:center;

}

 .dop li li a:hover{

 color:white; background:none; valign:middle; 

}

  </style>

결과 입니다.

• 코딩배우기
  코딩의 개념  DTD 선언  ASCII코드 유니코드 도표 utf8
• html/css
  • html
  • CSS의미
  • 선택자
  • 목록태그
• Javascript
  • Javascript응용
  • document.getElementById
  • 사용자함수 정의