플래시는 정말 훌륭한 도구인 것 같습니다. 부드러운 모션과 편리한 툴을 이용하여 멋진 UI를 구성할 수 있다는 것은 정말 높게 평가할 수 있습니다. 하지만 플러그인을 설치하여야 하고, 접근성의 문제와 컴퓨터의 많은 리소스를 차지하기 때문에 차세대 웹인 모바일에서는 별로 주목받지 못하고 있는데요. 더군다나 애플이라는 모바일의 강자에게 외면당하고 있으니 앞으로의 플래시의 행보가 걱정이 되는데요.

인터넷을 서핑하다보면 부드러운 모션과 멋진 효과들로 이루어진 메뉴들을 많이 볼 수 있습니다. 퀄리티를 보고 그곳에 우측클릭을 해보면 한번에 무엇으로 만들어졌는지 알 수 있지만, 대중적으로 플래시를 이용하여 많이 만들어지고 있습니다. 하지만 접근성 문제를 고려하고 페이지 로딩 속도등을 고려하면 플래시는 그리 좋은 선택이라고는 할 수 없는데요. (일반적인 사용자는 크게 알 수 없겠지만요.) 또한 폰트 문제가 있습니다. 코드로 이루어진 것은 제작자가 원하는 임의의 폰트를 사용할 수가 없었는데요. 이제는 CSS3를 통해 거의 대부분의 브라우저가 (IE포함) 웹폰트를 지원하고 있기 때문에 폰트는 이제 큰 문제가 아닌 것 같습니다. 그렇다면 가장 큰 문제가 되는 것이 부드러운 모션이 있는데요. jQuery를 이용하면 간단한 모션 효과를 구사할 수 있습니다. 하지만 이것은 더 생각해 봐야 할 문제이긴 한데요. jQuery를 이용하여 플래시 메뉴와 비슷한 모양을 표현해보았습니다. 어디 한번 평가해 볼까요?

Posted by 나의시점
,
유용한 jQuery를 이용하여 트리구조를 만들어보았습니다. 여러가지 UI가 있겠지만 이번에 만들어본것은 모든 아이템에 링크가 가능하고 "+", "-" 아이콘을 이용하여 하위 메뉴를 열고 닫을 수 있습니다. jQuery는 정말 사용할 수록 좋은 점이 너무 많은데요. 이번에 중점적으로 보아야 할 것은 두가지가 있는데요.

한가지는 어떠한 앨리먼트를 가지고 있는 개체를 선택하는 것인데요. :has(ul) 을 사용하게 되면 ul 을 가지고 있는 모든 개체를 선택할 수 있게 됩니다.

그리고 다른 한가지는, 자식요소를 선택하는 필터인데요. li:last-child 라는 것을 이용해서 li 중에 맨 마지막 자식요소 인것을 한번에 모두 선택할 수 있습니다.

정말 편한 기능이지요? 이것을 사용하게 되면 html에 일일히 클래스명을 주지 않아도 공통점이 있는 자신이 원하는 요소마다 같은 클래스명을 한번에 줄 수 있게 됩니다. 그렇다면 본격적으로 한번 보면 좋을 것 같은데요. 작업의 스트레스와 피로도를 최소화 하기 위해 걸그룹과 함께 작업하였습니다. jQuery 와 걸그룹의 절묘한 만남!


위와 같은 형태로 트리구조를 만들어 보았습니다.


Posted by 나의시점
,
webkit 기반의 iPhone은 인풋박스를 자기 마음대로 표현하는 경향이 있습니다. 스타일시트로 보더와 색상을 조정해도 마음대로 되지 않는데요, 오늘은 아이폰에서 보여지는 인풋박스를 마음대로 요리하는 방법에 대해 이야기 하겠습니다. 일단 기본적으로 style을 width:200px; height:30px; border:1px solid #00f; 정도만 주었습니다. 일반 PC에서는 스타일을 준대로 잘 나올텐데요. 아이폰의 사파리로 같은 페이지를 보았을 경우에는 이렇게 보이게 됩니다.


흠,,,,, 일단 모서리가 동그랗게 되어있고, 상단에 그림자가 있는데요. 이래가지곤 원하는 디자인을 만들 수 없겠죠? 주면의 디자인과 어울리지 않을 수도 있고요. 그렇다면 이것을 반듯하게 만들어 보겠습니다. 스타일시트에 다음의 속성을 넣어주면 되는데요.

<style type="text/css">
input {-webkit-border-radius:1px;}
</style>


네, 이제 네모 반듯해졌네요. 그런데, 박스의 상단에 흐릿한 그림자가 있네요. 이게 웬 언밸런스입니까? 위에있는 그림자도 없애야지 더 마음에 들 것 같네요.

<style type="text/css">
input {-webkit-border-radius:1px; -webkit-apprearance:none;}
</style>

이렇게 해주면 그림자는 깔끔히 없어지게 됩니다. 볼까요?


이야~ 이제 제가 원하는 스타일이 되었습니다. 깔끔하게 반듯한 테두리만 남게 되었네요. 기분에 좋습니다. ^^ 여러분도 아이폰에서 인풋박스가 마음에 안들게 보일때는 이 방법을 써보세요.

 HTML5 input 의 속성 설명은 여기에서 보실 수 있습니다.

모바일에도 편안한 인터넷 세상이 올때까지!! 화이팅!

Posted by 나의시점
,