사이먼's 코딩노트

이번에 모작해볼 홈페이지는 올리브영입니다. 모작의 범위는 3차메뉴와 제품소개 까지이며, 마찬가지로 단계를 나눠서 진행하겠습니다. 완성 디자인 1단계 : 그리드 및 레이아웃 잡기 상단 탑바는 1차적으로 위, 아래 부분으로 나누고 윗부분에는 유저메뉴, 아래부분에는 로고, 검색창, 매장소식 메뉴를 배치하도록 레이아웃을 구성하였다. 2단계 : 유저메뉴 제작 3단계 : 로고 커스텀 올리브영 로고는 해당 홈페이지의 개발자모드(F12)를 통해 이미지를 가져와 코드에 적용했고, img 태그의 너비 높이를 100%로 맞춰 커스텀해줬다. 4단계 : 검색창 및 매장소식 제작 5단계 : 1차메뉴 제작 6단계 : 2차메뉴 제작 2차메뉴는 position: absolute를 사용하지 않고 가장 하단에 태그를 추가해서 제작하였다...

이번에 모작해볼 홈페이지는 오늘의 집입니다. 모작의 범위는 2차메뉴와 제품소개 까지이며, 마찬가지로 단계를 나눠서 진행하겠습니다. 완성 디자인 1단계 : 팝업창 제작 오늘의 집 홈페이지의 경우 상단 탑바 위에 팝업창이 있기 때문에 가장 최상단에 팝업 section을 두어 제작하였다. 2단계 : 그리드 및 레이아웃 잡기 팝업창 아래에 상단 탑바가 들어갈 곳의 구조를 잡아줬다. 상단 탑바는 가운데 1차 메뉴와 오른쪽 유저메뉴에 고정된 너비값을 주고 로고박스에는 flex-grow와 flex-basis를 통해 남은 공간을 할당하도록 했다. 3단계 : 로고 커스텀 오늘의 집 로고는 해당 홈페이지의 개발자모드(F12)를 통해 이미지를 가져올 수 없어, 필자가 직접 로고를 캡쳐하여 이미지태그에 적용하였다. 4단계 :..

이번에 모작해볼 홈페이지는 CGV 입니다. 모작의 범위는 2차메뉴와 무비차트 및 EVENT까지이며, 마찬가지로 단계를 나눠서 진행하겠습니다. 완성 디자인 1단계 : 팝업창 제작 CGV 홈페이지의 경우 상단 탑바 위에 팝업창이 있기 때문에 가장 최상단에 팝업 section을 두어 제작하였다. 2단계 : 그리드 및 레이아웃 잡기 팝업창 아래에 상단 탑바와 1차 메뉴가 들어갈 곳의 구조를 잡아줬다. 3단계 : 로고 및 유저메뉴 제작 CGV의 로고는 해당 홈페이지의 개발자모드(F12)를 통해 이미지를 가져왔다. 상단 탑바는 좌측 우측을 나눠 display: flex와 justify-content: space-between;으로 양쪽 배치를 했고 우측의 유저메뉴는 ul, li태그를 사용하여 5개의 메뉴를 생성하였..

이번에 모작해볼 홈페이지는 마켓컬리 입니다. 모작의 범위는 3차메뉴와 제품소개 까지이며, 마찬가지로 단계를 나눠서 진행하겠습니다. 완성 디자인 1단계 : 그리드 및 레이아웃 잡기 마켓컬리의 구조는 상단 탑바가 위·아래로 구분되어 있다. 2단계 : 유저메뉴 커스텀 1단계에서 상단 우측 유저메뉴 부분에 list라고 작성된 텍스트를 변경해준다. 3단계 : 상단 탑바 제작 마켓컬리의 로고는 해당 홈페이지의 개발자모드(F12)를 통해 이미지를 가져왔다. 4단계 : 1차메뉴 제작 5단계 : 2차메뉴 제작 마켓컬리의 2차메뉴는 각 1차메뉴 아래에 속하지 않고 카테고리 아래에 속한다. 2차 메뉴의 개수가 여러개이기 때문에 스크롤을 통해서 메뉴를 봐야한다. 그러기 위해선 2차메뉴 전체를 감싸는 ul태그에 overflow..

이번에 모작해볼 홈페이지는 삼성전자 입니다. 모작의 범위는 2차메뉴까지이며, 마찬가지로 단계를 나눠서 진행하겠습니다. 완성 디자인 1단계 : 팝업창 제작 삼성전자 홈페이지의 경우 상단 탑바 위에 팝업창이 있기 때문에 가장 최상단에 팝업 section을 두어 제작하였다. 2단계 : 그리드 및 레이아웃 잡기 팝업창 아래에 상단 탑바와 1차 메뉴가 들어갈 곳의 구조를 잡아줬다. 3단계 : 로고 및 검색창, 유저메뉴 커스텀 삼성전자의 로고는 해당 홈페이지의 개발자모드(F12)를 통해 이미지를 가져왔다. 4단계 : 1차메뉴 제작 1차 메뉴는 좌·우측으로 구분되어 있어 좌측에는 11개의 메뉴, 우측에는 4개의 메뉴가 존재한다. 5단계 : 2차메뉴 그리드 잡기 2차 메뉴는 각 1차 메뉴에 따라 메뉴의 개수가 다르기 ..

이번에 모작해볼 홈페이지는 SK네트웍스 입니다. 모작의 범위는 2차메뉴까지이며, 마찬가지로 단계를 나눠서 진행하겠습니다. 완성 디자인 1단계 : 그리드 및 레이아웃 잡기 1단계는 상단 탑바 기준으로 그리드를 잡았다. 2단계 : 로고 및 유저메뉴 커스텀 sk네트웍스의 로고는 해당 홈페이지의 개발자모드(F12)를 통해 이미지를 가져왔다. 3단계 : 1차메뉴 제작 1차 메뉴는 총 6가지로 구성되어있다. 4단계 : 2차메뉴 제작 2차 메뉴는 각 1차 메뉴에 따라 메뉴의 개수가 다르기 때문에 class 별칭을 공통으로 하나 지어놓고 개별로 class 별칭을 하나 더 두어 전체 구조는 동일하게 하되, 세세한 커스텀은 개별로 진행했다. 5단계: hover 적용 및 테두리 제거 여기까지 SK네트웍스 모작을 단계별로 진..

처음으로 시도해볼 모작 홈페이지는 '새미네 부엌'이다. 해당 홈페이지는 SUITE 폰트를 포함하고 있습니다. 완성 디자인 1단계 : 그리드 및 레이아웃 잡기 모든 모작의 첫번째 순서는 그리드와 레이아웃 즉, border를 이용한 구조를 잡는 일이다 이미지가 들어가는 부분은 img태그에 직접 너비, 높이를 줄 예정이기 때문에 레이아웃을 잡을 때 선이 보이지 않는다. 2단계 : 텍스트 및 버튼 제작 전체 구조 틀을 잡았다면, 두번째로 왼쪽 첫번째 박스의 아래부분의 아이콘, 텍스트, 버튼을 제작해봅시다. 텍스트는 눈누에서 SUITE 폰트를 가져오고 텍스트끼리의 줄바꿈은 보통 을 사용하기도 하지만, 여기에선 p태그를 2개를 사용하여 '요리초보'와 '가이드'를 따로 작성하였다. 버튼은 border-radius을 ..

홈페이지 모작이란? 상용화된 홈페이지들을 서칭하여 HTML과 CSS만을 이용하여 최대한 비슷하게 스스로 구조를 짜보고 디자인을 해보는 것입니다. HTML&CSS에서 학습했던 디자인삼성이나 G마켓 제작하는 것이 모작의 예시라고 볼 수 있습니다. HTML과 CSS의 감을 잃지 않기 위해 꾸준히 연습하는 방법이라고 생각하시면 됩니다. 모작은 단계를 나눠서 진행하는 것이 학습에 효과적입니다. 단계는 크게 다음과 같이 나눌 예정입니다. (단계는 예시일 뿐 모든 홈페이지에 동일하게 적용되지는 않습니다.) 1단계 : 전체 그리드 및 레이아웃 잡기 2단계 : 상단 탑바 제작 (로고, 검색창, 유저박스) 3단계 : 1차 메뉴 제작 4단계 : 2차 메뉴 제작 5단계 : 3차 메뉴 제작 6단계 : 배너 이미지 삽입 7단계 ..