[css] 내비게이션(gnb) 만들기 05 - 가운데 정렬

---

내비게이션 가운데 정렬

안녕하세요. 개자이너 씸플레이입니다.

사실 헤더 부분 전체를 가운데 정렬하는 것이지만 일단 제목을 이렇게 적어봤어요.

---

1. 여백 확인

원래 있을 영역

① 현재 상황 파악

 

• 지금까지 잘 따라오셨다면 로고와 카테고리가 각각 양 옆으로 붙어있을 겁니다.
• 그런데 뭔가 이상하죠? 다른 사이트들을 보면 글자는 중앙에 있고 양쪽은 여백인 곳이 많을 거예요.
• 그렇습니다. 너무 끝에 몰려있다는 생각을 하셨을 거예요.

---

2. 태그 추가

감싸는 태그 추가

① 태그 추가

 

• 컨텐츠가 있는 영역과 여백이 있는 영역 두 개가 필요하기 때문에 콘텐츠를 한 번 더 감싸줍니다.
• 감싸주는 태그로는 <div>태그를 사용했습니다.
• 래핑 단축키는 Ctrl + Shift + P 입니다.

>래핑 설명 보러가기<

 

 

320x100

---

3. css 입력

.header_wrap 크기

.header_wrap{ width:1200px; }

 

① 가로 크기

 

• 새로 만들어준 감싸는 태그에 가로 크기를 지정해줍니다.
• 가로 크기를 정하는 css 속성은 width 입니다. width:1200px; 을 입력해주세요.
• 수치는 변경 가능합니다.

 

② 변경된 모습 확인

 

• 시각적으로 잘 보이기 위해 #header에는 검은색 테두리를 .header_wrap에는 빨간색 테두리를 넣어주었습니다.
• 가로 사이즈를 지정해주면 그만큼 줄어들어서 이제 오른쪽에 여백이 생긴 것을 알 수 있습니다.
• 가운데로 오게만 하면 될 거 같네요.

margin: 0 auto;

.header_wrap{ width:1200px; margin:0 auto; }

 

③ 여백

 

• 방금 가로 크기를 넣어준 태그에 여백을 정해줍니다.
• 여백은 css 속성 margin을 이용합니다.
• margin: 0 auto; 를 입력해주면 위/아래는 0 , 왼쪽/오른쪽은 auto 값이 됩니다. (이미지 참고)

>margin: 0 atuo; 설명 보러가기<

 

 

 

[같이 보면 좋은 글]

[coding/html + css] - [css] 내비게이션(gnb) 만들기 04 - 마우스 올릴 때만 나오게 하기

[coding/html + css] - [css] 내비게이션(gnb) 만들기 03 - 가로로 정렬하기

---

그럼 이만.

총총.