이제 창의 상단 섹션에 표시되는 메뉴부터 시작하겠습니다.
이 메뉴에 대한 준비 작업은 이미 마쳤습니다. 1픽셀 그래픽으로 저장된 예쁜 색상 그라데이션을 기억하실 것입니다. 이것이 바로 지금 사용될 것입니다. 그러나 메뉴 영역에 해당하는 HTML 구조를 먼저 만들어야 합니다. 다음과 같이 보일 수 있습니다:
<div class="header"> <div class="header-top"> <h1>세무사</h1> </div> <div class="topmenu"> <ul> <li><a href="index.html">홈페이지</a></li> <li><a href="#">회사 소개</a></li> <li><a href="#">업무 방식</a></li> <li><a href="#">연락처</a></li> <li><a href="#">임프린트</a></li> </ul> </div> <div class="header-img"> </div> </div>
배경을 디자인하기 위해 1픽셀 그래픽이 포함되고 전체 요소가 채워질 때까지 세로로 반복됩니다.
.topmenu { background-image: url(../images/menue.jpg); background-repeat: repeat-x; width: 978px; height: 37px; float: left; }
그런 다음 메뉴의 서식을 지정할 수 있습니다. 원칙적으로 여기서 고려해야 할 특별한 기능은 없습니다. 이러한 메뉴에는 다음과 같은 측면만 결정적으로 중요합니다:
- 목록 스타일 유형: none; 을 통해 불릿 포인트를 Blender합니다.
- 목록 항목이 서로 나란히 표시되도록 합니다.
이미 아시다시피 저는 이 시점에서 그래픽을 사용하여 구현된 색상 그라데이션으로 작업합니다. 물론 이제 메뉴에 사용할 수 있는 다른 옵션도 많이 있습니다. 예를 들어 jQuery와 같은 JavaScript 프레임워크를 생각해 보세요. 물론 이러한 모든 가능성을 제시하는 것은 이 글의 범위를 넘어서는 것입니다. 하지만 클릭 몇 번으로 메뉴를 만드는 데 사용할 수 있는 수많은 온라인 생성기가 오랫동안 존재해 왔습니다. http://www.cssmenubuilder.com/ 에서 가장 독창적인지 여부에 대한 판단 없이 그중 하나를 찾을 수 있습니다.
어쨌든 저는 다음 변형을 선호하기로 결정했습니다:
.topmenu ul { 너비: 100%; 높이: 37px; 목록 스타일 유형: none; } .topmenu ul li { 높이: 37px; 플로트: 왼쪽; 패딩-우측: 25px; 패딩-왼쪽: 25px; } .topmenu ul li { font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: 굵게; line-height: 37px; colour: #fff; text-decoration: none; display: block; height: 37px; float: left; padding-right: 20px; padding-left: 20px; } .topmenu ul li a:hover { background-image: url(../images/menue-hover.jpg); background-repeat: repeat-x; background-position: 왼쪽 상단; } .
실제로는 호버 상태만이 결정적입니다. 이 이벤트가 발생하면 다른 배경 그래픽이 표시됩니다.
오른쪽 메뉴
웹사이트에는 상단에 메뉴가 있을 뿐만 아니라 오른쪽 창 영역에도 메뉴가 표시됩니다.
이 메뉴는 콘텐츠 오른쪽 클래스가 있는 div 영역에 속합니다. 페이지 개발 단계에서는 더미 콘텐츠만 저장했습니다.
<div class="content-right"> <h2>메인 메뉴</h2> <ul> <li><a href="#">링크 1</a></li> <li><a href="#">.Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> <li><a href="#">Link 5</a></li> <li><a href="#">링크 6</a></li> <li><a href="#">링크 7</a></li> <li><a href="#">링크 8</a></li> <li><a href="#">링크 9</a></li> <li><a href="#">링크 10</a></li> </ul>
먼저 적절한 위치에 원하는 크기로 영역을 배치합니다.
.content-right { 너비: 210px; 플로트: 오른쪽; 패딩-우측: 20px; 여백-위: 20px; 테두리: 1px 솔리드 #eee; }
실제 메뉴의 정의는 계속 진행합니다. 하지만 이번에는 항목이 서로 아래에 하나씩 있습니다. 따라서 불릿 포인트가 숨겨져 있는지 확인하기만 하면 됩니다. 나머지 메뉴 디자인은 궁극적으로 사용자에게 달려 있습니다.
.content-right ul { list-style-type: none; } .content-right ul li { padding-left: 45px; padding-top: 4px; padding-bottom: 4px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #ccc; } .content-right ul li a { font-family: Arial, Helvetica, Serif; font-size: 12px; color: #000; text-decoration: none; text-align: left; display: block; } .content-right ul li a:hover { color: #0b90d6; } .이제 브라우저에 다음 이미지가 표시됩니다:
하단 메뉴
웹사이트의 바닥글 영역에 또 다른 메뉴가 있습니다. 여기 PSD-Tutorials.de에서 이러한 메뉴는 일반 정보에 대한 링크를 제공하는 데에도 사용됩니다.
또한 웹사이트에 저작권 고지가 있습니다. 두 가지 모두 실제로 웹 사이트에서 매우 일반적입니다. 먼저 HTML 구조를 다시 살펴봅시다.
<div class="bottom"> <ul> <li><a href="index.HTML">홈</a></li> <li><a href="#">회사 소개</a></li> <li><a href="#.a href="#">뉴스</a></li> <li><a href="#">컨트롤 센터</a></li> <li><a href="#">연락처</a></li> <li><a href="#">인쇄</a></li> <li><a href="#">사이트맵</a></li> </ul> <p>© Copyright 2014 by PSD-Tutorials.ko</p> </div>
이것은 간단한 ul 목록입니다. 각 목록 항목에는 메뉴 항목이 포함되어 있습니다. ul 목록 아래에는 저작권 고지가 포함된 p 요소가 있습니다. 물론 아직 누락된 것은 CSS 구문입니다.
.bottom { background-image: url(../images/footer.jpg); background-repeat: no-repeat; background-position: 왼쪽 상단; text-align: 가운데; width: 1000px; height: 110px; float: 왼쪽; }
물론 바닥글 영역을 어떻게 디자인할지는 궁극적으로 사용자에게 달려 있습니다. 저는 다시 색상 그라데이션을 사용합니다. 하지만 예를 들어 간단한 배경색이나 CSS3 구문을 사용할 수도 있습니다. 하지만 제 그래픽 변형의 경우 배경-반복: 반복 없음; 을 사용하여 반복을 방지하는 것이 중요합니다.
먼저 결과를 살펴보겠습니다:
여기서 눈에 띄는 것은 개별 메뉴 항목 옆에 표시되는 흰색 막대입니다. 이는 다양한 테두리 왼쪽 사양을 사용하여 정의되며, 이는 궁극적으로 사양이 요소의 왼쪽 가장자리를 참조한다는 것을 의미합니다.
전체적으로 하단 메뉴의 구문은 다음과 같습니다:
.bottom ul { margin-top: 30px; list-style-type: none; } .bottom ul li { display: inline; border-left-width: 1px; border-left-style: solid; border-left-color: #fff; } .bottom ul li a { font-size: 12px; color: #fff; text-decoration: none; padding-right: 15px; padding-left: 15px; } .bottom ul li a:hover { text-decoration: 밑줄; } .bottom p { font-size: 12px; colour: #fff; margin-top: 40px; } .bottom a { font-size: 12px; colour: #fff; margin-top: 40px; } .bottom a:hover { text-decoration: none; } .
상단 메뉴와 달리 여기에는 특별한 기능이 있습니다. 사실 호버의 경우 더 이상의 그래픽이 로드되지 않습니다. 그러나 방문자가 링크 위에 마우스를 올려놓았다는 것을 명확히 알 수 있도록 호버 이벤트가 발생하면 개별 링크에 밑줄이 그어집니다.
이 튜토리얼이 끝나면 웹사이트에 대한 기본 단계가 완료되었습니다. 이제 남은 것은 페이지의 예쁘게 꾸미는 것입니다. 이에 대해서는 다음 튜토리얼에서 자세히 설명합니다.
