반응형 웹디자인

반응형 디자인이 필요한 이유?

과거에는 pc를 통해 웹사이트를 사용하였지만, 현재는 휴대폰 / 테블릿 등 다양한 디바이스를 통해 웹사이트를 접속하고 있습니다. 이용하는 장치에 따라 한번에 확인할 수 있는 정보가 달라지게 되어 하나의 디자인으로 모든 사람들을 만족시키는 것에는 어려움이 있습니다. 이에 pc / 모바일 등 사용환경에 따라 다른 화면을 보일 수 있는 반응형 디자인이 필요합니다. 반응형 디자인을 하게 되면 이용하는 디바이스의 크기에 따라 적합한 디자인을 제공할 수 있습니다.

반응형디자인을 위해서는 다음 3가지 요소들에 대한 이해가 필요합니다.

• 유닛

• 미디어쿼리

• 사이드드로워

유닛(Unit)

반응형 디자인을 하기위해서 가장 중요한것은 장치에 따라 볼수 있는 크기가 다릅니다. 따라서, 글자크기나 이미지 너비 등이 가변적으로 변동될 수 있는 유닛 사용이 필요합니다. 대표적으로 활용되는 유닛은 아래와 같습니다.

• px
  • 이해하고 변경하기 쉽다
  • 고정된 값으로 브라우저 옵션을 통한 변경에 제한이 있다

• %
  • 부모요소의 선택한 속성 사이즈에 상대적이다.
  • 유닛이 많아지고 폰트가 다양해지면 파악 및 관리가 어려움

• em (일시적유닛)
  • 부모요소의 font-size에 상대적이다
  • 종속성으로 관리가 힘듬

  https://codepen.io/yqctutct-the-selector/pen/QWJOpVg

• rem (일시적최상위유닛, root em)
  • 최상위 요소의 폰트크기에 대해 상대적인 font-size를 지정한다
  • 인터넷(브라우저)의 옵션을 참고해서 size가 지정됨
  • 가장 괜찮은 옵션!

---

%와 em unit의 차이점

font-size에서는 em과 % unit이 동일한 역할을 하지만, 다른 요소에서는 다른방식으로 작용합니다.

%는 부모의 속성을 기준으로 상속을 받게되고 em은 font-size를 기준으로 상대적인 크기를 계산합니다.

https://codepen.io/yqctutct-the-selector/pen/mdQqWgV

---

width padding 등에는 적용되었는데, 기타 타른요소에도 사용가능할지?

---

미디어 쿼리

모바일과 데스크탑은 장치의 크기에 있어 차이가 있을 뿐만 아니라, 활용하는 사람의 보편적인 특성이 다릅니다. 따라서, 어떤 장치를 주로 이용될지에 따라 디자인을 달리할 필요가 있습니다.

데스크탑 디자인

• 전통적 디자인방식

• office based audience

• 기능이 많은 사이트

모바일디자인

• 기능적인접근 (공간이작음) 배치를 어떻게 할지 어떻게 보여줄지 등

• Lifestyle/news focused audience

• 제공할 컨텐츠를 우선함

미디어 쿼리란?

미디어 쿼리는 웹을 이용하는 디바이스의 정보를 받아 작동되는 CSS 코드입니다. 접속한 디바이스가 작성된 조건에 부합될 경우 미디어 쿼리가 활성화되어 작성된 css가 반영되게 됩니다. 기존 CSS의 작동방식과 동일하게 기존에 작성된 css는 유지되며, 미디어 쿼리로 작성된 항목들에 대해서만 적용되어집니다.

미디어 쿼리가 적용되는 조건은 기초 CSS가 어떤 디바이스를 중심으로 작성되었냐에 따라 다르게 입력되어야 됩니다. 데스크탑을 기본으로 작성되었을 경우에는 max-width 를 활용하여 작은 디바이스에 대해 미디어 쿼리가 동작하게 됩니다. 반대로 모바일을 기본으로 작성할 경우 min-width 이상 디바이스에 미디어 쿼리가 동작하게 됩니다.

@meida (min width or max-width: 1200px) {
	p {
		font-size: 2rem;
	}
}

💡

CSS 종속성을 고려하여 미디어 쿼리는 기존 CSS보다 하단에 위치해야됨

보편적으로 사용하는 breakpoint(변경점)

사이드 드로워

사이드 드로워는 모바일에서 너무 많은 컨텐츠가 한 번에 화면에서 나타나지 않도록 하기 위해 사용됩니다. 특정한 버튼을 통해 사용자가 원할 때만 특정한 컨텐츠들을 볼 수 있도록합니다.

일반적으로 햄버거 버튼이라고 불리는 버튼을 활용합니다. 사용자가 버튼을 클릭하면 사이드 드로워가 나타나 메뉴를 표시합니다. 다시 버튼을 클릭하면 메뉴는 사라지고 메인 콘텐츠가 다시 나타납니다.

사이드 드로워 작성

사이드 드로워는 특정버튼이 눌렀을 때, 나타날 화면을 지칭합니다. 작성되는 화면은 HTML로 작성되며 일반적인 HTML 태그와 마찬가지로 CSS를 활용하여 style을 변경할 수 있습니다.

HTML

사이드드로워는 작성시 aside 요소(semantic)를 활용합니다.

<aside id="side-drawer">
  <header>
    <a href="#" class="menu-btn">
      <span></span>
      <span></span>
      <span></span>
    </a>
  </header>
  <nav>
    <ul>
      <li>
        <a href="">Browse Meals</a>
      </li>
      <li>
        <a href="">My Orders</a>
      </li>
    </ul>
  </nav>
</aside>

CSS

position

문서상에 요소를 배치하는 방법을 정의합니다.

static | relative | absolute |sticky | fixed

• static: 일반적인 문서 흐름에 따라 배치

• relative: static과 동일하나, top, right, bottom, left 를 통해 오프셋을 적용

• ablsolute: 문서흐름에서 제거하고 가장 가까운 조상요소를 기준으로 배치

• fixed: 문서흐름에서 제거하고, 전체화면(뷰포트)를 기준으로 배치

• sticky: 문서흐름에 따라 배치하고, 가장 가까운 스크롤되는 조상과 표 관련 요소를 포함하는 블록을 기준으로 적용 (스크롤시 따라가게 할때)

#side-drawer {
    width: 100%;
    height: 100%;
    background-color: rgb(29, 26, 27);
    position: fixed;
    top: 0;
    left: 0;
    display: none;
}

내부링크

내부링크는 anchor태그에 id를 활용하여 내부의 콘텐츠로 이동하는 것이 가능하게 합니다. <a href=#target-id> 와 같이 작성되며, 해당 태그를 클릭할 경우 컨텐츠 위치로 이동할 뿐만아니라, [기존URL]/#target-id 로 URL이 변경됩니다. <a hrep="#"> 로 지정할 경우 최상단의 페이지로 이동하는 버튼을 만들수도 있습니다.

목표선택자

목표선택자는 속성이 선택되었을 때, 작동하는 선택자입니다. 목표선택자를 활용해 평소에는 보이지 않도록 설정되어 있는 사이드 드로워를 (display: none; ) . 버튼을 누르면 활성화되도록 할 수 있습니다.(display: block;)