CSS를 이용 상단 메뉴바

방향성

블로그 상단을 살펴보면 메인이나 특정 카테고리로 이동하는 메뉴바가 있다. 이를 기본적으로 지원해 화면 설정 > 메뉴에서 편집할 수 잇고 그 모양을 다르게 꾸밀수는 없다.

CSS를 활용해 메뉴바를 편집해보고자한다.

 

예제

새 텍스트 문서.html

0.00MB

새 텍스트 문서.txt

0.00MB

메뉴 리스트 만들어보기

먼저 어떤 것들을 메뉴로 만들지 구상한다. 구상 목적상 메뉴1~5로 정하고 <ul>과 <il>태그를 활용한다.

ul은 순서가 없는 블릿 리스트고 il은 ul 아래의 항목들을 의미한다.

<div>
<ul>
<li>메뉴 1</li>
<li>메뉴 2</li>
<li>메뉴 3</li>
<li>메뉴 4</li>
<li>메뉴 5</li>
</ul>
</div>

이같이 작성하면 출력은

이렇게 출력된다.

 

 

메뉴모양 만들기

한줄에 리스트가 보이도록하며 옆에 동그라미를 없애본다. 이를 위해 ul 아래에 스타일로 list-style-type:none을 추가하고, il 아래에 display:inline라는 스타일을 추가한다.

<div>
<ul style="list-style-type:none">
<li style="display:inline">메뉴 1</li>
<li style="display:inline">메뉴 2</li>
<li style="display:inline">메뉴 3</li>
<li style="display:inline">메뉴 4</li>
<li style="display:inline">메뉴 5</li>
</ul>
</div>

이렇게 나온다. 그렇지만 스타일시트로 다시 작성을 해보면,

 

<style>
ul {list-style-type:none;}
ul li {display:inline;}
</style>

<div>
<ul>
<li>메뉴 1</li>
<li>메뉴 2</li>
<li>메뉴 3</li>
<li>메뉴 4</li>
<li>메뉴 5</li>
</ul>
</div>

동일한 결과가 나온다.

 

 

메뉴 사이에 선을 넣어보기

스타일을 따로 때어냈기 때문에 스타일시트 부분만 편집을 진행하면 된다. 각각의 메뉴 사이에 구분선을 넣으려면, il의 좌측편에 선을 만들어준 후, 첫 번째에 위치하는 메뉴 부분의 테두리만 제거해주면 된다. 이는 border-left스타일을 이용하여 만든다.

 

<style>
ul {list-style-type:none;}
ul li {display:inline;

/* li요소의 좌측 1px의 테두리 만들기 */
border-left: 1px solid #c0c0c0;

}
li:first-child {

/* li의 첫번째 요소 좌측에는 테두리 없애기 */
border-left: none;

}

</style>


<div>
<ul>
<li>메뉴 1</li>
<li>메뉴 2</li>
<li>메뉴 3</li>
<li>메뉴 4</li>
<li>메뉴 5</li>
</ul>
</div>

<style>
ul {list-style-type:none;}
ul li {display:inline;

/* li요소에  1px의 테두리 만들기 */
border-left: 1px solid #c0c0c0;

}


</style>


<div>
<ul>
<li>메뉴 1</li>
<li>메뉴 2</li>
<li>메뉴 3</li>
<li>메뉴 4</li>
<li>메뉴 5</li>
</ul>
</div>

li뒤의 first-child는 ul아래에 위치하는 li요소들 중 첫번째 요소에만 다음의 스타일을 적용한다는 의미다.

 

 

메뉴 사이 여백 / 위치 / 간격 편집

만들어진 파일을 살펴보면 메뉴가 좌측과 이유없이 떨어져 있다. 이 좌측 여백을 padding-left라는 스타일 값으로 없앤다. 값에 ul에 0으로 주고 메뉴의 위치는 float라는 스타일을 이용해 좌측이나 우측정렬을 할 수 있는데 margin과 padding이라는 스타일을  li에 이용해 메뉴간의 간격을 조절할 수 있다.

padding값은 기준으로부터의 내부 간격, margin은 기준으로부터 외부 간격이다.

 

<style>
ul {list-style-type:none;

/* 좌측 여백 없애기 */
padding-left:0px;
/* 우측 정렬 하기 */
float:right;
}


ul li {display:inline;

/* li요소의 좌측 1px의 테두리 만들기 */
border-left: 1px solid #c0c0c0;
/* 테두리와 메뉴 간격 벌리기, padding: 위 오른쪽 아래 왼쪽; */
padding: 0px 10px 0px 10px;
/* 메뉴와 테두리 사이 간격 벌리기, margin: 위 오른쪽 아래 왼쪽; */
margin: 5px 0px 5px 0px;
}
ul li:first-child {

/* li의 첫번째 요소 좌측에는 테두리 없애기 */
border-left: none;

}

</style>


<div>
<ul>
<li>메뉴 1</li>
<li>메뉴 2</li>
<li>메뉴 3</li>
<li>메뉴 4</li>
<li>메뉴 5</li>
</ul>
</div>