정보의 중요도를 구분하고 그룹화 하여 HTML을 의미있게 작성할 수 있으며 웹접근성을 고려하여 마크업 할 수 있습니다.
CSS를 사용하여 데스크톱과 모바일 환경에 각각 맞춘 반응형 웹을 제작 할 수 있습니다. 또한 ClassName에 따른 다양한 애니메이션 효과를 제작할 수 있습니다.
자바스크립트로 DOM의 요소를 가져와 활용 할 수 있으며, 클릭 /스크롤과 같은 이벤트에 반응하여 특정 작업을 실행 시키도록 할 수 있습니다.
jQuery플러그인 사용할 수 있으며 Javascript와 jQuery를 사용하여 필요한 기능을 추가, 수정할 수 있습니다.
미디어 쿼리를 사용하여 데스크탑, 태블릿, 모바일 사용자 환경에 각각 변화하도록 했습니다.
사용자 편의성을 위해 데스크탑용과 모바일용 header menu를 따로 제작하였으며, 가로넓이에 따라 display: block, none하였습니다.
Javascript Date() 함수를 이용해 캘린더를 만들었습니다.
사용자 컴퓨터의 날짜 정보를 가져와 input에 value 값으로 지정하였습니다.
현재 날짜를 강조하고 지난 날짜는 옅게 보이도록 처리하였습니다.
반복되는 UI 특징을 동일한 Classname을 지정하여 CSS를 적용, 빠르게 작업할 수 있도록 하였습니다.
Javascript addEventListener mouseenter와 mouseleave를 사용하여 구성하였습니다.
각 메뉴 하단에 after로 position: absolute된 라인을만들어 hover시 중앙에서부터 퍼져나가는 애니메이션 효과를 적용시켰습니다.
우측 메뉴버튼들과 아울렛 페이지 상단 메뉴를 scroll 값에 따라 display block과 none되도록 하였습니다.
bx-slider를 사용하여 슬라이드를 제작하였으며 CSS로 디자인을 수정하였습니다.