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

 

 

 

 

 

먼저 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

댓글을 달아 주세요

  1. 너무 재밌겠어요 저도 시간나면 꼭 배워보고싶네요

    2013.08.22 15:10 신고 [ ADDR : EDIT/ DEL : REPLY ]
  2. 포스팅 잘봤습니다 ㅠㅠ 설명이 이해가 잘되서 다음 강의도 부탁드려요~
    하위메뉴 생성^^;; 염치없은 부탁드립니다~!

    2013.08.31 12:37 [ ADDR : EDIT/ DEL : REPLY ]
    • 헛 저도 배운강의를 그대로 옮겨놓은거라서 여기서 너무 많은걸 바라시면 아니되옵니다 -0-;;

      2013.08.31 16:56 신고 [ ADDR : EDIT/ DEL ]
  3. 정주행

    정주행했어요 ㅋ
    잘 보고 있습니다. 내용이 잘 정리되어있는 것 같아요.ㅎㅎ

    2013.09.02 13:22 [ ADDR : EDIT/ DEL : REPLY ]
  4. ㅁㅇㄹ

    질문있는데요
    그대로 따라서 해봤는데 결과물이 계단식으로 나오네요
    학교
    병원
    직장
    공장
    학원
    이런식으로 나오는데 왜그런지 알수 있을까요?

    2013.09.12 21:31 [ ADDR : EDIT/ DEL : REPLY ]
    • 전 댓글보고 당연히 리셋 css문제인줄알았는데
      (이글참고) http://yslife.tistory.com/402

      제가 다시 해보니까 리셋을 사용해도 익스플로러에선 좀 문제가 있군요.;;

      제가 보통 파이어폭스에서 열어봐서 몰랐음 ㅠ (배울때도 그랬고)

      익스플로러를 사용하면 float:left를 그냥 li에 주면 괜찮은데 a링크에 줬을때는 그런 현상이 생기네요;;
      html5.0이 먹지않는 익스플로러 8의 낮은버전이라 그럴지도 모르겠구요...

      웃긴건 정석대로<li>를 사용하지 않고 야매로 <div>를 사용하면 또 a링크에 플롯을 줘도 제대로 먹힙니다.
      익스플로러가 웹표준사용에 문제가 많은건 알았지만 이런식으로 발목을 잡는군요...

      그렇다면 그냥 div를 사용하든가 다른방법을 써야할거같은데
      저도 이 부분은 좀 더 연구해 봐야겠습니다 ㅠㅠ

      2013.09.13 10:07 신고 [ ADDR : EDIT/ DEL ]
  5. 비밀댓글입니다

    2013.10.11 10:55 [ ADDR : EDIT/ DEL : REPLY ]
    • 음...패딩과 마진의 영역이 헷갈리신다는건가요?
      사실 이 두가지는 연동되어 보여지고 내가 만들어가는 가상의 영역이기 때문에 헷갈리긴 합니다.

      강의까지 하기엔 제 실력이 미진한 관계로다가...ㅎㅎ

      그렇지만 스타일을 주려는 지정 대상에 background-color나 border를 넣어보면 확실히 알 수 있습니다.
      위의 메뉴처럼 색상이 칠해지는 영역이 패딩이구요. 바깥쪽은 마진영역입니다.
      테두리를 치면 테두리 안쪽이 패딩, 테두리 바깥쪽이 마진영역이겠죠?


      아무것도 없으면 이 경계선이 보이지 않기때문에 당연히 헷갈리는거구요^^;;

      패딩을 단순히 안쪽으로 여백을준다고 생각하지 마시고,
      아무것도 없는 가상의 공간이나 어떤 대상에 패딩을 넣어 지정영역을 넓혀간다고 생각해보세요.

      좀 도움이 되셨는지 모르겠네요. 효니리님도 좋은 주말되세요^^

      2013.10.11 16:30 신고 [ ADDR : EDIT/ DEL ]
  6. 비밀댓글입니다

    2013.10.24 17:58 [ ADDR : EDIT/ DEL : REPLY ]
    • 여기글은 정말 기초중의 기초만 써놓은거라서 홈피만드는데 무리가 많습니다;;
      학원을 다니시면서 좀 더 차근차근 배워가심이 나을듯하네요.ㅜㅜ

      2013.10.24 21:35 신고 [ ADDR : EDIT/ DEL ]
  7. 제이

    계속 강의 올려주시면 안될까용?ㅠㅠ

    2013.10.31 09:05 [ ADDR : EDIT/ DEL : REPLY ]
    • 이쪽을 배워놓고 요새 써먹을일이 없으니 포스팅을 안하게 되네요.
      그러다보니 잊어먹고
      저도 다시 공부하면서 올려야 되는지라... ㅠㅠ

      2013.10.31 12:34 신고 [ ADDR : EDIT/ DEL ]
  8. ㅇㄹㅇㄴ

    요거 그대로 해봤는데요~!
    크롬에서 보기에는 메뉴 텍스트 위에 점이 하나 생기더라구요 ㅡㅡ 왜그러져?....
    <li>에 만들때 목록 앞에 생기는 점같은데 ㅠㅠ

    2013.11.13 18:55 [ ADDR : EDIT/ DEL : REPLY ]
    • 목록에 점이 생기는거면 리셋css를 따로 하지 않으신것 같네요.

      http://yslife.tistory.com/402
      이 글을 참고해주세요^^

      2013.11.14 08:52 신고 [ ADDR : EDIT/ DEL ]
  9. ja

    전체 글 다 읽어봤습니다 너무 잘보고갑니다 감사합니다~

    2016.10.05 14:37 [ ADDR : EDIT/ DEL : REPLY ]