[HTML & CSS] G마켓 1차 탑바 제작

[G마켓 1차 탑바 제작]

• 디자인 삼성 2차 메뉴까지 완성해 봤다면 이번엔 G마켓 홈페이지 구현을 해보자.
• G마켓 홈페이지는 1차 탑바, 2차 메뉴, 3차 메뉴까지 총 3단계로 나눠서 구현할 예정입니다.
• 완성된 G마켓 홈페이지 디자인은 아래 그림과 같다. 우리가 만들어야할 첫번째 목표는 상단의 1차 탑바이다.

G마켓 홈페이지 완성 디자인

 

G마켓 1차 탑바 디자인

 

[구조 잡기]

• 1차 탑바의 구조를 잡기 위해서 전체 틀을 top-bar-section이라는 클래스로 지정한다.
• 전체 틀인 top-bar-section 안에는 1차 메뉴를 의미하는 g-market-1이라는 클래스를 지정한다.
• top-bar-section과 g-market-1은 해상도를 따라 움직이는 body의 자식이기 때문에 따로 너비 높이에 대한 고정 px를 지정하지 않고 구조 틀을 눈으로 볼수있는 테두리만 설정한다.
• 실제 1차 탑바의 너비 높이는 g-market-1 안에 container에서 지정한다.
• conatiner는 각각 너비 1280px와 높이 60px를 고정 px값으로 가진다.
• container를 가운데 정렬하기 위해선 margin-left: auto;와 margin-right: auto;를 작성한다.
• 1차 탑바는 container 안에 총 3가지의 섹션으로 태그를 나눠서 코드를 구현할 수 있다.
• 왼쪽의 category-box와 가운데의 nav태그 오른쪽의 usermenu-box로 나눠서 레이아웃을 그려야한다.
• 3개의 태그는 모두 display: block;이 적용되어 있기 때문에 최초에 한 줄에 하나씩 배치되는 상황을 볼 수 있다.
• 한 줄에 3개의 태그를 모두 나열하기 위해서는 해당 태그를 감싸고 있는 container에 display: flex;를 적용해야한다.
• 3개의 태그 넓이는 category-box만 고정 너비를 주고 나머지는 flex-grow: 1;과 flex-basis: 0;를 지정하여 비율로 너비를 잡아준다.

1차 탑바 구조 잡기 (html)

1차 탑바 구조 잡기 (css)

 

1차 탑바 구조 잡기

 

[폰트 적용]

• 우리가 만들고자 하는 G마켓 홈페이지의 디자인된 폰트를 보면 모두 Noto Sans KR이다.
• 구글 폰트 사이트를 통해 해당 폰트의 링크를 가져와 html과 css에 적용해야 한다.
• 우리가 필요한 폰트의 두께(font-weight)는 Regular-400, Medium-500, Bold-700 3가지다.
• 여러가지 폰트를 사용할 때는 각 클래스에 적용할 폰트의 font-family를 쓰지만, 만들고자 하는 홈페이지는 모든 폰트가 Noto Sans KR로 통일되어 있기 때문에 body에 묶어 노멀라이즈를 해주는 것이 편하다.
• 구글 폰트로 가져온 link 코드는 html의 head 태그 안에, font-family는 css에 작성해야한다.

 

[카테고리 박스 만들기]

• 카테고리 박스에서 특징점은 bar 모양의 아이콘이 들어가는 것이다.
• Font Awesome(폰트어썸)과 cdnjs 홈페이지를 통해서 bar 모양의 아이콘 코드와 해당 아이콘을 링크시켜주는 코드를 가져와야 한다. (12일차 내용 참고)
• 아이콘과 텍스트는 디자인 상 서로 font-size가 다르기 때문에 span 태그로 감싸되, 서로 다른 커스텀이 필요하기 때문에 클래스를 'bar-icon-box'와 'category-text"로 지정해준다.
• 아이콘과 텍스트를 세로중앙정렬을 하기 위해선 line-height를 사용해서 정렬하는 것이 좋다.
• 텍스트는 기본적으로 line-height를 가지고 있고 폰트마다 위아래 line-height 수치가 다른 폰트들도 있어서 align-items를 적용해도 중앙정렬이 안될 때가 있다.
• container에서 높이를 60px로 지정해놨기 때문에 category-box에 높이를 따로 지정하지 않았다해서 높이가 0인 것이 아니라 container 값을 상속받기 때문에 line-height 값을 60px로 지정하면 된다.
• 마지막으로 아이콘과 텍스트 간의 여백은 margin으로 지정하고, 아이콘 왼쪽의 여백은 padding으로 지정한다.
• category-box에 padding-left를 적용하면 원하는 여백을 볼 수 있지만 너비가 늘어나는 현상이 생긴다. 이 때는 최초에 커스텀한 category-box의 너비를 224px에서 204px로 줄이거나, 너비를 224px로 그대로 두고 box-sizing을 이용하여 padding 값을 포함하게 커스텀할 수 있다.

 

[1차 메뉴 만들기]

• nav태그 안에 메뉴를 만들기 위해선 ul과 li 태그를 사용해야한다.
• 1차 메뉴는 총 6가지이기 때문에 ul태그 아래 li태그가 6개가 속하고 각 li태그는 다른 곳으로 링크되는 역할을 가지고 있기 때문에 자식 엘리먼트로 a태그를 추가한다.
• 젠코딩으로 해당 코드를 작성하면 ul>li*6>a[href="#"]{menu-name} 과 같다.
• 최초에 코드를 작성하면 a태그와 ul, li태그의 특성상 밑줄, 점 등의 표시가 적용되어 있기 때문에 노멀라이즈 작업을 해줘야한다.
• li태그의 각 메뉴들이 한 줄에 하나씩 배치되게 하려면 해당 태그를 감싸고 있는 ul태그에 display: flex;를 지정한다.
• 메뉴의 세로중앙정렬을 하기 위해선 단순히 align-items: center만 작성하면 적용이 되지 않는다. 높이가 없기 때문에 container의 60px를 100% 받아온다는 의미로 height: 100%를 작성해야 align-items가 동작한다.

 

[유저 박스 만들기]

• usermenu-box는 1차 메뉴와 동일하게 ul과 li태그로 구성되어 있다.
• ul태그 아래 li태그가 4개가 속하고 각 li태그는 다른 곳으로 링크되는 역할을 가지고 있기 때문에 자식 엘리먼트로 a태그를 추가한다.
• 젠코딩으로 해당 코드를 작성하면 ul>li*4>a[href="#"]>span{usermenu}+span{|} 과 같다.
• 각 텍스트 오른쪽에 바 모양과 아이콘이 있기 때문에 span 태그를 형제 엘리먼트로 2개 생성을 해줘야한다.
• li태그의 각 유저 메뉴들이 한 줄에 하나씩 배치되게 하려면 해당 태그를 감싸고 있는 ul태그에 display: flex;를 지정한다.
• 유저 메뉴는 디자인을 봤을 때 오른쪽 정렬이 되어있기 때문에 flex를 지정한 ul태그에 justify-content: flex-end;를 작성하여 정렬해준다.
• 유저 메뉴의 세로중앙정렬을 하기 위해서는 각 텍스트를 감싸고있는 span태그에 line-height를 적용한다. 이 때, ul태그에 따로 height: 100%를 지정하지 않고 container의 높이 60px를 그대로 상속받기 때문에 line-height: 60px로 정렬해준다.

G마켓 1차 탑바 완성 (html)

 

G마켓 1차 탑바 완성 (css-1)

G마켓 1차 탑바 완성 (css-2)

 

G마켓 1차 탑바 완성