개발새발

[기업형 홈페이지] html+css로 헤더 간단하게 만들어보기

완성된 모습은 아래 링크에서 확인해보세요

http://dev.webbyist.com/publishing/test1/index.php

 

헤더 스타일

 

dev.webbyist.com

 

로고는 좌측 메뉴는 우측에 나열이 되는 형태로 만들어볼게요

먼저 아래는 스타일링이 전혀 안된 헤더 요소입니다

<body>

    <header>
    	<h1>회사 홈페이지 헤더 메뉴</h1>
    	<img src="assets/image/logo.png" title="회사 로고"/>
    	<nav>
    		<ul>
    			<li><a href="#">홈</a></li>
    			<li><a href="#">About</a></li>
    			<li><a href="#">Corporation</a></li>
    			<li><a href="#">Business</a></li>
    			<li><a href="#">Contact Us</a></li>
    		</ul>
    	</nav>
    </header>

</body>

찍어보면 아래처럼 나오는데요

a태그에 파란색+라인이 들어가있네요 없앱시다

아래 css코드를 추가하면 되겠죵

a:link, a:visited, a:hover, a:active {color:#333;)

그다음 안에 있는 로고 및 메뉴요소들을 좌측, 우측으로 나열되게 꾸며볼게요

header {display: flex;justify-content: space-between;}
header h1 {position:absolute;left:-2000px;}

헤더 요소에 display:flex를 주게되면 좌우로 나열이 되게 되구요 justify-content:space-between을 주게 되면 첫번째 요소와 마지막 요소가 좌측 끝, 우측 끝으로 붙게 됩니다.  확인해볼게요

 

 

이미지를 보게 되면 좌측에 로고 우측에 메뉴가 붙은 게 보이죠? 그런데 너무 붙어져 있네요

헤더에 div.container 요소를 만들고 양쪽 사이즈를 좀 줄여볼게요

.container {width:1270px;margin:0 auto;}
<header>
    	<div class="container">
	    	<h1>회사 홈페이지 헤더 메뉴</h1>
	    	<img src="assets/image/logo.png" title="회사 로고"/>
	    	<nav>
	    		<ul>
	    			<li><a href="#">홈</a></li>
	    			<li><a href="#">About</a></li>
	    			<li><a href="#">Corporation</a></li>
	    			<li><a href="#">Business</a></li>
	    			<li><a href="#">Contact Us</a></li>
	    		</ul>
	    	</nav>
    	</div>
    </header>

구분이 안갈 수 있어서 보더에 라인을 좀 넣어봤어요 클릭해서 보시면 차이가 좀 보이실까요?

 

이제 메뉴도 수평으로 놓으게 해볼게요 아까처럼 display: flex속성을 이용하겠습니다

header nav ul {display:flex;text-align: center;}
header nav ul li {padding: 20px 10px;width: 88px;}

header nav ul에 display:flex를 줘서 수평으로 나열을 한 뒤 기본적으로 텍스트는 좌측 정렬이기 때문에 중앙 정렬을 해줍니다.

로고가 좀 큰 것 같아서 로고 크기를 190px정도로 낮춰주구요 아래 css 속성을 추가해서 폰트를 굵게, 사이즈를 좀 더 크게 해줍니다.

이미지를 기준으로 위아래 패딩을 11px 정도로 넣어줘서 전체적으로 상하 중앙 정렬로 해주었습니다

rem은 html 기본으로 설정한 폰트사이즈 16픽셀을 기준으로 rem으로 환산했습니다(ex: 패딩 11px을 rem환산시 16 나누기 11 = rem값)

header img {width:11.875rem;padding:0.75rem 0;}
header nav ul li a {font-weight: bold;font-size:1.0625rem;}

메뉴가 엑티브 됐을 때 색상도 넣고 밑줄도 넣어볼게요

li태그에 active 클래스를 넣어주고 active인 상태에서 a요소에 색상 및 밑줄을 그어보겠습니다

기존에 css를 약간 수정할게요

//li에 상하 패딩을 0으로 한 뒤 a요소에는 line-height값을 헤더 높이만큼 넣어줍니다
header nav ul li {padding: 0 10px;width: 100px;}
//a에 after를 써줌으로써 position: relative 속성을 주고 line-height에 헤더 높이만큼 넣어줍니다
header nav ul li a {position:relative;display:inline-block;line-height:5rem;font-weight: bold;font-size:1.0625rem;}
header nav ul li.active a {color: #22aee5;}
//after를 써서 가상요소를 만들어준 뒤 a태그를 기준으로 가로 값을 가질 수 있게 해줍니다.
header nav ul li.active a:after {content:"";position:absolute;width:100%;height:2px;background-color:#22aee5;left:0;bottom:0;}
<header>
    	<div class="container">
	    	<h1>회사 홈페이지 헤더 메뉴</h1>
	    	<img src="assets/image/logo.png" title="회사 로고"/>
	    	<nav>
	    		<ul>
	    			<li class="active"><a href="#">홈</a></li>
	    			<li><a href="#">About</a></li>
	    			<li><a href="#">Corporation</a></li>
	    			<li><a href="#">Business</a></li>
	    			<li><a href="#">Contact Us</a></li>
	    		</ul>
	    	</nav>
    	</div>
    </header>

위 이미지처럼 만들어졌구요 이제 마우스가 호버 됐을 때도 같은 효과가 나게끔 해주겠습니다

간단하게 active일때 정의된 값에 hover요소를 추가해주면 되겠죠?

header nav ul li.active a,
header nav ul li:hover a {color: var(--blueColor);}

header nav ul li.active a:after,
header nav ul li:hover a:after {content:"";position:absolute;width:100%;height:2px;background-color:var(--blueColor);left:0;bottom:0;}

 

이렇게 마무리하기엔  마우스 호버됐을 때 부드럽게 애니메이션이 되게 해주면 좀 더 이쁘겠네요

애니메이션 효과를 넣어볼게요

a:after에 opacity:0; transition: all .3s ease-in-out요소를 추가해서 a에 0.3초간의 애니메이션 효과 및 보이지 않은 상태로 만들어줍니다

그 다음 active일때, 마우스 호버가 됐을 때 opacity:1을 넣어주면 0.3초간 서서히 색이 보이는 효과가 나타납니다

//a:after에 opacity:0을 주고 보이지 않은 상태에서 transition애니메이션 속성을 넣어줍니다
header nav ul li a:after {opacity:0;content:"";position:absolute;width:100%;height:2px;background-color:#22aee5;left:0;bottom:0;transition:all 0.3s ease-in-out;}
//li.active일때, li에 마우스 호버가 됐을 때 a:after 요소에 opacity:1을 줌으로써 0.3초간 서서히 보이게 되는 에니메이션 효과입니다
header nav ul li.active a:after,
header nav ul li:hover a:after {opacity:1;}

스크롤을 했을 때 헤더가 고정되게 하려면 position:fixed를 준 뒤 가로값을 100%로 채워주고 top:0; left:0으로 위치를 맞춰줍니다. 백그라운드 칼라는 화이트 색상에 스크롤했을 때 고정된다는 느낌을 주기 위해 약간의 투명을 넣어봤어요

header {position:fixed;width:100%;top:0;left:0;background:rgb(255 255 255 / 86%);}

이렇게 일단 헤더를 완성하였고 이후에 조금씩 더 완성해나갈 예정입니다. 여기까지 완성된 html 코듣 및 css 코드 남겨놓을게요

 

<html>

<header>
    	<div class="container">
	    	<h1>회사 홈페이지 헤더 메뉴</h1>
	    	<img src="assets/image/logo.png" title="회사 로고"/>
	    	<nav>
	    		<ul>
	    			<li class="active"><a href="#">홈</a></li>
	    			<li><a href="#">About</a></li>
	    			<li><a href="#">Corporation</a></li>
	    			<li><a href="#">Business</a></li>
	    			<li><a href="#">Contact Us</a></li>
	    		</ul>
	    	</nav>
    	</div>
    </header>

<css>

@import url(https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@1.0/nanumsquare.css);

:root {
	/** color **/
	--baseColor : #333;
	--blueColor : #22aee5;
	/** size **/
	--baseContainer : 79.375rem; /*1270px*/
	/** padding **/
	
}
html {font-size:16px;}
body {font-size: 1rem;font-family: 'NanumSquare', sans-serif;color:var(--baseColor);}
a:link, a:visited, a:hover, a:active {color:var(--baseColor);}

.container {width:var(--baseContainer);margin:0 auto;}
header {position:fixed;width:100%;top:0;left:0;background:rgb(255 255 255 / 86%);}
header img {width:11.875rem;padding:0.75rem 0;}
header > div {display: flex;justify-content: space-between;align-items: center;}
header h1 {position:absolute;left:-2000px;}
header nav ul {display:flex;text-align: center;}
header nav ul li {padding: 0 10px;width: 100px;}
header nav ul li a {position:relative;display:inline-block;line-height:5rem;font-weight: bold;font-size:1.0625rem;}
header nav ul li.active a,
header nav ul li:hover a {color: var(--blueColor);}
header nav ul li a:after {opacity:0;content:"";position:absolute;width:100%;height:2px;background-color:var(--blueColor);left:0;bottom:0;transition:all 0.3s ease-in-out;}
header nav ul li.active a:after,
header nav ul li:hover a:after {opacity:1;}
저작자표시

'홈페이지 제작 > html, css' 카테고리의 다른 글

원페이지 제이쿼리 네비게이션 스크롤 이벤트  (0) 2020.01.16
스크롤 애니메이션 aos.js  (0) 2020.01.14
홈페이지 제작 - 슬라이드 안에 슬라이드 중첩  (0) 2019.12.28
홈페이지 제작 - 헤더 디자인 변경  (0) 2019.12.28

'홈페이지 제작/html, css' 관련 글

더 보기

원페이지 제이쿼리 네비게이션 스크롤 이벤트

  • 2020.01.16
더 읽기

스크롤 애니메이션 aos.js

  • 2020.01.14
더 읽기

홈페이지 제작 - 슬라이드 안에 슬라이드 중첩

  • 2019.12.28
더 읽기

홈페이지 제작 - 헤더 디자인 변경

  • 2019.12.28
더 읽기

댓글

Copyright © 개발새발 All Rights Reserved

Designed by JB FACTORY

티스토리툴바