반응형
이제 마무리된 디자인에서
여백, 색 등을 조금씩 다듬어보겠습니다.
1. 내비게이션 바 메인 메뉴
① 문제점 확인
- 내비게이션 바의 메뉴가 위쪽으로 딱 붙어서 답답한 느낌이 듭니다.
- 세로 기준으로 가운데쯤 왔으면 좋겠네요.
<css>
#header{ line-height:60px; }
② line-height 이용
- line-height는 줄 간격이지만
- 글이 한 줄만 있을 때는 가운데 위치로 만드는 게 아주 안성맞춤입니다.
- 값은 세로 값을 동일하게 넣어주세요.
2. 서브 메뉴
① 문제 파악
- 줄 간격을 부모 태그에 입력해 서브도 적용되는 문제가 있네요.
- 배경색이 없어 눈에 잘 들어오지 않는다는 문제도 있습니다.
<html>
<div class="header_wrap">
<h1><a href="index.html">로고</a></h1>
<nav>
<h2 class="hidden">카테고리</h2>
<ul class="gnb">
<li>
<a href="sub101.html">카테고리1</a>
<ul>
<li><a href="sub101.html">하위1</a></li>
<li><a href="sub102.html">하위2</a></li>
<li><a href="sub103.html">하위3</a></li>
<li><a href="sub104.html">하위4</a></li>
</ul>
</li>
<li><a href="sub201.html">카테고리2</a></li>
<li>
<a href="sub301.html">카테고리3</a>
<ul>
<li><a href="sub301.html">하위1</a></li>
<li><a href="sub302.html">하위2</a></li>
<li><a href="sub303.html">하위3</a></li>
</ul>
</li>
<li><a href="sub401.html">카테고리4</a></li>
<li><a href="sub501.html">카테고리5</a></li>
</ul>
</nav>
</div>
<css>
.gnb>li ul{ line-height:26px; }
② 줄 간격
- 줄 간격은 여기서도 line-height를 이용하면 됩니다.
- 선택자를 하위 카테고리 <ul> 태그로 잘 잡아주시면 하위 카테고리만 디자인 변경이 가능합니다.
- 슬슬 기억에서 지워졌을 것 같아 <html> 코드도 같이 가져와봤습니다.
<css>
.gnb>li ul{ line-height:26px; background:#00adb5; }
.gnb>li ul li a{ color:#fff; }
③ 색 변경
- 배경색은 background / 글씨 색은 color를 이용해줍니다.
- 글씨 색은 <a> 태그에 넣어주셔야 하는 것 잊지 말아 주세요.
- margin과 padding을 이용한 간격 조정은 생략하겠습니다. 원하는 만큼 넣어주세요.
3. 퀄리티를 높이는 hover 디자인
① hover 디자인을 사용하는 이유
- hover 디자인을 추가하면 사용자의 반응을 끌어내기 쉽고,
- 사용자 역시 사용방법을 유추하기 쉬워집니다.
- 또한 홈페이지의 퀄리티를 높일 수 있습니다.
<css>
.gnb>li ul li:hover{
background:#fff;
a{ color:#00adb5; }
}
② 마우스를 올렸을 때
- hover는 마우스를 올렸을 때 반응하게 하는 가상 클래스의 일종이에요.
- <ul>이 아니라 각각의 <li>에 마우스를 올리면 반응하게 해야 하니 <li>에 hover를 넣어줍니다.
- 이때도 <a> 태그는 따로 선택자로 잡아서 색을 넣어주는 것 명심해주세요!
내비게이션 바의 기본을 만들어보았습니다.
응용이 더해진다면 더 멋진 내비게이션 바를 만드실 수 있을 거예요~!
응용편도 궁금하시다면 포스팅해보겠습니다.
댓글 남겨주세요~
[같이 보면 좋은 글]
[css] 홈페이지 코딩 내비게이션 바 06 - 색을 넣어보자
안녕하세요. 개자이너 씸플레이입니다. 홈페이지를 직접 코딩해보는 시간입니다. 구조를 거의 잡은 내비게이션 바에 색을 넣어봅시다. 1. 배경색 ⓛ 색 조합 정하기 홈페이지 의뢰 내용에 따라
ssimplay.tistory.com
[css] 내비게이션(gnb) 만들기 05 - 가운데 정렬
안녕하세요. 개자이너 씸플레이입니다. 사실 헤더 부분 전체를 가운데 정렬하는 것이지만 일단 제목을 이렇게 적어봤어요. 1. 여백 확인 ① 현재 상황 파악 지금까지 잘 따라오셨다면 로고와 카
ssimplay.tistory.com
그럼 이만.
총총.
반응형
'coding > html + css' 카테고리의 다른 글
| [css] 미디어쿼리 max-width 사용시 주의점 (4) | 2021.07.19 |
|---|---|
| [css] 미디어쿼리로 반응형웹 제작하기 (2) | 2021.07.13 |
| [css] 홈페이지 코딩 내비게이션 바 06 - 색을 넣어보자 (12) | 2021.03.08 |
| [css] 내비게이션(gnb) 만들기 05 - 가운데 정렬 (6) | 2021.03.04 |
| [css] 내비게이션(gnb) 만들기 04 - 마우스 올릴 때만 나오게 하기 (4) | 2021.02.23 |
