상단메뉴 만들기
과제를 받고 홈페이지를 만들기 시작한 지 1주가 되었지만,
저번 주 금요일에 여지껏 만들던 것들을 엎고 다시 시작하게 되었으므로
1주차가 아니라 3일차라고 봐도 된다.
그러나 일요일은 1도 손을 대지 않았고 오늘도 딱히 많은 일을 하진 않았기에
사실은 그냥 1일차라고 해도 무방하다.
그래서 1일차 기념 블로그 업로드!
홈페이지 개발(?) 과정을 다 올릴 것은 아니지만
새로 수정하기로 했지만 원래 만들어 두었던 페이지 선택 메뉴가
처음만든 것 치고는 잘 만들어진 것 같아 한번 살~짝 올려두려고 한다.
하나하나 다 올리자면 내가 업로드를 중도 포기하게 될 가능성이 높아서(...) 그런 것도 있고.
아무튼 잡담은 넘기고,
내가 오늘 올리려는 내용은 '상단 메뉴 만들기' 이다.
상단 메뉴를 통해 페이지를 선택해서 볼 수 있도록 한 것인데,
일단은 HTML소스와 CSS소스를 보면서 찬찬히 얘기해보도록 하겠다.
<!-- index파일의 상단메뉴 --><html><body> <div id="menu"> <ul> <li><a class="selected" href=".\index.html">MAIN</a></li> <li><a class="menuLink" href=".\intro.html">INTRODUCTION</a></li> <li><a class="menuLink" href=".\study.html">MY STUDY</a></li> <li><a class="menuLink" href=".\site.html">SITE</a></li> <li><a class="menuLink" href=".\email.html">SEND EMAIL</a></li> <li><a class="menuLink" href=".\blog.html">BLOG</a></li> </ul> </div></body></html>
HTML 코드는 간단하다.
ul태그를 사용해서 페이지 목록을 만들어주었으며,
리스트마다 a태그를 이용해서 각 페이지로 연결되는 링크를 적용해주었다.
xxxxxxxxxx/* 메뉴 크기를 지정해주고 중앙정렬 되도록 양옆 마진을 auto로 해주었다. */#menu { height: 40px; width: 1000px; margin-left: auto; margin-right: auto;}/* 리스트 앞에 주어지는 기호를 없애기 위해 list-style을 none으로 지정하고, float를 이용해서 메뉴가 상하정렬이 아니라 좌우정렬이 되도록 했다. 메뉴 칸칸마다 text가 중앙정렬 되도록 text-align을 center로 지정해주었다.*/#menu ul li { list-style: none; color: #4F4F4F; background-color: white; float: left; line-height: 35px; vertical-align: middle; text-align: center;}/* 선택되지 않은 메뉴의 속성이다. 링크마다 기본적으로 주어지는 밑줄이 적용되지 않도록 text-decoration을 none으로 주었다. 글씨 외의 영역을 클릭해도 이동되도록 display를 block 지정 해주었다.*/#menu .menuLink { text-decoration: none; color: #4F4F4F; display: block; width: 150px; font-size: 13px; font-weight: bold; font-family: verdana;}/* 메뉴링크에 마우스를 올리면 색 반전이 되게 했다. */#menu .menuLink:hover { color: white; background-color: #4F4F4F;}/* 선택된 메뉴는 보더를 이용해서 표시해주었다. 글씨도 좀 더 굵게 보이라고 bold를 bolder로 수정해주었는데, 사실 큰 변화는 모르겠어서 다시 bold로 바꾸려다가 기분상 그냥 내버려두었다.*/#menu .selected { text-decoration: none; color: #4F4F4F; border-bottom: 1px solid #4F4F4F; display: block; width: 150px; font-size: 13px; font-weight: bolder; font-family: verdana; outline: 0;}
결과물을 살짝 보여주자면 다음과 같다.
CSS는 나도 뭔가 예쁘게 본격적으로 만들어보는 것은 처음이라서
여기저기 검색을해서 이것저것 섞어보고 책에있는 속성도 넣어보고 하면서 만들었다.
나는 심플한 것이 좋으니 기본 베이스는 white/blackgrey로 하기로 하고,
회색컬러는 원하는 농도로 조정해서 #4F4F4F를 테마컬러로 정했다.
vertical-align에 대한 설명은 설명을 잘 해주신 블로그가 있어 링크로 남긴다.
[공유] Vertical-align 파헤치기! – 1부
'공부 > web' 카테고리의 다른 글
| DI(의존성 주입)과 IoC(제어의 역행) (0) | 2018.05.01 |
|---|---|
| STS를 사용해서 Spring project 만들기 (org.apache.maven.plugin.war.WarMojo error 해결방법) (0) | 2018.05.01 |
| MVC패턴과 모델1, 모델2 구조 (0) | 2018.04.27 |
| 서블릿(Servlet)이란? (0) | 2018.04.26 |
| [홈페이지 만들기] jQuery 마우스 이벤트 (0) | 2018.03.26 |
댓글