Portfolio

문제) flex box로만 해당 레이아웃을 만들어주세요! (border: 1px #000 solid) | 시간 40분?[송이][윤]

문제) flex box로만 해당 레이아웃을 만들어주세요! (border: 1px #000 solid) | 시간 40분?

정답

border: 10px double #88aa00; outline: 10px dashed #00aa00; box-shadow: 0 0 0 10px #cccc00;

[송이]

구현

코드


// html
<!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">
  <link rel="stylesheet" href="./style.css">
  <title>Flex Box</title>
</head>
<style>
  html, body {
    width: 100%;
    height: 100%;
    background-color: #f5f5f5;
  }
</style>
<body>
  <div id="frame">
    <div class="element">header</div>
    <div id="container">
      <div class="element" id="nav">nav</div>
      <div class="element" id="content">content</div>
    </div>
    <div class="element">footer</div>
  </div>
</body>
</html>


//css
#frame {
  width: 70%;
  height: 100%;
  margin: 0 auto;
}

#container {
  display: flex;
  height: 240px;
  background-color: #ffffff;
  border: 1px #000 solid;
  padding: 0 10px;
}

#nav {
  width: 30%;
}

#nav, #content {
  height: 200px;
  margin: 24px 5px;
}

.element {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  border: 1px #000 solid;
  background-color: #ffffff;

  margin: 24px 0;
  height: 60px;
}

[윤]

구현

1차 구현


<body>
    <div class="frame">
      <header class="header">header</header>
      <section class="container">
        <nav class="nav">nav</nav>
        <div class="content">content</div>
      </section>
      <footer class="footer">footer</footer>
    </div>
  </body>


body {
  margin: 0;
}

.frame {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100vh;
  padding: 30px;
  background-color: gray;
}

/* ---------------header----------------- */

.header {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #000;
  background-color: #fff;
}

/* ---------------container----------------- */

.container {
  flex: 4;
  display: flex;
  padding: 30px;
  border: 1px solid #000;
  margin: 30px 0;
  background-color: #fff;
}

.container .nav {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #000;
  margin-right: 10px;
}

.container .content {
  flex: 3;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #000;
}

/* ---------------footer ----------------- */

.footer {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #000;
  background-color: #fff;
}

문제점

중복 코드를 클래스로 빼면 깔끔해진다

스크롤이 생긴 이유

frame에 box-sizing:border-box를 안해줘서 padding이 바깥으로 생겼기 때문

flex-grow는 남은 공간에 대한 비율이기 때문에 margin을 줘도 부모의 크기를 넘어서지 않는다

리팩토링

스타일과 관련 되지 않은 경우 선택자를 속성선택자로 바꾸면 더 좋을 것 같다


<!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" />
    <link rel="stylesheet" href="./css/style4.css" />
    <title>flex</title>
  </head>
  <body>
    <div class="frame">
      <header class="header box-style text-center">header</header>
      <section class="container box-style">
        <nav class="nav box-style text-center">nav</nav>
        <div class="content box-style text-center">content</div>
      </section>
      <footer class="footer box-style text-center">footer</footer>
    </div>
  </body>
</html>


* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.text-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.box-style {
  border: 1px solid #000;
  background-color: #fff;
}

/* ------------------------------------------------- */

.frame {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100vh;
  padding: 30px;
  background-color: gray;
}

.header {
  flex: 1;
}

.container {
  flex: 4;
  display: flex;
  padding: 30px;
  margin: 30px 0;
}

.container .nav {
  flex: 1;
  margin-right: 10px;
}

.container .content {
  flex: 3;
}

.footer {
  flex: 1;
}

[6. 76 - CSS Rendering 6회차]

문제) flex box로만 해당 레이아웃을 만들어주세요! (border: 1px #000 solid) | 시간 40분?

[송이]

코드

[윤]