티스토리는 HTML과 CSS를 수정하여 자신만의 블로그를 꾸밀 수 있습니다. HTML은 블로그의 컨텐츠를 CSS는 그 레이아웃을 구성하는데 이용하는데이 글은 CSS를 수정하여 수직방향의 메뉴모음을 메뉴바다운 모습으로 바꿔 옮기는 과정을 적었습니다.

차근차근 따라하시면, 웹페이지가 다음의 화면에서


다음의 화면으로 바꾸는 과정을 알 수 있을 것입니다.



준비과정
다음의 HTML 소스와 CSS파일을 다운로드 받아 같은 폴더에 위치시킵니다.
HTML파일 다운로드:


CSS파일 다운로드:


menubar.html의 내용은 다음과 같습니다.

<html>
<head>
</head>
<body>
<link rel="stylesheet" media="screen" type="text/css" href="./menubar.css" />
<div id="nav">
<ul>
<li><a href="#">메뉴 1</a></li>
<li><a href="#">메뉴 2</a></li>
<li><a href="#">메뉴 3</a></li>
<li><a href="#">메뉴 4</a></li>
<li><a href="#">메뉴 5</a></li>
</ul>
</div>
</body>
</html>



menubar.css 파일의 내용은 다음과 같습니다.

#nav {
width:700px;
height:40px;
background-color:grey;
}


 
0. menubar.html 을 웹브라우저를 이용하여 열면 이 글의 첫 그림과 같은 화면이 나옵니다.

메뉴 1부터 메뉴 5까지 ul (unordered list: 정렬안된 리스트)를 이용하여 표현한 모습입니다. 이제부터 CSS를 이용하여 보기 좋게 고쳐나가는 과정을 보여드립니다.

## 이후 과정에서, menubar.css에서 파랑색으로 표시된코드를 추가하면 바로 아래의 화면이 나옵니다.


1. 메뉴바의 배경색을 집어넣습니다.

#nav ul {
background-color:yellow;
}


메뉴바의 공간점유 및 위치이동을 쉽게 알아보기 위해서입니다.
메뉴바가 더 이상 보이지 않음을 알 수 있습니다. 리스트는 수평으로 처음부터 끝까지 공간을 다 차지합니다.


2. 메뉴바를 한 줄로 바꿉니다.

#nav ul {
background-color:yellow;
display:inline;
}
#nav ul li{
display:inline;
}


이제 메뉴바를 이동시키기 쉽게되었고, 나중에 다른 요소 (예: 검색바, RSS구독아이콘 등)를 같은 줄 (수평적위치)에 집어넣기도 쉽게 되었습니다.


3. 각 메뉴의 왼쪽에 경계선을 나타냅니다.

#nav ul li{
display:inline;
border-left: 1px solid black;
}



4. 첫 메뉴의 왼쪽에 있는 경계선을 지웁니다.

#nav ul li:first-child {
border-left: none;
}



5. 각 메뉴와 경계선 사이의 간격을 적절하게 넓혀줍니다.

#nav ul li{
display:inline;
border-left: 1px solid black;
padding:0px 7px 0px 10px;
}

두번째와 네번째 px(픽셀)숫자를 자유롭게 바꿔서 조절을 해봅니다. 패딩(padding)의 픽셀갯수는 첫번째(위), 두번째(우측), 세번째(아래), 네번째(좌측)을 조정합니다.


6. 메뉴바 앞의 불필요한 공간점유를 없애줍니다.

#nav ul {
background-color:yellow;
display:inline;
padding-left:0px;
}


 
7. 메뉴바를 오른쪽 끝으로 옮깁니다.

#nav ul {
background-color:yellow;
display:inline;
padding-left:0px;
float:right;
}



8. 메뉴바의 위치를 미세조정합니다.

#nav ul {
background-color:yellow;
display:inline;
padding-left:0px;
float:right;
margin: 10px;
}



9. 메뉴의 밑줄을 없앱니다.

#nav ul li a {
text-decoration:none;
}


 


10. 이제 메뉴의 색깔을 바꾸어 완성합니다.

#nav ul {
/* background-color:yellow */ 
display:inline;
padding-left:0px;
float:right;
margin: 10px 10px 10px 10px;
}
#nav ul li a {
text-decoration:none;
color:white;
}

첫번째의 /* background-color:yellow */ 에서 /* */는 CSS내에서 주석을 달기 위한 표시입니다. 주석표시를 다는 대신에 해당 줄을 지워도 됩니다.

최종 CSS파일 다운로드:


신고

티스토리 툴바