타쿠꺼

CSS - position: absolute; 사용에 관하여 나는 지금껏, 왠진 모르지만 position: absolute는 상당히 지양해야 하는 속성이라고 생각해왔다.하지만 반은 맞고 반은 틀리다.position: absolute는 상당히 좋은 옵션이긴 하다. 내가 원하는대로 바로바로 포지셔닝할 수 있기 때문이다.하지만, 요즘은 다양한 크기의 화면으로 웹을 들어온다. position: absolute는 이러한 환경에 취약할 수 있다.이럴 땐 relative와 absolute를 적절히 사용해야 한다.레이아웃의 큼지막한 덩어리인 부모컨테이너는 relative를 사용하고, 그 부모 안의 자식요소들은 absolute를 사용하는 것이다.이러면 큰 레이아웃 덩어리는 흐름에 맡길 수 있고, 자식요소들은 부모와 함께..

포토 갤러리 메뉴 1. isAnim boolean값을 이용해 애니메이션이 꼬이지 않게 다뤘다. 2. 이미지 주소값을 ajax로 얻어오고, jQuery로 이미지 엘리먼트 만든 뒤 attr에 src를 줌으로써 이미지를 로드시키고, 로드 이벤트리스너를 등록하여 로드가 완료되면 이미지 객체를 DOM에 append시켜 이미지를 보이게끔 처리했다.여기서 시행착오가 있었는데, 이미지 로드가 항상 일정하지가 않기 때문에 이미지의 순서가 일정치 않게 로드되어 append된다는 점이었다.그래서 이를 해결하기 위해 배열을 만들고 이미지 객체들을 차례로 저장한 뒤, 마지막 이미지 로드 이벤트리스너가 실행되면 배열에 있는 값들을 0부터 차례대로 append하게 했다.그런데 여기서 간과한게, 마지막 이미지 로드 이벤트 리스너를 ..

이미지 네비게이터 만들기 1. 스크롤바를 사용할 경우, HTML구조와 CSS에 신경을 써야 한다.2. 안보이는 곳에서 보이는 곳으로 애니메이션 되면서 동시에 fade를 주니까 깜빡이는 현상이 있더라.. 이유는 모르겠음.3. 원래 중복되는 코드는 함수를 따로 만들어서 사용하는게 매우 효율적임. 여기에서는 좌,우 이동이 중복되기 때문에 함수로 만들면 됨.4. load 이벤트를 사용할 때 주의할 점은, load의 콜백메서드는 load가 완료된 후 불린다는 것. 그래서 load로 체이닝 하는 경우엔 load 뒤에 붙은 jquery메서드들이 당연하게도 load콜백보다 먼저 실행된다는 점을 잊으면 안됨.5. fadein,out에도 콜백메서드 붙일 수 있음. jquery의 이펙트들은 전부 콜백메서드 붙일 수 있음.6..

마우스포인터 위치에 따른 자동스크롤 1. 마우스포인터 위치에 따른 scrollTop을 계산하는 수식을 잘 기억해둬야 한다.wrap과 thumb의 보이는 부분이 겹쳐있기 때문에, (thumb - wrap)과의 비율로 계산을 해야한다.여기서 마우스포인터가 끝쪽에 있어야 전부 스크롤되는건 보기 불편하기 때문에, 약간의 여유를 줘서 어느정도 끝쪽에 다다르면 스크롤이 전부 되도록 하기 위해서 inactiveMargin이라는 값을 주었다.이 값의 2배를 thumb 크기에 합치고(위, 아래) 포인터 위치에 따른 스크롤바 위치를 결정지을 때 이 값만큼 빼줘서 구현하였다. 2. visibility 속성은 부모가 hidden이여도 자식이 visible이면 보인다.

슬라이드메뉴 만들기 1. 커서가 있던 위치에 따라 슬라이드 되는 방향이 바뀐다. 2. background-position을 이용해 3분할을 한다.3. 이미지크기가 800px인데 각 슬라이드 화면의 크기는 265px + border-right 1px = 266px이다.그리고 마지막 슬라이드는 border-right가 없으므로 컨테이너의 width는 797px이다.4. animate로 background-position을 사용할 때에는 position-x, position-y를 나눠서 하자."background-position": "~px ~px"가 먹히지 않는다.

네비게이션 만들기 1. 스크립트 animate 사용을 지양하였다.2. css 트랜지션을 이용하여 스크립트로는 클래스를 주고, 빼면서 자연스럽게 트렌지션으로 애니메이션 효과를 줬다.3. setTimeout으로 메뉴를 마구 눌렀을 때, 겹치는 현상을 방지하였다. 크로스 브라우저를 위해선 animate 사용을 해야겠지만.. 어차피 몇년 뒤면 IE 구버전은 사라질것이다. z축 스크롤 1. body의 높이를 적당히 크게 설정한다.2. translateZ와 perspective를 이용하여 position: absolute로 한곳에 여러개를 배치한다.3. 스크롤에 따라 동적으로 translateZ의 크기를 각각 변화시킨다.

아코디언 메뉴. background-position을 특정지어 놓고 펼치게 한다.float: right으로 설정하면 오른쪽에서 왼쪽으로 펼쳐지는 효과.

removeClass() 에서 매개변수로 아무것도 안넘기면 모든 class를 제거함. 이벤트리스너는 한번만 등록하면 계속 유효함. 현업에서 프론트단에 id를 사용하는것은 지양하는 추세라고 한다.. class만을 사용하도록 하자. - 이는 웹퍼블리셔와 웹디자이너의 작업이 양분화 되어 있는 경우라고 한다. 웹퍼블리셔들이 id를 많이 사용하기 때문에, css를 설정하는 웹디자이너는 id 사용을 지양해야 한다고 한다. 만약 혼자서 디자인하고 코딩까지 다 하면 신경쓸 필요 없는 대목이다.

메뉴를 누르면 해당 메뉴의 본문이 내려오는 효과1. animate로 효과를 줄 땐 css transition효과는 빼야 한다. (반대도 마찬가지)2. HTML에서 article 배경은 고정되어 있기 때문에, article을 전부 만들지 말고 div로 나눠서 배경은 하나로 만드는게 좋을 것 같다.3. jquery 체이닝할 때, 코드의 순서에 신경을 써야 한다. 특히 콜백을 부를 때, 변수의 변화를 신경을 잘 써야함.4. 왠지 모르겠지만, 지금까지 animate는 하나의 요소에만 먹히는줄 알았다. 그게 아님.. 모든 요소가 다 먹힘.. each로 쓸 필요 없음..5. 따라서 사실상 article의 on 클래스로 활성화인걸 굳이 나눌 필요가 없는듯 하다. 원래는 이전에 나와있던 요소를 구분하기 위해 on 클래..

부모컨테이너의 z-index가 자식요소의 z-index보다 작아도, background는 항상 자식요소보다도 뒤에 깔려있다. transition간의 z-index 변화는 transition이 끝난 뒤에야 반영되므로 즉각적인 z-index 변화를 원한다면 스크립트를 써야 한다. 부모컨테이너의 크기를 넘어선 img 혹은 display: inline-block 의 자식요소들의 경우, hover의 범위가 이해할 수 없는 범위가 되어버린다.(https://jsfiddle.net/kimtaku/f1mewqxf/3/) 이런 경우, block 요소를 사용하니 해결되었다.(https://jsfiddle.net/kimtaku/f1mewqxf/4/)