[HTML/CSS] 간단한 웹페이지 만들기 - 1 <nav>
웹페이지를 어떻게 작업을 했는지
크게 <nav>, <main>, <footer>로 나누어서 해보겠다.
이번 1편은 모든 웹사이트의 페이지 상단에 위치하며
다른 페이지로 이동을 하고 메뉴들을 나열해놓는
'네비게이션 링크'인 <nav>를 먼저 만들어 보겠다.
[HTML]
<body> 태그에 들어가기 앞서
<head> 태그에
CSS와 디자인을 위해 Font와 Icon을 사용할 수 있도록
각각 외부 소스를 연결해놓았다.
(Icon은 'fontawesome'을 사용하였고, font는 'googlefont'를 사용하였다)
그리고 이제 사이트의 로고 및 이름과 메뉴들을 만들어보기 위해 <body>로 들어가보자.
우선 상단은 맨 처음에 말했던 바와 같이 일반적인 웹사이트처럼
다른 페이지로 연결이 되는 네비게이션 역할과 메뉴들을 설정해 놓는
<nav>태그를 사용하였다
<nav>태그 안에는 <div>태그를 2개 사용하여
사이트의 로고 및 이름부분과 메뉴부분들로 나누어 놓았고,
CSS에서 불러오기 위해 각각의 class를 설정해 주자.
일반 웹사이트처럼 다른 페이지로 연결하기 위해 <a>태그를 사용하였다.
메뉴는 <ul>태그 안에 <li>태그를 사용하여 나열했고
SIGN UP은 별도의 추가 디자인을 위해
따로 클래스를 만들어 배치해 보았다.
[CSS]
<body>
html의 전체적인 부분을 담당하는
<body>태그에 margin과 padding에 0값을 주어 빈공간을 없애고
전체적으로 font가 적용되도록 하였다.
<a>태그에는 기본적으로 데코레이션 라인이 적용되기 때문에
'none'을 설정하였고, 웹페이지 색상에 맞게 글씨도 설정하였다.
<nav>
<nav>태그에는 flex를 사용하였고,
로고와 메뉴를 양쪽으로 배치하기 위해
space-between을 사용하였다.
<nav>에 border-bottom-left-radius를 사용해서
왼쪽 아래에 border 부분만 radius를 적용하여
디자인적인 부분을 살려보았다.
nav_logo 클래스에도
로고와 이름을 가로로 맞추기 위해
flex를 사용하였다.
그리고 'align-items:baseline;'을 사용해서
서로의 기준선을 맞춰 주었다.
추가로 사이트 이름에만 별도로 다른 font를
적용해주었고, 전체적으로 각각
크기와 색상을 페이지 분위기에
맞게 적용해주었다.
메뉴는 <ul>과 <li>태그를 사용했기 때문에
세로가 아닌 가로로 정렬되게 하기 위해
flex를 사용하였다.
(flex-direction을 따로 설정을 안해놓았을 경우엔
자동으로 'row'가 적용이 된다.
메뉴에 <ul>에 속해있는 <li>태그들의
리스트 스타일을 안보이게 하기 위해
list-style-type은 none으로 적용하였다.
그리고 아래의 영상처럼 마우스 포인트를
올려놓으면 포인팅효과가 적용되도록
각 <div>태그안에 있는 <a>태그에
'hover'를 사용하였다.
1편은 간단하게 CSS와 icon & font를 HTML에 연결한 부분과
네비게이션 링크를 담당하는 <nav>를 작성한 HTML과 CSS 코드를 소개했고
부가적으로 포인팅 효과를 주는 hover를 사용한 것을 보여주었다.
전체적인 부분을 한 번에 소개해보려 했지만
페이지가 혹시나 복잡하고 어지럽지 않을까 싶어
나누어보게 되었다.
다음은 페이지에 정보와 내용들이 담겨있는 <main> 부분을 소개해보도록 하겠다.
