세로 메뉴 만들기

입문자를 위한 세로 메뉴 만들기 - 마이온스터디

개요

세로 메뉴 만들기 내용을 최대한 자세히 담았습니다.

 

세로 메뉴 만들기는 매우 간단하고 쉬워 보이지만 block과 inline에 대한 이해 없이 제대로 만들기 어렵습니다. 오프라인 강의에서 실습 문제로 세로 메뉴 만들기를 진행하면, 생각처럼 잘 되지 않아 의외로 많이 당황하는 실습 문제이기도 합니다. 

 

이 글을 통해 세로 메뉴를 만들 때 필요한 요소와 각 요소의 역할을 명확히 이해하면 헷갈림 없이 쉽게 만들 수 있습니다.

---

0. 목차 안내

1. 세로 메뉴 HTML 구조 이해하기
2. 각 요소의 역할 이해하기
3. 각 요소의 역할에 맞게 style 지정하기

---

1. 세로 메뉴 HTML 구조 이해하기

    웹사이트에서 2개 이상의 링크 버튼을 한 곳에 모아 나열해 놓은 형태를 "메뉴"라고 칭한다. 그렇게 모아 놓은 링크 버튼은 "메뉴 목록"이라는 하나의 덩어리 역할을 한다. HTML에서 세로 메뉴 형태를 만드는 구조는 아래와 같다.

<ul class="vertical_menu">
  <li>
    <a href="#">Home</a>
  </li>
  <li>
    <a href="#">About</a>
  </li>
  <li>
    <a href="#">Product</a>
  </li>
  <li>
    <a href="#">Contact</a>
  </li>
</ul>

 

    1.1. ul(un orderdered list)

ul은 순서가 없는 목록 형태를 의미한다. li의 항목을 모두 묶어서 하나의 목록 덩어리를 만드는 역할을 하는 것이 바로 ul이다. 그래서 자식 요소인 li가 반드시 함께 사용되어야 한다. ul 바로 아래에 li가 아닌 다른 요소가 자식으로 들어올 수 없다. 

 

    1.2. li(list item)

말 그대로 각각의 목록 요소를 의미한다. 부모 요소인 ul이 반드시 함께 사용되어야 한다. 링크 개수만큼 li가 필요하다는 것을 꼭 기억하자!!

    1.3. a(anchor)

a는 보통 "링크"를 걸 때 사용하는 요소다. 어원은 anchor이며 이는 "닻"을 의미한다. 닻은 배를 정박할 때 사용하는 물건이다. 그리고 HTML에서도 실제로 이 의미를 그대로 살려서 anchor라는 이름으로 사용되고 있다. 

 

웹 서핑이 항해라면 웹 사이트에 저장된 링크들은 모두 바다 위에 정박한 배와 같다. 웹 서핑 사용자들을 위해 항시 대기 중인 상태로 준비되어 있는 느낌이다. 링크를 클릭하는 순간 원하는 방향으로 어디든 다시 항해할 수 있다.

+ 웹 서핑(Web Surfing)
인터넷의 여러 사이트를 돌아다니며 동영상이나 문서 따위의 정보를 열람하는 일.
+ href (Hypertext Reference)
간단히 말하면, 특정 웹 문서를 대기 상태로 참조한다는 의미다.
+ href="여기에 참조할 웹 문서 주소 넣기" 
+ href="#" / 참조할 문서 주소를 넣지 않아도, 버튼에 마우스 오버 시 손 모양 아이콘이 나오도록 할 때 "#"를 사용!

+ Hypertext 의미 자세히 보기(클릭!!)

---

2. 각 요소의 역할 이해하기

    2.1. ul(un orderdered list)

ul은 li의 항목을 모두 묶어서 하나의 목록 덩어리 역할을 한다. 그러므로 웹사이트 레이아웃에서 ul의 역할은 바로 "정렬" 담당이다. 메뉴의 위치를 어디에 둘지, 그것을 담당한다. 즉, 메뉴의 위치를 지정하려면 style에서 ul에 코드를 지정해야 한다. 

 

    2.2. li(list item)

HTML 문서에서 ul, li, a를 입력하고 결과를 확인하면 기본 형태가 세로로 잡혀있다. 이때 style에 아무것도 지정하지 않아도 메뉴가 세로 형태로 잡히는 이유는 바로 li 때문이다. li가 block 요소이기 때문이다. block 요소의 기본값을 활용하면 되기 때문에 style에서 li에 따로 지정해야 할 코드는 없다.

 

block 요소의 자세한 특징은 별도의 게시물로 준비할 예정입니다.

    2.3. a(anchor)

a는 "링크 버튼" 역할을 한다. 그러므로 style에서 버튼 디자인 코드를 a에 지정하면 된다. 주의할 점은 a는 inline 요소라는 것을 기억해야 한다. inline 요소는 웹 브라우저에서 텍스트처럼 취급되기 때문에 width, height 개념이 적용되지 않는다. 즉, 버튼의 크기 지정이 불가능하다. 사용자가 클릭하기 편한 버튼을 만들기 위해서는 크기 조정이 가능해야 한다. 그러므로 크기 조정이 가능한 block으로 바꿔서 사용해야 한다. block으로 바꾸는 방법은 다음 내용에 나오는 style 코드를 참고하라!

 

inline 요소의 자세한 특징은 별도의 게시물로 준비할 예정입니다.

---

3. 각 요소의 역할에 맞게 style 지정하기

    3.1. 각 요소의 역할에 맞게 style을 지정하는 방법은 아래와 같다.

.vertical_menu {
  width: 200px;
  margin: 100px auto 0; /* 메뉴를 가로 가운데 정렬 */
}

.vertical_menu li a {
  display: block; /* 버튼의 크기를 키워서 사용자가 클릭하기 편하게 만들기 */
  background-color: #d63f22;
  color: #ccc;
  padding: 16px;
  border-bottom: 1px solid #bf391f;
}

.vertical_menu li:last-child a {
  border-bottom: 0; /* 버튼이 4개 이므로 버튼을 구분하는 선은 3개만 필요함! */
}

.vertical_menu li a:hover {
  background-color: #bf391f;
  color: #fff;
}

---

커피 한 잔으로 후원하기

2016년부터 오프라인에서 입문자를 위한 웹 퍼블리싱 교육을 하고 있습니다. 강의하면서 누적된 지식과 노하우를 온라인으로 공유합니다. 후원은 양질의 콘텐츠를 제작하는 데 아주 큰 힘이 됩니다. 감사합니다. 

 

---

사이트 모음

→ 마이온스터디 YouTube

→ 마이온스터디 코딩하는시간(YouTube)

---

 

최고의 가치는 "실력을 갖추는 것"이다.

 

---

 

가장 이상적인 학습

배운 내용을 자유롭게 가지고 노는 것.