css3 (6) 썸네일형 리스트형 안드로이드 scroll glow 방지하는 방법 안드로이드폰에서 스크롤 경계를 칠 때 바운스 효과 비활성화 하는 방법 body{ overscroll-behavior-y: none. } 감사합니다 pull to refresh 방지하는 방법 아이폰이나 안드로이드 chrome 의 페이지 상단에서 아래로 스와이프 하면 전체 페이지가 새로고침 되는 현상을 볼 수 있습니다. 이를 방지 하지 위한 css 속성을 소개해 드리겠습니다. overscroll-behavior - 스크롤 영역의 경계에 도달 할 때 발생하는 동작을 제어하는 기능 overscroll-behavior: contain; - 인접한 스크롤 영역에 스크롤 체인을 방지 (바운스 효과 또는 새로고침) 만약 이렇게 했을 경우에도 동작이 되지 않는다면 부모태그의 overflow:hidden;을 주면 됩니다. 감사합니다. custom selectBox 기본 selectbox 보면 디폴트 화살표가 나와 있는걸 볼 수 있다. 이 디폴트 화살표를 숨기고 커스텀하는 방법을 알아 보겠다. select box를 커스텀 하기 위해서는 다양한 방법이 있지만 그중에서 나는 기존 selectbox를 숨기고 다른 태그를 이용해 스타일을 지정한 다음 이용해서 선택된 selectbox의 값을 텍스트로 출력하는 방식을 사용해보겠다. 이방식이 좋은 이유는 ie 하위 브라우저도 지원이 가능하다. html 1 1 2 css .selectWrap .selectBox {z-index: 1; position: relative; width: 100%; width: 300px; margin: 0 auto; height: 23px; line-height: 23px; background: #f.. 버튼 hover 효과 버튼의 다양한 애니메이션 hover 효과 공통 css *{margin: 0; padding: 0;} button{background: 0 none; border: 0 none;} .buttons{position: relative; text-align: center; margin-top: 300px;} .buttons button{overflow: hidden; position: relative; display: inline-block; vertical-align: top; width: 200px; height: 100px; line-height: 100px; border: 1px solid #225ea7; transition: all 0.5s;} .buttons button:hover{color: #ff.. CSS animation - Keyframes 안녕하세요. 오늘은 CSS animation Keyframes을 알아보겠습니다. CSS transition으로도 애니메이션을 구현할 수 있지만 Keyframes은 애니메이션이 동작하는 중간에도 변화를 줄 수 있다는 차이점이 있습니다. 애니메이션 중간에 스타일이 바뀌는 지점을 키프레임(keyframe)이라고 부릅니다. @keyframes - 애니메이션 지점 설정하기 @keyframes 이름 { 선택자 { 스타일 } } animation-name - 애니메이션 이름 정하기 위에 keyframes 속성에서 지은 이름을 입력합니다. div{ animation-name: circle; } animation-duration - 애니메이션 실행 시간 설정하기 얼마동안 재생할 것인지 설정합니다. 초(s)나 밀리초(ms.. CSS3 Transition 안녕하세요. 오늘은 CSS Transition에 대해 알아보겠습니다. CSS Transition 은 CSS 속성을 변경할 때 애니메이션 속도를 조절하는 속성입니다. CSS transitions는 여러분이 어떤 속성을 움직이게 할지, 언제 애니메이션이 시작할지, 트랜지션을 얼마나 지속할지, 그리고어떻게 트랜지션을 실행하는지 결정하게 합니다. transition-property 트랜지션을 적용해야 하는 CSS 이름을 명시합니다. 쉼표(,)로 구분하여 여러개의 속성을 동시에 지정할 수 있습니다. transition-duration 트랜지션이 일어나는 지속 시간을 명시합니다. 기본값은 0이기 때문에 이 값을 표시해 줘야 부드러운 변화를 볼 수 있습니다. 음수값을 지정하게 되면 0으로 인식됩니다. div{ tra.. 이전 1 다음
