타쿠꺼

이미지 네비게이터 만들기 본문

Web Study

이미지 네비게이터 만들기

kimtaku 2016. 6. 11. 15:43

이미지 네비게이터 만들기



1. 스크롤바를 사용할 경우, HTML구조와 CSS에 신경을 써야 한다.

2. 안보이는 곳에서 보이는 곳으로 애니메이션 되면서 동시에 fade를 주니까 깜빡이는 현상이 있더라.. 이유는 모르겠음.

3. 원래 중복되는 코드는 함수를 따로 만들어서 사용하는게 매우 효율적임. 여기에서는 좌,우 이동이 중복되기 때문에 함수로 만들면 됨.

4. load 이벤트를 사용할 때 주의할 점은, load의 콜백메서드는 load가 완료된 후 불린다는 것. 그래서 load로 체이닝 하는 경우엔 load 뒤에 붙은 jquery메서드들이 당연하게도 load콜백보다 먼저 실행된다는 점을 잊으면 안됨.

5. fadein,out에도 콜백메서드 붙일 수 있음. jquery의 이펙트들은 전부 콜백메서드 붙일 수 있음.

6. 이미지 리사이징 하는법 잘 새겨 봐야함.

7. bottom: 0 주고 height: 100%로 애니메이션 하면 아래에서 위로 쭉 올라옴.

8. width, height의 %속성은 부모컨테이너의 크기에 대한 비율로 생성됨.

9. 부모컨테이너를 포함하는 wrapper 컨테이너의 중요성이 크고 css 다룰 때 편리하게 해줌.

10. 리사이징 함수에서 이미지 객체를 만드는 이유는, 이미지 객체에 src값을 주면 해당 객체의 width, height 값이 자동으로 셋팅되기 때문임. jquery width(), height()는 랜더링되었을 때에만 그 값을 얻어오기 때문에 데이터로 존재하는 객체의 width와 height는 얻어올 수 없음. 그래서 브라우저API를 이용하는 것.

'Web Study' 카테고리의 다른 글

가로 스크롤  (0) 2016.06.11
흩날리는 박스 만들기  (0) 2016.06.11
마우스 위치에 따른 자동스크롤  (0) 2016.06.11
슬라이드 메뉴 만들기  (0) 2016.06.11
z축 스크롤  (0) 2016.06.11
Comments