미디어스퀘어 홈페이지 구조설명

: 홈페이지 첫화면

: 썸네일 이미지에 mousehover를 하면 박스포인터가 나타나고 이미지가 컬러로 변함

어떻게 한거냐면...

: 하나의 이미지 박스당 총 4개의 이미지가 올려져 있다.

문제점

: 겉으론 티가 안나지만, 로딩할때 4개 이미지를 다 불러와야 하기 때문에 cpu 연산 많이 잡아먹음 (* 4)
: 왼쪽메뉴를 눌러서 sorting 할때도 4개가 같이 움직이기 때문에, 당연히 cpu 연산 많이 잡아먹음 (* 4)

아무것도 동작안되고 가만히 있을때

: gray 이미지만 보임
: css로 처리

 gray 이미지 - display : block;
 box pointer 이미지 - display : none;
 color 이미지 - display : none;
 설명box - display : none;

설명 box에 대하여..

: mousehover 하면 color 이미지 옆에 설명해주는 박스가 뿅 나타난다. 요거의 레이아웃은  float : left;
: float 도 cpu 연산을 많이 잡아먹는 css임..
: 그래서 아무것도 동작이 안될때 얘는 당연히 display : none;