반응형 웹 은 무엇일까?

June 15, 2021

반응형 웹 은 무엇일까?

반응형 웹

디스플레이의 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 기법

1. meta태그 – viewport viewport 란 모바일 브라우저에서 웹컨텐트를 출력하는 영역 웹페이지의 너비와 높이, 확대/축소 상태를 설정할 수 있게 해준다 웹 컨텐트가( 웹 사이트상에서 제공되는 모든 디지털 정보를 통칭한다.)** 최적의 상태로 표현될 수 있도록 도와준다** <meta name="viewport" content="width=device-width,initial-scale=1">

width 뷰포트의 가로 크기를 정합니다. 만약 500이란 값을 넣으면, 500만큼의 픽셀 개수를 가진 너비로 설정 device-width 기기의 스크린 너비에 맞추라는 뜻 입니다. initial-scale 페이지에 처음 접속했을 때 보여질 확대 배율을 설정 됩니다

뷰포트 메타태그 속성들

속성	설명
user-scalable	사용자의 축소/확대 허용 여부.초기값은 yes며, no로 금지 가능
minimum-scale	뷰포트의 최소 배율값 (0~10)
maximum-scale	뷰포트의 최대 배율값 (0~10)

2. 미디어 쿼리

미디어 쿼리란 사이트에 접속하는 장치에 따라 특정한 CSS 스타일을 사용하도록 도와주는 소프트웨어 모듈 @media 미디어 유형( CSS가 적용되기 위한 규칙, 조건 ) {…} 미디어 쿼리 구문은 ‘미디어 유형 / 논리 연산자 / 특성’으로 이루어지며 대소문자를 구분하지 않습니다. 미디어 유형 @media screen {} 을 쓰면, 스크린이 있는 디바이스에서만 적용이 됩니다. | 속성 | 설명 | |—|—| | all | 기본값으로, 모든 미디어 타입의 장치 | | print | 인쇄 결과물 및 인쇄 미리보기 문서 | | screen | 화면 대상 (컴퓨터나 테블릿, 스마트폰 등의 스크린) |

논리 연산자 | 속성 | 설명 | |—|—| | and | 모든 쿼리가 참이여야 적용 | |not | 모든 쿼리가 거짓이여야 적용 | | , (comma) | 어느 하나라도 참이면 적용 (or에 해당) | | only | 미디어쿼리를 지원하는 브라우저만 적용 | @media only screen {}을 사용하면 미디어쿼리를 지원하지 않는 브라우저(IE8 이하)에서는 해당 스타일을 무시

/* and */
 @media all and  (min-width:  700px)  and  (  orientation: landscape  )  {...}
// 최소 너비가 700이고 방향이 가로방향일떄만 적용

/* not */
@media not all and  (min-width:768px)  and  (max-width:1024px)  {...}
// 뷰포트 너비가 768px 이상 '그리고' 1024px 이하가 '아니면' 실행

/* only */
@media only all and  (min-width:768px)  and  (max-width:1024px)  {...}
// 뷰포트 너비가 768px 이상 '그리고' 1024px 이하 '일때 만' 실행

/* ,(comma) */
@media  (min-width:700px),print and  (orientation: landscape)  {...}
// 모든 장치에서 최소 너비가 700px이상이거나, 프린터 장치에 방향이 가로일때 적용

@media all and  (min-width:768px)  and  (max-width:1080px)  {  ...  }
/* '모든 디바이스 & 최소 너비가 768 이상 & 최대 너비가 1080 이하'라는 조건을 모두 만족할 때 */

@media  (min-height:  680px), screen and  (orientation: portrait)  {  ...  }
/* '최소 높이가 680 이상'이거나 '세로 모드의 스크린 기기' 중 하나를 만족하는 경우에 적용*/

@media screen and  (min-aspect-ratio: 1/1)  {  ...  }
/* 가로/세로 비율이 1:1 이상일때 적용, 즉, 가로로 넓은 직사각형 일때만 적용*/

3. 반응형제작을 위한 CSS 방법

px은 고정 단위이기 때문에 반응형 웹을 사용할때에는 적합하지 않습니다. 반응형웹을 제작할때는, 유동적인 단위를 사용해주셔야 합니다.

vw / vh 풀네임은 Viewport Width / Viewport Height

1vw = 부표트 너비의 1% ex) 400px 너비의 뷰포트일 때, 1vw = 4px 1vh = 부표트 너비의 1% ex) 400px 너비의 뷰포트일 때, 1vh = 4px

calc() 와 적용하면 좋은 시너지를 낼 수 있다. 헤더영역 높이가 60px이고 컨텐츠 영역 높이를 ‘헤더를 제외한 나머지 높이 전체’ 로 만들고 싶다면, height: calc(100vh - 60px); 을 지정해주면 됩니다.

calc() : 괄호 안의 식을 계산한 결과를 속성 값으로 사용하게 해주는 함수.

vmin / vmax vmin과 vmax, 더 작거나 더 크거나 전체 박스 크기 가로 500px, 세로 800px 일 때 vmin, vmax값은? 1vmin = 5px 1vmax = 8px vmin과 vmax 활용법

언제든 화면에 보이는 요소’와 ‘언제든 화면을 꽉 채우는 요소’를 쉽게 만들 수 있다 vw는 너비에만 반응할 뿐, 높이엔 반응하지 않는 속성이 있어, 이걸 보완하기 위해, vmin을 사용한다. vmin은 둘 중 더 작은 값을 택하기 때문에, 작아진 높이값에 반응해서 잘리지 않고 화면에 표시됩니다.

em / rem 1em = 부모의 폰트 크기

html =  100%  =  16px
	body =  0.5em =  8px
		div =  0.5em =  4px
			p =  0.5em =  2px

1rem = html(root element)의 폰트 크기

html =  100%  =  16px
	body =  0.5rem =  8px
		div =  0.5rem =  8px
			p =  0.5rem =  8px

%(퍼센트) 반응형 작업을 할 때 가장 많이 사용되는 % 입니다. 일반적으로 width값을 지정해줄 때 많이 사용됩니다.

이 중에서 rem의 사용을 권장합니다. rem은 html에서 font-size를 정의 해 놓으면 그 사이즈를 기준으로 계산이 되기 때문에 이해 하기 쉬워 사용하기도 편하기 때문입니다. margin / padding는 rem으로 할 경우 의도치 않은 문제가 발생한다고 한다. 크롬에서 폰트 사이즈와 화면을 확대/축소 할 수 있는 설정이 있는데 이렇게 되면 단순히 폰트 크기만 변경 했을 뿐인데 margin / padding 값이 커져서 데스크탑에서 모바일 화면으로 보게 되는 현상이 발생 할 수 있다고 합니다

4. CSS 반응형 레이아웃 너비를 나누는 기준 정하기

1. 최소 반응형 레이아웃

768px 미만은 모바일 기기, 768px ~ 1024px 사이는 타블렛, 1024px 이상은 데스크탑 기기로 구분을 합니다.

/* 데스크탑 */

@media screen and (max-width:1023px) {
/* 타블렛 */
}

@media screen and (max-width:767px) {
/* 모바일 */
}

2. 가로모드 디바이스 지원 반응형 레이아웃 모바일 기기와 타블렛 기기의 가로모드 화면을 별도로 구분해 디바이스 사용환경을 최대한 고려한 반응형 레이아웃입니다.

 /* 빅데스크탑 */

@media screen and (max-width:1799px) {
/* 데스크탑 /
}

@media screen and (max-width:1199px) {
/* 타블렛 가로 */
}

@media screen and (max-width:899px) {
/* 모바일 가로, 타블렛 세로 */
}

@media screen and (max-width:599px) {
/* 모바일 세로 */
}

3. 부트스트랩 반응형 레이아웃

부트스트랩은 4개의 중단점으로 구분하며, 디바이스별 구분 보다는 작은(small), 중간(medium), 큰(large), 아주 큰(extra large) 화면 크기로 구분을 해서 반응형 화면을 구분합니다.

 /* 스마트폰 세로 */
@media screen and (min-width:576px) {
/* 스마트폰 가로 */
}

@media screen and (min-width:768px) {
/* 타블렛 */
}

@media screen and (min-width:992px) {
/* 데스크탑 */
}

@media screen and (min-width:1200px) {
/* 큰 데스크탑 */
}

5.모바일 퍼스트 개발 모바일 퍼스트는 말 그대로 모바일 우선입니다. 모바일에 대한 스타일이 우선 적용되도록, 분기점(break point)가 낮은 순대로 작성해 나갑니다. 반응형 웹개발에 있어서 모바일 퍼스트 개발은 근래에 선호되는 방법입니다.

참고 사이트 https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=rosaria1113&logNo=220699291210

https://eunyoe.tistory.com/entry/CSS-%EB%B0%98%EC%9D%91%ED%98%95-%EC%9B%B9Responsive-web-%EB%A7%8C%EB%93%A4%EA%B8%B0-%EB%B7%B0%ED%8F%AC%ED%8A%B8%EC%99%80-%EB%AF%B8%EB%94%94%EC%96%B4%EC%BF%BC%EB%A6%AC

https://nykim.work/84

https://aboooks.tistory.com/365

https://yeoninim.tistory.com/38

https://blogpack.tistory.com/823

반응형웹