반응형 페이지 - 모듈화 디자인 하기

2023. 7. 2. 20:29ㆍ카테고리 없음

모듈화 디자인

반응형 웹 개발의 대세는 페이지 만들기 에서 컴포넌트 만들기로 이동했다.

컴포넌트 기반으로 웹을 제작하면 마치 블록 장난감을 조립하듯 각각의 컴포넌트간 조합을 이용해 화면을 디자인할 수 있다.

모듈화된 디자인은 작업 효율에 많은 도움이 된다. 여러개의 페이지는 각각의 다양한 레이아웃을 가지지만, 페이지를 구성하는 컴포넌트의 형태는 비슷한 경우가 많기 때문에 컴포넌트에 초점을 맞추고 웹을 만들면 일이 줄어들게 된다.

  • 반응형 컴포넌트를 만들고, 그것들을 조립해 하나의 페이지를 만들면 페이지는 자연스럽게 반응형 페이지가 된다.
  • 스타일 재사용이 용이하다. 필요한 경우 추가 스타일을 적용하면 된다.
  • 페이지의 일관성을 유지하기가 용이하다.

ResetCSS

  • 웹 브라우저 마다 default 값으로 스타일이 적용되어 있다.
  • 따라서 동일한 CSS 스타일을 모든 브라우저에 보여주기 위해 디폴트 값을 초기화 해주어야 한다.
/* 개인적으로 리셋 코드를 추가 */

* {
  box-sizing: border-box;
  outline: none;
}

추가적으로 코드를 넣어서 개인만의 resetCSS를 가지고 있으면 편리하다.

https://meyerweb.com/eric/tools/css/reset/

반응형 header 만들기

마크업 코드

<!-- 헤더 마크업 -->
    <header class="header">
      <div class="header__wrapper">
        <h1 class="header__start">
          <button class="header__hamberger">hamberger</button>
          <span class="header__title">yeongi's tube</span>
        </h1>
        <div class="header__center">
          <form class="header__form" onsubmit="return false">
            <input
              class="header__input--text"
              type="text"
              placeholder="보고싶은 동영상"
            />
            <button class="header__input--button" type="submit">검색</button>
          </form>
        </div>
        <div class="header__end">
          <div class="header__profile">profile</div>
          <button class="header__search">search</button>
        </div>
      </div>
    </header>

헤더의 wrapper 코드

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #ffffff;
  box-shadow: 0 0 3px black;
  z-index: 20;
}

.header__wrapper {
  display: flex;
  height: 60px;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
}
  1. position : fixed를 통한 탑 고정 하기
  2. header__wrapper에서 display: flex를 통한 flex 아이템 지정

.header__start 스타일 적용

.header__start {
  height: 40px;
  line-height: 40px;
}

.header__hamberger {
  border: none;
  background-color: transparent;
  font-size: 1.5rem;
}

.header__title {
  font-size: 1.2rem;
  margin-left: 6px;
}
  • 반응형 폰트를 사용해서 적절하게 배치함

.header__form 스타일 적용

.header__center {
  width: 50%;
}

.header__form {
  display: flex;
  width: 100%;
  max-width: 100%;
}

.header__input--text {
  width: calc(100% - 60px);
  height: 40px;
  padding: 0 6px;
  border: 1px solid #8f8f8f;
  border-radius: 2px 0 0 2px;
  border-right: none;
}

.header__input--button {
  width: 60px;
  height: 40px;
  padding: 0 6px;
  border: 1px solid #8f8f8f;
  border-radius: 0 2px 2px 0;
  border-left: none;
}

변하는 input 창

  • input창의 넓이를 calc()를 이용해서 적절하게 맞추도록 설정

.header__end 스타일 적용

.header__end {
  display: flex;
}

.header__search {
  display: none;
  margin-right: 5px;
  border: none;
  background-color: transparent;
  font-size: 1.5;
}

.header__profile {
  width: 40px;
  height: 40px;
  border: 1px solid #eaeaea;
  border-radius: 50%;
  background-image: url(../image/profile.jpg);
  background-size: 40px 40px;
  background-color: tomato;
}
  • header__search는 나중에 너비에 따라 반응형으로 조건 렌더링 하기 위해 display: none으로 설정
  • css로 profile 이미지 설정
@media screen and (max-width: 1200px) {
  .header__title {
    display: none;
  }
}

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

  .header__search {
    display: block;
  }
}
  • 미디어 쿼리를 이용한 반응형 레이아웃

1. 1200px 이상일때

2. 1200px 이하

  • 제목 사라짐

3. 600px 이하

  • 검색 창이 사라져서 더욱 간소화된 헤더

네비게이션바 반응형으로 구현하기

마크업 코드

<!-- 네비게이션 마크업 -->
<nav class="nav">
  <ul class="nav_wrapper">
    <li>
      <button class="nav__icon">&#9829;</button>
      <button class="nav__ menu">메뉴항목</button>
    </li>
    <li>
      <button class="nav__icon">&#9829;</button>
      <button class="nav__ menu">메뉴항목</button>
    </li>
    <li>
      <button class="nav__icon">&#9829;</button>
      <button class="nav__ menu">메뉴항목</button>
    </li>
    <li>
      <button class="nav__icon">&#9829;</button>
      <button class="nav__ menu">메뉴항목</button>
    </li>
  </ul>
</nav>

스타일 적용하기

.nav {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
}

.nav__wrapper {
  min-width: 200px;
  min-height: 100vh;
  background-color: #f8f8f8;
  padding: 80px 0 0 0;
  list-style: none;
}

.nav__wrapper li {
  display: flex;
  padding: 10px 16px 10px;
}
.nav__wrapper li:hover {
  background-color: #eaeaea;
}

.nav__icon {
  background-color: transparent;
  font-size: 1.5rem;
  border: none;
}

.nav__menu {
  margin: 0 0 0 8px;
  border: none;
  background-color: transparent;
  font-size: 1.2rem;
}

min-height: 100vh;

  • 화면 높이 만큼은 높이를 차지하고 있어야 한다.

미디어 쿼리 설정하기

@media screen and (max-width: 1200px) {
  .nav__menu {
    display: none;
  }
  .nav__wrapper {
    min-width: 0;
  }
}

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

마찬가지로 3가지 조건에 따라 반응형 디자인을 추가했다.

1. 1200px 이상

2. 1200px ~ 800px

3. 800px 이하

 

반응형 썸네일 컴포넌트 만들기

마크업 코드

<section class="thumbs">
  <div class="thumbs__wrapper">
    <div class="thumb__item">
      <img class="thumbs__thumbnail" src="./image/thumbnail.jpg" />
      <div class="thumbs__progile"></div>
      <div class="thumbs__text">
        <h3 class="thumbs__text--title">영상 제목</h3>
        <p class="thumbs__text--owner">게시자</p>
        <p class="thumbs__text--anal">조회수 100회 &#183; 1시간 전</p>
      </div>
    </div>
    <div class="thumb__item">
      <img class="thumbs__thumbnail" src="./image/thumbnail.jpg" />
      <div class="thumbs__progile"></div>
      <div class="thumbs__text">
        <h3 class="thumbs__text--title">영상 제목</h3>
        <p class="thumbs__text--owner">게시자</p>
        <p class="thumbs__text--anal">조회수 100회 &#183; 1시간 전</p>
      </div>
    </div>
--- 계속 붙여넣기 하겠져?
  </div>
</section>

스타일 코드

.thumbs__wrapper {
  display: flex;
  /* 1차원 정렬을 여러 행으로 할 수 있다. */
  flex-wrap: wrap;
  justify-content: space-around;
  margin: 60px 0 0 200px;
  padding: 20px 0 0 10px;
}

.thumbs__item {
  width: 25%;
  margin: 0 0 15px 0;
  padding: 0 15px;
}

.thumbs__thumbnail {
  max-width: 100%;
  margin: 0 0 10px 0;
}

.thumbs__info {
  display: flex;
  gap: 10px;
}

.thumbs__profile {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: tomato;
}

.thumbs__text--title {
  font-size: 1.2rem;
  margin-bottom: 0.5em;
}

.thumbs__text--owner {
  font-size: 1rem;
  color: #aeaeae;
  margin-bottom: 0.2em;
}

.thumbs__text--anal {
  font-size: 0.9rem;
  color: #aeaeae;
}

flex박스를 설정하고 flex-wrap과 width를 이용해서 한줄에 4개씩 설정하도록 했습니다.

미디어 쿼리 설정하기

@media screen and (max-width: 1200px) {
  .thumbs__item {
    width: 30%;
  }
}

@media screen and (max-width: 800px) {
  .thumbs__wrapper {
    margin: 60px 0 0 60px;
  }
}

@media screen and (max-width: 600px) {
  .thumbs__item {
    width: 50%;
  }
  .thumbs__wrapper {
    margin: 60px 0 0 0;
    padding: 10px 0 0 10px;
  }
}

@media screen and (max-width: 400px) {
  .thumbs__item {
    width: 90%;
  }
}

4단 변화를 주는 것인데

  1. 1200px ~
    1. 메인 아이템 4개 및 전체 레이아웃 표시
  2. 800px ~ 1200px
    1. 메인 아이템 3개 표시
    2. nav 의 여백 채움
  3. 600px ~ 800px
    1. 메인 아이탬 2개 표시
    2. nav 사라짐과 동시에 여백 통일 시킴
  4. ~400px
    1. 메인 아이템 1개 표시

 

배운점

  1. 반응형 디자인의 원리와 가변성 단위의 css 학습
  2. 가장 기본적인 레이아웃을 제작하는 방법

나에게 부족한 퍼블리싱 능력을 기르는데 집중할 수 있었던 강의였습니다. 프로젝트에 바로 적용하면서 나의 것으로 만들기 위한 노력을 하겠습니다.

댓글 0

티스토리툴바