티스토리 뷰
HTML/CSS 이야기
홈페이지 만들 때 유용한 텍스트 롤오버 메뉴 만들기
텍스트 롤오버 메뉴 메뉴를 만들어 보도록 하겠습니다.
먼저 실행 모습을 보도록 하겠습니다.
여기서 마우스를 올리면 하단에 주황색의 줄이 나타납니다.
한번 만들어 볼까요?
그리고 스타일 시트 부분을 보도록 하겠습니다.
#Menu { margin-left:0px; /* 왼쪽 여백을 0으로 설정 */ } #Menu li { background-color:#000; /* 배경색을 #000(검정)으로 지정 */ float:left; /* 왼쪽부터 배치 */ width:100px; /* 폭을 100px로 설정 */ color:#777; /* 글자색을 #fff(흰색)으로 지정 */ text-align:center; /* 글자를 가운데로 정렬 */ } #Menu a{ display:block; /* display타입을 block으로 지정 */ color:#ccc; /* 글자색을 #ccc로 지정 */ text-decoration:none; /* 글자에 효과를 주지 않습니다. */ } #Menu a:hover{ border-bottom:5px solid #ff9900; /* 글자 하단에 주황색으로 줄을 표시 */ color:#FFF; /* 글자색을 #fff(흰색)로 지정 */ }
전체 소스는 다음과 같습니다.
아래에 파일이 있으니 한번 실행해 보세요^^
'IT 이야기 > 프로그래밍' 카테고리의 다른 글
[JAVA] .class파일에서 사용된 생성자메소드, 필드, 메소드 알아내기 (0) | 2010.08.09 |
---|---|
[C언어] 소수 판단 프로그램 예제 소스(prime number) (10) | 2010.08.09 |
[C언어 예제] 파일 입출력 함수를 이용한 파일 복사 (0) | 2010.08.05 |
[C언어 예제] 파일 복사하는 예제 소스 (0) | 2010.08.05 |
[C언어 예제] 텍스트 파일 뷰어 소스 (0) | 2010.08.05 |
[Javascript] Document객체의 프로퍼티 (0) | 2010.08.03 |
[JSP] 톰캣 사용시 스택 트레이스의 사용 (0) | 2010.07.31 |
[JSP] Tomcat 5.x 에서 JSP 한글 문제 (0) | 2010.07.31 |
[Javascript] Enter키를 누를 때마다 텍스트 에어리어 크기 변경 (0) | 2010.07.31 |
[HTML] <DL>, <DT>, <DD> 태그 (0) | 2010.07.31 |
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
- W3Schools Online Web Tutorials
- 구차니의 잡동사니 모음
- [IT]블로거팁닷컴
- 비앤아이님의 블로그
- Blog Suspect
- 즐거운하루 blog
- zinicap의 검색엔진 마케팅(SEM)
- 머니야머니야님의 블로그
- [Friend] AtinStory
- [기타배우기]해브원 박스
- [웹표준] SINDB.com
- 해커 C 이야기
- [애드센스] 길라잡이
- 정순봉의 IT SCHOOL
- 씨디맨의 컴퓨터이야기
- 2proo Life Story
- 못된준코의 세상리뷰
- [IT강좌] 정보문화사
- IN 대전
- 에우르트는 나쁜남자 -_-
- 씬의 싱크탱크
- 엔돌슨의 IT이야기
- 진이늘이
- 'Cooltime'의 블로그
- 후이의 Tistory
- Soulstorage
- 앤드&엔드의 블로그
- June Blog
- 노지의 소박한 이야기
- gbWorld
- 인터넷 속 나의 생각
- HarshNix
- ART of WEB
- 녹두장군 - 상상을 현실로
TAG
- MBTI
- C
- 리뷰
- MBTI 테스트
- 인터넷
- MBTI 강좌
- 효과음
- C언어 문제
- 안드로이드
- C언어
- 강좌
- JavaScript
- 모토로이
- MBTI 자료
- C언어 소스
- 프로그래밍 문제
- 프로그래밍
- 인터넷 익스플로러
- 소스
- 성공
- 강의
- HTML
- 스마트폰
- 소스코드
- It
- php
- 안드로이드 어플
- 예제 소스
- 안드로이드 어플 추천
- MBTI 검사
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
글 보관함