Look and Find what i've done.
Front

[반응형헤더만들기] html, css

쥬_0730 2020. 11. 27. 15:33

 

Wide Screen
Small Screen 

어려웠던 부분이 몇 가지 있었다. 

1. Small Screen에서 로고 정렬

아무리 display: flex justify-content: flex-start를 해도 안 먹었다.

이런 문제는 Small Screen이 아니라 wide screen에서 선언해준 것이 그대로 덮어지면서 발생한 오류였다.

Wide Screen에서 선언한 것은 재정의하지 않는 이상 속성이 그대로 넘어오기 때문에 주의해야한다. 

header {
  background-color: var(--color-background);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--header-padding);
}

이 코드에서 align-items:center를 빼니까 작동했다. 

 

2. 클릭 부분을 늘리기 위한 a 사이즈 조절

small screen의 경우에는 상위 element의 width를 정해주고

display: block

간단하게 위의 코드를 넣어주면 된다.

하지만 이 경우에도 wide screen의 경우 꽤 까다로웠다. 

mobile의 경우에는 width가 기준이 되는데 wide screen의 경우 height를 기준으로 해야 사용자가 편리하기 때문에

(사용자 클릭 범위가 넓어짐)

wide screen은 height를 기준으로 넣어주고 text의 경우 span tag로 감싸 높이의 중간으로 오게 하였다.

.menu ul {
  display: flex;
  height: 100%;
}
.menu li a {
  display: block;
  height: 100%;
}
.menu li a span {
  display: block;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

그러나 Small Screen의 경우에는 span이 block일 필요가 없기 때문에 inline으로 바꿔준다.

 .menu li a span {
    display: inline;
  }

3. Small Screen에서 메뉴 선택 시 색깔 변화가 가로 100%가 되도록 하는 것.

Wide Screen에서는

.menu li:hover {
  background-color: orange;
}

li가 hover 될 때 li의 백그라운드 색깔만 바꿔주면 된다.

그러나 small screen에서는 전체 컨테이너의 가로가 화면에 꽉 차게 설정되어 있지 않았기 때문에

width를 100%로 만들줘야지 화면에 차게 만들어진다.

사실

<ul class= "menu">
           <li><a href="#">Bookings</a></li>
           <li><a href="#">Weddings</a></li>
           <li><a href="#">FAQ</a></li>
           <li><a href="#">Bookings</a></li>
          </ul>

이렇게 메뉴를 만들어주면 편했을 텐데

nav tag를 꼭 메뉴에 넣고 싶어서 css를 할 때 좀 복잡해졌다.

li tag를 width 100%로 해줘야할 뿐만 아니라

  .menu li {
    margin-right: 0;
    margin-bottom: 0.5em;
    width: 100%;
    text-align: center;
  }

ul tag도 100%로 해줘야했다.

.menu ul {
    flex-direction: column;
    width: 100%;
  }

 

전체코드

<!DOCTYPE html>
<html lang="ko" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Responsive Header</title>
    <link rel="stylesheet" href="css/default.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,600;1,700&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/bdf3223b68.js" crossorigin="anonymous"></script>
    <script async src= "./main.js"></script>
  </head>
  <body>
      <header>
          <div class= "logo">
            <i class="fas fa-baseball-ball"></i>
            <h1><a href="">Baseball</a></h1>
          </div>
          <nav class= "menu">
            <ul>
              <li><a href="#"><span>Bookings</span></a></li>
              <li><a href="#"><span>Weddings</span></a></li>
              <li><a href="#"><span>FAQ</span></a></li>
              <li><a href="#"><span>Bookings</span></a></li>
            </ul>
          </nav>
          <nav class= "spot">
            <li><a href=""><i class="fab fa-twitter"></i></a></li>
            <li><a href=""><i class="fab fa-facebook-f"></i></a></li>
          </nav>
          <a href="#" class= "menubtn">
            <i class="fas fa-bars"></i>
          </a>
      </header>
  </body>
</html>
:root {
  --color-background: rgb(75, 80, 100);
  --menu-padding: 4px 4px;
  --logo-margin-right: 2px;
  --header-padding: 0.7em;
  --border-radius: 2px;
  --li-margin: 1em;
  --menubtn-top: 16px;
  --menubtn-right: 10px;
}

header {
  background-color: var(--color-background);
  display: flex;
  justify-content: space-between;
  padding: var(--header-padding);
}
body {
  font-family: 'Open Sans', sans-serif;
}
header a,
li {
  color: white;
}
.logo i {
  margin-right: var(--logo-margin-right);
  color: orange;
}
.menu ul {
  display: flex;
  height: 100%;
}
.menu li,
.spot li {
  list-style-type: none;
  box-sizing: border-box;
  margin-right: var(--li-margin);
}
.menu li:last-child {
  margin-right: 0;
}
.menu li {
  padding: 0 0.5em 0;
  border-radius: var(--border-radius);
}
.menu li a {
  display: block;
  height: 100%;
}
.menu li a span {
  display: block;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.menu li:hover {
  background-color: orange;
}
.logo,
.menu,
.spot {
  display: flex;
  justify-content: center;
  align-items: center;
}
.menubtn {
  display: none;
}

@media screen and (max-width: 720px) {
  header {
    flex-direction: column;
  }
  .logo {
    justify-content: flex-start;
  }
  .menu {
    display: none;
  }
  .menu ul {
    flex-direction: column;
    width: 100%;
  }
  .spot {
    display: none;
  }
  .spot li:last-child {
    margin-right: 0;
  }
  .menu.active,
  .spot.active {
    display: flex;
  }
  .menu li {
    margin-right: 0;
    margin-bottom: 0.5em;
    width: 100%;
    text-align: center;
  }
  .menu li a span {
    display: inline;
  }

  .menubtn {
    display: block;
    position: absolute;
    top: var(--menubtn-top);
    right: var(--menubtn-right);
  }
  .menubtn i {
    color: orange;
  }
}

 

도움이 되는 사이트

기본 아이콘을 찾는 데에 유용한 사이트

 

Font Awesome

The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.

fontawesome.com

폰트는 google fonts에서 검색해서 사용하면 된다.

 

Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

 

위 영상을 보고 좀 더 발전시켜 만들어봤다. 

저작자표시 비영리 변경금지

'Front' 카테고리의 다른 글

Webpack과 Babel 기본 설정(1)- Create-react-app를 사용하지 않는다면!  (2) 2021.01.01
React Framework를 사용하는 이유  (0) 2020.12.13
[온라인쇼핑몰미니게임] css  (0) 2020.11.24
[온라인쇼핑몰미니게임] 마크업(html)  (0) 2020.11.24
[JSON] 서버통신의 시작  (0) 2020.11.23

'Front' Related Articles

티스토리툴바