모바일 마크업 및 스타일링 시 주의점

김영진·2021년 12월 9일

CSS 마크업 모바일 반응형

Hivelab

목록 보기

2/4

211209 모바일 페이지 과제를 하며 새로 알게된 것과 주의해야 할 점들을 정리해 본다.

1. 부모태그에 width값을 100%로 잡는다.

2. 자식 width % 구하기

디자인 파일에서 px값을 체크!
자식태그 px ÷ 부모태그px = 결과값
결과값 x 100 = %(구하고자 하는 값)

3. 아이폰은 input에 기본 CSS 적용되므로 제거해야 함.

  input {
    -webkit-appearance: none;
    -webkit-border-radius: 0;
  }

4. 뷰포트에 user-scalable=no를 지정하여 사용자가 줌 인, 아웃을 하지 못하도록 막을 수 있다.

(다만, 웹 접근성은 고려할 수 없음...)

5. Mobile First = min, DeskTop First = max 사용 권장

6. VW, VH는 부모에 따로 w, h 100%를 적용하지 않아도 되는 장점!

7. px을 em으로 계산하는 SCSS 함수

  $browser-font-size: 16; 

  @function em($pixels, $context: $browser-font-size) {
    @return #{$pixels/$context}em;
  }

  .title {
    font-size: em(32); // 32/16 = 2em;
  }

8. 루트 요소의 폰트 크기를 62.5%로 지정하고 rem단위를 사용하면 편하다.

    html { font-size: 62.5%; } /* 기본 100% = 16px을 62.5% = 10px 단위로 변경 */
    .image { width: 12rem; } /* 120px */
    .item { font-size: 1.6rem; } /* 16px */
    .copyright { margin-top: 5rem; } /* 50px */
    
    @media all and (max-width: 750px) {
      html { font-size: 50%; } /* 문서 내 모든 rem단위 변경 */
    }