[1HCC] DAY - 007 - 버튼

[학습내용]

언어: HTML/CSS/JavaScript

학습자료: Google search

배운 것: 버튼 삽입 및 꾸미기

---

 

학습내용 상세

 

• HTML에서 <button></button> 태그를 사용하여 버튼을 삽입

<button id="RM" onclick=" window.open('https://encykorea.aks.ac.kr/Article/E0061853','_blank')">더 알아보기</button>

 

• CSS에서 버튼 사이즈, 배경색, 크기 등을 설정

#RM{
  /*background-image: url(memorial.png);*/
  background-size: 30px 30px;
  background-repeat: no-repeat;
  background-position: center;  
  background-color: rgba(14, 4, 4, 0.295);
  color: white;  
  border-radius: 15px;
}

#RM:hover{
  color: Black;
  background-color: rgba(255, 255, 255, 0.295);
}

 

 

"더 알아보기" 버튼이 완성 되었다. 세련되어 보인다..

마우스를 버튼 위에 올리면 색이 반전되고, 버튼을 누르면 상세 페이지 팝업이 뜬다.