지난 글에 이어서 웹사이트를 만들어보도록 하겠다.
우선 navigation을 만들도록 하겠다.
navigation은 주로 홈페이지 상위에 위치해있고 홈페이지 로고나 페이지를 이동할 수 있는 버튼들이 있는 구역이다.
요즘 홈페이지는 navigation를 만들지 않는 사이트도 있지만 필자의 경우, 만들어보려고 한다.
깃헙을 예로 들면 다음이 navigation 부분이다.
navigator에는 로고와 자동번호 받기 반자동번호 받기를 넣을 것이다.
다음과 같이 Navigator를 구성하려고 한다.
오늘의 번호를 누르면 main page로 이동하고, 자동번호를 누르면 자동번호 받기 page, 반자동번호를 누르면 반자동번호 받기 page로 이동할 계획이다.
기능이 얼마 없기 때문에 html소스는 간단하다.
<body>
<nav class="navigator">
<div class="nav_area">
<a class="icon" href="/">
<i class="text">오늘의 번호</i>
</a>
<div class="nav_group">
<a class="nav_link" href="/auto/">자동번호</a>
<a class="nav_link" href="/semiauto/">반자동번호</a>
</div>
</div>
</nav>
</body>html 소스에서 class를 설정한 이유는 무엇일까
바로 css때문이다. css가 없는 html 소스를 실행하면 브라우저에 어떻게 나올까?
웹 페이지가 이렇게 생기면 사용자들이 사용을 할까?
우리는 css를 이용해서 웹 페이지를 꾸며야 한다.
<head>
<title>오늘의 번호 </title>
<meta charset="utf-8">
<meta name="description" content="오늘의 번호, 무료 로또번호 생성기입니다.">
<meta property="og:title" content="오늘의 번호"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="https://dev-guardy.github.io/lotto/"/>
<meta property="og:description" content="오늘의 번호, 무료 로또 번호 생성기입니다. 모두 대박나세요!"/>
<link rel="stylesheet" type="text/css" href="style.css">
</head>head 부분에 style.css를 link로 참조한다.
그 다음, style.css 파일을 다음과 같이 작성한다.
.navigator{
position: relative;
width: 100%;
display: block;
height: 70px;
background-color: #00a4e4 !important;
flex-flow: row nowrap;
}
.nav_area{
float: left;
padding-top: 20px;
padding-bottom: 20px;
}
.icon{
float: left;
}
.text{
font-weight: bold;
font-style: normal;
margin-left: 45px;
display: inline-block;
color:white;
text-decoration: none;
font-size: 20px;
}
.nav_group{
margin-left: 30px;
float: right;
}
.nav_link{
display: inline-block;
color:white;
text-decoration: none;
font-size: 20px;
}
.nav_group [class^=nav_link]:before{
content: '';
display: inline-block;
width: 2px;
height: 30px;
margin-left: 15px;
margin-right: 15px;
background-color: white;
vertical-align: top;
}
이렇게 작성하고 나면, 위의 navigator를 구성한 페이지가 완성 된다.
다음 글에서는, footer를 구성할 예정이다.
footer는 웹페이지의 하단에 위치해있으며 주로 웹페이지의 개발자 혹은 회사에 대한 정보를 나타낸다.
css에 대한 이해가 힘든 분은 댓글로 남겨주시면 설명드리겠습니다.'
'WEB > 로또번호 생성 웹사이트 만들기' 카테고리의 다른 글
| 로또번호 생성 웹사이트 무료로 만들기 6 (0) | 2020.07.17 |
|---|---|
| 로또번호 생성 웹사이트 무료로 만들기 5 (0) | 2020.07.16 |
| 로또번호 생성 웹사이트 무료로 만들기 4 (0) | 2020.07.15 |
| 로또번호 생성 웹사이트 무료로 만들기 3 (0) | 2020.07.14 |
| 로또번호 생성 웹사이트 무료로 만들기 1 (0) | 2020.07.12 |
