HTML 를 이용해 tooltip 만들기

1. 기본 순서

  • 말풍선 컨테이너 만들기
  • 말풍선 안에 p 만들고 스타일링하기
  • Image Sprite 사용해 말꼬리 붙이기
  • hover 상태일 때만 보이도록 지정하기

2. 아이콘 세트 사용해 말꼬리 붙이기 ( Using an image sprite )

말풍선 컨테이너에 아래의 작업하기

  • after 가상선택자 만들기
  • width / height 설정하기
  • background-image 불러와 position, sizem repeat 설정해주기
  • position absolute, left / top 으로 위치 위치 잡아주기

댓글 달기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다

위로 스크롤