[css] 홈페이지 코딩 내비게이션 바 06 - 색을 넣어보자

---

내비게이션 바 색을 넣어보자

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

홈페이지를 직접 코딩해보는 시간입니다.

 

구조를 거의 잡은 내비게이션 바에 색을 넣어봅시다.

---

1. 배경색

색조합

ⓛ 색 조합 정하기

• 홈페이지 의뢰 내용에 따라 색 조합이 조금씩 달라지겠지만 오늘은 연습이니까 컬러헌트에서 예쁜 색을 골라볼게요.
• 컬러헌트 사용방법은 아래 포스팅을 참고해주세요.

[꿀정보] 컬러조합 사이트 컬러헌트

 

---

 

header 전체 배경색 넣어주기 (background)

② 해더

• 정리정돈이나 설거지가 그렇듯 코딩도 큰 것에서부터 작은 것 순서대로 하면 머릿속에서 정리하기 쉬워집니다.
• 코드에서 가장 큰, 그러니까 가장 바깥쪽에 있는 부모 태그부터 순서대로 색을 넣어줍니다.
• 내비게이션 바에서 가장 부모 태그는 header 입니다. 여기에 배경색을 넣어줄게요.

 

---

 

배경색이 안나옴

#header{ background:#222831; }

 

 

③ 배경색

• css에서 background를 이용해 배경색을 넣어줍니다. 색은 위에서 컬러헌트로 찾은 색이에요.
• css를 넣으면 배경색이... 당연히 안 나올 거예요. 놀라지 마세요 정상입니다.
• 코딩을 하다 보면 언제나 문제가 발생해요. 침착하게 하나씩 대처하는 게 중요하답니다. 사실 별로 크지도 않은 문제일 때가 많으니 긴장하지 마세요.

 

---

 

320x100

 

---

2. 문제 확인 및 해결

헤더에는 높이 값이 없음

① 문제 확인

• 원인은 float에요. 앞 시간에 로고와 카테고리에 float 속성을 주었었죠? 이 속성은 inline 태그가 되기 때문에 부모 태그에 높이가 없어져요.
• 높이가 0인데 색을 넣은들 보일 리가 없죠.
• 초심자가 확인하는 방법은 border를 넣어보는 방법이 있습니다. border:1px solid red;를 복사해서 넣어보세요. 높이가 없는 것이 어떤 것인지 눈으로 확인하실 수 있을 거예요.

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

 

---

 

높이 값 주기 (height)

#header{ background:#222831; height:60px; }

② 높이

• 해결 방법은 간단합니다. 높이 값이 없으니 높이를 지정해주면 됩니다.
• css에서 height를 이용해주세요. 

 

---

 

---

3. 글씨 색

<a>태그에 색을 넣어준다.

h1 a{ color:#00adb5; }
gnb li a{ color:#00adb5; }

① <a>태그

• 한 번에 해결하기 위해 헤더에 color값을 주어봤지만 안되시는 분 계시겠죠? 다른 태그였다면 그게 맞는 방법이지만 <a>태그는 아닙니다.
• <a>태그는 특별해서 꼭 <a>태그에 css 값을 입력해줘야 적용할 수 있어요.
• 이번에는 로고와 카테고리 각각의 <a>태그에 color 값을 넣어봅시다.

 

이렇게 색까지 넣어보니 얼추 내비게이션 바가 완성되어 보이네요.

 

/*

카테고리가 위에 딱 붙어있는 건 제가 임의로 padding값을 제거했기 때문입니다.

다음 포스팅에서 위치 조정을 다뤄볼 테니 너무 걱정하지 마세요~

*/

 

 

 

[같이 보면 좋은 글]

 

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

 

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

---

그럼 이만.

총총.