[html] 마우스를 올리면 나타나는 버튼 만들기

안녕하세요. 플입니다.

마우스를 올리면 나타나는 버튼을 만들어볼게요.

 

---

 1.  전체 html

<ul>
   <li>   
      <a href="https://dillyhub.com/home/persimmon/paintdrop/1">한 방울</a>
      <img src="images/t01.jpg" alt="한 방울 보러가기">
   </li>
   <li>
      <a href="https://dillyhub.com/home/persimmon/paintdrop/2">두 방울</a>
      <img src="images/t02.jpg" alt="두 방울 보러가기">
    </li>
</ul>

오늘은 html 코드만 우선 진행할게요.

먼저 전체 코드를 보여드릴게요.

 

---

 2.  코드 하나씩 뜯어보기

 

 

<li>   
      <a>한 방울</a> <!-- 보이지않다가 마우스를 올리면 나타남 -->
      <img src="images/t01.jpg" alt="한 방울 보러가기"> <!-- 평소에 보이는 부분 -->
</li>

마우스를 올리면 <a> 태그가 나타나게 만들 거예요. 

그래서 <a> 태그와 <img> 태그를 나란히 넣어줬어요.

저는 여러 개를 만들 예정이기 때문에 <li> 태그를 이용했습니다. 나란히 두는 것이 중요한 부분이에요.

 

---

 3.  css 보러 가기

 

준비 중

 

---

그럼 이만.

총총.