스토리보드를 바탕으로 데스트탑 웹 브라우저를 기준으로 제작한 자기소개 페이지를
스마트폰, 태블릿 등 다른 기기를 통해 접속 했을 때 적절하게 레이아웃이 변경될 수 있도록 반응형 웹 사이트로 수정하여 최종 완성 하려고 한다.

---

반응형 웹 사이트

PC 브라우저로 접속하든 모바일 브라우저로 접속하든 사용자의 접속 환경에 맞추어 사이트 레이아웃을 자연스럽게 바꾸어 보여주는 웹 디자인을 '반응형 웹 디자인'이라고 하며, 이는 다양한 웹 환경에 맞는 사이트를 별도로 제작하는 번거로움을 줄일 수 있는 방법이다.

뷰포트(Viewport)

픽셀 표현 방법이 다르기 때문에 PC 화면에 보이는 웹 페이지의 내용은 Mobile에서 그대로 볼 수 없다. 예를 들어 모바일의 화면 width 320px에 맞춰 제작하더라도 웹키트 기반의 모바일 브라우저의 기본 뷰포트 width가 980px이기 때문에 제작한 내용이 모바일에 정상적으로 노출되지 않는다. 이때 뷰포트를 설정하면 접속한 기기 화면에 맞추어 확대하거나 축소해 표시 할 수 있다.

• 뷰포트: 스마트폰 화면에서 실제 내용이 표시되는 영역

<meta name="viewport" content="(속성1)(속성2)(속성3)...">

뷰포트 표준 규약>

가장 많이 사용하는 형태의 뷰포트 설정은 아래와 같다.

<meta name="viewport" content="width=divice-width, initial-scale=1">

미디어 쿼리 (Media Queries)

CSS 모듈 중 하나로 사이트에 접속하는 장치에 따라 특정한 CSS 스타일을 사용하도록 해 준다.

@media (only/not) 미디어유형 (and 조건) (and 조건) { CSS }

[ 미디어 쿼리 적용 ]

아이패드의 width인 768px을 기준으로 그보다 width가 작을 경우 우측에 고정으로 표시했던 네이게이션 플로팅 배너를 상단 고정 네비게이션으로 변경되도록 수정하였고, 페이지 타이틀 영역의 텍스트 위치를 수정하였다. 작성 시 기존에 규정한 CSS를 무효화하고 변경되는 내용을 작성하면 된다!

• HTML

<header id="head">
  <div>
      <div id="head1"></div><p id="text1">안녕하세요:)</p>
      <div id="head2"></div><p id="text2">만나서 반갑습니다!</p>       
      <p id="text3">저에 대해서 궁금하시다면 <i class="fas fa-chevron-down"></i> </p>
  </div>
</header>
<nav>
  <ul>
    <li><a href="#top">Top</a></li> <!---- 클릭 시 최상단 앵커 ---->
    <li><a href="#introduce">Who am I?</a></li> <!---- 클릭 시 contents1 앵커 ---->
    <li><a href="#goal">Goal</a></li> <!---- 클릭 시 contents2  앵커 ---->
    <li><a href="#favorite">What I love</a></li> <!---- 클릭 시 contents3 앵커 ---->
  </ul>
</nav>

• CSS

@media all and (max-width: 768px) { <!---- 모든 미디어 유형에서 width 768px 이하일 경우 ---->
    #text1, #text2, #head #text3, 
    #head #head1, #head #head2 {
      left: 5%;
    }
    #head #head1, #head #text1 {
      top: 20%;
    }
    #head #head2, #head #text2 {
      top: 30%;
    }
    #head #text3 {
      top: 430px;
    }
    nav {
      position: fixed;
      top: 0;
      left: 0;
      height: 40px;
      border-radius: 0;
      box-shadow: none;
      right: 0;
      z-index: 100;
    }
    nav ul {
      display: flex;
      justify-content: space-around;
      margin-left: 0;
      margin-right: 0;
    }

플렉스 박스(flex-box) 레이아웃

그리드 레이아웃을 기본으로 플렉스 박스를 원하는 위치에 배치하는 것이다. 플렉스 박스는 여유 공간에 따라 너비와 높이, 위치를 자유롭게 변형할 수 있어 편리하다.

• flex container: 텍스트나 이미지, 표 등 웹 요소들을 플렉스 박스로 배치하기 위해 묶어준 묶음
• flex item: flex container에 담기는 개별 웹 요소
• main axis: flex item을 배치하는 기본 방향(기본적으로 오른쪽에서 왼쪽으로 배치)
• cross axis: main axis와 교차되는 방향(기본적으로 위쪽에서 아래쪽으로 배치)

flex-box의 속성

:: display

플렉스 박스를 활용하여 배치할 플렉스 컨테이너를 지정한다. 브라우저 접두사가 필요하다.

display: flex / inline-flex

:: flex-direction

플렉스 아이템을 배치의 주축을 가로로 할지 세로로 할지 결정한다.

flex-direction: row / row-inverse / column / column-invrse

:: flex-wrap

기본적으로 플렉스 아이템은 한 줄로 배치되지만 플렉스 항목을 여러 줄에 걸쳐 표시할지 지정한다.

flex-wrap: no-wrap / wrap / wrap-reverse

:: flex-flow

아이템을 배치할 때 기본이 되는 방향과 여러줄 배치 여부를 한 번에 지정한다.

flex-flow: row; <!---- 왼쪽에서 오른쪽으로 한 줄로 표시 ---->
flex-flow: column wrap; <!---- 위에서 아래로 여러 줄에 표시---->

:: flex

플렉스 아이템의 너비를 늘이거나 줄일수 있도록 한 번에 지정하는 것이다.

flex: (<flex-grow>) (<flex-shrink>) (<flex-basis>) / auto / initial

flex-grow: 플렉스 아이템 너비를 얼마나 늘일지 숫자로 지정
flex-shirink: 플렉스 아이템의 너비를 얼마나 줄일지 숫자로 지정
flex-basis: 플렉스 항목의 기본 크기 지정

예시

flex: 1 1 0; <!---- 늘이거나 줄이지 않음 ---->
flex: 2 2 0; <!---- 2배 늘이거나 줄임 ---->

:: justify-content

플렉스 아이템을 주축 방향으로 배치할 때 배치 기준을 지정한다.

justify-content: flex-start / flex-end / center / space-between / space-around / space-evenly 

:: align-items / align-self

주축 뿐만 아니라 교차축을 기준으로 배치 방법을 조절한다.

align-items: strech / flex-start / flex-end / center / baseline
align-self: auto / strech / flex-start / flex-end / center / baseline

:: align-content

플렉스 아이템이 여러 줄로 걸쳐 있을 때 교차축 방ㅇ향의 배치 방법을 지정한다.

align-content: flex-start / flex-end / center / space-between / space-around / space-evenly

[flex-box 적용 ]

• HTML

<section id="section3">
  <div class="contents" id="love">
      <h2 id="favorite">What I love</h2>
      <div class="lovelist">
          <div>
              <img src="images/cooking.png">
              <p>#요리에_진심인편 #소확행😁</p>
          </div>
          <div>
              <img src="images/dog.png">
              <p>#댕댕이🥰 #왕커서왕귀엽</p>
          </div>
          <div>
              <img src="images/movie.png">
              <p>#혼영화 #심야영화 🎬</p>
          </div>
          <div>
              <img src="images/travel.png">
              <p>#노계획여행✈️ #코로나싫어</p>
          </div>
          <div>
              <img src="images/bicycle.png">
              <p>#자전거🚲 #공원</p>
          </div>
          <div>
              <img src="images/samsung.png">
              <p>#삼성의노예 #언젠간우승🙏</p>
          </div>
      </div>
  </div>
</section>

• CSS

.lovelist {
    display: flex;
    display: -ms-flexbox;
    justify-content: space-evenly;
    flex-wrap: wrap;
    align-content: center;
}