신기한 연구소

화면레이아웃.

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

메인에서 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 영역이 잘 분리가 되었다.

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

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

Git&GitHub Pages에서 레파지토리를 구성하고 소스 관리까지 했다.

기본 콘텐츠와 html을 구성했다.

html로만 만드니 왼쪽에 다 붙어있다.

이제 레이아웃을 꾸며야겠다.

HTML 소스.

6번 라인에 css 링크를 넣고 css 디렉터리에 main.css를 만들었다.

CSS로 배경색 작성.

먼저 페이지 전체 배경색을 지정하자.

3~5번 라인을 보면 body 태그에 background-color로 색을 지정했다.

어떻게 변했을까?

초록색 계열로 변했다.

하지만 기본 뒷배경을 이 색으로 하고 실제 홈페이지는 흰색으로 하고 싶다.

그래서 추가했다.

7~11 라인을 추가했다.

너비 width는 800px, margin 은 0 auto 그리고 배경색은 white로 했다.

결과는 다음과 같다.

잘 적용되었다.

HEADER 영역 만들기.

지금 왼쪽으로 항목들이 쭉 늘어서있다.

header 먼저 배치해 보자.

우선 16라인의 상단 네비와 20라인의 메인 네비는 코드상에서만 보면 된다.

그래서 화면에 나오면 안 된다.

숨겨야 해서 hide class를 만들었다.

이 구성은 단순히 글자만 숨기는 것이 아니다.

글자를 숨기고 그 자리는 보존하는 css 코드다.

9번 라인은 클릭 등 이벤트를 방지하는 코드다.

10번 라인은 글자를 투명하게 하고 11번 라인은 드래그를 방지한다.

그 결과 다음과 같이 나온다.

위 이미지를 보면 왼쪽의 상단 네비와 메인 네비라는 글자가 오른쪽을 보면 사라졌다.

그리고 그 위치에 공간은 그대로 유지되었다.

사이트맵 조정.

이제 사이트맵을 우측으로 보내고 우리의 로고로 변경할 것이다.

먼저 sitemap을 우측으로 옮기자.

16번 라인은 상단 네비 글자를 숨기기 위해 hide class로 설정했었다.

17번 라인 사이트맵은 왼쪽에 붙어 있었는데 우측 상단 적절한 곳으로 이동하자.

위 html 소스에서 13번 라인과 15번 라인을 보자.

15번 라인의 class="headernavi"가 13번 라인 id="header"에 포함된 자식 요소다.

그래서 사이트맵은 header에 자식 요소에 포함되어 있다는 의미다.

그래서 css 소스에서 25번 라인을 보자.

position:absolute로 설정했다.

부모인 header에서 position:relative로 설정했다면 absolute는 부모를 기준으로 움직인다.

실제로 header에서 position값을 설정하지 않으면 자식 요소는 브라우저 끝에 붙는다.

브라우저 크기를 조절할 때마다 우측 30px, 상단 20px의 위치에 고정돼서 따라 움직이게 된다.

즉, 우리가 만든 header 공간을 벗어나기도 한다는 의미다.

그래서 header:relative로 설정해야 header 범위에서 자식 요소가 고정된다.

이렇게 말이다.

왼쪽 상단에 logo도 이미지로 바뀌었다.

로고 조정.

html 먼저 확인해 보자.

14번째 라인을 보면 로고가 있다.

logoimg class로 설정되어 있다.

이제 css를 설정하자.

우선 31번째 라인을 보면 display를 block로 지정했다.

<a> 태그가 인라인이라 width, height 설정이 안 된다.

height:80px; 를 적용시키려면 블록으로 지정해야 하니 display:block;로 설정했다.

33번째 라인은 이미지 경로를 넣고 배경으로 반복되지 않도록 no-repeat로 설정했다.

34번째 라인 overflow는 사이즈를 벗어나는 이미지는 hidden 하라는 뜻이다.

35번째 라인에서 들여 쓰기인 text-indext:100%;를 사용해 오른쪽으로 이동한다.

34번째 라인의 overflow:hidden; 덕에 범위를 벗어나게 돼서 글자는 안 보이게 된다.

36번째 라인의 white-space:nowrap; 는 혹시 글자가 길어 줄 바꿈이 되는 걸 막는다.

이제 로고가 제대로 나오는지 확인해 보자.

로고 이미지가 잘 나왔다.

이미지는 좀 다듬어야겠다.

마무리

HTML과 CSS를 공부하다 보니 모르는 게 정말 많았다는 것을 알았다.

열심히 공부하자!