반응형 웹 만들때 css flex에 대해서 질문이 있어요

Question

웹개발을 공부를 하고 있는데요.

<meta name="viewport" content="width=device-width, initial-scale=1.0" />을 html head태그 안에다 집어넣으면 반응형 웹이 되는거로 알고 있는데요.

저렇게 선언을 하면, css 작업할때 flex(?) 쓰지 않아도 반응형 웹이 되는건가요?

Answer 1

안녕하세요

반응형 웹을 만들기 위해서는 meta 태그로 viewport를 설정과 함께 미디어 쿼리를 사용합니다.

viewport 의 "width=device-width" 설정은 페이지 넓이를 기기의 스크린 너비로 설정합니다.

넓이는 디바이스 크기로 맞춰졌지만 pc의 넓은 화면의 내용을 모바일의 넓이로 보게 된다면 layout이 답답해 보일 뿐 아니라, 글자가 짤리기도 합니다.

그래서 미디어 쿼리를 사용해 layout 변경, font 크기 조정 등을 처리하게 됩니다.

반응형 웹을 만들 때 손이 많이 가므로 bootstrap을 사용하기도 합니다.

bootstrap 중 css 일부입니다.

/* 기본 container 설정 */ .container-md, .container-sm, .container { width: 100%; } /* 최소 넓이가 768px 이상이면 적용 */ @media (min-width: 768px) { .container-md, .container-sm, .container { max-width: 720px; } } /* 최소 넓이가 992px 이상이면 적용 */ @media (min-width: 992px) { .container-lg, .container-md, .container-sm, .container { max-width: 960px; } } /* 최소 넓이가 1200px 이상이면 적용 */ @media (min-width: 1200px) { .container-xl, .container-lg, .container-md, .container-sm, .container { max-width: 1140px; } }