본문 바로가기

전체 글344

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.
jQuery Mobile 버튼 안녕하세요!! 오랜만에 jQuery Mobile 포스팅을 하는것처럼 느껴집니다. 요즘 정신도 없고 게으르고 하다보니 그런듯하네요. 아무튼 이번에 포스팅할 내용은 jQuery Mobile 에서 사용되는 버튼의 종류 및 사용방법에 대해서 설명드립니다. jQuery Mobile 은 3가지의 방법으로 버튼을 만들 수 있습니다. 첫번째 방법은 입니다. Button 두번째 방법은 입니다. 세번째 방법은 입니다. Button // 여기서 특이점은 붉은 글씨로 표현된 부분입니다. 그냥 단순히 href 를 사용하면 텍스트에 링크만 걸게 되기 때문에 data-role="button" 이라고 정의를 하여 버튼을 생성합니다. 기본적으로 버튼은 화면의 전체 너비를 차지합니다. 하지만 두 개 이상의 버튼을 만들고자 할 경우 da.. 2013. 10. 31.
청주국제공항 에어쇼 관람!! 저번주 금, 토, 일(2013.10.25~10.27) 이렇게 3일간 청주국제공항에서 에어쇼가 열렸습니다. 제가 사는 곳은 청주라서 가족들과 나들이겸해서 에어쇼를 구경하고 왔습니다. 날씨도 따뜻하고 하늘도 청명하고 비행기쇼를 보기에 딱좋았다는... 사실 집에서 가까운 거리라서 10분이면 공항에 도착하는데 차가 정말 많더군요. 저희는 토요일, 일요일 이렇게 두번을 갔습니다. 토요일은 정신없이 보다가 제대로 못봤다는 생각에 일요일 아침일찍 또 한번 관람했습니다. 3일간 수 십만명이 다녀간듯.. 이런 저런 구경을 할때는 간식거리가 빠지면 섭섭하죠 ㅎㅎ; 그래서 아이들에게 위 과자에 아이스크림을 넣은 딱히 무엇이라 이름을 정하기 어려운;; 하지만 정말 맛있더라구요. 20분간을 줄서서 기다렸다가 사왔지만 정말 만족.. 2013. 10. 29.
jQuery Mobile 페이지2 안녕하세요!! 이전 포스팅에서 jQuery Mobile의 페이지에 대해서 간략히 설명을 드렸었습니다. 내용이 너무 길어질듯해서 이렇게 단락을 잘라서 설명을 드리는점 양해 바랍니다. 아래 설명하는 내용은 페이지 이동입니다. 일단 소스를 보면서 설명드립니다. 나의 모바일 홈페이지 첫 번째 페이지입니다!! 두 번째 페이지 Copyright by makand123. All Rights Reserved. 나의 모바일 홈페이지 두 번째 페이지입니다!! 첫 번째 페이지 Copyright by makand123. All Rights Reserved. // 위 구문을 보면 ... 의 내용안에 과 이렇게 두개의 내용이 들어 있는것을 확인할 수 있습니다. 그리고 안의 내용은 header, content, footer 로 이.. 2013. 10. 28.
jQuery Mobile 페이지 안녕하세요!! 이번에 포스팅할 내용은 jQuery Mobile의 간단한 페이지를 만들어 보겠습니다. 원래 모바일이란 기기가 많이 업그레이드 되고는 있지만 우리가 흔히 사용하는 개인용 PC 처럼 CPU, 메모리 등이 많이 높지는 않습니다. 그래서 가끔 모바일 홈페이지들중에 버벅거리는 현상이 나타나는 경우가 종종 있죠. 아마도 계속 모바일 기기도 사양이 높아지고 있는 추세고 광대역 LTE도 나오고 있어서 점점 그런 경우는 줄어들거라 생각하지만 jQuery Mobile은 사실 모바일에 최적화 되어 있기 때문에 적은 소스 내용으로 최적의 모바일 환경을 구축할 수 있다고 보면 되겠습니다. 그럼 예제로 어떻게 구성되는지 간단히 알아보겠습니다. 나의 모바일 홈페이지 자 이제 시작해봅시다!! Copyright by m.. 2013. 10. 25.
jQuery Mobile 인스톨(Install) 안녕하세요!! 이번에 포스팅할 내용은 jQuery Mobile 의 Install(인스톨) 입니다. 인스토이라고 해서 사실 거창한건 크게 없으니 안심하셔도 됩니다. 이전 포스팅에서도 잠깐 설명을 드렸었죠. jQuery Mobile 의 인스톨은 상단에 라이브러리 3줄의 내용만 있으면 끝입니다. 그리고 라이브러리를 직접 다운받아서 서버에 저장하여 사용해도 무관합니다. 인스톨을 하기 위해서 컴퓨터(서버)에 어떠한 설치도 요구하는건 없습니다. 라이브러리는 총 3개이며 하나의 CSS 파일과 두개의 자바스크립트(JS) 파일입니다. // 위 처럼 서버에 다운로드된 주소의 링크를 걸면 되겠습니다. 이제 인스톨을 했으니 다음 포스팅부터 jQuery Mobile 의 페이지를 만들어가며, 여러가지 기능에 대해서 알아보겠습니다.. 2013. 10. 21.
jQuery Mobile 소개 안녕하세요!! 오늘부터 jQuery Mobile에 대해서 포스팅을 하려고 합니다. 요즘은 누구나 스마트폰 하나씩은 가지고 다닙니다. 그리고 많은 사람들이 스마트폰을 이용하여 인터넷검색, 인터넷뱅킹, 게임, 교육 등을 하고 살고 있습니다. 지금부터 설명드릴 jQuery Mobile은 모바일 환경에 최적화된 웹 응용프로그램을 만들기 위한 프레임워크라고 생각하면 됩니다. 그리고 jQuery Mobile 을 사용하기 위해선 기본적으로 HTML, CSS, jQuery에 대한 어느정도 지식이 있어야 합니다. 하지만 지식이 없다고 너무 걱정하지 마시기 바랍니다. ^^ jQuery Mobile이 끝나는대로 html, css등에 대해서 포스팅하겠습니다. 일단 편하게 읽어보고 화면이 어떻게 구성되는지 확인하심 되겠습니다... 2013. 10. 18.
SQL 구문, 함수 포스팅 종료!! jQuery Mobile 시작!! 안녕하세요!! 그동안 제가 올린 SQL 포스팅을 많이들 읽어주셔서 감사드립니다 (__) SQL 구문은 이전 포스팅 ROUND() 를 끝으로 종료를 할까 합니다. 사실 더욱더 많은 내용이 있겠지만 기본적인 구문 및 함수 설명은 충분히 되었다고 생각합니다. 그래서 이만 SQL은 마치고 다음 포스팅부터는 jQuery Mobile 에 대해서 포스팅을 해볼까 합니다. 모바일이 대세인 만큼 jQuery Mobile 을 알고 계시면 모바일 웹 페이지 만들때 정말 많은 도움이 될듯합니다. 그리고 웹표준을 준수하기 때문에 어떤 브라우저에서나 깨지지 않고 제대로 나온다는 점도 중요하겠습니다. SQL 포스팅을 마치는데 있어서 설명이 조금 부족했던점 양해바라며, 혹시라도 SQL에 대해서 궁금한점이 있으면 댓글 또는 쪽지 보내.. 2013. 10. 17.
[서평] 자신있게 결정하라 정말 오랜만에 서평에 대해서 포스팅하는것 같습니다. 사실 이 책은 도서관에서 빌린 책은 아니지만 현재 제가 꼭 읽어봐야 할 책이라 생각합니다. 지금 여러가지 문제로 자신있게 결정해야 할 사항들이 몇 가지가 됩니다. 그런데 우연히도 [자신있게 결정하라] 라는 책이 제 손에 들어오게 되었습니다. 이 책의 저자는 유명한 스틱, 스위치를 집필한 칩 히스, 댄 히스 입니다. 예전 스틱이라는 책을 읽고 지인들에게 많은 추천을 했고 제 블로그에도 글을 남겼었습니다. 그래서인지 몰라도 400페이지가 넘는 책이지만 몇일 안되서 금방 읽은듯 합니다. 삶을 살아가면서 누구나 선택의 순간이 있습니다. 저도 마찬가지 입니다. 그런데 대부분 감정에 치우쳐서, 편향된 생각으로, 지금까지의 경험을 가지고 등등 여러가지의 생각들을 가.. 2013. 10. 14.
SQL ROUND() 함수 안녕하세요!! 이번 포스팅할 내용은 SQL ROUND() 함수입니다. ROUND() 함수는 소수점의 개수를 지정하여 반올림을 해주는 역할을 합니다. 기본구문 SELECT ROUND(column_name,소수점개수) FROM table_name; 예를들어서 34.983 54.242 76.23 83 61.8587 등의 숫자가 적혀있는 price 라는 칼럼이 있다고 가정할 경우 select round(price,0) from table; // 위와 같은 명령어를 실행하면 아래와 같은 결과가 나옵니다. // round(price,0) 이므로 소수점 첫째 자리부터 6이상 반올림을 하여 값을 보여주게 됩니다. 35(반올림) 54 76 83 62(반올림) 그리고 아래와 같은 구문을 실행하면 select round(p.. 2013. 10. 14.

티스토리툴바