사이먼's 코딩노트

[G마켓 3차 메뉴 제작 ~ing] [3차 메뉴 상단(left-box) 만들기] 3차 메뉴의 top-box 중 left-box를 먼저 완성해보자. left-box에는 총 3개의 박스가 나눠서 메뉴가 들어가 있는 구조이다. 3개의 메뉴는 left-box 아래에 nav-list 태그를 추가해야한다. nav-list 태그 아래에는 메뉴의 제목과 소메뉴으로 나누는 title-box와 body-text-box를 추가한다. title-box에는 바로 각 메뉴의 제목 텍스트를 적어주고, body-text-box에는 소메뉴를 나눠주는 ul, li태그를 추가하고 각 li태그는 다른 곳으로 링크되는 역할을 가지고 있기 때문에 자식 엘리먼트로 a태그를 추가한다. 각 nav-list 태그는 한 줄에 나란히 배치해야되기 때문에..

[G마켓 3차 메뉴 제작] 지난번 G마켓 2차 메뉴 제작에 이어 이번엔 3차 메뉴 제작을 해봅시다. 완성된 G마켓 홈페이지 디자인은 아래 그림과 같다. 우리가 만들어야할 마지막 목표는 2차 메뉴 옆 3차 메뉴이다. [구조 잡기] 각 2차 메뉴의 li태그에 hover를 적용했을 때마다 보이는 3차 메뉴가 다르기 때문에 html에서 3차 메뉴 태그의 위치는 hover를 적용할 2차 메뉴의 li태그 아래에 위치해야한다. 우선 g-market-2__nav > ul > li 아래에 3차 메뉴의 구조를 잡는 g-market-3__nav 태그를 생성한다. 2차 메뉴의 전체와 3차 메뉴가 겹쳐보이기 위해선 g-market-3__nav에 position: absolute를 통한 포지셔닝이 필요하다. 이 때, g-mark..