S4) Unit 2. [실습] 반응형 웹 구현하기

📣  반응형 웹 구현하기

✔️ 클론 페이지 : http://www.csszengarden.com/

CSS Zen Garden: The Beauty of CSS Design

➰ 페어분이 미리 찾아주셔서 클론하기로 했당
➰ 큰 화면에서는 메뉴바가 오른쪽에 있고 작은 화면에서는 Footer 밑으로 내려간다.

---

📣  구현 코드

1️⃣ App.js

const Wrapper = styled.div`
  // PC : 1200px 이상 :: 1200px 이상 적용되는 css
  @media only screen and (min-width: ${BREAK_POINT_PC}px) {
    width: 60%;
  }
`

const AppBox = styled.div`
  // PC : 1200px 이상 :: 1200px 이상 적용되는 css
  @media only screen and (min-width: ${BREAK_POINT_PC}px) {
    display: flex;
  }
`

function App() {
  // const [footerH, setFooterH] = useState(0);
  return (
    <AppBox>
      <Wrapper>
        <Routes>
          <Route path="/" element={<Main />} />
        </Routes>
        <Footer/>
      </Wrapper>
      <Nav />
    </AppBox>
  );
}

export default App;

➰ Main이랑 Footer를 하나로 묶어서 크기가 커지면 display를 주고, 그 밑에 Nav를 배치했다.
➰ display를 줬기 때문에 창 크기가 커지면 Nav는 오른쪽으로 붙게되고, 창이 작으면 원래대로 아래에 배치된다.
➰ 창 크기가 커졌을 때 width를 60%로 해서 Nav가 오른쪽으로 올 수 있는 자리를 만든다.
 
2️⃣ Nav.js

import styled from 'styled-components';
import '../App.css';

const BREAK_POINT_PC = 1200;

const NavBox = styled.ul`
  position: relative;
  z-index: -1;
  width: 100%;
  background-color: rgb(231, 236, 232);

  .first {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background-color: rgb(239, 244, 240);
    height: 60%;
    padding: 30px;
    @media only screen and (min-width: ${BREAK_POINT_PC}px) {
      height: 80%;
   }
  }
  .second {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background-color: rgb(185, 204, 187);
    height: 40%;
    padding: 30px;
    @media only screen and (min-width: ${BREAK_POINT_PC}px) {
      height: 20%;
   }
  }
  // PC : 1200px 이상 :: 1200px 이상 적용되는 css
  @media only screen and (min-width: ${BREAK_POINT_PC}px) {
    width: 40%;
    height: 80vh;
  }
`

const NavList = styled.li`
  cursor: pointer;
  display: block;
  padding: 10px;
  display: flex;
  justify-content: center;
  flex-direction: column;

  .title {
    padding-bottom: 10px;
    margin-bottom: 5px;
  }

  .creator {
    padding-bottom: 10px;
    border-bottom: 0.5px solid gray;
    width: 180px;
  }

  .menuList{
    padding-bottom: 10px;
    border-bottom: 0.5px solid gray;
    width: 180px;
    font-weight: 400;
    font-size: 1rem;
  }
`

const Nav = () => {
  return (
    <>
     <NavBox>
      <div className="first">
        <NavList>
          <h2 className="title">MID CENTURY MODERN</h2>
          <h3 className="creator">by Andrew Lohman</h3>
        </NavList>
        <NavList>
          <h2 className="title">GARMENTS</h2>
          <h3 className="creator">by Andrew Lohman</h3>
        </NavList>
        <NavList>
          <h2 className="title">STEEL</h2>
          <h3 className="creator">by Andrew Lohman</h3>
        </NavList>
        <NavList>
          <h2 className="title">APOTHECARY</h2>
          <h3 className="creator">by Andrew Lohman</h3>
        </NavList>
        <NavList>
          <h2 className="title">SCREEN FILLER</h2>
          <h3 className="creator">by Andrew Lohman</h3>
        </NavList>
        <NavList>
          <h2 className="title">FOUNTAIN KISS</h2>
          <h3 className="creator">by Andrew Lohman</h3>
        </NavList>
        <NavList>
          <h2 className="title">A ROBOT NAMED JIMMY</h2>
          <h3 className="creator">by Andrew Lohman</h3>
        </NavList>
        <NavList>
          <h2 className="title">VERDE MODERNA</h2>
          <h3 className="creator">by Andrew Lohman</h3>
        </NavList>
      </div>
      <div className="second">
        <NavList><h2 className="menuList">VIEW THIS DESIGN’S CSS</h2></NavList>
        <NavList><h2 className="menuList">CSS RESOURCES</h2></NavList>
        <NavList><h2 className="menuList">FAQ</h2></NavList>
        <NavList><h2 className="menuList">SUBMIT A DESIGN</h2></NavList>
        <NavList><h2 className="menuList">TRANSLATIONS</h2></NavList>
      </div>
     </NavBox>
    </>
  );
};

➰ 창 크기가 커지면 width가 40%가 되면서 오른쪽 위로 배치된다.
➰ z-index를 이용해서 Nav가 Footer를 침범하더라도 보이지 않게 처리했다 => 이거 처리하는 거 때문에 애 많이 먹음...
 
3️⃣ Footer.js

const BREAK_POINT_PC = 1200;

const FooterBox = styled.div`
  position: relative;
  z-index: 1;
  background-color: rgb(185, 204, 187);
  font-size: 1.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;

  p {
    align-items: center;
    padding: 50px;
    color: white;
    height: 100%;
    margin-top: 65px;
    font-size: 2rem;
  }
  img {
    height: 40%;
    width: 105%;
    position: absolute;
    top: 0;
    left: -15px;
    width: 105%;
    height: 500px;
    z-index: -1;
    filter: blur(10px);
  }
  // 태블릿 : 1200px ~ 768px :: 768px 이상 적용되는 css
  @media only screen and (min-width: ${BREAK_POINT_PC}px) {
    width: 170%;
    height: 40%;
  }
`;

const IconBox = styled.div`
  width: 100%;
  height: 50%;
  background-color: rgb(44, 69, 72);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  padding: 50px;

  .icon {
    width: 30px;
    height: 30px;
    color: rgb(143, 160, 161);
    border: 1px solid rgb(143, 160, 161);
    border-radius: 50%;
    padding: 15px;
  }
`

const Footer = () => {
  return (
    <>
      <FooterBox>
          <img src={Forest} alt="숲"/>
          <p>By Dave Shea. Bandwidth graciously donated by mediatemple. Now available: Zen Garden, the book.</p>
        <IconBox>
          <FontAwesomeIcon className="icon" icon={faCss3} />
          <FontAwesomeIcon className="icon" icon={faCss3Alt} />
          <FontAwesomeIcon className="icon" icon={faClosedCaptioning} />
          <FontAwesomeIcon className="icon" icon={faGithub} />
          <FontAwesomeIcon className="icon" icon={faWheelchairMove} />
        </IconBox>
      </FooterBox>
    </>
  );
};

➰ 창 크기가 커지면 width를 100%보다 크게 줘서 창 전체 가로를 차지하게 한다 => 이렇게 하면 Nav가 밑으로 삐져나와도 가려진다!

---

📣  시연 화면