회사에서 배움의 기회를 주어 운이 좋게도 모바일웹교육과정을 들을 수 있었습니다. HTML5부터 CSS J쿼리모바일까지 다양하게 배워볼 수 있었습니다. 까먹기는 아까운 내용들이라 블로그에 정리해둘까 합니다.
먼저 HTML5를 경험해본 것을 말하면 신기한 것이 많았습니다. 그중에서 제일 마음에 든 것은 HTML은 따로 깔끔하게 정리하여 두고 CSS로 보여주는 효과만 다르게 하는 것이었습니다. 이것은 작업 요령같은 것이고 HTML5의 신기함은 아닌 것 같지만..제가 제일 좋았던 것은 저것이군요 ^^
많은 소스를 받고 한번씩 보고했는데 우선 하나씩 차근차근 살펴보도록 하겠습니다. 먼저 보실 것은 아쿠아버튼입니다.
이쁘죠? 이것이 이미지를 하나도 사용하지 않은 것입니다. 마우스를 가져다 대면 가운데 글씨 색상이 변경됩니다.
이버튼은 아래와 같은 단계로 진화되어 코딩하시면 됩니다. 처음부터 완성된 것을 생각하고하지마시고 천천히 단계를 밟아가시면서 효과를 하나씩 입히시면 됩니다.
그럼 최초 버튼의 소스를 보겠습니다.
Aqua Button</pre> <div class="button aqua"> <div class="blaze"></div> HTML5</div> <pre>
12-13번째 줄에서 버튼을 둥글게 처리하였습니다. px값을 조절하여 약간 둥글게 많이 둥글게 조절 가능합니다.
두번째 버튼의 소스를 보겠습니다.
Aqua Button </pre> <div class="button aqua"> <div class="blaze"></div> HTML5</div> <pre>
25-34번째줄에 아쿠아라는 것이 생겼습니다. 색상과 각종효과를 입힌 것입니다. 일일히 값을 조절하여 변화를 확인해 볼 수 있습니다. 개인적으론 그림자효과를 준 것이 보기 좋았습니다.
마지막 완성입니다.
Aqua Button </pre> <div class="button aqua"> <div class="blaze"></div> HTML5</div> <div class="button aqua"> <div class="blaze"></div> CSS3</div> <div class="button aqua"> <div class="blaze"></div> JavaScript</div> <div class="button aqua"> <div class="blaze"></div> 웹 표준</div> <pre>
이곳에선 blaze와 hover가 첨가되었습니다. blaze는 위에서 빛이 보여 반사된 것 같은 느낌을 주는 효과입니다. hover는 마우스가 각각 버튼위에 있을 때 나타나는 효과입니다.
간단하게 아쿠아버튼 만들기를 알아보았습니다. 처음 완성버튼만 보고는 와 신기하네 어떻게 만들지란 생각이 강했는데 단계를 밟아가니 밥아저씨의 참 쉽죠? 가 생각납니다. ^0^
