본문 바로가기
728x90
반응형

CSS/CSS 응용30

[CSS]한줄로 길게 늘어트리기 (가로로 스크롤 되도록 ) 탭메뉴를 사용하다보면 모바일에서 보기 불편해지는 경우가 있다. 이럴때 탭메뉴를 셀렉트메뉴로 바뀌도록 해도되고 [javascript/jQuery] - [JAVASCRIPT/JQUERY]반응형 탭메뉴 (웹에서는 탭메뉴 - 모바일에서는 셀렉트메뉴) 아래와 같은 방법을 사용해도 된다. 정해진 영역보다 컨텐츠가 길어지면 자동으로 줄바꿈이된다. 이를 막기위해서는 white-space:nowrap;을 사용해서 줄바꿈이 안되도록 할 수 있다. 기본설정으로는 아래와 같은 결과가 나온다 white-space:nowrap; 을 사용하면 아래와 같이 영역에 상관없이 줄바꿈되지 않는다 white-space:nowrap;를 overflow:auto; 와 함께 사용하면, 줄바꿈이 되지않고 영역밖으로 넘어갈 경우 스크롤이생긴다. 아.. 2019. 7. 15.
[css]이미지 가운데부터 커지면서 보이기-clip-path clip-path와 animation을 이용해서 구현할 수 있다. [CSS/CSS 기초] - [CSS]요소 모양으로 자르기 clip See the Pen WqaMqW by gahyun (@gahyun) on CodePen. clip-path를 이용한 또다른 효과 [javascript/jQuery] - [jQuery]이미지 마우스 올린부분만 선명하게 보기 (특정부위만 확대) 2019. 7. 8.
[css]파동(물결이 커지면서 퍼지는) 애니메이션효과 강에 돌을 던졌을 때 일어나는 파동같은 효과를 주고 싶어서 원으로 만들다가 너무 허접해서... 검색하다가 참고해서 만들었다. 완벽한 원이아닌 각진 원을 이용하는것이 포인트였다 원으로했더니 너무 어색한 느낌이 났음.. 회전하면서 크기가 커져 퍼져나아가는 것 처럼 보이도록했다. border-radius: 43%; See the Pen wave by gahyun (@gahyun) on CodePen. 참고한 사이트 https://wsss.tistory.com/446 [Animation] CSS를 이용한 물결 애니메이션 만들기 See the Pen Waves by Rico Sta. Cruz (@rstacruz) on CodePen. CSS를 이용한 물결 애니메이션 만들기 [출처] wsss.tistory.com 2019. 7. 4.
[CSS]a태그 link hover animation 14가지의 다양한 link animation 효과를 구현해 보았다. 메뉴나 네비게이션등에 사용할수 있을 것 같다.. See the Pen css- link hover animation by gahyun (@gahyun) on CodePen. 2019. 6. 13.
728x90
반응형