블로그 디자인이나 홈페이지를 만들때 아래와 같이 메뉴를 자주 만들게 된다. 메뉴를 만드는 기본적인 방법은 메뉴는 리스트 형식의 정보라서 <ul>과 <li> 태그로 마크업하고, <a> 태그로 링크를 설정한다. 그리고 <div>태그를 이용해 감싸 그룹화하면 된다. 클래스이름은 본인이 알기쉬운 이름으로 정하면 된다.
1 2 3 4 5 6 7 8 9 | <div class="menu"><ul><li><a href="#">메뉴1</a></li><li><a href="#">메뉴2</a></li><li><a href="#">메뉴3</a></li><li><a href="#">메뉴4</a></li><li><a href="#">메뉴5</a></li></ul></div> |
위와 같이 입력하면 이렇게 파란글씨에 앞부분의 공백과 검은색 원이 출력된다. 이대로 써도 상관없지만 보기에는 만들다만것 같고 보기에 좋진 않죠. 그럼 이 메뉴를 가지고 보기좋게 만들어 봅시다~
우선 메뉴앞에 있는 검은 원과 공백을 제거해보도록 하겠습니다. <head>태그안에 <style>태그를 만들고 그안에 클래스명을 지정해서 <ul> 태그의 margin 속성과 padding 속성을 0으로 설정하고, list-style 속성을 none으로 지정합니다.
1 2 3 4 5 6 | <style>/* 스타일 속성 */.menu ul {margin: 0; padding: 0; list-style: none}</style> |
<head>태그 내에 <style>태그를 이용해서 공백과 검은 원을 제거 했으니 이제 링크의 글자색을 바꿔 보겠습니다.
위에서 만들었던 <style>태그 안에 아래와같은 속성을 추가해 줍니다. <a>태그의 color, font-size, text-decoration 속성을 지정하고, 글자색을 지정하고, 폰트사이즈를 정하고, 밑줄을 제거(none) 해줍니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 | <style><style>/* 스타일 속성 */.menu ul {margin: 0; padding: 0; list-style: none}.menu li a { color: #000000; font-size: 15px; text-decoration: none}</style> |
이제 마지막으로 활성화된 메뉴인지 알 수 있게끔 마우스 커서를 올렸을때 변하는 디자인을 적용하고, 메뉴들 폭을 조금씩 늘려서 링크걸기 좋게 바꿔보도록 하겠습니다.
먼저 background-color 속성을 이용해 회색을 지정합니다. 이 옵션만 적용하면 메뉴1 이라는 글씨에만 회색으로 표시가 되버리니 <a> 태그에 display 속성을 지정해서 가로바향으로 늘려주고, padding속성을 5px 정도로 위아래 폭을 좀 더 늘려줬습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <style>/* 스타일 속성 */.menu ul {margin: 0; padding: 0; list-style: none}.menu li a {display: block; padding: 5px; color: #000000; font-size: 15px; text-decoration: none}.menu li a:hover {background-color: #cfcfcf}</style> |
위처럼 마우스 커서 위치에 따라 효과가 생기는걸 볼 수 있습니다. 도움이 되셨나요~?
곰군의 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 |
