본문 바로가기

분류 전체보기164

[2016.11.11~14] 나홀로 3박 4일 도쿄 여행기 - 1일차 #2. 나리타 공항 뭐... 비가 오는 날의 여행도 나름대로의 맛이 있다고 했던가. 그런데 그렇다고 하기에는 비가 너무 많이 오기는 했지만 -_- 이왕 비가 올거면 항상 생각하지만 온천 가는 날에 왔으면 좋겠지만... 뭐 어떡하겠나. 여기에서 스이카 패스를 구매했다. 스이카 패스는 우리나라의 티머니 같은 패스카드로 충전식이다. 더 자세한 정보를 알고 싶으신 분은 http://naver.com 으로... 편의점에서 결제할 수도 있어서 아주 편리하다. 요거는 일본에 갈 때마다 항상 마시는 홍차인데 우리나라 편의점에서 마시는 홍차랑 맛이 매우 비슷하다. 사실 이름도 비슷하고 같은데서 만드는거 아냐 이거? 매우 맛있어서 항상 마시는 게 아니고 이상하게 일본 자판기 앞에만 서면 뭔가 딱히 마시고 싶은 게 없다.;; 열차를 타고 숙소.. 2018. 6. 17.
[2016.11.11~14] 나홀로 3박 4일 도쿄 여행기 - 1일차 #1. 인천공항 드디어 포스팅 할 마음이 들어서 작성해보는 나홀로 도쿄 여행기 그런데 사실 잘 기억이 나지 않아서 제대로 포스팅 할 수 있을지 모르겠다. 아무도 안 궁금해 하겠지만! 사진 상에 있는 워터마크의 주소와 현 블로그의 주소가 다른 이유는 이 사진들은 사실 예전 블로그에 올리려고 미리 작업해뒀던 사진이라... 다시 작업하기가 귀찮아서 그대로 사용했다. 신한카드의 VIP 카드 중 하나인 ACE 카드에 제공되는 바우쳐 중 모두투어 여행 50만원 지원 바우쳐를 사용해서 가는 것이기 때문에 아침 일찍 공항에 도착해 모두투어 라운지를 찾았다. 항상 느끼는 것이지만 카드 서비스를 이용하면 기본 단가가 좀 높다. 아침부터 공항에는 사람이 많았다. 그리고 그 당시 갤럭시 노트 7 의 폭발 사건이 한창 이슈였던 때라서 공항 내.. 2018. 6. 17.
jQuery (제이쿼리) - jQuery map() 지금까지 공부한 제이쿼리 함수 중 이번에 작성하는 map() 함수는 이해하기가 유난히 난해 했는데 뭐 어찌저찌 나름대로 이해를 했으니 여기다가 후다닥 정리해보도록 하겠다. 다른 블로그들을 찾아보니 무슨 배열의 길이를 유지를 하고 어쩌고 저쩌고 값을 조작이 어쩌고 저쩌고 값을 배열로 가져오는데 어쩌고 저쩌고 써 있는 것들이 뭔가 전혀 와닿지 않는 함수는 이번이 처음이다. 거기다 예제도 별로 없... 그래서 나름대로 이해를 한 것이 map() 함수는 선택자의 새로운 배열을 만들면서 값을 조작 또는 지정 할 수 있다. 정도 되겠다. 뭐... 항상 하는 말이지만 아니면 말고!! split(), join() 함수를 공부하면서 사용했던 예제를 가지고 다시 한 번 공부해보자. $(document).ready(func.. 2018. 6. 17.
jQuery (제이쿼리) - jQuery filter(), not() 제이쿼리의 filter 함수는 조건에 맞는 값을 배열로 리턴해주는 기능을 한다. 반대로 not 함수는 이름에서부터 보이듯이 조건에 맞지 않는 값을 배열로 리턴해주는 기능을 한다. 조건으로는 셀렉터를 넣는 방법과 펑션을 이용하는 방법이 있는데 우선 셀렉터를 이용한 방법을 알아보자. $(document).ready(function() { var trueArr = $("p").filter(".this"); // alert(trueArr.length); var falseArr = $("p").not(".this"); // alert(falseArr.length); alert("this 클래스 갯수 : " + trueArr.length + ", this 클래스 아닌 갯수 : " + falseArr.length);.. 2018. 6. 17.
jQuery (제이쿼리) - jQuery 클래스 관련 함수 이번 글에서는 클래스에 관련된 함수들을 모아보도록 하자. 1. addClass() : 해당 제이쿼리 객체에 클래스를 추가한다. .this { font-size : 20px; } $(document).ready(function() { $("#this").addClass("this"); }); 디스 이즈 스파르타!! 2. removeClass() : 해당 제이쿼리 객체의 클래스를 삭제한다. .this { font-size : 20px; } $(document).ready(function() { $("#this").removeClass("this"); }); 디스 이즈 스파르타!! 3. toggleClass() : 해당 제이쿼리 객체에 클래스가 있다면 삭제하고 없다면 추가한다. .this { font-size.. 2018. 6. 17.
jQuery (제이쿼리) - jQuery 특정 단어를 기준으로 나누고 붙이는 split, join 제이쿼리에는 특정 단어를 기준으로 배열을 만들 수 있는 split 이라는 함수와배열 사이에 특정 단어를 넣어 연결시킬 수 있는 join 이라는 함수가 존재한다. split 이라는 함수는 보통 파라미터를 받거나 특정한 패턴을 기준으로 값을 받을 때 많이 사용하고join 은 뭐 상황에 따라 다르겠지만 split 과 반대로 특정한 패턴을 만들 때 사용한다고 볼 수 있겠다. 우선 split 으로 간단한 예제를 만들어보자. $(document).ready(function() { var testResult = "세종대왕^90|이순신^78|장영실^100|김정호^98|신사임당^95"; var resultArr = testResult.split("|"); var html = ""; $(resultArr).each(fun.. 2018. 6. 17.
jQuery (제이쿼리) - jQuery 비교연산자 셀렉터 eq, lt, gt, not 이전 포스팅 중 제이쿼리 객체 배열에서 해당 인덱스에 해당하는 객체를 리턴 받는 방법으로제이쿼리에서 제공하는 함수인 eq() 와 get() 에 대해서 작성한 적이 있었다. 그리고 이번 포스팅은 비교연산자를 통해서 객체를 리턴 받는 방법을 소개 할텐데사실 제목만 보고도 사용방법이 딱 감이 오는 분들도 있을 것이다. 그만큼이나 쉽다. 1 li 2 li 3 li 4 li 5 li 6 li 7 li $(document).ready(function() { $("li:lt(3)").css("background-color", "red"); $("li:eq(3)").css("background-color", "yellow"); $("li:gt(3)").css("background-color", "green"); });.. 2018. 6. 10.
jQuery (제이쿼리) - jQuery 동일 노드 엘리먼트 선택하기 (셀렉터 +, ~) 이번에는 제이쿼리에서 동일 노드에 위치한 엘리먼트를 선택하는 방법에 대해서 알아보자. 첫번째 노드입니다. 중간계 노드입니다. 두번째 노드입니다. 세번째 노드입니다. 네번째 노드입니다. 다섯번째 노드데스요. 여섯번째다. 칠번째다. $(document).ready(function() { alert($("div + p").length); alert($("div ~ p").length); }); 위의 소스를 실행시켜보면 첫 번째 alert 은 2 의 값이 리턴되고 두 번째 alert 는 3 의 값이 표시된다. 위의 소스를 보면 3개의 세 개의 1레벨 div 노드가 있고 그 안에 태그들이 있는 형식인데... + 의 경우는 앞서 공부했던 > 와 마찬가지로 해당하는 태그와 인접해있어야만 선택이 된다. 단, 첫번째 위.. 2018. 6. 10.
jQuery (제이쿼리) - jQuery 자식(하위 엘리먼트) 노드 선택하기 (셀렉터 >) 제이쿼리에서 자식 노드(하위요소, 하위 엘리먼트)를 선택할 때는 아래의 두 가지 방법이 많이 사용 된다. 첫번째 노드입니다. 두번째 노드입니다. $(document).ready(function() { var count1 = $("div font").length; var count2 = $("div > font").length; alert("첫번째 셀렉터의 값 : " + count1 + "\n" + "두번째 셀렉터의 값 : " + count2); }); 이 외에도 많은 방법이 있을 수도 있지만 우선은 위에 작성한 방법만 알아두고 넘어가자. 위의 소스를 실행하게 되면 count1 은 2 의 결과값을 리턴하고 count2 는 1 의 결과값을 리턴하게 되는데 그 이유는 셀렉터를 사용해 노드를 선택할 때 > 를 .. 2018. 6. 10.
jQuery (제이쿼리) - jQuery extend() 제이쿼리에는 이미 존재하는 함수를 재정의해서 사용하거나 함수를 새로 추가할 수 있는 extend() 함수가 존재한다. 사실 두 가지 사용 방법이 다른 건 아니고 똑같은 사용 방법이지만 어떻게 사용하냐에 따라서 함수를 재정의 하게 되거나 함수를 새로 추가 하게 되는 결과가 나온다. 마찬가지로 간단한 예제로 살펴보자. $(function() { alert($("p").eq(1).html()); }); function changeMethod() { $.fn.extend({ eq : function(num) { return "선택된 인덱스는 " + num + "입니다."; } }); alert($("p").eq(1)); // eq() 의 기능을 재정의했기 때문에 밑의 함수는 사용할 수 없다. //alert($(.. 2018. 6. 3.
jQuery (제이쿼리) - jQuery index(), contains 이번에는 제이쿼리 객체의 index 를 얻어올 수 있는 index() 함수에 대해 공부해보자.사용법은 지극히 간단하므로 바로 밑의 예제를 통해 사용법을 보도록 하자. 라면 피자 치킨 라면 감자라면 피자라면 치킨라면 피자 피자헛 도미노피자 미스터피자 치킨 BHC뿌링클 BHC맛초킹 처갓집 교촌치킨 시장치킨 $(function() { var index = $("li").index($("li:contains('치킨')")); alert(index); }); 위와 같은 코드가 있을 때 index 는 몇 번이 나올까? 아마 모든 프로그래밍 언어에서 동일하거나 비슷할 거라고 생각이 되는데 배열이 아닌 이상 거의 정답은 2 가 나온다. 그렇다면 subList 의 치킨을 선택하고 싶다면 어떻게 해야 할까?아마 보통은 다.. 2018. 6. 3.
jQuery (제이쿼리) - jQuery get(), eq() 의 차이점 앞서 제이쿼리의 get() 과 toArray() 의 차이점을 알아봤는데 이번에는 get() 과 eq() 함수의 차이점을 알아보도록 하자. get() 함수는 index 를 주어 get(index) 의 형태로 객체를 얻어올 수 있다고 했는데eq() 함수 또한 index 를 주어 get(index) 의 형태로 객체를 얻어올 수 있다. 그렇다면 이 둘의 차이점은 뭘까? 이것 역시 앞서 지긋지긋하게 설명했던 제이쿼리 객체와 HTML 객체를 얻어오는 것의 차이점이 있다.get() 이 HTML 객체를 얻어오는 함수라면 eq() 는 해당 배열의 index 에 해당하는 객체를 제이쿼리 객체로 얻어온다. 간단한 예제를 보고 끝내도록 하자. 룩셈부르크 대한민국 일본 러시아 중국 미국 북한 가나 아프리카 $(function(.. 2018. 6. 3.