사이먼's 코딩노트

[transform 예제 만들기] 지난번 배운 transform, translate, transition, scale, opacity, rgba을 응용해서 예제를 하나 만들어보자. 예제의 내용은 아래 사진과 같이 이미지 5장을 화면에 놓고 각 이미지 화면에 마우스 커서를 올려놓았을 때 이미지가 흐려지고 이미지가 확대되면서 버튼이 생기는 것이다. [구조 잡기] 가장 먼저 해줄 일은 5개의 이미지가 위치할 수 있도록 구조를 짜는 일이다. 구조 짜는 방법은 복잡하게 생각하지 않아도되고, 앞서 탑바 제작하듯이 틀만 만들어준다고 생각하면 된다. img태그를 이용해 이미지를 한 번에 바로 insert하지 않고 굳이 구조를 짜서 넣어주는 이유는 img태그는 닫히 태그가 없기 때문에 hover를 적용했을 떄의 커스텀이..

[transfrom & translate & transition] 1. transform 엘리먼트를 변형시킬 떄 사용한다. 위치이동이나 회전 또는 크기를 조절할 때 사용하는 css 속성이다. absolute와 같은 position과 transform은 모두 원하는 위치로 옮기는 속성이지만, 둘을 함께 쓴다면 transform이 위로 오는 경우가 있어서 이럴 때는 position으로 통일시켜서 포지셔닝을 하는 것이 좋다. 2. translate transform의 속성값 중 하나이다. 엘리먼트를 X축, Y축, Z축으로 이동할 수 있는 속성이다. X축으로 이동할 때의 형태는 transform: translateX(X값); 이다. Y축으로 이동할 때의 형태는 transform: translateY(Y값); 이..

[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..