버튼 클릭 효과(음영,눌리는효과),cursor속성까지

이와같이 원래는 그냥 아무것도 없던 느낌의 div박스녀석들을

 

클릭하면 눌려지는 효과와 이벤트를 주기로 했다.

 

한번쓰니 응용해서 여기저기 쓸 수 있었음

 

<div className="figure">
      {/* classname N오타 */}
    
<Figure onClick={()=>{setRamen1(1)}}>
  <Figure.Image 
    width={100}
    // height={180}
    alt="171x180"
    src="icon/bongji.png"
  />
  <Figure.Caption>
    봉지라면
  </Figure.Caption>
</Figure>

    
    </div>

각 버튼은 이와같이 div 그리고 className은 figure로 만들어주었다.

 

Bootstrap의 Figure를 사용해 주었다. 반응형으로 이미지크기가 잘 변화하기 때문이다.

 

.figure{
          cursor: pointer;

        }
        .figure:active{
          transform: translateY(4px);
        }

 

그리고 CSS는 이와같이 효과를 주었다. cursor옵션에 pointer를주어 클릭모양으로 바뀌게 했다.

 

그리고 active를넣어주어 눌러지는 효과를 나타나게 만들어 주었다. 매우간단하지만 응용해서 앞으로

 

사용하기 좋을듯 하다.

 

- 참고한사이트

1)cursor포인터 효과종류

https://developer.mozilla.org/ko/docs/Web/CSS/cursor

cursor - CSS: Cascading Style Sheets | MDN

2) 버튼 클릭 애니메이션

https://www.w3schools.com/howto/howto_css_animate_buttons.asp

How To Animate Buttons With CSS

3) display속성 inline,block,inline-block

-> div속성들을 한줄로 쭉 보여주기위해 사용했다.

https://www.w3schools.com/css/css_inline-block.asp

CSS Layout - inline-block