본문 바로가기

퍼블리싱

CSS Reset @charset "utf-8"; /* ================================================================================= * @Author : * @File Name : * @Description : Style Sheet * @Version : * @Create Date : * @Update Date : * @History : * ================================================================================= */ /* Reset Document */ body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, f.. 더보기
이벤트 버블링(Event Bubbling) 이벤트 버블링(Event Bubbling)은 이벤트를 일으킨 요소의 상위요소로 이벤트가 전파되는 것을 말한다. 그 반대는 캡처링(Capturing)이라고 한다. 다음의 소스를 보면 function eventTest(a){ alert(a); } div.child를 클릭하게 되면, 당연히 "child"텍스트의 알림창이 띄어질 것이다.하지만, 그 알림창을 닫게되면 바로 상위요소인 div.parent의 이벤트도 실행되어 "parent"라는 알림창이 띄어진다. 이렇게 이벤트가 상위요소로 전파되는 것이 바로 이벤트 버블링이다.그럼 이벤트 전파를 막으려면 어떻게해야할까? 해당함수에 event.stopPropagation();를 추가하면 되겠다. function eventTest(a){ alert(a); event.s.. 더보기
(플러그인링크) Flick Navigation (jQuery.touchSlider, dohoons) 좌우로 터치그래그 플러그인http://dohoons.com/test/flick/ 더보기
반응형웹작업시 미디어쿼리 사용하기 반응형웹 작업시 주의사항모바일작업을 우선시 한다. css 작성시 [전체적용부분 - 모바일 -태블릿 - 웹] 순으로 작업하는 것이 좋다.웹환경대비 모바일환경에서 성능이 저하되는 경우가 있으므로, 모바일 css를 기본으로 작성하고, sprite기법을 사용하거나 웹폰트를 모바일 css에서 사용하지 않는 것이 좋다. 작업전 뷰포트 설정 외부에서 분기하는 방법 css 내부에서 분기하는 방법 /* All */ /* Mobile */ /* Tablet and Notebook */ @media all and (min-width:768px) and (max-width:1024px){ } /* Desktop */@media all and (min-width:1025px){ } IE8 브라우저의 하위 호환성 문제해결미디어쿼.. 더보기
반응형웹 분기점 크게 나눈다면 모바일 - 태블릿 - 웹좀 작게 나눈다면 모바일 - 태블릿(세로) - 태블릿(가로)/ 노트북 - 웹 ipad를 기준으로 예를 들면, 태블릿의 경우 세로로 놓으면 768pixel이지만, 가로로 놓으면 1024pixel이기때문에,태블릿의 가로와 노트북사이즈의 웹을 하나로 묶어서 한다. 구글링으로 찾은 몇가지 이미지를 보면 이해가 감. 아래는 4분류로 나누었고, 여기는 세분류로 나누었다. 이건 2013년거이긴한데, 여튼 반응형웹이 무엇인지에 대해 알려주는 반응형웹 인포그래픽이다.아래에선 네분류로 나누었다. 더보기

티스토리툴바