목록2016/06 (39)
타쿠꺼
CSS - position: absolute; 사용에 관하여 나는 지금껏, 왠진 모르지만 position: absolute는 상당히 지양해야 하는 속성이라고 생각해왔다.하지만 반은 맞고 반은 틀리다.position: absolute는 상당히 좋은 옵션이긴 하다. 내가 원하는대로 바로바로 포지셔닝할 수 있기 때문이다.하지만, 요즘은 다양한 크기의 화면으로 웹을 들어온다. position: absolute는 이러한 환경에 취약할 수 있다.이럴 땐 relative와 absolute를 적절히 사용해야 한다.레이아웃의 큼지막한 덩어리인 부모컨테이너는 relative를 사용하고, 그 부모 안의 자식요소들은 absolute를 사용하는 것이다.이러면 큰 레이아웃 덩어리는 흐름에 맡길 수 있고, 자식요소들은 부모와 함께..
text를 없애고, text-shadow만 준다면 blur효과를 낼 수 있다.
기초 1. 전역변수의 최소화 - 전역변수는 다른 외부코드들과 혼용사용되면 오류를 야기시킬 수 있기 때문에 사용을 최소화 하여야 한다. - var로 변수를 선언하지 않으면 암묵적으로 전역변수로 정의된다. 따라서 항상 var를 선언하도록 하자. - 전역변수를 var로 선언하면 delete되지 않는다. - 암묵적 전역변수는 사실상 전역객체(브라우저의 경우 window)의 프로퍼티이므로 delete로 삭제 가능하다. - var 선언을 연쇄적으로 사용할 때 암묵적 전역객체가 생성될 수 있다. ex )function func() {var a = b = 0;} - 이 경우, a는 지역변수지만 b는 암묵적 전역변수다. 이는 평가(evaluation)가 오른쪽에서 왼쪽으로 진행되기 때문이다. - 즉 b = 0이 실행되고..
마우스위치에 따른 자동스크롤 기능을 구현하는 경우, 보통 왼쪽 끝이나 오른쪽 끝쪽에 가야 스크롤이 완료가 되는데 이는 사용자가 불편해한다. 따라서 어느정도 여유공간을 남겨야 하는데 이를 만드는 공식은 가상 컨테이너 넓이값 = 실제 컨테이너 넓이값 + (여유분width * 2)스크롤 위치값 = 컨테이너에서의 위치값 * (가상컨테이너 넓이값 - wrapper넓이값) / wrapper넓이값 - 여유분width 이다. 실제 예는 아래와 같다. var containerWidth = lastElem[0].offsetLeft + lastElem.outerWidth() + 2*extra;var left = (e.pageX - $outer.offset().left) * (containerWidth-divWidth) / ..
A -> B로 가는 경우, 이동값에다 좌표값을 바로 적용시키면 당연하게도 그냥 바로바로 이동이 된다.하지만 그게 아니라 이동값 += (좌표값-이동값) * 0.1 등과 같이 만들고 requestAnimationFrame함수로 계속 부르게 하면 이동값이 좌표값과 같아질때까지 특정 연산값에 의해 위치가 바뀌기 때문에 한번에 바뀌는게 아니라서 움직임에 easing 효과를 줄 수 있다.이런 easing 관련 수식은 웹에 널려있으니 알아서 찾으면 될 듯 하다. 중요한 포인트는 1. setInterval, requestAnimationFrame과 같은 함수를 사용해서 움직이는 값을 계속 변화시켜줘야 한다는 것.2. easing 함수로 그 움직임 비율 값을 조절하는 것.
Fly-out 메뉴 1. 오른쪽 메뉴 박스의 경우 각 박스의 innerWidth 크기, 위치를 계산해서 설정해주면 됨.2. relative 형제요소들 사이에 absolute가 끼면, 순서에 따라 그 이후의 요소들부터 absolute의 영향력이 적용된다. 그 이전의 relative 형제들의 영향력은 계속 존재하여 absolute여도 위치속성이 없으면 형제요소들 다음 자리에 위치하게 된다. 마치 float: clear 속성처럼 행동하게 된다.
포토 갤러리 메뉴 1. isAnim boolean값을 이용해 애니메이션이 꼬이지 않게 다뤘다. 2. 이미지 주소값을 ajax로 얻어오고, jQuery로 이미지 엘리먼트 만든 뒤 attr에 src를 줌으로써 이미지를 로드시키고, 로드 이벤트리스너를 등록하여 로드가 완료되면 이미지 객체를 DOM에 append시켜 이미지를 보이게끔 처리했다.여기서 시행착오가 있었는데, 이미지 로드가 항상 일정하지가 않기 때문에 이미지의 순서가 일정치 않게 로드되어 append된다는 점이었다.그래서 이를 해결하기 위해 배열을 만들고 이미지 객체들을 차례로 저장한 뒤, 마지막 이미지 로드 이벤트리스너가 실행되면 배열에 있는 값들을 0부터 차례대로 append하게 했다.그런데 여기서 간과한게, 마지막 이미지 로드 이벤트 리스너를 ..
포토 갤러리 메뉴 1. isAnim boolean값을 이용해 애니메이션이 꼬이지 않게 다뤘다. 2. 이미지 주소값을 ajax로 얻어오고, jQuery로 이미지 엘리먼트 만든 뒤 attr에 src를 줌으로써 이미지를 로드시키고, 로드 이벤트리스너를 등록하여 로드가 완료되면 이미지 객체를 DOM에 append시켜 이미지를 보이게끔 처리했다.여기서 시행착오가 있었는데, 이미지 로드가 항상 일정하지가 않기 때문에 이미지의 순서가 일정치 않게 로드되어 append된다는 점이었다.그래서 이를 해결하기 위해 배열을 만들고 이미지 객체들을 차례로 저장한 뒤, 마지막 이미지 로드 이벤트리스너가 실행되면 배열에 있는 값들을 0부터 차례대로 append하게 했다.그런데 여기서 간과한게, 마지막 이미지 로드 이벤트 리스너를 ..
간단함. ` `(그레이브)로 감싸면 된다.