국비지원 JAVA 풀스택 과정/HTML+CSS3

[HTML+CSS3] 플랙스 박스를 사용해 메뉴 구성 해보기

ODaram 2022. 10. 6. 16:13
플랙스 박스를 사용해 메뉴 구성 해보기

 

 HTML

<!DOCTYPE html>
<html lang="ko">
<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>네비게이션바(냅바:header) Navigation Bar</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css"> <!-- font-awesome : 아이콘 적용-->
  <link rel="stylesheet" href="css/flexbox.css">

  
</head>
<body>
  <header>
      <h1>bakery</h1><!--로고-->

      <nav> <!--메인 메뉴-->
        <ul>
          <li><a href="#">services</a></li>
            <!-- <ul>
              <li><a href="#">submenu01</a></li>
              <li><a href="#">submenu02</a></li>
              <li><a href="#">submenu03</a></li>
            </ul> --> <!-- 서브 메뉴 구성 시 ul을 감싸야한다.-->
          <li><a href="#">products</a></li>
          <li><a href="#">contact</a></li>
          <li><a href="#">about</a></li>
        </ul>
      </nav>

      <ul class="topmenu">
        <li>
          <div class="search-box">
            <input type="search" name="search" placeholder="검색" class="search-txt">
            <a href="#" class="search-btn"><i class="fas fa-search"></i></a>
          </div>
        </li>
        <li><a href="#"><i class="fab fa-facebook-square"></i></a></li>
        <!--fa-brands : 6버전
             fab-fa-facebook-square : 5버전-->
        <li><a href="#"><i class="fab fa-twitter-square"></i></a></li>
      </ul>
  </header>
</body>
</html>

 

  CSS : flexbox.css

@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Dongle&family=Noto+Sans+KR:wght@300;500&display=swap');


/* reset */
* {margin:0; padding:0; box-sizing: border-box;}
body {
  font-family: 'Dongle', sans-serif; font-size:20px; color:#333;
  background:#FFF; /*배경 지정 전 기본 값은 투명이기 때문에 흰색으로 지정해줌*/
}
ul li {list-style:none; float:left;}
a {display:block; color:brown; text-decoration:none;
    /*여백을 지정할 때는 margin으로 지정한다 (margin은 정확한 위치에 마우스를 갖다대야 활성화됨*/  
    /*텍스트를 감싸는 박스는 여백을 padding으로 지정한다. : 메뉴의 영역이 커진다. */
}
a:hover {color:lightgoldenrodyellow;}
h1,a {text-transform:uppercase;}


/* heaer : 시멘틱 태그*/
header {
  /* 로고, 메인메뉴, 탑메뉴*/
  display:flex; /*자식 요소만 정렬(=items) , 손자 X*/
  justify-content: space-between; /*space-between:내가 값을 줘서 벌어지게 할 수 있음*/
  align-items:center;
  height:75px; padding: 50px 50px; color:brown;/*하이퍼링크 태그(a)가 너무 강하기 때문에 bakery만 적용됨  > a 링크에 color while 를 줘야함*/
  background:sandybrown;
}


nav > ul {
  display:flex; justify-content: space-between; align-items:center;
  width:1000px; 
  font-size:24px;
  /* background:black; */
}


/* topmenu */
ul.topmen {height:35px; background:pink;}
ul.topmenu li {position:relative;}
ul.topmenu  li a{padding:0 10px;}
ul.topmenu li > a {font-size:23px;}  
/*li > a : 중간에 아무것도 없이 바로 a 태그가 있는 곳에 적용 시키기*/
ul.topmenu li > a:hover {color:blue;}
.search-box{
  position:absolute; right:0; /*li 박스((부모)의 오른쪽으로 간다.*/ top:5px;
  /*width:35px;*/ height:35px; margin-right:10px; background:sandybrown;
  border-radius:30px;
}
.search-txt {
  float:left; width:0; padding:0;
  color:#FFF; line-height:30px;
  background:none; border:none; outline:none;
  transition:all 0.4s ease-in;
}
.search-btn {
  display:flex; justify-content: center; align-items:center;
  float:right; position:absolute; right:0; top:0;
  width:30px; height:30px; margin:2.5px; padding:0;
  color:lightgoldenrodyellow;
  background:brown; border-radius:50%;
  transition:all 0.4 ease-in 0.2s;
}
.search-btn i {font-size : 18px;}

.fab {padding-top:12px;}

.search-box:hover {background:brown;}
.search-box:hover .search-txt {width:350px; padding:5px 0 0 10px;}
.search-box:hover .search-btn {background:brown; }

'국비지원 JAVA 풀스택 과정 > HTML+CSS3' 카테고리의 다른 글

[HTML+CSS3] 레이아웃 예제  (0) 2022.10.07
[HTML+CSS3] 파비콘  (0) 2022.10.07
[HTML+CSS3] 미디어쿼리(2)  (0) 2022.10.06
[HTML+CSS3] 미디어쿼리(1)  (0) 2022.10.06
[HTML+CSS3] 애니메이션(2)  (0) 2022.10.06

'국비지원 JAVA 풀스택 과정/HTML+CSS3'의 다른글

  • 현재글[HTML+CSS3] 플랙스 박스를 사용해 메뉴 구성 해보기

관련글

티스토리툴바