Internet World 썸네일형 리스트형 [jQuery] jQuery 와 Flash, 두가지 메뉴의 모션 비교 플래시는 정말 훌륭한 도구인 것 같습니다. 부드러운 모션과 편리한 툴을 이용하여 멋진 UI를 구성할 수 있다는 것은 정말 높게 평가할 수 있습니다. 하지만 플러그인을 설치하여야 하고, 접근성의 문제와 컴퓨터의 많은 리소스를 차지하기 때문에 차세대 웹인 모바일에서는 별로 주목받지 못하고 있는데요. 더군다나 애플이라는 모바일의 강자에게 외면당하고 있으니 앞으로의 플래시의 행보가 걱정이 되는데요. 인터넷을 서핑하다보면 부드러운 모션과 멋진 효과들로 이루어진 메뉴들을 많이 볼 수 있습니다. 퀄리티를 보고 그곳에 우측클릭을 해보면 한번에 무엇으로 만들어졌는지 알 수 있지만, 대중적으로 플래시를 이용하여 많이 만들어지고 있습니다. 하지만 접근성 문제를 고려하고 페이지 로딩 속도등을 고려하면 플래시는 그리 좋은 선택.. 더보기 [jQuery] jQuery를 이용한 트리구조 만들기 유용한 jQuery를 이용하여 트리구조를 만들어보았습니다. 여러가지 UI가 있겠지만 이번에 만들어본것은 모든 아이템에 링크가 가능하고 "+", "-" 아이콘을 이용하여 하위 메뉴를 열고 닫을 수 있습니다. jQuery는 정말 사용할 수록 좋은 점이 너무 많은데요. 이번에 중점적으로 보아야 할 것은 두가지가 있는데요. 한가지는 어떠한 앨리먼트를 가지고 있는 개체를 선택하는 것인데요. :has(ul) 을 사용하게 되면 ul 을 가지고 있는 모든 개체를 선택할 수 있게 됩니다. 그리고 다른 한가지는, 자식요소를 선택하는 필터인데요. li:last-child 라는 것을 이용해서 li 중에 맨 마지막 자식요소 인것을 한번에 모두 선택할 수 있습니다. 정말 편한 기능이지요? 이것을 사용하게 되면 html에 일일히 .. 더보기 [Mobile] userAgent 에이전트를 이용한 모바일 페이지로 자동 이동 일전에 에이전트를 알아볼 수 있는 스크립트를 포스팅한적이 있는데요. "navigator.userAgent" 말이죠. 그렇다면 오늘은 이것을 이용하여 모바일 기기가 접속을 했을 때, 모바일 사이트로 바로 이동하게 하는 것을 해보도록 하겠습니다. 모든 일들이 마찬가지겠지만 이 일을 잘 해결하기 위해서는 일단 필요한 것들과 일의 과정을 정리해보면 되겠는데요. 우선 작업의 과정을 살펴보면, 1. 사이트에 접속한다. 2. 브라우저를 체크한다. 3. 에이전트에 따라서 페이지를 연결한다. 대략 이렇게 세가지 단계에 의해서 일을 처리하면 될텐데요. 그렇다면 2번째의 브라우저를 체크 하는 방법은 에이전트를 검사하는 방법을 사용하면 됩니다. navigator.userAgent 그 다음에 확인된 브라우저에 따라서 페이지를 .. 더보기 [javascript] 내가 사용하는 브라우저의 UserAgent 는 무엇일까요? 우리가 사용하는 브라우저들에는 여러가지가 있습니다. 가장 많이 사용하는 인터넷익스플로러를 비롯해서 모질라의 파이어폭스, 애플의 사파리, 구글의 크롬, 오페라 등등 또 모바일 브라우저 또한 다양하게 존재하는데요. 이 브라우저를 나타내는 것을 UserAgent 라고 합니다. 인터넷을 사용하시다가 보셨겠지만, 어떤 사이트들은 유저에이전트를 통해서 사용자에 따라 다른 페이지를 보여주기도 합니다. 단적인 예로, 모바일 브라우저로 포털 사이트를 접속했을 경우에는 똑같은 도메인을 입력하여도 모바일 브라우저에서는 모바일 사이트로 바로 접속이 됩니다. 그렇다면 내가 사용하고 있는 브라우저의 UserAgent 를 볼 수있는 방법을 알아보겠습니다. 아주 간단한 코드 한줄로 모든 것이 해결 가능한데요. navigator.us.. 더보기 사파리5의 새기능 Reader, Safari 5 Reader 이번 WWDC 2010 통해 여러가지 일들이 있었습니다. 무엇보다 많은 사람들의 관심과 주목을 받고 이슈화 되었던 일은 iPhone 4 인데, 이번 WWDC 2010 에 나오기까지 말도 많고 탈도 많았습니다. 스티브 잡스의 키노트를 통해 잘 등장했습니다. 모든 사람이 아이폰에 열광하고 있을 때, 물론 그것도 기대는 되었지만 저는 다른 것도 기대하고 있었습니다. 그것은 바로 사파리의 새로운 버전인데요. HTML5와 CSS3를 좀 더 잘 지원하고 더 빠른 브라우져가 나왔으면 하는 기대가 있었습니다. 그런데 그에 잘 부합하는 브라우저가 나왔는데요. 이번 사파리에서는 좀 새로운 기능이 있어서 소개해볼까 합니다. 그것은 바로 "reader" 인데요. 인터넷에서 블로그나 뉴스등의 글을 읽을 때에는 여러가지 광고가 .. 더보기 CSS3 지원하는 브라우져 열심히 썼다가 죄댜 날려먹었습니다. ㅜㅜ 새로운 기술은 우리의 삶을 더 편안하게 해줍니다. 특히 기술 부분에서의 새로운 것은 만드는 사람들로 하여금 더 쉽고 편하고, 사용하는 사람에게는 더 많고 더 멋진 경험을 할 수 있게 해줍니다. 그래서 저는 항상 새로운 것을 좋아합니다. 새로운 것 그것 뭐 적응하는데도 힘들고, 모두 지원하지도 않는데 왜 사용하느냐는 사람들도 있지만, 저는 그 단점들 보다는 새로운 것이 주는 효율성 기능성 등의 많은 혜택이 더 많다고 생각하기에 저는 새로운 것을 좋아합니다. HTML5 CSS3 도 마찬가지 입니다. 지금은 모든 브라우저에서 지원하지는 않지만, 사용함으로 인해서 정말 많은 효율성을 얻을 수 있었습니다. 예를 들어 한개를 가지고 크그에 따라 움직이는 박스를 만들 수 있었.. 더보기 구글의 모바일 전략, 모바일 구글맵 애플이 아이폰으로 모바일 시장을 점점 점령해가는 가운데, 구글은 안드로이드라는 OS로 모바일 시장에 뛰어들었습니다. 물론 구글이므로 무료로 개방하는 정책을 사용하였습니다. 그래서 여러가지 모바일 폰 개발 업체에서 안드로이드 OS를 탑재한 스마트폰을 출시하게 되었습니다. 안드로이드를 탑재한 스마트폰이 점점 시장점유율을 키워나가는 가운데, 구글 웹페이지의 모바일 서비스 또한 더욱 모바일 접속자에게 최적화 되어 점점 변하고 있는 것 같습니다. 우리나라 포털의 모바일 사이트들도 스마트폰 접속자들에게 더 나은 서비스를 제공하도록 조금씩 개편하고 있는데요. 우리나라의 사이트들도 멋지게 변했지만, 구글 모바일 사이트의 변화는 진정 구글의 기술력을 엿볼 수 있었습니다. 우선 오늘은 구글의 역작 구글맵의 모바일 버전에 .. 더보기 [Wolframalpha] 울프람알파를 아시나요? Wolframalpha 를 아시나요? 엄청난 지식 검색으로 유명(?) 한 곳인데 그 곳을 소개해보려고 합니다. 긴 설명을 필요없고 새로 바뀌 예쁜 매인화면부터 보는게 더 나을 것 같네요. 와우- 멋있네요. 저기 검색창에 검색하고자 하는 것을 입력하면 되는데, 이곳은 어떤것을 검색하는지 예제를 통해 보겠습니다. Wolframalpha 에서 알려주는 여러가지 검색 가능한 카테고리 입니다. 무엇보다 제일 관심이 가는 부분은 수학부분, 이렇게 많은 것을 검색할 수 있습니다. 수식을 검색하면 그래프까지 아주 깔끔하게 그려냅니다. 정말 놀랍네요. 이것 뿐만 아니라 여러가지를 검색할 수 있는데요. 연도를 입력하면 달력을 보여주기도 합니다. 정말 교육적으로 여러가지 도움이 되는 사이트라고 생각합니다. 원소를 검색하면 .. 더보기 [Mobile] 모바일웹, 아이폰에서 인풋박스 내 마음대로 바꾸기 webkit 기반의 iPhone은 인풋박스를 자기 마음대로 표현하는 경향이 있습니다. 스타일시트로 보더와 색상을 조정해도 마음대로 되지 않는데요, 오늘은 아이폰에서 보여지는 인풋박스를 마음대로 요리하는 방법에 대해 이야기 하겠습니다. 일단 기본적으로 style을 width:200px; height:30px; border:1px solid #00f; 정도만 주었습니다. 일반 PC에서는 스타일을 준대로 잘 나올텐데요. 아이폰의 사파리로 같은 페이지를 보았을 경우에는 이렇게 보이게 됩니다. 흠,,,,, 일단 모서리가 동그랗게 되어있고, 상단에 그림자가 있는데요. 이래가지곤 원하는 디자인을 만들 수 없겠죠? 주면의 디자인과 어울리지 않을 수도 있고요. 그렇다면 이것을 반듯하게 만들어 보겠습니다. 스타일시트에 다.. 더보기 [Mobile] 모바일웹, input type 에 따른 아이폰 키보드의 변화 아이폰으로 인터넷을 하다보면은 여러가지 폼에다가 입력을 해야 할 경우도 많습니다. 아이폰을 사용해보신 분들은 아시겠지만 상황에 따라서 다른 키보드가 뜨는데요. 오늘은 input 박스의 type에 따라 다르게 뜨는 키보드의 모양의 분석해 보겠습니다. 우선 기본적으로 나오는 type=text 일 경우에는 다음과 같은 키보드가 나옵니다. text일 경우에는 기본적인 키보트가 뜹니다. 인풋박스들이 태그에 쌓여있기 때문에 아래에는 "go" 라고 버튼이 뜹니다. 그렇다면 다음에 있는 땡땡땡 부분은 다들 아시다시피 password 부분입니다. 그 곳에 포커스가 가게 되면, 위와 같은 키보드가 돌출하게 되는데, 한가지 다른 점은 처음에 입력하는 값을 대문자로 입력하게 해주는, shift가 안눌려있습니다. 다음은 이메일.. 더보기 이전 1 2 3 4 5 ··· 7 다음
