2013/1113 jQuery Mobile 리스트 두 번째 안녕하세요!! 간만에 오늘 휴가라 이렇게 블로그 포스팅을 편한 시간대에 하게 되었습니다. ㅎㅎ; 오늘 포스팅할 내용은 이전 포스팅에 이어서 jQuery Mobile 리스트에 대해서 조금더 알아보도록 하겠습니다. 이전 포스팅에선 단순히 텍스트만 나오는 리스트에 대해서 알아보았는데 오늘 포스팅에서는 이미지도 넣어서 함께 리스트에 뿌려 보도록 하겠습니다. 모바일 페이지 구축할때 유용하게 사용하시기 바랍니다. 기본적인 소스의 구조는 아래와 같습니다. // 안에 내용 을 삽입하여 만들면 됩니다. 정말 매우 간단합니다. 그럼 소스를 직접 만들어 보겠습니다. List With Thumbnails: // 위와 같이 소스코딩을 한 후 파일의 제목은 편하신대로 만들고(저는 test.html 로 만들어보았습니다!) 이미지는.. 2013. 11. 28. jQuery Mobile 리스트(List Views) 안녕하세요!! 또 오랜만에 jQuery Mobile 관련 내용을 올립니다. 요즘 이직한 새로운 직장에서 일배우느라 정신이 정말 없습니다. 지금도 공부를 해야하는데도 불구하고 이렇게 블로그를 씁니다. 6개월 넘게 블로그를 쓰다보니 정말 애착이 갑니다. 또 많은 분들이 질문도 주시고 답변하면서 보람도 느낍니다. 어쨋든 오늘 포스팅할 내용은 jQuery Mobile List 입니다. jQuery Mobile 을 사용하여 리스트 화면을 만들어보겠습니다. jQuery Mobile 리스트를 만들경우 또는 을 사용하여 나타냅니다. 그리고 를 사용하여 리스트들을 만들면 됩니다. 즉, 아래 소스와 같이 만들어지게 됩니다. OL 리스트 UL 리스트 리스트 화면을 직접 만들어보겠습니다. OL 리스트 OL 리스트1 OL 리스.. 2013. 11. 26. 처가집 김장 담그는 날!! 몇 일전 처가집에서 연락이 왔습니다. 김장을 담근다는!! 작년에도 도와 드렸기에 이번해도 도와드리러 다녀왔습니다. 본집엔 아직 한번도 저희 어머니께서 김장담그는 날 도와드린적이 없는데 괜히 어머님께 죄송스런 마음이 드네요. 원래는 본집도 도와드린다고 했는데 어머니께서 새벽 일찍부터 벌써 담궈놓고 점심때 부르더군요. 수육 삶아 놨으니 와서 언넝 먹으라고 말이죠. ㅎㅎ;; 2014년도는 꼭 본집도 도와드리기로 마음 먹었습니다. 어쨋든 올해도 처가집 김장담그실때 도와 드렸습니다. 속 버므리고 배추에 김치속 무치는게 제가 할일인데 올해는 속무치는것은 장모님 지인분께서 해주셨고 저는 배추에 속 무치고 김치 옮기는 역할을 했습니다. 작년도 그랬고 올해도 그렇듯이 확실히 김장담그는 일은 쉬운일이 아닌 것을 또다시 깨.. 2013. 11. 24. jQuery Mobile Collapsible(접고 펴는 기능) 안녕하세요!! 요즘 8년 다닌 직장을 그만두고 새로운 직장에 취업해서 서울 본사에서 일 배우느라 정신없어서 포스팅을 이제야 씁니다. 주말 빼고 하루에 하나씩 계속 쓰는게 목표인데 이게 정말 쉽지 않은것 같습니다. ^^; 그래도 오늘 힘내서 jQuery Mobile 접고 펴는 기능(Collapsible)에 대해서 한번 알아보겠습니다. 접고 펴는 기능은 버튼을 클릭하면 열렸다가 다시 버튼을 클릭하면 닫히는 기능을 말합니다. 이곳을 클릭하세요!! 내용을 입력하세요... 기본 소스는 위와 같습니다. 위 구문에서 중요한것은 collapsible 입니다. 버튼 안의 내용은 자동적으로 버튼이 되고 내용 은 내용을 넣으시면 됩니다. 일단 소스를 보면서 다시 설명드리겠습니다. Collapsible 접고 펴기 이곳을 클릭.. 2013. 11. 20. 청주랜드 어린이회관 가족나들이 주말에 날씨도 좋고 가족들과 나들이는 하고 싶은데 먼곳에 가기엔 약간 부담스러워서 가까운 청주랜드에 다녀왔습니다. 놀이기구는 총 5개 밖에 되지 않지만 아직 어린 우리 아이들에게는 만족할만한 곳입니다. 그리고 금전적으로 전혀 부담이 없습니다. 공중자전거는 어린이 700원, 어른 1000원 (아들과 저, 그리고 와이프와 딸 요렇게 탔습니다) 미니기차는 어린이 700원, 어른 1000원 (미니기차는 사진찍으려고 아이들만 태워주었습니다.) 박치기차는 어린이 900원, 어른 1700원 (흔히 말하는 범퍼카입니다. 이건 생각보다 속도가 빨라서 자칫하면 아이들이 다칠수도 있겠다는 생각이 들더군요.) 우주전투기 어린이 1000원, 어른 1700원 (이건 딸혼자 하나 타고 와이프와 아들과 둘이 하나 탔습니다. 저는 사.. 2013. 11. 17. jQuery Mobile 네비게이션 바(Navigation Bars) 안녕하세요!! 이번에 포스팅할 jQuery Mobile 는 네비게이션 바(Navigation Bars) 입니다. 일반적으로 한 페이지의 구성은 상단, 내용, 하단 이렇게 3개의 단위로 나뉘어 지는데 네비게이션 바의 역할은 그 중간에 버튼등을 삽입하여 다른 페이지로 이동을 하는 기능을 합니다. jQuery Mobile 은 최대한 부하를 줄이고 빠른 페이지 로딩을 추구하기 때문에 네비게이션 바 소스역시 매우 단순합니다. 일단 백번의 설명보다는 한번 소스를 보는게 낫겠지요. 기본적인 소스 구성은 아래와 같습니다. 홈 1 페이지 2 페이지 // data-role에서 navbar을 정의 하고 ... 으로 메뉴를 설정합니다. 정말 깔끔하고 단순합니다. 그럼 이제부터 위의 내용이 적용된 소스를 만들어보겠습니다. 나의.. 2013. 11. 15. [서평]카페베네를 읽고서 요즘 베이비부머 세대들에게 특히 인기가 있는 커피 체인점 사업이 궁금해서 읽어본 책이라 할 수 있습니다. 절대 카페베네를 홍보하기 위해서 서평을 쓰는건 아니라고 먼저 말씀드립니다. 왜 국내 브랜드인 카페베네가 이토록 성장할 수 있었는지 정말 궁금하기도 하고 커피 사업이 이렇게 크게 성장하게된 배경이 과연 무엇일까 등 제가 생각하는 것들이 모든게 해결된건 아니지만 조금 도움이 되었다고 생각하기에 이렇게 서평을 남깁니다. 이 책을 쓴 저자는 서울경제신문 기자 출신인 이상훈 입니다. 그리고 이 책은 2011년 5월초 발행되었고 현재는 2013년 11월 입니다. 책이 발행된지 약 2년이 지났네요. 책에 2013년, 2014년도 어떻게 될것이라는 이야기가 조금 나오는데 글쎄요... 어쨋든 왜 국내의 젊은 사장이 .. 2013. 11. 13. jQuery Mobile 툴바(Toolbars) 안녕하세요!! 이번 포스팅은 지난 포스팅에 이어서 jQuery Mobile 툴바에 대해서 설명하겠습니다. 오늘 설명드릴 내용은 툴바에 대한 스크롤 입니다. 스크롤은 마우스에 달려있는 위, 아래 내리고 올리는 기능을 하는 역할이죠. 그런데 jQuery Mobile의 스크롤은 모바일에서 하는 것이기 때문에 손가락을 이용해서 한다고 보시면 되겠습니다. 스크롤은 총 3가지 방법으로 할 수 있습니다. inline : 기본적으로 헤더와 푸터 내용이 함께 스크롤 됩니다. fixed : 헤더와 푸터 내용은 고정된체 그 안의 내용만 스크롤 됩니다. fullscreen : 내용을 클릭하면 헤더와 푸터는 나타났다 사라졌다를 반복합니다. 내용만 보고 싶을 경우 한번 클릭하면 헤더와 푸터의 내용은 사라지며 내용만 스크롤을 하면.. 2013. 11. 13. 와이프와 단둘이 괴산 산막이옛길 나들이 요즘 부쩍 와이프와 나들이를 많이 나가네요. 이렇게 시간날때 와이프와 좋은 추억 많이 만들어서 나름 기쁘네요 ㅎㅎ 이젠 아이들과 함께 나들이를... ㅋ 작년 이맘때인가 괴산 산막이옛길을 아이들과 함께 갔었는데 아이들이 3분의 1 지점에서 힘들다고 안아달라고 보채서 도저히 안고 배타는 곳까지 가기엔 무리겠다 싶어서 돌아왔습니다. 그래서 이번엔 와이프와 단 둘이 배타는 곳까지 가보았습니다. 산과 강 그리고 풍경이 단풍과 어우러져 정말 자연의 아름다움을 제대로 만끽하고 돌아온듯 합니다. 산막이옛길 초입에 보면 이렇게 포토존이 있습니다. 와이프와 단둘이 와서 저는 패스 하고 와이프만 한컷!! 오전 10시 조금 넘어서 도착한듯 한데 초입에 있는 상점들 반 정도는 아직 점포를 열지 않은듯 합니다. 나머지 반은 이렇.. 2013. 11. 11. jQuery Mobile 툴바(toolbars) 안녕하세요!! 이번 포스팅은 jQuery Mobile 의 툴바에 대해서 알아보겠습니다. 내용이 조금 많은듯 해서 다음 포스팅과 반반 나눠서 포스팅해야 할듯 합니다. ^^; 우선 오늘 포스팅은 헤더 바(hearder bars)와 푸터 바(footer bars)에 설명하겠습니다. 사실 헤더(hearder)는 일반적으로 페이지 제목, 로고, 그리고 버튼을 포함하는 내용을 많이 담고 있습니다. 지금 보여드릴 예제는 여러분들이 왼쪽과 오른쪽에 버튼을 추가하는 내용입니다. 예제를 보시기 바랍니다. Home 나의 모바일 홈페이지 Search // 붉은 글씨로 표시된 부분을 보면 태그 태그 태그로 나오는 것을 볼 수 있고 data-icon 은 home 과 search 를 넣어서 해당하는 아이콘이 나오게 한것을 알 수 .. 2013. 11. 11. 와이프와 우암산 산당산성 등산 제가 살고 있는 청주에는 등반코스로 정말 무난한 산당산성이 있습니다. 회사에서도 자주가고 팀원, 친구, 지인들과도 자주가는 곳 입니다. 그런데 생각해보니 와이프와 단 둘이서 온적은 한번도 없었습니다. 와이프 역시 동네 지인들과 몇 번 다녀온적은 있지만 남편과 즉 저와 같이 간적은 한번도 없죠 ㅋ 그래서 한번 올라갔다 왔습니다. 올라가는중 뱀 한마리가 우리 앞을 가로 막네요. 대충 50cm 정도 되는듯 보입니다. 왠지 독사일지도 모른다는 생각에 멀찌감히 서서 한컷 담았슴돠. ㅋ 정상에 올라와 보니 단풍이 아주 절정입니다. 출발할때 비가 조금씩 내리고 있었는데 정상에 도착해보니 비는 어느새 그쳐 있더군요. 산당산성 끝자락에 계단이 있습니다. 그곳을 올라가면 위처럼 사진을 찍을수 있는 전망대가 있답니다. 땀에.. 2013. 11. 8. jQuery Mobile 아이콘 안녕하세요!! 이번에 포스팅할 jQuery Mobile 내용은 아이콘 입니다. jQuery Mobile 은 아주 쉽게 아이콘을 생성할 수 있습니다. 오늘 그 부분에 대해서 알아보겠습니다. 우선 아래 간단한 소스를 보면서 설명드리겠습니다. Left Arrow Button // 위 구문에서 중요하게 보아야 할 곳은 붉은색으로 표시된 부분입니다. data-icon="arrow-l" 입니다. 여기서 l 은 left 의 줄임말이라고 보면 되겠습니다. 위 구문을 실행하면 아래와 같은 화면이 나오게 됩니다. // 위 그림을 보면 좌측에 아이콘이 생긴것을 확인할 수 있습니다. 이렇게 아이콘을 만들고 싶은 경우 data-icon 을 이용하여 사용하고 싶은 아이콘을 적어주기만 하면 됩니다. 아래 내용은 기타 아이콘들에 대.. 2013. 11. 7. 진해 바다낚시 체험 및 창원 가고파국화축제 관람!! 제가 사는곳은 청주인데 먼 진해까지 내려갔던 이유는 어릴적부터 지금까지 친한 친구녀석이 살고 있기 때문입니다. 그리고 아이들 바다낚시 체험도 시켜줄겸 때마침 국화축제도 열리고 있다고 하니 일석이조 아니겠습니까 ㅎㅎ; 이것은 도다리라는 녀석인데 저희가 잡은건 아니고 낚시하는곳에 도착하자마자 옆에 어떤 아저씨분께서 잡으신 물고기 입니다. 약 30cm 정도 되보이더군요. 그래서 생각했죠... 우리도 저런 큰 월척이 가능할꺼라고 말이죠. 터무니없는 생각이었다는것을 30분 후 깨달았지만 ㅎㅎ; 오랜만에 바닷가에 와서 가족사진 한컷!! 우산을 들고 있는 이유는 햇볕이 정말 더울정도로 눈부시게 빛나더군요. 첫 수확! 놀래미 새끼입니다. 제가 잡은건 아니고 와이프께서 낚시를 하자마자 하나 잡아올리더군요. 생전처음 하는.. 2013. 11. 4. 이전 1 다음
