홈페이지제작(html/css) _ css float 속성 이용하여 홈페이지 메뉴 상단에 만드는방법

html/css float 이용하여 홈페이지 메뉴 배치하기

안녕하세요

아이언스카이입니다

오늘은 홈페이지 만들 때 위 상단의 메뉴 배치하는 법을

포스팅 해볼게요!!!!!

제가 하는 방법이 100% 정답은 아니고

홈페이지는 결과물만 잘 나오면 되니 다르더라도 참고해 주세요

오늘의 샘플 홈페이지 메인사진입니다

우리가 봐야할 곳은 로고와 메뉴들이 있는 윗부분이에요

그래서 아래 본문 사진은 지우고

위 메뉴만 남기게 해서 보겠습니다

01. html 코드 작성하기

저는 로고 부분을 h1으로 작성하여 제일 크고,

두꺼운 글자로 만들어 주었구요

나머지 메뉴들은 ul과 li를 써서 리스트 안에

넣어 주었습니다

보시는 바와 같이 <header>, <nav>라고 되어 있는 것은

html 표준법에 의거하여 

최대한 표준표기법을 따르려고 작성한 것인데요

특별한 의미라기보다

<header>는 홈페이지 상에서 윗부분에 해당하는 곳이구나,

<nav>는 홈페이지에서 메뉴 부분을 말하는 거구나

라고 알려주는 역할을 하는 것 뿐이랍니다

사실 header나 nav는 크롬에서는 잘 먹는데

아직 익스플로러 버전이 낮은 경우에는 잘 먹지 않습니다

때문에 사용자의 모든 버전을 고려하신다면

<header>나 <nav>같은 부분들은 빼시고 작성하시는 게 좋습니다

<li>태그 안에 <a>를 떠 넣어준 것은

메뉴를 클릭할 때 어디로 이동할 수 있게끔

만들어 주려고 하기 때문인데요

아직 이동할 수 있는 페이지가 없어서

공백으로 놔둔 것이고

Home의 경우에는

제일 위쪽으로 돌아가라는 의미인 '#'만 입력해 주었습니다

배경색을 넣고 처음 html 파일을 실행시키면

저렇게 메뉴사이의 간격이 떨어져 있지는 않구요

색도 흰색이 아닙니다

02. css 파일 style 속성

위처럼 제가 css 파일에 속성들을 넣어놨기 때문인데요

color: white; -> 폰트글자 하얀색

line-height: 75px; -> 메뉴들의 줄간격 75px;

이 들어있어서 저렇게 보이는 것을 알 수 있습니다

그리고 위 html 코드에서 div 안에 class 들어있는 거 보이시나요

보통은 wrapper 라고 해서

내가 꾸미는 홈페이지 간격이 일정한 수준을 벗어나지 않게 하기 위함입니다

.wrapper{width: 1170px; margin: 0 auto;}

가로 1170px 을 벗어나지 않고

위아래에 margin을 0으로 주어

위아래 간격을 없애주는 것으로 만들었습니다

그리고 auto는 좌우 여백을 알아서

반절로 나누기 때문에 우리가 보기에는

중간에 위치시킬 수 있습니다

그렇게 <div> 태그에 wrapper라는 이름의 클래스를 넣어

적용시키면

위의 사진처럼

화면의 중앙으로부터 가로 1170px 을 글자들이 벗어나지 않게 됩니다 

03. css style float로 메뉴 나란히 배치하기

이제 메뉴들을 위쪽에 나란히 배치해 보도록 하겠습니다

먼저 로고와 나머지 메뉴들은 따로 움직일 거라서

아래처럼 코드를 따로 적은 것을 알 수 있습니다

만약 h1이 ul 안에 들어갔다면

로고는 왼쪽에, 메뉴는 오른쪽에 배치할 수 없을 겁니다

그리고 css 파일에 가서

h1{color: white; line-height: 75px; float: left;}

.menu{float:right;}

h1 태그와 ul클래스 이름인 .menu를 찍고 float:left 를 추가해 줍니다

그럼 로고는 왼쪽에,

메뉴들은 오른쪽에 저렇게 세로로 배치가 될 겁니다

이는 메뉴들을 한 덩어리로 보고

그 자체를 오른쪽으로 넘겨서 그러는 건데요

여기서 

.menu li{float:left;}

메뉴안에 있는 li들을 각각 왼쪽으로 배치하겠다는 의미의

float:left 를 적용시켜주면

홈페이지 메뉴들이 정상적으로 배치가 됩니다

이때 메뉴들 간격이 너무 붙어 있기 때문에

css 파일에서

.menu a{line-height: 75px; color: white; padding: 0 15px;}

padding:0 15px; 을 주어 양 옆으로 15px 씩

떨어지게 만들었습니다

그럼 이렇게 메뉴모양이 완성된 것을 볼 수 있습니다

그리고 처음에 메뉴를 만들면

글자들이 위쪽에 딱 붙어있는데요

이는 위 css 파일의 header 에서

top:0; left:0 

으로 속성을 넣어 주어서 그렇습니다

이 글자들을

메뉴 공간의 가운데에 딱 넣기 위해서는 어떻게 해야 하는지

아래에서 계속 이어갈게요~!

04. css line-height 줄간격으로 글자 가운데맞추기

 로고와 메뉴글자들을

공간의 가운데에 맞추기 위해서는

각 css 속성 안에

line-height:75px; 

을 넣어줍니다

css 파일을 보면 h1과 menu 부분에

line-height가 들어간 것을 볼 수 있습니다

그런데 여기서 왜 75px을 넣어주느냐?

바로 header에서 메뉴가 있는 공간을 

75px로 제가 설정했기 때문입니다

본래 line-height 는 줄맞춤 기능이 아니라

줄간격 기능입니다

때문에 제가 이 속성을 넣어놓은 채

float 를 css에서 빼니까 메뉴들 위아래 간격이 넓었던 사진처럼

보인 것입니다

단지 우리는 줄간격 기능을 사용해서

가운데에 맞춰 보이게 이용하는 것 뿐이랍니다^^

따라서 각자 메뉴 공간을 75px이 아닌

다른 높이로 지정하셨다면 그 숫자에 맞게 입력해 주시면 된답니다!

05. css 메뉴클릭 범위 넓히는 방법

css 속성을 이용해 메뉴클릭 범위를 넓힌다

무슨 말일까요?

위 사진에 네모가 두 개가 있는데

각자의 네모 범위가 마우스 클릭모양이 변하는 범위입니다

즉 home 부분은 글자 위아래 어디든 마우스를 갖다대도

바로 클릭해서 이동할 수 있는 반면

board 라고 쓰여진 곳은 꼭 글자부분만 클릭해야

이동이 가능한 부분인 거죠

이렇게 되면 글자 안에만 클릭해야 하기 때문에

사용자 입장에서 상당히 불편합니다

이것을 해결하기 위한 방법은 정말 간단한데요

<li> 태그가 아닌 <a> 태그에 속성들을 넣어주는 겁니다

.menu a{line-height: 75px; color: white; padding: 0 15px; display: block;}

단,

여기에서 하나 주의할 점은

<a>태그에 스타일 속성들을 넣었다고 해서

클릭범위가 바로 바뀌지는 않습니다

a태그에 속성들을 넣었음에도 불구하고

위 사진처럼 글자 부분만 클릭이 가능한데요

<a>태그에

display: block;

을 추가하면 우리가 원하는 대로 a의 태그속성을 바꿀 수 있답니다

위 빨간색 부분은 display:block이 적용되지 않았다는 것을

보실 수 있구요

연두색 부분을 보시면

display:block 이 적용되었다는 것을 알 수 있습니다

지금까지 간단하게 홈페이지 메뉴 만드는 법에 대해

알려 드렸구요~

모든 홈페이지 메뉴가 위에만 있는 것도 아니고

옆에 있는 것도 있는데요

다음 번에는 옆에 메뉴를 만들어 보는

포스팅을 해 보겠습니다

아래는 css 전체 코드니까

참고해 주실 분들은 참고해 주세요>_<

*css 전체코드*