프로필카테고리질문하기
로그인 계정 만들기

반응형 웹 만드는 방법

03 개월 전

CSS로 반응형 웹 제작을 시작하려면 어떤 것들에 대해 알고 있어야 하나요?

답변하기 의견 추가
의견 (0)
더 많은 의견 보기

답글 (1)

393 개월 전
viewport

가장 먼저 viewport에 대해 이해해야 해요. viewport는 웹 페이지 중 사용자가 볼 수 있는 영역을 의미해요.

HTML5에서 meta 태그를 이용해서 viewport의 너비와 배율을 조정할 수 있어요.


아래와 같이 viewport의 너비와 배율을 설정해줘야 스마트폰 등 모바일 디바이스에서 페이지를 의도한 대로 볼 수 있어요.

<head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...
@media 미디어 쿼리

그다음은 제일 중요한 것들 중 하나인 CSS 미디어 쿼리에요.

아래와 같이 미디어 쿼리를 사용하여 창의 width, height 등에 따라 스타일을 다르게 지정할 수 있어요.

@media (max-width: 720px) { /* 720px 이하 */ .element { ... } } @media (min-width: 720px) { /* 720px 이상 */ .element { ... } }
em, rem 단위

html 태그에 기준이 되는 글자 크기를 설정해둔 다음 다른 엘리먼트들에 관계적인 단위(em, rem)를 사용하세요.

그런 다음 미디어 쿼리를 사용하면 전체 글자 크기를 비율에 맞게 조정할 수 있어요.

html { font-size: 16px; } @media (max-width: 720px) { html { font-size: 14px; } } h1 { font-size: 2em; /* PC: 32px, 모바일: 28px */ margin-bottom: 1em; /* PC: 16px, 모바일: 14px */ }
뷰포인트 퍼센트 단위

뷰포인트 퍼센트 단위는 뷰포인트의 사이즈에 비례하는 단위에요.

뷰포인트 퍼센트 단위를 사용하면 뷰포인트의 너비 또는 높이에 따라 크기를 조정할 수 있어요.

이렇게 전체 창을 덮는 엘리먼트를 만들 수도 있겠죠:

.element { width: 100%; height: 100vh; }
의견 추가
의견 (0)
더 많은 의견 보기

정보

업보트
1
질문됨
3 개월 전
최근 활동
3 개월 전

카테고리

CSS