[CSS] 마우스 올릴때 점점 늘어나는 네모칸 상자 만들기

네모난 상자에 마우스를 올리면 상자가 점점 커지는 텍스트 이미지 상자 만드는 방법

 

 

평범한 네모칸인데 평범하지 않다?

 

html css에서 '마우스를 올릴때'를 말하는 속성은 Hover 이다.

 

즉, 다시말해 '마우스를 올릴때' 어떠한 반응을 하게 해주는 속성이다.

 

이 속성은 어떻게 사용하느냐 어떤 속성들과 조합해서 사용하느냐에 따라 천차만별로 다양한 효과를 만들어 낼 수 있는 아주 유용한 속성이다.

 

 

 

Hover 사용 방법

 

hover는 텍스트(글자), 이미지(사진) 등 골고루 쓰일 수 있는 css 속성이다.

 

예를들어 div요소에 hover를 사용하고자 한다면, div : hover 라고 써줘야 한다.

 

아래에서 hover 속성이 어떤식으로 쓰이는지 코드를 보면 더 쉽게 이해가 간다.

 

 

 

활용 예제

아래 네모칸에 마우스를 올려보세요.

오늘의 CSS 강의주제 >> transition과 hover를 이용한 포인터

 

 

코드 적용하기

CSS---------------------- <style>  div.div1 {   width: 230px;   height: 100px;   background: #fff;   border: 5px solid #FF7F50;   border-radius: 10px;   transition: width 2s;   color: black;   font-size: 18px;   line-height: 100px;   text-align: center;   overflow: hidden; } div.div1:hover {   width: 530px; } </style> HTML---------------------- <div class="div1"> 내용 </div>

 

활용 예

이것은 블로그에서도 다양한 쓰임새로 활용이 가능하다.

본문에 삽입을 하므로써 이목을 끌거나 재미요소로 네모칸 모양을 사각형이 아닌 다른 형태로 변형하여 다양한 효과로 쓰일 수가 있다. 

 

 

좋아요💙 구독💖 감사합니다.//////////////////////////문의는 댓글 남겨주세요.///////////////////////////////////////