홈페이지, 블로그 CSS로 GNB, SNB와 Contents 나누기. main 좌우 레이아웃 나누기.

 

---

 

화면레이아웃.

 

상단 메인 메뉴도 아직 정돈이 안되었다.

메인에서 snb(side navigation bar)와 contents를 나눠야 한다.

SNB는 사이드 내비게이션 바의 약자로 화면 좌우 메뉴 영역을 나타낸다.

회의 중 이런 용어들을 자주 듣는 경우가 있다.

html 코드는 이전 포스팅에서 확인할 수 있다.

2026.02.06 - [Software/HTML&CSS] - 홈페이지, 블로그 CSS로 HEADER 레이아웃 만들기 공부

홈페이지, 블로그 CSS로 HEADER 레이아웃 만들기 공부

 

작업 전 화면을 살펴보자.

index.html

아이고~ 아직은 엉성하다.

---

상단메뉴 꾸미기.

 

index.html 상단메뉴

 

보통 홈페이지처럼 옆으로 정렬해 보자.

html 소스에서 해당 메뉴 부분을 보자.

 

index.html nav

 

위 파란색 박스에 들어간 메뉴가 <li> 태그로 구성되어 있다.

이제 css로 꾸며보자.

 

main.css .mainnavi

 

해당 css는 class="mainnavi" 에 작용한다.

41라인으로 왼쪽으로 50px 여백을 둔다.

0px로 바꿔보면 메뉴가 왼쪽으로 딱 붙는다.

배경색 background-color 는 파란색 계열이다.

 

main.css

 

.mainnavi::after 는 .mainnavi li 가 float 로 떠다녀서 뒤에 가려짐을 방지한다.

content : ' ' 으로  빈 값이라도 넣고 block 을 지정한다.

clear:both 는 block 에만 적용된다.

그리고 content 를 float 보다 아래에 위치해 공간을 잡아준다.

이 부분이 빠지면 겹쳐져 .mainnav 클래스에 적용된 상단메뉴가 사라진다.

 

index.html 상단메뉴

 

세로였던 메뉴가 가로로 변경되었다.

---

 

그런데 글자 색도 잘 안 보이고 메뉴도 다닥다닥 붙어 있다.

그런데 css가 좀 복잡하다.

요즘 사용한다는 display:flex; 로 변경해 봤다.

 

main.css

 

43~44라인을 추가했다.

display:flex 를 사용하면 float 사용했던 방식과 같이 고정시켜 준다.

list-style-type:none 는 li 의 앞에 나타나는 점을 제거한다.

47~51라인은 display:flex 로 필요 없어졌다.

56라인으로 메뉴 글자 간격을 예쁘게 조정한다.

10px는 글자 높이 여백을 25px는 글자끼리 여백을 조정했다.

 

main.css .mainnavi li a

<li> <a> 태그에 적용하는 css다.

글자색은 흰색, 두껍고 글자크기는 16px 행간은 40px로 설정했다.

text-transform:uppercase 는 대문자로 바꾼다.

<a> 링크에 밑줄 제거를 위해 text-decoration: none 를 사용했다.

결과를 보자.

 

 

와우~ 잘 적용되었다.

이제 메뉴에 마우스를 올릴 때 색이 바뀌도록 css에 hover 를 추가하자.

 

main.css mainnavi li a

 

a:hover 는 <a> 태그에 마우스가 올라갈 때 이벤트다.

마우스가 올라갈 때 기본 색은 #ffcc00 으로 설정했다.

배경식은 바탕색과 같다면 굳이 안 넣어도 되지만 표시해 줬다.

 

index.html

캡처라 마우스 포인터가 안 보이지만 GITHUB 에 마우스를 올렸다.

색이 잘 바뀐다.

---

 

SNB와 CONTENTS 나누기.

다시 전체 화면을 보자.

 

index.html

 

SNB와 CONTENTS도 역시 왼쪽으로 붙어 한 줄로 보인다.

보기 좋게 좌우로 나누는 작업이 필요하다.

css 로 레이아웃을 조정해 보자.

main.css

 

자, 위 소스를 보자.

#container 에서 display: flex 를 사용했다.

바로 top navi 에서 사용했다.

80라인은 양 끝을 정렬하고 사이 간격을 동일하게 하는 옵션이다.

82~83라인은 좌우 사이즈를 지정해 줬다.

결과물을 확인하자.

 

index.html

 

왼쪽으로 붙어 한 줄로 나왔던 snb 와 contents 영역이 잘 분리가 되었다.

촌스럽긴 하지만 레이아웃은 잘 잡혔다.

이번 포스팅은 여기까지다.