float를 이용한 네비만드는법

웹사이트/HTML & CSS 2021. 7. 21. 18:11

float를 이용한 navigation bar 만들기

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>메뉴바 만들기</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/style.css">
</head>
<body>
  <div class="header">
    <div class="section">
      <div class="logo">
        <a href="#">LOGO</a>
      </div>
      <div class="nav">
        <ul>
          <li><a href="#">menu 1</a></li>
          <li><a href="#">menu 2</a></li>
          <li><a href="#">menu 3</a></li>
          <li><a href="#">menu 4</a></li>
        </ul>
      </div>
      <div class="profile">
        <ul>
          <li><a href="#">로그인</a></li>
          <li><a href="#">회원가입</a></li>
        </ul>
      </div>
    </div>
  </div>
</body>
</html>

css 코드

*{
  box-sizing: border-box;
  text-decoration: none;
  color: #000;
}

.header{
  position: relative;
  width: 100%;
  height: 100%;
}

.header .section{
  width: 1720px;
  border: 1px solid;
  height:100px;
  margin: 0 auto;
}

.header .logo{
  float: left;
  width: 6%;
  font-size: 36px;
  height:100%;
  margin-left: 30px;
  line-height: 2.7;
}

.header .nav{
  float: left;
  width:83%;
  height:100%;
  text-align: center;
}

.header .nav ul{
  display:inline-block;
  line-height: 6;
  height:100%;
}

.header .nav ul li{
  float: left;
  font-size: 16px;
  margin:0 15px;
}

.header .profile{
  float: right;
  height:100%;
}

.header .profile ul li{
  float: left;
  font-size: 14px;
  line-height: 6.7;
  margin: 0 30px 0 0;
}

section 클래스에 전에 inline-block 할 때랑 똑같습니다. width: 1720px height: 100px;

달라지는 건

logo, nav, profile과 이 클래스 안에 태그들의 css가 달라집니다.

logo left를 주면

.header .logo{
  float: left;
  width: 6%;
  font-size: 36px;
  height:100%;
  margin-left: 30px;
  line-height: 2.7;
}

로고 클래스 오른쪽으로 nav, profile클래스가 자리배치가 되는 것을 볼 수가 있습니다.

이제 nav도 똑같이

.header .nav{
  float: left;
  width:83%;
  height:100%;
}

width값까지 주어서 profile이 저렇게 멀리 떨어져 있는 겁니다.

여기서 이제 profile 오른쪽으로 붙이겠습니다.

.header .profile{
  float: right;
  height:100%;
}

이렇게 오른쪽으로 딱 붙었습니다.

이제 nav안에 menu1, menu2, menu3, menu4를

가로로 배치해보겠습니다.

li태그에 float left를 넣습니다.

.header .nav ul li{
  float: left;
  font-size: 16px;
  margin:0 15px;
}

이제 화면을 봐볼까요?

가로 배치가 되었습니다. 이제

가운데로 모아야 합니다.

그러기 위해서는

ul태그를 display : inline-block을 해주어야 합니다.

block을 주게 되면 nav클래스 너비만큼 차지하게 되니깐 안됩니다.

inline을 주게 되면 요소를 구성하는 태그 데이터 또는 inline요소만 포함이 됩니다.

예로 background-color: #ee3로 보여드리겠습니다.

      <div class="nav">
        <ul>
          <li><a href="#">menu 1</a></li>
          <li><a href="#">menu 2</a></li>
          <li><a href="#">menu 3</a></li>
          <li><a href="#">menu 4</a></li>
        </ul>
      </div>

.header .nav ul{
  display: inline;
  background-color: #ee3;
  height: 100%;
}

ul태그 안에 텍스트를 넣어보겠습니다.

      <div class="nav">
        <ul>
          안녕하세요
          <li><a href="#">menu 1</a></li>
          <li><a href="#">menu 2</a></li>
          <li><a href="#">menu 3</a></li>
          <li><a href="#">menu 4</a></li>
        </ul>
      </div>

css는 위에 그대로입니다.

결과를 봐볼까요?

어떤가요?? 안녕하세요에만 라인이 잡힌 것을 볼 수가 있습니다.

inline 요소는 데이터와 다른 inline 요소만 포함할 수 있으며 block요소는 포함이 안됩니다.

그러니 inline-block을 해줌으로써 inline요소 외에도 포함할 수 있게 해 주고 height를 주어 높이를 지정할 수가 있게 됩니다.

다시 돌아와서

ul 태그에 inline-block을 주고 height:100%;

line hight: 6을 주겠습니다.

.header .nav ul{
  display:inline-block;
  line-height: 6;
  height:100%;
}

이렇게 세로 가운데 정렬도 했습니다.

이제 텍스트가 가운데로 가기 위해서는

nav클래스에 text-align : center를 추가해주고서는 nav클래스는 끝입니다.

.header .nav{
  float: left;
  width:83%;
  height:100%;
  text-align: center;
}

이제 profile클래스만 하면 float navigation bar 만드는 게 끝납니다.

nav안에 li처럼 profile li에 float:left를 주겠습니다.

폰트 사이즈와 세로 가운데 정렬하기 위해 line-height도 주겠습니다.

그리로 오른쪽으로부터 30px씩 띄어 주겠습니다.

.header .profile ul li{
  float: left;
  font-size: 14px;
  line-height: 6.7;
  margin: 0 30px 0 0;
}

어떤가요? inline-block보다 더 쉽지 않나요??

다음에는 display : flex를 이용한 navigation bar를 만들어 보겠습니다.

다음 편에서 뵙겠습니다.

저작자표시 비영리 변경금지 (새창열림)

'웹사이트 > HTML & CSS' 카테고리의 다른 글

css로 드롭다운메뉴 만드는법 (0)	2021.07.25
flex를 이용한 네비만드는법 (0)	2021.07.23
inline-block를 이용한 네비만드는법 (0)	2021.07.19
웹디자인퍼블리싱 HTML & CSS (5) (0)	2021.07.17
웹디자인퍼블리싱 HTML & CSS (4) (0)	2021.07.17

ABOUT ME

엉뚱한미로 엉뚱한미로

'웹사이트 > HTML & CSS' 카테고리의 다른 글

티스토리툴바

ABOUT ME

'웹사이트 > HTML & CSS' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바