네이버 클론코딩2 [HTML, CSS] 기본적인 페이지 레이아웃(layout) 잡기 네이버 클론코딩 (2) - flex, grid 레이아웃 네이버 UI 클론코딩 (2) - flex, grid 레이아웃 이전 글에서 완성한 header, footer에 이어 이 글에서는 main 영역을 만들어보겠습니다. main에서는 모든 요소를 세부적으로 카피하지는 않고 레이아웃을 구현하는 작업을 두 가지 방식으로 살펴보겠습니다. 큰 단위부터 작은 단위로 grid cell로 나눠서 할당 1. 큰 단위부터 작은 단위로 가장 큰 요소부터 시작해서 하위 요소들을 점진적으로 나눠주는 방식입니다. body를 header, main, footer의 영역으로, main을 또다시 각 구역으로, 각 구역을 다시 세부적으로 계속 나눠줍니다. 우선 main영역을 크게 아래와 같이 나눠보겠습니다. 여기서는 flex와 grid 레이아웃을 자유롭게 사용할 수 있습니다. 이전 글에서도 .. 2020. 3. 28. [HTML, CSS] 기본적인 페이지 레이아웃(layout) 잡기 네이버 클론코딩 (1) 네이버 UI 클론코딩 (1) 네이버 사이트를 그대로 카피하면서 레이아웃을 잡는 연습을 해보겠습니다. 웹개발 초기에는 이렇게 잘 만들어진 사이트를 클론코딩하는 게 실력향상에 큰 도움이 됩니다. 레이아웃 설계 간단한 웹사이트라도 항상 설계를 먼저 하고 나서 작업에 들어가시는 게 정신건강에 좋습니다. 설계 시 가장 먼저 할 일은 페이지를 가장 큰 단위로 나누는 일입니다. 여기에는 정해진 규칙은 없고, 사이트의 목적에 따라 다양한 형태가 존재하지만 일반적으로는 header, main, footer의 세 가지 영역으로 나뉩니다. HTML5 요소로는 각각 랜드마크 요소인 네이버를 시작페이지로 쥬니어네이버 해피빈 검색 검색 메일 카페 블로그 지식iN 쇼핑 Pay TV 사전 뉴스 증권 부동산 지도 영화 뮤직 책 웹툰 .. 2020. 3. 21. 이전 1 다음
