html 메뉴 깔끔하게 만들기/마우스 오버
블로그 디자인이나 홈페이지를 만들때 아래와 같이 메뉴를 자주 만들게 된다. 메뉴를 만드는 기본적인 방법은 메뉴는 리스트 형식의 정보라서 <ul>과 <li> 태그로 마크업하고, <a> 태그로 링크를 설정한다. 그리고 <div>태그를 이용해 감싸 그룹화하면 된다. 클래스이름은 본인이 알기쉬운 이름으로 정하면 된다.
위와 같이 입력하면 이렇게 파란글씨에 앞부분의 공백과 검은색 원이 출력된다. 이대로 써도 상관없지만 보기에는 만들다만것 같고 보기에 좋진 않죠. 그럼 이 메뉴를 가지고 보기좋게 만들어 봅시다~
우선 메뉴앞에 있는 검은 원과 공백을 제거해보도록 하겠습니다. <head>태그안에 <style>태그를 만들고 그안에 클래스명을 지정해서 <ul> 태그의 margin 속성과 padding 속성을 0으로 설정하고, list-style 속성을 none으로 지정합니다.
<head>태그 내에 <style>태그를 이용해서 공백과 검은 원을 제거 했으니 이제 링크의 글자색을 바꿔 보겠습니다.
위에서 만들었던 <style>태그 안에 아래와같은 속성을 추가해 줍니다. <a>태그의 color, font-size, text-decoration 속성을 지정하고, 글자색을 지정하고, 폰트사이즈를 정하고, 밑줄을 제거(none) 해줍니다.
이제 마지막으로 활성화된 메뉴인지 알 수 있게끔 마우스 커서를 올렸을때 변하는 디자인을 적용하고, 메뉴들 폭을 조금씩 늘려서 링크걸기 좋게 바꿔보도록 하겠습니다.
먼저 background-color 속성을 이용해 회색을 지정합니다. 이 옵션만 적용하면 메뉴1 이라는 글씨에만 회색으로 표시가 되버리니 <a> 태그에 display 속성을 지정해서 가로바향으로 늘려주고, padding속성을 5px 정도로 위아래 폭을 좀 더 늘려줬습니다.
위처럼 마우스 커서 위치에 따라 효과가 생기는걸 볼 수 있습니다. 도움이 되셨나요~?
'곰군의 IT > 블로그Tip' 카테고리의 다른 글
| 유튜브 반응형으로 올리기/ 플레이어 반응형 변환 (0) | 2017.08.17 |
|---|---|
| 블로그 문단제목 서식/티스토리 서식 이용 (5) | 2017.08.11 |
| 구글 URL 축소 링크주소 줄이기 Google URL Shortener (0) | 2017.07.14 |
| 티스토리 파비콘 블로그 아이콘 바꾸는방법 (3) | 2017.07.08 |
| 이미지 용량줄이는 사이트 JPG손실 최소화 (1) | 2017.06.23 |
