CSS3 애니메이션 효과 만들기
HTML & Javascript
2016. 6. 13. 16:49
CSS3 애니메이션 효과 html5와 CSS3가 나오기 전에는 애니메이션을 만들기 위해서 자바스크립트를 이용해야 하는 경우가 대부분이었지만 이제는 CSS3의 효과만 이용해서도 간단하게 애니메이션 효과를 만들 수 있게 됐는데요. 이번 글에서는 그 내용들을 살펴보고 예제를 만들어서 직접 구현해보는 과정을 살펴보겠습니다. animation에서 사용되는 속성은 얼마의 시간 동안 실행할지 지정해주는 duration 속성이 있고요. 어떤 요소에 특정 애니메이션을 적용하기 위해서 이름을 붙여주는 animation-name 속성입니다. 다시 말해 여러 개의 애니메이션을 정의할 수 있는 @keyframes 속성에서 aaa라는 애니메이션을 정의해 놨다면 특정 요소에서 animation-name 속성값에 aaa를 넣어주면 ..
jquery mobile controlgroup
HTML & Javascript
2015. 4. 9. 19:35
jquery mobile controlgroup ■ jquery mobile에서 버튼을 이용하는 방법을 이어서 정리하면서 지난 글에서는 버튼에 아이콘을 삽입하는 과정을 정리했었는데요. 이번에는 버튼을 그룹으로 묶는 방법을 알아보겠습니다. 연관성 있는 녀석들은 따로 배치하는 것보단 묶어 놓으면 사용하기 좀 더 편할 겁니다. 먼저 묶고 싶은 버튼을 배치한 후 data-role="controlgroup" 속성을 이용하면 됩니다. 예제에서 확인해볼게요.▲ 본문에 네 개의 버튼을 배치했는데요. 이것들을 하나로 묵겠습니다. ▲ 네 개의 버튼을 태그로 묶고 data-role="controlgroup" 속성을 적용했습니다. 하나로 묶어진 걸 확인할 수 있는데요. 이렇게 버튼을 묶으면 기본적으로 세로로 배치돼서 묶이게 ..
JQuery Mobile Button Icon
HTML & Javascript
2015. 4. 8. 20:02
■ JQuery Mobile에서 기본적으로 제공되는 button icon의 종류를 알아보고 몇 가지만 예제에 삽입하고 아이콘의 위치도 조절해보겠습니다. 먼저 기본 제공되는 버튼의 종류는 다음과 같습니다. ▲ 좀 많네요. ^^ 이 중에서 몇 개만 버튼에 삽입해보겠습니다. ▲ 버튼에 아이콘을 넣는 형식은 예제처럼 data-icon="아이콘 이름"을 넣어주면 됩니다. 임의대로 몇 개만 넣어봤는데요. 브라우저에서 출력해보겠습니다. ▲ 이렇게 간단하게 버튼의 특성에 맞게 아이콘을 삽입할 수 있는데요. 기본은 이렇게 문자열의 왼쪽에 위치하지만 이 위치도 바꿔줄 수 있습니다. data-iconpos 속성을 이용하는데요. 속성값에 left(기본값), right, top, bottom, notext 를 설정할 수 있습니..
jquery mobile button property 속성
HTML & Javascript
2015. 4. 8. 02:09
jquery mobile button property 지난 글에서 jquery mobile의 버튼이 자동 생성 되는 경우를 알아봤는데요. 이번 글에서는 그 버튼의 몇 가지속성에 대해서 알아보겠습니다. ■ 첫 번째로 jquery mobile 버튼의 모서리는 라운딩 처리가 되어 있는데요. (datat-conners="true") 이 속성을 제거하고 싶으면 다음과 같이 속성값에 flase를 넣어주면 됩니다. (data-corners="false") 예제에서 적용해볼게요.▲ 모서리의 라운드 효과가 없어졌는데 그림에서는 잘 안 보일 수도 있겠네요. 속성 하나만 적용하면 되니까 직접 해보세요.^^ 다음은 datat-inline인데요. 버튼의 크기를 결정하는 속성입니다. 기본 속성값은"false" 이고요. 위 그림처..
jquery mobile button 자동 생성
HTML & Javascript
2015. 4. 3. 20:19
jquery mobile button 자동 생성 ■ 지난 글에서는 data-role 속성을 이용해서 button을 만들어서 넣어봤었는데요. 이번에는 자동으로 버튼 모양이 생성되는 경우를 보겠습니다. 즉, "button"이라는 이름을 직접 입력하지 않아도 자동으로 버튼으로 변환이 되는 경우는 두 가지가 있습니다. 1. 특정 영역에서 태그가 사용되었을 때2. 버튼임을 알 수 있는 태그를 사용했을 때 먼저 특정 영역에 태그를 사용했을 경우인데요. 대표적으로 '헤더'나 '푸터'에 링크를 사용하면 [nav]의 역할을 하기 때문에 jquery mobile에서는 자동으로 버튼을 생성합니다. 예제에서 확인해볼게요.▲ data-role 속성을 이용해서 두 개의 page를 만들었고요. 첫번째 페이지에서 태그 안에 datt..
JQuery Mobile Button 삽입하기
HTML & Javascript
2015. 4. 1. 19:31
JQuery Mobile Button ■ 웹 페이지에서도 버튼의 역할은 많지만, 모바일 기기에서는 거의 대부분의 입력을 버튼으로 하게 됩니다. 예를 들어 화면의 키보드도 버튼 형식이라서 어떤 문자를 입력할 때는 그에 해당하는 버튼을 터치해서 입력하는 방식이잖아요. 그만큼 많은 역할을 하는 게 버튼입니다. ■ JQuery Mobile에서 Button을 넣는 방법은 두 가지가 있는데요. 사용자가 입력해서 넣을 수도 있고 자동으로 버튼의 기능이 추가되는 경우가 있습니다. 이번 글에서는 사용자가 직접 입력해서 넣는 방법만 정리하고 다음 글에 이어서 자동으로 생성되는 경우를 살펴볼게요. 직접 버튼을 만들어서 넣을 때는 data-role 속성을 이용하는데요. 형식은 다음과 같습니다. 버튼 이 형식을 생각하면서 다음..