[마이피] 마이피 꾸미기 / 상단 배경에 메뉴 넣기 - 응용법 1

마이피 관련글 모두 보기

-

상단 배경에 메뉴 넣기의 추가 응용법입니다. 물론 상단 배경에 메뉴 넣기를 완료하시거나, 이해하셔야 응용법을 진행할 수 있습니다. 또한 이전에 글쓰기&관리 링크 숨기기를 하셔야 쾌적하게 할 수 있습니다ㅇ 3ㅇ)

-

상단 배경에 메뉴 넣기대로 했다면 상단 메뉴는 성의없는 텍스트만 덩그러니 나옵니다. 제 마이피를 예시로 들 수 없으니(혹은 귀찮으니-_-) 링크 파일을 참고해주세요

HTML 파일 1 보기 (HTML 파일 1 다운로드)

여기에 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을 정하여 사용하지만 여기선 그냥 패스)

HTML 파일 2 보기 (HTML 파일 2 다운로드)

그런데 글씨가 잘 안 보이는것 같으니, 글씨부분을 건드려보겠습니다

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; ]는 글씨를 두껍게 설정한것입니다)

HTML 파일 3 보기 (HTML 파일 3 다운로드)

그럼 마지막으로 마우스(커서)를 가져가면 바뀌도록 해볼게요
이건 :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에 지정해준 값이 적용됩니다

HTML 파일 4 보기 (HTML 파일 4 다운로드)

[비운의모사]

오 이런정보 항상 필요했는데 정말 감사합니다.