10. Responsive Web Design Projects - Build a Product Landing Page

이번 프로젝트의 핵심은 반응형 디자인입니다. 보여주는 화면의 크기에 따라서 레이아웃 구성을 변경해야 합니다. 코드펜을 이용하시는 경우에 간단히 해보시는 방법은 다음과 같습니다. (이용하지 않는 경우에는 2번 부터 하시면 됩니다, 단축키는 window/linux 기준입니다)

1. Open Live View in a New Window(단축키 Ctrl + Shift + 0)
2. 크롬 개발자 도구에 들어간다(단축키 F12)
3. Toggle Device Tool Bar(단축키 Ctrl + Shift + M)

여기서 다양한 width로 변경을 하시면 됩니다. Bootstrap의 경우 5개의 break point를 Tailwindcss도 동일하게 5개의 break point를 사용하고 있습니다. break point란 이걸 기준으로 layout이 변경된다는 얘기입니다. 5개의 break point를 고려하면 결국 6개로 나뉘는데 3가지 경우로 나누어 보려고 합니다.

tailwindcss를 기준으로 하려고 합니다. 1단계는 sm으로 640px 이하, 2단계는 lg로 1024px이하, 3단계는 1024 초과로 봅니다. 이에 맞게 기기를 고르거나 custom width 로 device를 만드시면 됩니다.

참고로 freecodecamp의 예제 코드는 이와 다른 점이 있는데 둘을 비교해보시는 것도 좋습니다.

1. 박스 모양으로 HTML 문서 구조 분석하기

3개라고는 했지만 태블릿은 사실상 별로 차이가 없으므로 모바일과 랩탑의 구조만 분석하는데, 랩탑을 기준으로 먼저 설명을 드리고, '3. CSS로 스타일 입히기'에서 반응형 구현 방식에 대한 자세한 설명을 드리겠습니다.

기존보다 박스를 더 세부적으로 나누어서 4level까지 있습니다. 반복적인건 첫번째 child에만 박스를 쳐두었고 박스 내에도 다른 컴포넌트가 있기도 합니다.

User Story #1, #2, #3, #4, #6, #7, #8, #11는 각각의 box 및 tag#id로 설명이 되었습니다. 나머지는 보통 div 경우에 따라 div로 box의 tag를 정하시면 됩니다.

2. HTML 세부 사항 설명하기

User Story #5: When I click a .nav-link button in the nav element, I am taken to the corresponding section of the landing page.

• href 속성 값을 #id를 사용하면 현재 페이지 내에서 id에 해당하는 곳으로 바로 이동을 할 수 있습니다.
• HTML 링크 최하단부의 페이지 책갈피 는 참고하시면 안됩니다. name이 아니라 id를 참고해야 합니다.

User Story #6: I can watch an embedded product video with id="video".

이 부분은 2가지 방법이 있습니다. video tag를 사용해서 video를 넣거나 iframe으로 다른 곳에 있는 video를 가져오거나 할 수 있습니다. 후자의 방법으로 youtube동영상을 가져올 수 있습니다. - iframe / 그냥 하기 등 이 부분 자세히 알아보기

• HTML5 멀티미디어 > 비디오 를 보시면 video를 넣는 방식이 나와 있습니다. 간단히 말씀 드리자면 <video src="파일 경로" /> 로 하시면 되고 기타 height, width속성을 정해주실 수 있습니다.
• HTML 공간 분할 > iframe 요소 를 보시면 iframe을 넣는 방식이 나와 있습니다. <iframe src="삽입할 페이지 주소" />로 사용이 되는데 여기에 youtube에서 제공하는 파일 링크를 넣으면 유투브 창이 이 안에 들어갑니다.

User Story #9: The #email input field should have placeholder text to let the user know what the field is for.

<input id="email" placeholder="email을 입력해주세요" /> 이런 방식으로 placeholder 속성에 보여줄 텍스트를 입력하면 됩니다.

User Story #10: The #email input field uses HTML5 validation to confirm that the entered text is an email address.

<input id="email" type="email" /> type을 명시해주시면 됩니다.

User Story #12: When I click the #submit element, the email is submitted to a static page (use this mock URL: https://www.freecodecamp.com/email-submit

action에는 데이터가 도착할 url을 넣을 수 있습니다. 따라서 form의 action 속성에 다음과 같이 제공된 url을 넣으시면 됩니다.

<form action="https://www.freecodecamp.com/email-submit">...</form>    

3. CSS로 스타일 입히기

User Story #13: The navbar should always be at the top of the viewport.

이미 학습한 내용대로 fixed 속성을 넣어주시면 됩니다. fixed 속성은 viewport에 고정된 위치를 줄 수 있는 속성입니다.

header {
    position: fixed;
}

User Story #14: My product landing page should have at least one media query.

글 서두에서 설명한 방법을 이용해서 3가지 형태로 보겠습니다. 먼저 3단계인 1024초과는 이미 했기 때문에 2단계인 1024이하 640초과인 경우를 다루겠습니다. 이 경우에는 하단 부에 있는 가격을 보여주는 카드 부분을 3 개를 한 줄에서 모두 보여주는 것에서 3개를 한 줄에 하나 씩만 보여주는 것으로 변경하면 됩니다.

@media screen and (max-width: 1024px) {
  #pricing {
    display: block;
    margin: auto;
  }

  .card {
    width: 300px;
    margin: 25px auto;
  }
}

max-width: 1024px을 하시면 1024px까지는 이와 같은 css값 들을 적용하겠단 의미입니다. #pricing은 가격을 나타내는 카드 들을 감싸고 있는 것이었는데 기존에는 display: flex;로 되어있던 부분입니다.카드를 놓는 방식으로 flex가 좋은데 이건 이번에야말로 CSS Flex를 익혀보자 를 참고하시면 더 쉽게 알 수 있습니다. 핵심은 justify-content: space-around를 이용하여 적당히 카드의 간격을 띄우는 것입니다.

여하튼 이 내용을 무시하기 위해서는 #pricing이라는 card class element들의 컨테이너의 display 속성을 수정하고 card class가 고정 크기를 갖도록 하면 됩니다.

@media screen and (max-width: 640px) {
  header {
    flex-direction: column;
    align-items: center;
  }

  #header-img {
    display: block;
    margin: auto;
  }

  #nav-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    float: none;
  }

  main {
    top: 180px;
  }

  .icon-container {
    display: none;
  }

  .feature-explanation * {
    text-align: center;
  }
}

여긴 양이 많습니다. 모바일 크기로 변경될 때 많은 사항들이 변경됩니다.

1. header가 중앙으로 모입니다. img도 모이고 nav도 가운데로 모입니다.
2. icon이 모습을 감춥니다. 방법이 여러개 있지만 여기서는 display: none을 사용하여 감췄습니다.
3. feature 설명하는 부분의 글씨가 가운데 중심으로 정렬되었습니다.

User Story #15: My product landing page should utilize CSS flexbox at least once.

예제를 보면 flex를 쓰면 특히 편할 만한 곳은 아이콘과 글씨가 있는 부분입니다. 왼쪽으로 90도 누운 T자로 컴포넌트를 나눠서 볼 수 있는데 이 때 왼쪽과 오른쪽을 자연스럽게 나누게 하기 위해서 flex를 쓰는 것이 자연스러워 보입니다.

.feature {
    display: flex;
}

feature라는 flex 컨테이너 안에 icon을 담는 그릇과 글 2개를 담는 그릇이 있다고 보시면 됩니다. html로 보시면 다음과 같습니다.

<div class="feature">
    <div class="icon-container">
        <i class='fa fa-fire'></i>
    </div>
    <div class="feature-explanation">
        <h2>Premium Materials</h2>
        <p>We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are not satisfied.</p>
    </div>
</div>

대략 이런 방식으로 하나의 feature를 표현하게 됩니다. 이 때 icon의 경우 icon-container class를 갖고 있는 element 안에 담으시면서 다음과 같이 flex를 다시 한 번 사용할 수 있습니다.

.icon-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20vw;
}

이 코드를 보면 justify-content: center; align-items: center; 를 이용하여 icon을 상하좌우 가운데로 맞춰주고 있습니다. 좌우만 맞추는 것은 margin: auto로 되지만 상하도 맞추는건 안되기 때문에 이 코드를 쓸 일이 자주 있습니다.

4. 예제 따라하기

• 예제를 잘 보시면 header에 있는 글씨와 배경색이 main의 내용과 겹치지 않습니다. 이렇게 하려면 header의 z-index를 main보다 높이고 background-color를 주면 됩니다.

header {
    position: fixed;
    z-index: 1;
      background-color: GhostWhite;
}

• nav를 보면 그림과 반대편인 오른쪽에 붙어 있습니다. 이렇게 하는 가장 간단한 방법은 nav에 float 속성을 주는 것입니다.

nav {
    float: right;
}

전체 코드가 필요하신 경우에는 제 코드펜 워크스페이스를 참고하시면 되겠습니다.