반응형 사이트 컨텐츠
반응형 사이트 왼쪽 컨텐츠
Menu
box-shadow를 이용한 마우스
오버 효과입니다.
Notice
게시판 영역의 한줄 효과와 두줄 효과
게시판입니다.
Blog
해상도에 따라 이미지를 다르게
표현하는 방법입니다.
image1


image2
background 속성을 사용하였습니다. 해상도에 따라 이미지를 출력합니다.
반응형 사이트 가운데 컨텐츠
Slick Slider
slick.js를 이용한 이미지 슬라이드 효과입니다.
Blend Effect
background-blend-mode와 mix-blend-mode를 이용하였습니다.
Video
반응형 영상을 보여주는 영역입니다.
반응형 사이트 오른쪽 컨텐츠
Effect 1
CSS의 tranform을 이용한 마우스 오버효과입니다.

Effect 2
CSS의 tranform을 이용한 마우스 오버효과입니다.


Effect 3
CSS의 tranform을 이용한 마우스 오버효과입니다.
