메뉴 가로 정렬과 세로정렬

메뉴 가로 정렬과 세로 정렬의 차이점을 살펴보자.

<div class="menu">
<ul>
<li><a href="#">메인</a></li>
<li><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>
</div>

메뉴(세로 정렬)	메뉴(가로 정렬)
<style> .menu ul    {margin: 0;     padding: 0;     list-style: none} .menu li a    {display: block;     padding: 5px;     color: #000000;     font-size: 14px;     text-decoration: none} .menu li a:hover    {background-color: #eeeeee} </style>	<style> .menu ul    {margin: 0;     padding: 0;     list-style: none} .menu li a    {display: block;     padding: 5px;     color: #000000;     font-size: 14px;     text-decoration: none;} .menu li a:hover    {background-color: #eeeeee} .menu ul:after  {     display: block;     clear: both} .menu li    {float: left;     width: auto} </style>

li 태그도 기본적으로 세로 정렬을 한다.

가로 정렬을 하도록 하려면 float:left; 로 하고 width 속성을 auto로 지정한다.

float 는 블록 요소를 좌우 정렬시킬 때 사용한다.

float 속성 설명은 http://link2me.tistory.com/1452 참조

text-decoration: none; /* Remove underline from links */

https://www.w3schools.com/howto/howto_css_vertical_menu.asp 에 Vertical Menu 에 대해 직접 실행해 볼 수 있다.

list-style: none; /* 항목 표시가 되지 않음 */

disc : 기본값, 검은 원
circle : 원
square 사각형
decimal : 숫자(1로 시작하는 십진수)
lower-alpha  : 알파벳 소문자 (a, b, c, d, e,..)
lower-roman : 로마자 소문자 (i, ii, iii, iv, v,..)
upper-alpha : 알파벳 대문자 (A, B, C, D, E...)
upper-roman :  로마자 대문자 (I, II, III, IV, V,...)
none : 항목 표시가 되지 않음
initial  : 기본값으로 초기화

display:block; /* 요소를 block 요소처럼 표시한다. 따라서 요소 앞 뒤로 줄바꿈 된다 */

display:inline; /* 기본값, 요소 앞 뒤로 줄바꿈되지 않는다 */

display:none; /* 박스가 생성되지 않는다. 공간을 차지 하지 않는다 */

display:inline-block; /* 요소는 inline 인데 내부는 block 처럼 표시함. */

overflow : auto; /* 내용이 잘릴때만 스크롤바가 보인다 */

overflow : visible; /* 기본값으로 내용이 더 길어도 그대로 보인다 */

overflow : hidden; /* 내용이 넘치면 자른다. 자른 부분은 보이지 않는다 */

overflow : scroll; /* 내용이 넘치지 않아도 항상 스크롤바가 보인다 */

clear : float 를 해제할 때 사용한다.

clear : none /* 기본값으로 clear 를 설정하지 않는 것과 같다 */

clear : left   /* float:left 값을 취소한다. */

clear : right /* float:right 값을 취소한다. */

clear : both /* 왼쪽, 오른쪽을 취소한다 */