🦁_21.11.15 TIL

Bori·2021년 11월 15일

멋쟁이사자처럼_프론트엔드 스쿨 1기

목록 보기

15/60

21년 11월 15일

의미없는 개행을 위한 <br> 사용

개발자마다 의견이 다르다.

의견 1 : 단순히 디자인을 위한 <br> 사용은 지양한다.

의견 2 : 의미없는 개행을 위한 것이라면 의미없는 태그를 사용해도 무방하다.

디즈니 플러스 홈페이지 구경하기

flex로 구현

외국 기업은float보다 flex를 더 많이 사용하나요?
=> 확인 필요!
=> 외국 기업은 번역 작업 때문에 float을 사용할 경우, 높이 값이나 텍스트 길이 등 다른 언어로 변경 시 UI가 깨지기 쉬울 것 같아서 flex를 많이 사용할 것 같다는 의견이 있었다.

📝 CSS

📎 font 적용 방법

참고링크

웹 폰트 최적화 하기

웹 폰트 사용과 최적화의 최근 동향

Why designers should move from px to rem — and how to do that in Figma

📎 flex 보충

21.11.08-TIL 참고

📎 Holy Grail Layout

성배(holy grail)를 찾기 위해 많은 사람들이 노력했던 것처럼 Holy Grail Layout을 구현하기 위해 많은 사람이 노력했지만 완벽한 결과를 찾기 못했다는 비유

`flex`를 이용한 Holy Grail Layout

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>Holy Grail</title>
    <link
      href="https://fonts.googleapis.com/css2?family=Material+Icons+Outlined"
      rel="stylesheet"
    />

    <link rel="stylesheet" href="../reset.css" />
    <link rel="stylesheet" href="012.css" />
  </head>
  <body>
    <header>
      <h2 class="area-name">header</h2>
      <a href="#" class="logo">LOGO</a>
      <nav>
        <ul class="menu">
          <li><a href="#" class="link-menu">MENU1</a></li>
          <li><a href="#" class="link-menu">MENU2</a></li>
          <li><a href="#" class="link-menu">MENU3</a></li>
          <li><a href="#" class="link-menu">MENU4</a></li>
        </ul>
      </nav>
      <button class="btn-toggle">
        <span class="material-icons-outlined"> menu </span>
      </button>
    </header>
    <main>
      <section>
        <h2 class="area-name">section</h2>
        <article><h2 class="area-name">article</h2></article>
        <article><h2 class="area-name">article</h2></article>
        <article><h2 class="area-name">article</h2></article>
      </section>
      <aside>
        <h2 class="area-name">aside</h2>
      </aside>
    </main>
    <footer>
      <h2 class="area-name">footer</h2>
    </footer>
  </body>
</html>

CSS

@charset "utf-8";

body {
  display: flex;
  flex-direction: column;
}

header,
section,
aside,
footer {
  position: relative;
  padding: 30px 0;
}

.area-name {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  color: rgba(0, 0, 0, 0.5);
  font-size: 40px;
  font-weight: bold;
}

/* header */
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: khaki;
}

.logo {
  padding: 0 30px;
  font-size: 20px;
  font-weight: bold;
}

.menu {
  display: flex;
  padding-right: 20px;
}

.menu li {
  margin-left: 10px;
}

.menu .link-menu {
  padding: 5px 15px;
  border-radius: 30px;
  background-color: rgba(255, 255, 255, 0.6);
  font-weight: bold;
}

.btn-toggle {
  display: none;
  margin-right: 30px;
  padding: 10px 10px 8px;
  border: 0;
  background: none;
}

/* main */
main {
  display: flex;
  flex-wrap: wrap;
  min-height: 500px;
}

/* main > section */
section {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  flex: 4;
  padding: 30px;
  background-color: lemonchiffon;
}

article {
  position: relative;
  width: 48%;
  background-color: lightgreen;
}

article:nth-of-type(1) {
  width: 100%;
}

article + article {
  margin-top: 4%;
}

/* main > aside */
aside {
  flex: 1;
  background-color: lavender;
}

/* footer */
footer {
  min-height: 50px;
  background-color: lightcoral;
}

@media screen and (max-width: 800px) {
  .menu {
    display: none;
  }

  .btn-toggle {
    display: block;
  }

  main {
    flex-direction: column;
  }
  section {
    flex: 1;
  }

  aside {
    flex: 1;
  }
}