Blog Content

jQuery Images Gallery 이번 포스팅에서는 이미지 갤러리를 만들어볼까 합니다.쇼핑몰이나 이런곳에서 자주 등장하는 이미지 갤러리 인데요. 자 진행하기에 앞서 이미지를 3장 저는 준비 했는데요이미지 갤러리이다 보니 이미지는 필수 겠죠? 저는 한효주씨를 모델로 jQuery Gallery를 만들어 보았는데요.생각보다 어렵지 않습니다. See the Pen JpKmMR by uicode (@uicode) on CodePen. 네 상단의 코드를 보시면 .. 원래는 RESULT 부분에 결과값이 나오게 되어있는데요이부분이 사정없이 깨지는 모습을 볼 수 있을거에요^^ 왜냐면... 제가 이미지를 담아야 하는 공간이 없기 때문에저 부분은 직접 이미지를 만들어서 넣어보시기 바랍니다. 아래는 제가 만든 이미지 갤..

Accordion MENU-드롭다운 한것도 없이 벌써 월요일이네요~ 날씨도 많이 춥구요~ 오늘은 일어나서 무엇을 할까 고민하다.. 아코디언 메뉴를 생각했습니다. 웹사이트에서 항상 들어가는 아코디언메뉴 생각보다 어렵거나 복잡하진 않은데요~ 보통 QNA에서 많이 사용하는 Accordion menu 를 제작해 보았습니다. See the Pen bLpmmy by uicode (@uicode) on CodePen. 간략한 설명을 드리자면... 위에 코드를 보시면 우선 var에 버튼을 만들어서 담았습니다. 즉, 클릭해야 할 위치를 변수에 넣어두었습니다. 그리고 버튼을 클릭했을때 if 조건문이 들어갔습니다. 만약에 this 즉, 나 자신에게 클래스 on가 있는지 없는지를 hasClass가 체크를 합니다. 체크를 마치..

jQuery Event 구분 일요일이네요~ 시간이 참 빨리 가는것 같습니다.현재 일을 잠시 쉬고 있어서 블로그를 열심히? 해볼려고 하고 있는데..생각처럼 쉽기자 않네요 ^^; 오늘은 jQuery Event 를 정리 해볼까 합니다.이벤트는 어떤 사건을 의미합니다. 예를들자면 버튼을 클릭, 혹은 마우스이동, 마우스 스크롤 input에 포커스등 일련의 사건들을 의미하는데요.아래 표로 정리를 해보도록 할께요~ 문서로딩 이벤트 이벤트 설명 ready 문서가 로딩되었을 때 처음 문서를 읽을때에 발생 unload 해당 문서에서 빠저나갈때에 발생 처음 페이지를 로딩할 때 혹은 문서를 빠저나갈때에 발생하는 이벤트 입니다. 키보드 이벤트 이벤트 설명 keydown 해당영역에서 키보드를 눌렀을 때 keypress 해당영역에..

jQuery 시작하기 Hello World 모든 프로그래밍은 Hello World로 시작한다는 말을 어디선가?들어본듯 합니다. 그래서 저도 거창하게 프로그래밍이랄꺼 까진 없지만..기본부터 충실하게 스터디를 하며, 블로그에 포스팅해보고자 ...거창한 꿈을 갖고... 이렇게 흠흠..... 사실 오늘은 토요일이라 넘어갈까 하다가 jQuery에 대해 블로그에 포스팅을 해보기 위해 아주 간단한 예문을 하나 준비해보았습니다.간단하게 설명을 드리자면 .. See the Pen LQGKYB by uicode (@uicode) on CodePen. 위에 소스를 보시면 var는 변수를 의미합니다. var 변수를 선언하고 변수 이름을 btn 이라는 변수명을 지정했습니다.그리고 그 변수안에 button이라는 버튼 HTML을 ..

DOM 문서 객체 모델 DOM은 HTML 문서의 요소를 제어하기 위해서 처음 지원되었는데 문서의 내용, 구조, 스타일에 접근하거나 변경하는 수단입니다. 웹 브라우저 사이에 DOM 구현이 호환되지 않음에 따라서, W3C에서 DOM 표준 규걱을 작성하게 되었습니다. DOM은 문서(Document), 객체(Object), 모델(Model)의 약자로 문서는 HTML의 전체를 의미합니다.객체는 Javascript가 HTML의 구성요소들을 독립된 것으로 인식하는것을 의미하구요.Javascript 가 문서를 해석 하는 것을 모델이라고 합니다. 이처럼 프로그램이나 스크립트가 효율적으로 문서의 내용과 구조 모양등을 접근함에있어갱신, 교체, 삭제하도록 도와줍니다. DOM Tree 돔트리 출처 - W3schools 위에 이..

MAC 자주 사용되는 단축키 맥북에서 자주 사용되는 단축키! 처음 맥북 사용하시는 분들 윈도우랑 많이 혼돈될것 같은데요. 의외로 비슷합니다. 저도 처음에는 잘 몰라서 구글링 많이 했는데요~ 맥 에서 자주 사용 할 수 있는 단축키 모음!! 대부분이 command + 조합키 로 이루어져 있습니다. 저장하기 command + s 복사하기 command + c 붙여넣기 command + v 전체선택 command + a 작업 취소 OR 이전 command + z 잘라내기 command + x 실행중인 앱 숨기기 command + h 화면전환 command + tab spotlight 검색 command + space 맥을 좀더 유용하게 사용할 수 있는 단축키 모음인데요. 저는 비싼 돈들여 맥북프로 구매해서 ....

JQUERY-UI-DATEPICKER 제이쿼리 유아이 데이터 피커 정리 See the Pen JQUERY-UI-DATEPICKER by uicode (@uicode) on CodePen.

TGAD 광고 잘 모르고 지나쳤는데...구글 애드센스 광고를 블로그에 넣어놓구종종 블로그를 들여다보면 광고가 안뜰때가 있는데어느순간인가 TGAD 라는 광고가 뜰때가 있었다.처음엔 클릭몬 베너에서 연계되어서 나오는것인가 했는데.. 원래는 Google 광고가 뜨는게 정상이지만 TGAD라는 광고가 떠있어서..뭔가싶었다.. 처음 스킨배포한 사람이 스킨에다가 랜덤으로뜨도록 해둔것인가 하는 그런 생각을 했는데... 검색을 통해서 보니 와이더플레닛과 구글과 제휴된 회사이며,구글의 광고량이 적거나 포스팅한 게시물이 구글에서 추적이 어려울때다른회사의 광고가 실린다고 한다. 뭐 특별히 걱정할 것은 없지만... 그래도 왠지 찝찝하다.

일본 오사카 네번째 포스팅에 앞서 이 글은 지난2017년 네이버 블로그에 포스팅했던 글을 이전해오는 글입니다.네이버 블로그를 이제 운영하지 않아.. 폐쇄를 하기 위해 .. 글을 옮겨오는 중입니다.그래도 제겐 추억인지라 지울수 없기에 약간의 수정을 해서 말이죠..현재는 겨울이지만 주절주절 뭐 그렇습니다. ^^ 나라현 사슴들을 뒤로 하고 저녁에 다시 모여서 야경을 보기로했기에~우메다역 으로 다시 이동을 했는데요~우메다 공중정원 이라는 곳으로 이동하기 위해서 우메다역 앞에서 다시 뭉친 우리들~그렇게 우메다 공중정원으로 향해서 ..우메다 공중정원 앞에 도착.. 우메다공중정원 40층 저...저길 올라가야 한다고 ...?!!약간의 고소공포증이 있는데.. 저길 올라가야한다니.. 절대 안떨리는 척..하며 에르베이터를 ..

일본 오사카 여행 세번째 포스팅에 앞서 이 글은 지난2017년 네이버 블로그에 포스팅했던 글을 이전해오는 글입니다.네이버 블로그를 이제 운영하지 않아.. 폐쇄를 하기 위해 .. 글을 옮겨오는 중입니다.그래도 제겐 추억인지라 지울수 없기에 약간의 수정을 해서 말이죠..현재는 겨울이지만 주절주절 뭐 그렇습니다. ^^ 첫날 다들 엄청난 체력고갈로 인해 둘째날부터는 개인적으로 여행을 하기로했는데요~숙소에서 쉴사람은 쉬고~ 따로 가고싶은곳이 있는사람은 따로 여행하는 방식으로 둘쨋날의 일본 오사카 여행이 시작되었어요~ 금강산도 식후경~ 이라고 저를 포함한 세명은 나라현의 사슴을 보러 가기로 하고 숙소를 나와 일단 근처에 있는 라멘집에서 라멘을 한그릇씩 하고 나라현으로 이동했어요~ 나라현 역사 앞 라멘을 먹고 바로 ..