demun(대문블로그)

퍼블리셔2012. 6. 11. 14:12

많은 과정을 무료로 들을수 있는 소식이 있어 알려드립니다. 올레 에코노베이션 스마트스쿨에서 아래와 같은 강좌를 하니 시간이 되시는분들은 꼭 참석을 하여 자기 개발을 하시기 바랍니다. 교육 신청하러 가기

퍼블리셔/기술2012. 6. 11. 06:00

크로스브라우징을 하기 위해서는 각 브라우져별로 확인을 합니다. 버젼도 다르고, 브라우져도 여러종류이다보니 일일이 확인하기도 어렵지요. 예전에는 각 브라우져별로 설치를 한다거나 포터블을 이용해서 각 브라우져별로, 버젼별로 페이지를 확인하곤 했습니다. 물론 여러브라우져를 하나로 묶어서 보여주는 테스트 툴도 있습니다. 그러나 대부분이 유료인 경우가 많지요.... 무료는 역시나 한정된 기능만을 제공하는 경우도 많구요.. 멀티 브라우져로 검색을 해봐도 여러 사이트가 나옵니다. 검색결과보기. adobe 에서는 browserlab 이라는 도구를 제공합니다. 조건은 단지 adobe 의 아이디만 있으면 됩니다. 드림위버 5.5버젼이상에서는 browserLab 을 이용할 수 있습니다. 미리보기에 각 브라우져별로 지정도 가..

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

이전에 자바스크립트로 블로그에서 사용하는 글을 적은 적이 있습니다. 이번에는 jquery 를 사용하는 방법입니다. 이번글을 쓰면서 이전글을 다시 돌아보는 계기가 됐군요. 예전글 블로그에서 탭메뉴 이용하기 => http://demun.tistory.com/1696 오늘은 jquery 를 이용하는 방법입니다. 수많은 방법이 있지만 아주 간단하고 딱 탭에만 맞추어서 사용하는 코드를 골랐습니다. 예제코드는 jquery Cookbook 에서 골라왔습니다. 예제화면 보기 위의 코드는 border 을 사용하고 탭에 이미지를 하나 사용합니다. 저는 여기서 좀더 수정하여 이미지를 사용하지 않고 border 도 사용하지 않았습니다. 그래서 어떤 배경에도 어울리도록 했고, 이미지가 없기 때문에 경로에 대한 오류도 없습니다...

퍼블리셔/에디터2012. 6. 7. 06:00

저는 Dreamweaver CS5.5 를 사용하고 있었습니다. Dreamweaver CS6 이 나와서 업데이를 진행해봤습니다. 업데이트를 할줄 모르는 분이 있으실거 같아서 제가 업데이트 하면서 관련 스샷을 첨부해서 설명해드리겠습니다. 한국어를 사용하는 사람이니 한글로 업데이트 해보겠습니다. 기존의 드림위버를 실행합니다. 아래처럼 5.5 가 보입니다. Dreamweaver 상단에 도움말 업데이트를 클릭합니다. 그럼 http://www.adobe.com/applicationmanagerpatch/index.html 주소로 갑니다. Dreamweaver 를 실행하지 않아도 위 주소로 가면 업데이트를 할 수 있습니다. 혹 주소를 모르는분은 언제든지 Dreamweaver 를 실행해서 도움말 - 업데이트를 통해 업..

퍼블리셔/기술2012. 6. 6. 06:00

html5에서 많은 촛점을 받고 있는것이 미디어쿼리(Media Queries) 입니다. 간단이 말해 기기의 해상도에 따라 보여지는것을 제어할 수 있는 기능입니다. 현재는 스마트폰, 테블릿, 컴퓨터등 보여지는 기기가 다양하고 보여지는 해상도 또한 다양합니다. 이러한 환경에 맞쳐 대응하도록 만든것이 미디어쿼리입니다. 드림위버를 사용하면 간단이 미디어쿼리를 작성할 수 있고, 미리보기 또한 할 수 있습니다. 어떤 화면인지 한번 보겠습니다. 이전에는 드림위버를 업데이트해서 html5로 마크업된 간단한 문서를 만들어 보았습니다. 그럼 이제 드림위버 상단에 멀티스크린을 클릭합니다. 참고로 현재 문서가 저장되어 있어야 합니다. 저장하지 않은 문서라면 적당이 이름을 부여해서 저장한후 멀티스크린을 클릭하세요. 아래 이미지..

퍼블리셔/에디터2012. 6. 5. 06:00

드림위버 cs5 이전버젼이면 업데이트를 통해서 html5로 마크업된 템플릿을 사용할 수 있습니다. 이전 버젼의 드림위버라면 업데이트 센터를 통해서 업데이트 하는 방법을 알아보겠습니다. 업데이트 하러 가기 => http://www.adobe.com/support/dreamweaver/downloads_updaters.html 아래 이미지를 보시면 아래 버젼에 해당하는 드림위버는 업데이트를 할 수 있습니다. 바로 아래에 보시면 Dreamweaver CS5.5 11.5.1 Updater 를 통해 업데이트를 할 수 있습니다. 업데이트 후 드림위버에는 어떤 변동 사항이 있는지 한번 보겠습니다. 보시다시피 html5로 마크업된 템플릿을 사용할 수 있으며 간단이 클릭 한두번으로 html5로 마크업된 페이지를 만들수 ..

퍼블리셔/기술2012. 6. 1. 06:00

제가 서식형태로 리본에 대한 글을 몇번 썻습니다. 이전에 알고 쓴줄 알았는데.... 알고 보니 사용하지 않은것 같아 써봅니다. 이번에는 코드만으로 리본형태를 만드는 과정을 알아보겠습니다. 이 형태는 제가 이전에 만든 스킨에도 많이 적용되었던 디자인인데요. 어떤 형태인지 대략 이미지를 참고하시기 바랍니다. 여기서는 둥근 형태가 아닌 삼각형 형태를 만들어 보겠습니다. 원재는 3D 리본 만들기 입니다. 먼저 제작된 리본 형태는 아래와 같습니다. html 코드는 아래와 같습니다. 3D CSS Ribbon 3D 리본 만들기 바로가기 다음 css 코드는 아래와 같습니다. .bubble { clear: both; margin: 0px auto; width: 350px; background: #fff; -moz-bor..

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

제가 이때까지 사용하는 방법중에서 가장 편하고 맘에 드는 방법입니다. 이전에는 떠블클릭하면 상하단으로 이동하는 방법과 , 스크롤을 밑으로 하면 위로 올라가는 버튼이 생성된다든가 하는 여러가지 방법이 있습니다. 먼저 아래의 링크를 참고하시기 바랍니다. 관련글 스크롤하면 상단으로 올라갈수 있는 버튼 => http://demun.tistory.com/1975 블로그 상하단 이동하기(anchor,앵커) => http://demun.tistory.com/1706 상.하단 부드럽게 이동하기 => http://demun.tistory.com/1695 위로 이동버튼 간단하게 삽입하기 => http://demun.tistory.com/1664 이 방법은 jQuery 를 사용하는 방법으로 코드가 비교적 간단하고 또 다른 ..

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

워드프레스 스킨에 주로 포함된 3D 슬라이더(이하 슬라이더라고 부릅니다) 입니다. 워드프레스 스킨에서는 플러그인 형태로 사용할 수도 있습니다. 슬라이더는 여러종류가 있지만 제가 이것 저것 해본결과 가장 잘 보이고 깔끔한것이 xml 을 사용하는 Piecemaker 입니다. 제가 GoodFriends 스킨에 포함해서 사용했던 것이지요. Piecemaker 의 데모 화면을 보시죠. 소개글과 사용방법은 여기에서 볼수 있습니다. 배포하는 슬라이더 파일은 아래에 있습니다. 배포하는 원본 파일입니다. 티스토리에서 사용하는 제 블로그에서 사용하는것을 예로 들어 알려드리겠습니다. 먼저 아래의 파일을 다운로드 하세요. 압축을 해제한후 스킨편집에서 파일업로드를 통해 모두 업로드하세요. 1. piecemaker.xml 수정...

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

jquery 쿡북에 파일트리를 이용해서 접고 펴는 기능이 있습니다. 이 부분을 저도 배울겸 좀 자세하게 살펴보기로 합니다. 마찬가지로 저작권과 예제는 http://jquery-cookbook.com 에 있습니다. 현재 예제는 여기에 있으니 한번 살펴보세요. 다른 부분은 생략하고 jquery 부분만 살펴보겠습니다. 앞 예제에서 핵심은 tree.js 입니다. 이 부분이 제이쿼리로 접고 펴는 기능을 하는 코드가 들어 있습니다. 제가 아주 자세하게 주석을 달아놨으니 그냥 쭉~~ 읽으면 될겁니다. 참고로 들여쓰기를 하니까 블로그에서는 보기가 더 않좋습니다. 그래서 들여쓰기를 제거했습니다. 들여쓰기가 된 tree.js 를 첨부합니다. // 초기화. function init_tree() { // 요소가 존재하는가? ..