[TIL] 반응형 웹디자인 (6일차)

배고픈 배극곰·2023년 12월 20일

유데미X사람인 취부캠 TIL

목록 보기

6/38

학습내용

반응형 웹디자인

px, em, rem, %

크롬브라우저 -> settings -> appearance 에서 font size를 설정할 수 있는데 크롬브라우저에서 디폴트로 지정한 16px이 1rem이 된다.

px을 사용한 엘리먼트들은 여기서 위에 해당하는 방법대로 사이즈를 변경해도 변화가 적용이 안된다.
하지만 rem단위를 사용한 엘리먼트들은 변경이 일어난다.

cf. h2 태그는 기본 폰트크기의 1.5배가 된다.
=> h2에 씌워진 div태그(부모태그)에 20px을 줬다고 가정하면, h2태그 폰트크기는 30px이 된다.

em - 부모크기 * 숫자
rem - 루트크기에 대해 상대적으로 변함

반응형으로 구현하기 위해 rem과 같은 단위를 사용하는 것이 대체로 더 좋긴하나,
border-radius 속성은 반응형으로 하지말고 px로 남겨두자!
=> 동적으로 적용하면 요소가 변함에 따라 곡률에 변화가 크게 생긴다.

Media Query

미디어 쿼리란 반응형 디자인을 구현하도록 도와주는 CSS 문법이다.
=> 하지만 사용시 css는 종속적이다는 특성을 잊지 말자!

모바일 우선 접근 방식을 더 선호한다!
=> 모바일 장치에 맞게 코드를 우선적으로 작성하고, media query문법 활용하여 큰 장치에 맞게 조정하는 방식
(작은 상태에서 늘리는 것이 더 쉽기 때문에)

@media (max-width: 48rem) {
  #main-header nav {
    display: none;
  }

  main h1 {
    font-size: 1.5rem;
  }

  .menu-btn {
    display: flex;
  }

  #latest-products ul {
    grid-template-columns: 100%;
  }
}

내부링크 연결법

사이드바를 구현하면서 기존 웹사이트에 링크된 기능을 구현하는 연습을 해봤다.

다른 웹사이트로 연결되는 링크와는 달리,

앵커 태그의 id를 정의해 브라우저url에 id가 추가된다.

햄버거 아이콘을 클릭하여 사이드바가 펼쳐지는 기능 구현

햄버거 아이콘 클릭하여 url에 id가 추가되어 사이드바로 넘어갈 수는 있지만
(실제로는 가상target 선택자로 설정하여 display: block 속성을 부여하는 것.)

html 파일
<a href="#side-drawer" class="menu-btn">
     <span></span>
     <span></span>
     <span></span>
   </a>
   햄버거 태그를 이렇게 구현 가능한것도 배웠다!(span들의 height를 작게 지정해줘서)

CSS 파일

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

#side-drawer:target {
  display: block;
}

다시 돌아가는 방법은 아래방법들 뿐이다.