[jQuery] jQuery를 이용한 퀵메뉴

카테고리 없음 2010. 7. 31. 19:41
jQuery 의 애니메이션 효과는 정말 훌륭한 것 같습니다. 아주 간단한 코드로 쉽게 애니메이션을 구현할 수 있는데요. 이 코드는 99% 회사 대리님께서 만드셨고, 제가 아주 간단한 IE6에서 안되는 문제를 해결했습니다. 여기에 올려도 이해해주시겠죠? ㅋㅋ 아무튼 사용하면 할 수록 jQuery 는 훌륭한 물건인 것 같습니다. 앞으로도 자주 사용해야겠습니다.

.animate() 를 이용해서 만들었는데요. .animate({"top":100px},1000) 이런식으로 사용하면 되는데요. 한 줄의 코드로 손쉽게 애니메이션 효과를 낼 수 있습니다..


중앙정렬 된 컨텐츠의 우측에 붙어 창 크기가 변해도 같은 위치에 오게 하였습니다.


저작자표시 동일조건
Posted by 나의시점
,

[M.T]춘천으로 떠나는 여행~~

넷터 이야기/회사 이모저모 2010. 7. 20. 18:21
무더위가 한창인 7월1일..  답답한 서울을 벗어나 춘천으로 떠났습니다.

춘천 고속도로가 개통되니 서울에서 1시간이면 가더군요~

춘천 하면 보통 닭갈비와 막국수를 생각하는데 퇴골 바위집이라는

오리 화로숯불구이야 말로 맛집 중에 맛집입니다.

춘천시내를 벗어나 외각으로 더 깊숙히 들어가야 찾을 수 있는 곳이지만

오로지 맛으로 입소문 나서 주말에는 자리가 없을 정도입니다.

그야 말로 오리고기의 원조 중에 원조!!

장로님의 오리집 인증샷^^

숯불에 구워먹는 오리 주물럭

정신없이 먹는 바람에 사진이 몇장 없네요 ㅋㅋ
주물럭을 다 먹으면 탕이 나오는데 주물럭도 최고지만 탕도 메인요리 처럼 훌륭합니다.
큼직막한 대파가 허연국물과 어우러져 시원한 맛을 내줘 밥 한공기는 후딱 없애주는 밥 도둑입니다.

 
저작자표시

'넷터 이야기 > 회사 이모저모' 카테고리의 다른 글

사무실 모습  (0) 2010.05.28
넷터 블로그가 오픈하였습니다.  (0) 2010.05.07
Posted by 알 수 없는 사용자
,

미사리 - 털보네 바베큐

넷터 이야기/맛집 탐방 2010. 7. 18. 13:11
유난히 길었던 추운 겨울이 지나 화창한 날씨가 다가오니 춘곤증이 느껴졌던 지난 4월 30일..

회사를 벗어나 가까운 미사리로 향했습니다.

금강산도 식후경!! 먼저 점심을 먹기 위해 미사리에 위치해 있는 털보네 바베큐집을 찾았습니다.

모니모니해도 고기는 씹어야 제맛이지라~~ㅋㅋ


털보네 바로 뒤편엔 식사 겸 차를 즐길 수 있는 시드니가 자리 잡고 있습니다.
밤에 오면 화려한 불빛들 때문에 더욱더 멋집니다^^

털보네 가장 좋은 점은 셀프 서비스를 하면 무려 20% 할인을 해주는 해피한 이벤트를 항상 하고 있습니다.^^
고기도 직접 가져다 소금도 뿌려보고 장작불에 올려도 보고..

고기에 열심히 소금을 뿌리고 있는 김팀장님 , 신팀장님 그리고 저 ㅋㅋ

우리가 먹을 별난 통갈비와 고급 생목살을 들고 계신 김팀장님

우리 회사의 정신적 지주이신 장로님과 사장님의 인증샷^^

맛깔 나게 굽고 계신 털보네 아저씨~

우리 회사의 홍일점인 정훈씨~~ 열심히 셋팅중~~

야채류 , 콩가루 , 콩나물국 , 김치와 부추 셋팅 완료!!
고기 나오기 전까지 허기짐을 못 견디신다면 샐러드와 드레싱 위에 콩가루를 얹어 먹는 걸 강력 추천 합니다^^ㅋ

별난 통갈비가 지글지글~~ 글을 쓰는 지금도 침이 꼴깍꼴깍 넘어가네요..

고기도 일품이였지만 후식으로 시켰던 잔치국수와 양푼 비빔밥 대박!!

정말 배가 빵빵~~ 터지게 맛있게 먹었으니
봄바람 맞으러 미사리 조정경기장으로 고고씽~~

 
저작자표시
Posted by 알 수 없는 사용자
,

[jQuery] jQuery 와 Flash, 두가지 메뉴의 모션 비교

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

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

저작자표시 동일조건

'웹 > DOM' 카테고리의 다른 글

[jQuery] jQuery를 이용한 트리구조 만들기  (0) 2010.06.28
[jQuery] jQuery를 이용한 사이드메뉴  (0) 2010.05.25
[jQuery] jQuery를 이용한 레이어 팝업  (2) 2010.05.24
[javascript] location 객체 설명  (0) 2010.05.24
[jQuery] 라이브러리를 블러와서 사용하는 법  (0) 2010.05.20
Posted by 나의시점
,

[jQuery] jQuery를 이용한 트리구조 만들기

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

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

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

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


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


저작자표시 동일조건

'웹 > DOM' 카테고리의 다른 글

[jQuery] jQuery 와 Flash, 두가지 메뉴의 모션 비교  (0) 2010.06.29
[jQuery] jQuery를 이용한 사이드메뉴  (0) 2010.05.25
[jQuery] jQuery를 이용한 레이어 팝업  (2) 2010.05.24
[javascript] location 객체 설명  (0) 2010.05.24
[jQuery] 라이브러리를 블러와서 사용하는 법  (0) 2010.05.20
Posted by 나의시점
,

[모바일웹] 아이폰에서 인풋박스 내 마음대로 바꾸기

웹/HTML/CSS 2010. 6. 18. 15:03
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 의 속성 설명은 여기에서 보실 수 있습니다.

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

저작자표시 동일조건

'웹 > HTML/CSS' 카테고리의 다른 글

[모바일웹] input type 에 따른 아이폰 키보드의 변화  (0) 2010.06.18
[모바일웹] 아이폰 사파리에서 화면회전시 폰트 확대 방지  (1) 2010.06.18
[모바일웹] 아이폰 사파리에서의 전화번호 링크  (0) 2010.06.15
[모바일웹] 모바일 웹 개발, 화면 확대 방지 viewport  (0) 2010.06.03
인풋박스 속성(1) - 입력상자 자리수 차면 이동, 입력상자 정수만 입력가능  (0) 2010.05.27
Posted by 나의시점
,

[모바일웹] input type 에 따른 아이폰 키보드의 변화

웹/HTML/CSS 2010. 6. 18. 15:01
아이폰으로 인터넷을 하다보면은 여러가지 폼에다가 입력을 해야 할 경우도 많습니다. 아이폰을 사용해보신 분들은 아시겠지만 상황에 따라서 다른 키보드가 뜨는데요. 오늘은 input 박스의 type에 따라 다르게 뜨는 키보드의 모양의 분석해 보겠습니다.

우선 기본적으로 나오는 type=text 일 경우에는 다음과 같은 키보드가 나옵니다.


text일 경우에는 기본적인 키보트가 뜹니다. 인풋박스들이 <form> 태그에 쌓여있기 때문에 아래에는 "go" 라고 버튼이 뜹니다.

그렇다면 다음에 있는 땡땡땡 부분은 다들 아시다시피 password 부분입니다. 그 곳에 포커스가 가게 되면,


위와 같은 키보드가 돌출하게 되는데, 한가지 다른 점은 처음에 입력하는 값을 대문자로 입력하게 해주는, shift가 안눌려있습니다.


다음은 이메일인데, type을 email로 했을 경우에는 아주 친절하게도 @ 와 . 이 나오게 됩니다. 입력하기 참 쉽겠죠?


type=number 에 포커스 되었을 때는 특수문자를 눌렀을 경우와 같은 키보드가 나옵니다.


오늘의 하일라이트, type=tel 일경우에는 전화번호를 쉽게 입력할 수 있도록 전화번호 키패드가 뜨게 됩니다. 이거 정말 마음에 드네요. 주민등록번호나 전화번호를 입력할 때 사용하면 좋을 듯 합니다.


url의 경우도 email과 비슷합니다. url을 쉽게 입력할 수 있도록 /(슬래시)와 .com(닷컴)이 나오게 됩니다. 입력할 때 편하겠네요.


type=search 일 경우는 "Go" 부분이 "Search"로 변하고 나머지는 동일합니다. 다른 것들은 text와 동일하게 뜨므로 이미지는 생략하였습니다.

이런 것들을 잘 사용하면, 사용자들이 좀 더 편하게 사용할 수 있겠지요? 참, 그리고 한가지 팁은 url을 입력할 때, url을 입력하는 키보드가 나오지 않았을 경우에 닷컴을 입력하려면 특수문자 부분을 한번 갔다와야 하는데, 그렇지 않고 스페이스바를 두번 누르게 되면 점이 찍힙니다. 그런다음에 백스페이스를 한번 눌러주시고 입력해주시면 특수문자 키보드로 바꾸지 않고도 손쉽게 입력하실 수 있습니다.
저작자표시 동일조건

'웹 > HTML/CSS' 카테고리의 다른 글

[모바일웹] 아이폰에서 인풋박스 내 마음대로 바꾸기  (1) 2010.06.18
[모바일웹] 아이폰 사파리에서 화면회전시 폰트 확대 방지  (1) 2010.06.18
[모바일웹] 아이폰 사파리에서의 전화번호 링크  (0) 2010.06.15
[모바일웹] 모바일 웹 개발, 화면 확대 방지 viewport  (0) 2010.06.03
인풋박스 속성(1) - 입력상자 자리수 차면 이동, 입력상자 정수만 입력가능  (0) 2010.05.27
Posted by 나의시점
,

[모바일웹] 아이폰 사파리에서 화면회전시 폰트 확대 방지

웹/HTML/CSS 2010. 6. 18. 14:57
요즘 아이폰의 보급으로 많은 사람들이 iPhone을 사용하고 있습니다. 그래서 iPhone의 Safari에 최적화된 웹페이지를 많이 제작하고 있는데요. 아이폰 사파리는 모바일 브라우저로 여러가지를 고려하여 개발해야 하는데요. 앞에서 포스팅한 전화번호 링크와 화면 확대되는 부분이외에 화면 확대는 막았어도 텍스트가 자동으로 확대가 되는 것을 볼 수 있습니다. 세로로 딱 맞게 작업했을 경우 가로로 보게 되면 폰트가 확대되어 있는 것을 볼 수 있는데요. 이렇게 되면 어느 환경에서나 잘 보이게 개발하기 힘들겠죠? 그래서 폰트가 확대되는 것을 막아야 합니다.

그림에서 볼 수 있듯이 세로로 잘 맞게 작업한 경우 가로로 봤을 때 두번째의 그림같이 확대가 되게 됩니다. 그래서 원래 생각했던 디자인과 다르게 나오게 될 수 있는데요.



이러한 경우에는 스타일 시트를 약간 수정하는 것으로 문제를 해결할 수 있습니다.

<style type="text/css">
* {-webkit-text-size-adjust:none;}
</style>

이렇게 해주면 아래의 그림과 같이 가로로 보았을 때도 세로로 보았을 때와 동일한 폰트 크기로 볼 수가 있습니다. 아이폰이 아직도 세력을 넓혀가고 있는 가운데, 모바일 개발에 없어서는 안되는 중요한 정보 같습니다. 저도 잘 기억하고 있어야겠네요.


저작자표시 동일조건

'웹 > HTML/CSS' 카테고리의 다른 글

[모바일웹] 아이폰에서 인풋박스 내 마음대로 바꾸기  (1) 2010.06.18
[모바일웹] input type 에 따른 아이폰 키보드의 변화  (0) 2010.06.18
[모바일웹] 아이폰 사파리에서의 전화번호 링크  (0) 2010.06.15
[모바일웹] 모바일 웹 개발, 화면 확대 방지 viewport  (0) 2010.06.03
인풋박스 속성(1) - 입력상자 자리수 차면 이동, 입력상자 정수만 입력가능  (0) 2010.05.27
Posted by 나의시점
,

[모바일웹] 아이폰 사파리에서의 전화번호 링크

웹/HTML/CSS 2010. 6. 15. 14:19
아이폰 사파리에서 웹 서핑을 하다보면 자기도 나름 폰이라고 전화번호와 비슷하게 생긴것에는 자동으로 링크가 걸려 그것을 누르면 전화가 걸립니다. 어찌보면 똑똑하고 좋으나 웹사이트를 개발하는 입장에서 보면 좀 반갑지 않은 기능이기도 한데요.
이런 상황을 극복하기 위한 방법!!

<meta name="format-detection" content="telephone=no" />

위와 같은 매타값을 주게 된면, 아이폰의 사파리가 자기 마음대로 링크를 만들지 않습니다.
헌데, 혹시나 전화 바로거는 링크를 만들일이 있지 않을까요? 물론 그럴 때를 대비해서 요런 방법이 존재합니다.

<a href="tel:010-1234-5678">전화를 거는 링크</a>

위와 같이 <a>태그를 걸어주면 아이폰 사파리에서 바로 전화를 거는 링크를 만들 수 있다습니다. ^^
이 것을 사용하면 좀 더 사용하기 편리한 사이트를 만들 수 있겠죠?
쓰면 쓸수록 아이폰, 이건 참 물건인 것 같네요. 허허허
저작자표시 동일조건

'웹 > HTML/CSS' 카테고리의 다른 글

[모바일웹] input type 에 따른 아이폰 키보드의 변화  (0) 2010.06.18
[모바일웹] 아이폰 사파리에서 화면회전시 폰트 확대 방지  (1) 2010.06.18
[모바일웹] 모바일 웹 개발, 화면 확대 방지 viewport  (0) 2010.06.03
인풋박스 속성(1) - 입력상자 자리수 차면 이동, 입력상자 정수만 입력가능  (0) 2010.05.27
[HTML/CSS] 늘어나는 박스 만들기  (0) 2010.05.25
Posted by 나의시점
,

[모바일웹] 모바일 웹 개발, 화면 확대 방지 viewport

웹/HTML/CSS 2010. 6. 3. 12:02
2009년 말 우리나라에도 아이폰이 출시하면서 우리나라의 인터넷 환경도 많이 바뀌게 되었는데요. 비단 아이폰 뿐만아니라 아이본과 더불어 삼성의 옴니아2, 그리고 구글의 새로운 모바일 OS 안드로이드를 탑재한 폰들이 다수 나오게 되면서 2010년 상반기는 인터넷 업계에도 많은 변화가 일어난 것 같습니다. 포털에는 모바일 웹페이지와 모바일폰용 어플리케이션 개발이 당연하게 되었구요. 앞으로는 더 다양한 분야에서, 그리고 다양한 사람들이 모바일 웹페이지를 만들고 사용하게 될것입니다. 그러기 위해선 "접근성"이라는 문제가 대두되게 되는데요. 이전에 이야기하던 장애인에 국한된 접근성이 아니라, 어떤 장애가 있든지 + 어떤 환경에 있든지 정보에 접근할 수 있고 그것을 이용할 수 있어야 할 것입니다.

모바일 웹을 개발하기 위해서는 일반 컴퓨터 환경과는 약간 다르기 때문에 고려해야 할 사항들이 몇가지 있습니다. 오늘은 처음으로 모바일 웹에 대해 이야기 하고자 하는데요. 모바일 웹이 일반 웹과 다른 것 중 가장 중요한 것은 접속하는 환경적인 차이가 너무 확연하게 크다는 것입니다. 이미 웹 표준이 대두되면서 크로스브라우징 문제가 많이 있었는데요. 우리나라의 인터넷 익스플로러 기반으로 개발된 많은 웹페이지가 다른 브라우져(파이어폭스, 사파리, 크롬, 오페라 등)에서 많이 깨지게 되는 현상입니다. 그래도 그나마 그것은 비슷한 컴퓨터 환경인데 모바일 환경은 그 차원이 달라집니다. 우선 OS부터에서 매우 다양하고, 마우스가 없으며 키보드가 제한적입니다. 그리고 무엇보다 디스플레이의 해상도가 천차만별입니다. 그러한 다양한 환경을 극복하기 위해서는 일단 심플하고 어떠한 화면 해상도도 커버할 수 있는 문서를 만들어야 합니다.

오늘은 처음으로 meta 값인 viewport 를 살표보도록 합시다. 우선 시원스럽게 사용방법부터 보지요. 메타값은 head 부분에 넣는 것은 다들 아시겠죠?

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

viewport는 화면의 확대를 관리하는 것입니다. 모바일 웹브라우져는 대부분 기기의 화면이 작기 때문에 원래의 페이지를 축소해서 보여줍니다. 하지만 모바일에 최적화 된 페이지는 그럴 필요가 없겠죠? width 를 100%로 주어 어떤 해상도에서도 딱 맞춤형으로 나오는 것이 사용성이 훨씬 좋아집니다. 그러기 위해서는 화면을 확대하는 것을 방지해야 하는데요. 이것을 사용하면 가로보기로 전환시에 확대가 되는 것을 방지 합니다. 코드의 내용을 자세히 보면, initial-scale 은 처음 열렸을 때, maximum-scale 은 확대시의 최대로 확대되는 비율을 나타냅니다. 그리고 user-scalabe 을 통해서 확대를 사용할지 안할지를 결정할 수 있습니다.


보통의 아이폰 사파리의 화면입니다. viweport 를 사용하지 않을 시에는 가로보기로 전환시 화면이 확대되게 됩니다. 하지만 viewport meta 값을 적용해주게 되면 가로나 세로에서 아주 딱맞에 화면에 표현됩니다.


폰트의 크기 변화가 없고, 화면의 width 가 넓어졌기 때문에 상단에 보이는 2번째 메뉴가 한줄로 늘어서게 된것을 볼 수 있습니다. 이 것을 사용하면 좀 더 매력적인 모바일 사이트를 만들 수 있습니다.

제 생각에 지금 이슈화 되고 있는 모바일 웹은 앞으로 인터넷 환경이 나아가게 될 새로운 시작이라고 생각합니다. 지금의 스마트폰 정도에서 뿐만 아니라, 아이패드 같은 다른 차원의 모바일 기기, 그리고 TV 로 까지 많은 변화가 일어날 것입니다. PC에서만 보아왔던 인터넷은 이제 어떠한 환경에도 구애받지 않고 우리에게 다가오게 될 것입니다. 한동안 잠잠했던 인터넷 세상은 크게 변화하기 위해 꿈틀거리고 있는 것 같습니다. 아직은 하루 앞이 잘 보이지 않지만 더 좋은 세상이 올거라는 것을 믿어 의심치 않습니다. 그런 좋은 세상을 만들기 위해 바로 우리가 노력해야 하는 것이 아닐까요?

저작자표시

'웹 > HTML/CSS' 카테고리의 다른 글

[모바일웹] 아이폰 사파리에서 화면회전시 폰트 확대 방지  (1) 2010.06.18
[모바일웹] 아이폰 사파리에서의 전화번호 링크  (0) 2010.06.15
인풋박스 속성(1) - 입력상자 자리수 차면 이동, 입력상자 정수만 입력가능  (0) 2010.05.27
[HTML/CSS] 늘어나는 박스 만들기  (0) 2010.05.25
인풋박스(input) 기본입력 설정 ime-mode  (0) 2010.05.19
Posted by 나의시점
,

티스토리툴바