신기한 연구소

상단 메뉴 레이아웃도 맞췄고 snb와 contents도 분리했다.

다시 확인해 보자.

로고 위치 조정.

왼쪽 상단에 로고가 너무 붙어 있다.

약간의 여백을 줘보자.

.logoimg 클래스에 padding 값을 설정했다.

padding { 상, 우, 하, 좌 } 순으로 값을 넣으면 된다.

위로 10px, 좌로 26px로 설정했다.

결과를 확인하자.

딱 붙어있는 로고가 이동을 했다.

우측 상단 메뉴 조정

이제 우측 메뉴를 좀 더 추가하고 조정해 보자.

17, 19번 라인을 추가했다.

그리고 해당 메뉴를 우측 상단에 이쁘게 배치하자.

먼저 부모 격인. headernavi 클래스 속성 먼저 조정하자.

우측 상단에서 바로 아래 탑메뉴에 최대한 가까이 위치하기 위해 28번 라인을 추가했다.

그리고 모든 공백을 제거하기 위해 29번 라인 margin: 0을 추가했다.

메뉴 간 간격이나 미세 위치를 위해 30라인에서 padding 값을 조정했다.

.headernavi 클래스의 자식인 dd 태그에 값을 조정하다.

역시 76번 라인 공백은 다 제거했다.

padding으로 메뉴 위치를 조정했다.

78번 라인 메뉴 구분을 위해 세로 바를 배경에 넣었다.

95번 라인 클래스는 우측 상단 메뉴 구분을 위한 가로바 중 마지막 가로바를 빼는 코드다.

마지막인데 구분바가 필요 없으니까 제거했다.

100번 라인은 <a> 태그의 특징인 언더라인과 색을 바꾸기 위해 코딩했다.

101번 라인으로 메뉴의 언더라인 (text-decoration: none)을 없앴다.

102~103번 라인으로 글자색은 짙은 회색, 크기는 13px로 설정했다.

107~108번 라인은 마우스를 올렸을 때 밑줄이 다시 나오고 글자색을 검은색으로 설정했다.

이제 결과를 화면으로 보자.

우측에 home부터 잘 나오고 있다.

우선 상단 꾸미기는 이 정도로 해서 마무리하겠다.

처음이라 디자인도 그렇고 좀 엉성해 보일 수 있다.

하지만 중요한 것은 코딩을 해서 조정을 하는 방법을 배우는 것이다.

css는 단순히 사용법을 안다고 실전에서 사용할 수 있는 것이 아니다.

그때그때 상황에 맞게 잘 활용하는 것이 중요하다.

그것을 우리는 경력이라고 한다.

경력은 자주 해보면서 연구하고 분석하고 적용해서 느는 것이다.

모든 코딩이 그렇다.

꾸준히 연습하고 적용해 봐야 실력이 는다.

화면레이아웃.

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

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

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

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

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

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

작업 전 화면을 살펴보자.

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

상단메뉴 꾸미기.

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

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

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

이제 css로 꾸며보자.

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

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

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

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

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

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

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

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

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

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

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

그런데 css가 좀 복잡하다.

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

43~44라인을 추가했다.

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

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

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

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

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

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

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

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

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

결과를 보자.

와우~ 잘 적용되었다.

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

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

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

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

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

색이 잘 바뀐다.

SNB와 CONTENTS 나누기.

다시 전체 화면을 보자.

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

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

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

자, 위 소스를 보자.

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

바로 top navi 에서 사용했다.

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

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

결과물을 확인하자.

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

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

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