'메뉴만들기'에 해당되는 글 1건

  1. 2013.08.18 [웹표준코딩] 간단한 메뉴만들기 연습 by S 17

 

 

 

그럼 이제 간단하게 아래와 같이 롤오버했을때 색상이 변하는 메뉴를 만드는 연습을 해보자.

 

 

 

 

 

먼저 5개의 메뉴를 옆으로 나란히 늘어놔야 된다.

이때, 아래 1번과 같이 <ul><li>를 사용하는것과 2번처럼 그냥 <div>로 감싸는 방법이 있다면

메뉴는 리스트 요소이므로 시멘틱한 웹을 위해 <ul><li>를 써주는 방법이 좋다.

(컴퓨터에 이건 순서가 없는 목록이라는 걸 인식시킴)

 

 

 

 

 

 

근데 1번처럼 <ul><li>를 사용하면 각각이 블럭요소이기 때문에 한 줄씩을 다 차지해 버린다.

(2번 <div>도 블럭요소이지만 하나로 되어있으므로 옆으로 나란히 배치)

 

때문에 가로로 정렬시키는 float을 사용해 줘야 한다.

 

 

 

 

 

 

이 때, float을 3번처럼 <li>에 줘야할까? 4번처럼 <a>링크에 줘야할까?

3, 4번 모두 결과는 같아보이지만 엄연히 다르다.

 

 

 

 

 

여기에 css속성을 넣어 꾸며보면 그 차이점을 명확히 알 수 있다.

 

<li>에 백그라운드 컬러와 패딩, 마진을 주고  모서리를 라운딩시키는 {border-radius}를 줬다.

 

*border-radius

css3의 속성 중 하나로 익스플로러 9이하에서는 적용되지 않는다.

파이어폭스, 크롬 등은 적용되지만 익스플로러9 이하를 아직까진 많이 사용하고 있는 우리나라에선 

실제적으로 html5+css3 자리잡기 위해서는 시간이 좀 더 필요하다. 

모서리가 라운딩되는 순서는 왼쪽위, 오른쪾위, 오른쪽아래, 왼쪽아래 이다.

 

*여기선 보기 편하게 <li>에 직접 스타일을 줬지만 일반적으론 <li>에 클래스 네임을 줘서 이름을 불러 사용.

 

 

 

 

어쨌든 3번과 같이 <li>에 float를 넣었을 때 링크가 걸리는 영역은 아래처럼 딱 글자공간밖에 되지 않는다.

 

 

 

 

 

하지만 4번처럼 <a>링크에 float을 넣어주면 효과가 들어간 색상 영역까지 모두 링크가 걸린다.

이는 사용자의 편의를 위해 당연히 <a>링크에 걸어주는게 좋다는걸 알 수 있다.

 

 

 

 

 

 

 

 

근데 만약 <ul>에 아래처럼 빨간테두리를 친다면 float에 의해 메뉴들이 떠 있는 상태이므로

테두리는 밑으로 들어가 위쪽에 붙어버린다.

 

 

 

 

 

이를 바로 잡기위해 부모인 <ul>에 {overflow:hidden}을 넣어 플롯클리어시키면 테두리는 정상적으로 둘러진다.

 

 

 

만약 메뉴에 테두리가 들어가지 않더라도 이 개념은 확실히 알아야하며

더 정확히는 아래글들을 참고하면 될 듯하다.

 

2013/06/20 - [웹표준코딩 가로배치의 핵심] 떠서 이동하는 float의 이해① by S

2013/06/22 - [웹표준코딩 가로배치의 핵심] 떠서 이동하는 float의 이해② by S

2013/07/07 - [웹표준코딩] 플롯클리어 방법 by S

 

 

 

 

그럼 마지막으로 마우스를 롤 오버했을 때 색상이 변하도록 속성을 추가해 넣어주면 간단한 메뉴만들기 완성~!!!

 

 

 

 

 

 

 

 

 
 
 
 

 

 

Posted by Y&S