Programmer's Progress

앞서 구현했던 내비게이터는 Horizontal 한 방식이었다. 따라서 웹 페이지 중에서도 수평적 크기에 여유가 많은 웹페이지에서 활용도가 좋을 것이다. 알라딘 사이트의 경우 PC 사이트의 창 크기를 줄이거나 늘여도 레이아웃 자체가 변하지 않았다. 즉, 미디어 쿼리가 적용되지 않았다는 것인데, 이는 사이트 특성상, 도서와 관련된 많은 정보를 담기 위함으로 추측한다. 도서의 장르에도 여러 가지가 있고, 도서의 상태에도 중고나 신품 같은 차이가 있을 수 있으며, 최근에 나온 책, 베스트셀러, 추천도서, 그 외의 이벤트 광고 등, 다양한 정보를 고객들에게 전달해야 하기 때문이다. 그러나, 브라우저의 창 크기를 제 아무리 늘린다 한들, 고객의 디스플레이 수평 크기가 작다면, 결국 이 많은 정보를 한눈에 보기 어려..

지난번에 수평 내비게이터를 구현하면서 Mouseenter와 Mouseleave이벤트를 사용했다. 이 둘은 하위요소에 마우스를 올리거나 치워도 발생하는 특성이 있기 때문이었다. 그러나, hover를 사용하면, 이 두 이벤트에 대한 처리를 동시에 할 수 있다는 사실을 깨달았으며 불필요하게 div#wrapper 같은 랩핑 요소를 추가할 필요가 없다는 것을 알았다. 또한, 마우스 오버시에 하위 메뉴가 slideDown( )되는 것뿐만 아니라, 삼각형 표시를 추가하여 시각적으로 자신이 어떤 상위메뉴에 포커스 하였는지 쉽게 알아볼 수 있게 설계했다. 그러나 ::before, ::after 같은 가상 요소는 제이쿼리에서 메서드로 동작을 제어하기 힘들다. 그래서 생각한 것이 특정클래스를 가진 요소에만 이 가상 요소를 ..

애니메이션 구현을 배웠으니 본격적으로 애니메이션을 활용한 내비게이터를 구현해보았다. 구현에 앞서 내비게이터 설계의 감을 잡기 위해 이미 구성된 소스코드를 차근차근 분석했다. 기본적으로 ul, li, a 태그를 적절히 조합한 후에 float:left 속성을 적용해 수평으로 배치하였다. 대략적인 원리를 설명하자면, 우선 학과 소개, 교육과정, 입학안내 등의 텍스트에 마우스를 올리면(Mouseenter) slideUp( ) 되어있던 인사말, 연혁, 수행사업 등의 하위 메뉴가 slideDown( )된다. 이때 페이지에 처음 방문했을때나 새로 고침 했을 때 slideDown( )을 통해 하위 메뉴를 집어넣고 시작하면 잠깐 동안은 하위 메뉴가 노출되는 문제가 발생한다. //하위메뉴는 처음에 hidden 상태임 $(..