-
상단 배경에 메뉴 넣기의 추가 응용법입니다. 물론 상단 배경에 메뉴 넣기를 완료하시거나, 이해하셔야 응용법을 진행할 수 있습니다. 또한 이전에 글쓰기&관리 링크 숨기기를 하셔야 쾌적하게 할 수 있습니다ㅇ 3ㅇ)
-
상단 배경에 메뉴 넣기대로 했다면 상단 메뉴는 성의없는 텍스트만 덩그러니 나옵니다. 제 마이피를 예시로 들 수 없으니(혹은 귀찮으니-_-) 링크 파일을 참고해주세요
여기에 CSS를 이용해서 적당하게 꾸며보도록 하겠습니다
기본적으로 네모난 박스 모양을 하고 있으며, 마우스(커서)를 가져가면 배경색과 글씨 색이 바뀌도록 할게요
먼저, CSS를 추가하여 버튼 모양 비스끄므리하게 해볼게요
CSS
#top_menu a { background:#F99; padding:10px; margin-right:10px; }
[ #top_menu a ]는 top_menu의 모든 a(링크)에게 명령하는겁니다
[ background:#F99; ]는 배경색(백그라운드)에 F99색을 넣는다는건데, 색은 RGB값으로 나누며 각 R/G/B는 2개씩 16진수(0~F)로 구성되어있습니다. 즉 R값 FF/G값 00/B값 00 은 FF0000이며, 빨강색이죠. 그런데 각 값이 공통적으로 반복되면 하나로 생략할 수 있습니다. 고로 FF0000은 F00값과 동일합니다
[ padding:10px; ]는 내부여백을 상하좌우 10픽셀씩 줍니다
[ margin-right:10px; ]는 외부여백을 오른쪽에만 10픽셀 줍니다
이렇게하면 대충 버튼 모양 비슷해졌습니다. (근데 이 방법은 보통 쓰지않고, block을 정하여 사용하지만 여기선 그냥 패스)
그런데 글씨가 잘 안 보이는것 같으니, 글씨부분을 건드려보겠습니다
CSS
#top_menu a { background:#F99; padding:10px; margin-right:10px; color:#F00; font-weight:bold; }
뒤에 color:#F00; font-weight:bold;를 추가했습니다
[ color:#F00; ]는 글씨색을 F00, 빨간색으로 설정한것이고
[ font-weight:bold; ]는 글씨를 두껍게 설정한것입니다)
그럼 마지막으로 마우스(커서)를 가져가면 바뀌도록 해볼게요
이건 :hover를 사용합니다
CSS
#top_menu a { background:#F99; padding:10px; margin-right:10px; color:#F00; font-weight:bold; }
#top_menu a:hover { background:#DDD; color:#05F; }
링크를 가르키는 a의 뒤에 :hover를 붙였습니다
마우스(커서)를 가져가면 #top_menu a:hover에 지정해준 값이 적용됩니다
