demun(대문블로그)

일상/도서2012. 7. 7. 10:58

이 책은 내가 본 jquery 책중에서 가장 잘 설명을 한 책이라는 생각입니다. jquery 가 초보인분은 이 책을 강력 추천합니다. 한줄 한줄 상세한 설명을 하였고 실무에서도 사용할 수 있는 범용 스타일을 따로 기술해서 jquery cookbook 처럼 원하는 항목만 딱딱 골라쓸 수 있게 만들어 놨습니다. 출판사 로드북 : http://www.roadbook.co.kr/55 여기서 말한 주요 레시피는 http://www.roadbook.co.kr/52 에 있습니다. 그중에서 세로 아코디언 메뉴와 탭메뉴와 수평 드롭다운 메뉴는 제 블로그에도 잘 설명이 되어 있습니다. 차례를 보시면 아시겠지만 책의 초반부에는 jquery 에 대한 설명이며 뒷부분으로 가면서 응용할수 잇는 부분을 기술했습니다. 응용하는 부분..

퍼블리셔/jQuery2012. 7. 6. 06:00

이글은 웹 디자이너를 위한 jquery 에서 추출한 글입니다. 그중에서도 실무에서 써먹을수 있는 것중에서 드롭다운 메뉴를 골라봤습니다. 여기서 말한 드롭다운 메뉴는 이미지가 두개 필요합니다. 하나는 평상시의 이미지고 또하나는 마우스가 오버시 나타나는 이미지입니다. 이미지 경로는 제가 블로그에 업로드한후 수정했습니다. 모르고 그냥 저장을 눌러 다 쓰지도 않은 글이 아마도 발행이 됐을겁니다.ㅎㅎㅎ 다시 수정해서 쓰는 중입니다. 모든 부분은 제외하고 jquery 부분만 설명하겠습니다. 모든 소스 코드는 아래의 파일을 다운로드해서 보시기 바랍니다. 아래처럼 보여집니다. jquery 부분만 설명하겠습니다. 무지하게 간단합니다. 단순이 ul의 자식중에서 animated 되지 않은것은 열고(slideDown), 되는..

퍼블리셔/jQuery2012. 7. 5. 06:00

이글은 웹디자이너를 위한 jquery 에서 추출한 것입니다. 이전에도 아코디언 메뉴에 대한 글을 썻는데요. 자주 써먹은 것중에 하나가 탭메뉴가 아닌가 싶네요. 현재 시점에 제 블로그에도 탭메뉴가 적용이 되어 있는데요. jquery cookbook 에서 나온 코드를 수정해서 적용한것입니다. 탭메뉴에 대한 글은 현재 두개가 있습니다. 하나는 자바스크립트로 구성된 것이구요. 또하나는 jquery cookbook 에서 만든 코드입니다. 자바스크립트 탭메뉴 => http://demun.tistory.com/1696 jquery cookbook 탭메뉴 => http://demun.tistory.com/2125 오늘은 위와는 조금은 다른 웹디자이너를 위한 jquery 에서 말한 탭메뉴입니다. 여기에는 이미지가 두개가..

퍼블리셔/jQuery2012. 7. 4. 06:00

이번에는 가로로 된 아코디언 메뉴입니다. 이글은 웹디자이너를 위한 jquery 에서 추출한 것입니다. 가로로 된 메뉴는 이전에도 한번 다룬적이 있습니다. jquery cookbook 에서 다룬것인데요 거기는 수평 아코디언이라고 했습니다. 수평 아코디언 보기 => http://demun.tistory.com/2083 이글은 이전글과 맥락을 같이 함으로 이전글을 참고하시기 바랍니다. 접었다 폈다하는 아코디언 메뉴 1 => http://demun.tistory.com/2141 접었다 폈다하는 아코디언 메뉴 2 => http://demun.tistory.com/2142 이번에도 이미지가 들어가므로 이미지는 제가 블로그에 업로드한후 경로를 수정했습니다. 가로로 된 아코디언은 라벨 부분이 세로로 표현이 되야하는데 ..

퍼블리셔/jQuery2012. 7. 3. 06:00

이번에는 저번에 이어 좀더 개선된 아코디언 메뉴입니다. 마찬가지로 소스는 웹디자이너를 위한 jQuery 에서 추출한 것입니다. 실무에서 이용할만한 것을 추출해서 소개하고 있습니다. 이번에는 이미지가 들어가서 마우스를 오버했을때를 강조하여 좀더 보기조은 아코디언을 만들었습니다. 한가지 더 이미지가 3개가 포함이 되므로 제가 블로그에 업로드한 후 그걸 배경으로 사용했습니다. 이전글과 연동되므로 이전글을 참고해주세요. 접었다 폈다하는 아코디언 메뉴 1 => http://demun.tistory.com/2141 마우스가 손모양으로 바뀐것과 현재 선택되어진곳은 색깔이 다른것을 알 수 있습니다. 참고할 스타일 설정부분은 아래와 같습니다. dt{ line-height:35px; font-size:large; text..

퍼블리셔/jQuery2012. 7. 2. 06:00

아코디언 메뉴중에서 가장 심플한 아코디언 메뉴 1번입니다. 오늘 이야기하는 아코디언 메뉴는 웹디자이너를 위한 jquery 입니다. 이 메뉴는 이미지가 하나도 없습니다. 실무에서 바로 사용이 가능한 아주 간단한 메뉴입니다. 자바스크립트 아코디언 메뉴 => http://demun.tistory.com/2139 jquery cookbook 의 아코디언 메뉴 => http://demun.tistory.com/2083 먼저 전체 소스를 공개합니다. 여기서는 jquery 에 대한 이야기만 해보겠습니다. 주석을 상세하게 달아놧으니 이해가 가실겁니다. $(function(){ // 모든 패널이 펼쳐져있는 상태이기 때문에 dd의 첫번재를 제외한곳은 안보이게 설정합니다. $("dd:not(:first)").css("dis..

일상/도서2012. 7. 1. 06:00

제가 책을 간간이 보는데 읽고 지나가면 걍 끝나버리는 경우가 전부여서......이렇게 몇자 독후감이라도 적을려고 카테고리를 생성했습니다. 자바스크립트 책을 대략 생각해도 여서 일곱권은 본것 같은데...도무지 어렵습니다. 오늘은 자바스크립트 쿡북이라는 책입니다. 외국서적이지만 우리나라에서는 한빛미디어에서 발간한 책입니다. 책에 대한 정보는 위의 링크를 따라가면 다 아실거고....제가 할말은 이 책에 대해서 입니다. 아마도 저처럼 자바스크립트를 모르고 배우고자해서 분명 이책을 본분이 있을거라 생각합니다. 자바스크립트 쿡북이라는 것은 레시피처럼 요리법을 몰라도 척하고 꺼내서 바로 써먹는 요리책에 비유해서 자바스크립트를 몰라도 제목을 보고 척하고 사용할수 있다는 뜻에서 지은 제목입니다. jQuery Cookbo..

퍼블리셔/javascript2012. 6. 30. 06:00

아코디언은 검색하면 쏟아질정도로 많이 나옵니다. 아래 소스는 제가 JavaScript Cookbook 를 보고 나중에라도 한번 이용해먹을수 있겠다싶어 흔적을 남겨 놓습니다. 코드를 설명을 대략 하면 이렇습니다. 책에는 대략적으론 나와 있어서 초보자들은 정말 알기 어렵습니다. 첫번째 줄은 div 영역을 elements 라는 변수에 담습니다. for문을 사용해서 elements 의 길이(length)를 체크해서 0보다 크면 실행하게 됩니다. 뭘 실행하냐?? div 즉 클릭한요소의 클래스 네임이 elements 와 같으면 스타일을 display="none" 로 만들어서 안보이게하고 그렇지않고 클래스 네임이 label이면 switchDisplsy 를 실행합니다. switchDisplay() 는 뭐냐?? 상황에 ..

티스토리/티스토리초대장2012. 6. 29. 22:18

티스토리 초대장을 배포합니다. 하시려는 블로그 성격과 이메일주소를 댓글로 신청하세요. i n v i t a t i o n 티스토리 초대장 + 남은 초대장 수 : 00 안녕하세요! 티스토리에 보금자리를 마련하시려는 여러분께 초대장을 배포해 드리려고 합니다. 나만의, 내 생각을, 내 기억을 담는 소중한 블로그를 만들고 싶다면 티스토리로 시작해보세요! 티스토리 블로그는 초대에 의해서만 가입이 가능합니다. 원하시는 분은 댓글에 E-mail 주소를 남겨주시면 초대장을 보내드립니다. 남겨주실 때에는 꼭 비밀댓글로 남겨주세요! 초대장을 보내드리고 바로 개설하시지 않으신 분들은 초대장을 회수할 수도 있으니 바로 개설해주세요! Yes 이런 분들께 드립니다! 1. 다른 블로그를 사용해보셨던 분 2. 이메일 주소가 정상적인..

퍼블리셔/css2012. 6. 27. 06:00

css transition 이란? 마우스를 클릭하거나 포커싱, 활성화 상태에 변화를 주는것으로, css 값의 변화가 부드러운 애니메이션입니다. 일단 간단하게 속성을 살펴보겠습니다. transition-property : 트랜지션할 속성. transition-duration : 트랜지션 지속 시간. transitin-timing-function: 지정한 시간동안이 트랜지션 속도 (타이밍 함수값) 타이밍 함수값에는 기본값인 ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier 등이 있습니다. 먼저 예를통해서 어떻게 변화되는지 보겠습니다. 마크업. CSS3 - Transition 간단하게 위와 같이 있다고 하고 css 로 설정을 해보겠습니다. 기본적으로 a ..