[스마트폰]스마트폰 레이아웃 구성 #4(네비게이션 구성)

네비게이션이란 우리가 스마트폰이나 컴퓨터에서 웹을 볼때 맨 상단바에 고정메뉴가 있는걸 아실거입니다.

그게 바로 네비게이션인데요 일반적으로 네비게이션 목록 구성 방법은 세가지로 볼 수 있습니다.

1. overflow 속성과 float 속성을 사용

2. display 속성과 table을 사용

3. table 태그를 사용

(2번과 3번은 같은 내용)

이번 포스팅에서는 1번 방법과 2번 방법을 사용하도록 하겠습니다.

(1번 방법)

overflow 속성과 float 속성을 사용

<nav> 태그는 block 형태의 네비게이션 목록을 구성할때 사용되는 태그입니다.

이제 이 밑에 버튼 4개를 수평으로 정렬해보도록 하겠습니다.

#top_gnb의 내용들이 어떠한 정해진 영역을 넘을시 그 넘은 내용은 안보이게 해준다.(overflow:hidden)

#top_gnb 의 자손인 div태그,

또 div 태그의 자손인 a태그를 왼쪽(left)으로 정렬(float)시키고 그 영역을 100%중에서 25%로 설정을 해준다.

원래 수평으로 정렬하기 전 상태가 100%인데 그 영역을 25%로 줄였기 때문에 수평정렬이 된 것 입니다.

그럼 여기서 목록 개수와 너비 비율의 관계에 대해서 한번 정리를 해보고 넘어가도록 할게요

목록 개수	비율
2개	50%
3개	33.33%
4개	25%
5개	20%
6개	16.66%

이제 이 네비게이션에다가 색상을 입혀보도록 하겠습니다.

#top_gnb에 테두리(border)인데 아래쪽(bottom)을 1px로 견고한(solid)검정(black)으로 하고

배경(background)은 #B42111으로 하겠다

#top_gnb 의 자손인 div태그

또 div자손인 a태그의 박스 높이는 35px,

글자 높이(line-height)는 35ps로

글자 정렬(text-align)은 가운데(center)로

글자 색(color)은 흰색(white)로 하겠다.

스마트폰 어플 테스트.html

이제 두번째 방법인 display속성에 table을 적용 하여서 네비게이션을 만들어 보도록 하겠습니다.

#bottom_gnb를 table(테이블)태그와 같은 레이아웃을  가지며 보여지도록(display)하고

#bottom_gnb의 가로폭은 100%로 해주겠다.

#bottom_gnb의 자손인 div태그를 table태그 의 td형식(cell)로 보여지도록 하겠다.

[그러면 이때부터 수평정렬이 된다.]

#bottom_gnb의 자손인 div태그

div태그의 자손인 a태그를

block형식으로 보여지게(display)하고

a태그의 높이(height)를 35px로 하고

글자 높이(line-height)를 35px로 하고

글자 정렬(text-align)을 가운데 정렬을 한다.

이제 여기서 스타일을 추가로 입력해서 좀 더 이쁘게 하도록 하겠습니다.

지금 여기서 ::before 라는 가상 선택자가 사용이 되었습니다.

저도 잘은 모르겠지만 조사해보니까

::before, ::after 라는 가상 요소는 -> 특정 요소에서 내용의 앞이나 뒤에 가상 컨텐츠를 삽입할때 사용이 된다고 합니다.

before,after 가상요소.hwp

이 파일에 좀 더 자세하게 예시를 통해서 설명드렸으니 참고하시기 바랍니다.

이 부분을 해석해보면

HTML내용이

이럽니다.

따라서 #bottom_gnb > div > a::before{ ...} 는

#bottom_gnb>div>a 태그는 { 내용물 }   대괄호 안의 내용물 전에 온다는 뜻 입니다.

그리고 여기서는 position 속성 공식이 사용이 되었습니다.

여기서 사용된 공식은

자손에게 positon속성을 absolute 키워드로 적용하면

부모의 position속성 키워드는 relative키워드로 적용

입니다.

이말을 직역해보면

일단 자손인 <a>태그들을 절대적 위치 좌표로 설정을 해준다음에

부모인 <div>태그를 절대적 위치 좌표로 설정해준 상태에서 상하좌우로 위치를 이동시킨 것 입니다.

가상 선택자는 잘 모르겠어요 ㅠㅠ나중에 좀 더 공부해서 정리하도록 하겠습니다.

그리고 이제 본문과 Footer를 구성할게요 

이것들은 딱히 설명은 안하겠습니다.

스마트폰 어플 테스트.html