CSS 가로형 내비게이션 float

CSS 가로형 내비게이션

가로형 내비게이션을 만드는 방법은 두가지가 있다 하나는 float를 이용하는 것이고 하나는 display:inline;을 이용하는 것이다,float 부터 보자

배경그림을 다음과 같이 할것이다 단 이미지 크기가 크니 작게 자르고 가로로 반복되도록 할것이다.

아래그림은 작게자른 그림

  
first
  
second
  
third
  
forth
  
fifth

ul{
	margin:0;
	padding:0;
	list-style-type:none;
	/*여기까지가 초기화*/
	width:520px;/*가로길이는 520px로 정해줬다*/
	background:url(images/mainbg_re.jpg) repeat-x;
	/*위같은 그림을 하기위해 일부분을 잘라 작은파일로 하고 가로로 반복해 줬다*/
	float:left;/*왼족으로 플롯*/
}
ul li{ float:left;/*왼족으로 플롯*/}
ul a{
	display:block;
	padding:0 2em;
	line-height:2.1em;
	text-decoration:none;
	color:#fff;
}

결과는 다음과 같다

주요시 할점은 ul li{} ul{} 여기 모두 플롯을 주엇다는 점이다. 플롯으로 지정하면 기존문서내에서는 차지않는다 따라서 ul li{}에만 주면 납작해지는 결과로 아무것도 보이지않게된다 따라서 먼서 상위 엘레먼트ul{}에 플롯을 주는것이다