[CSS] responsive 반응형 (+vscode 단축키)

반응형:

PC용으로 완성된 HTML을 유지한 채 CSS만으로 다양한 기기의 너비에 맞춰

컨텐츠의 너비와 배치를 조절하여 최적화하는 것

=/=

적응형 :

태블릿, 또는 모바일용으로 HTML, CSS, javascript를 별도로 작성하는 것

주로 주소표시줄에 m.으로 시작하거나 마지막에 /mobile/ 또는 /m/으로 끝나는 경우가 적응형이다.

 

 

 

• 크롬의 경우 브라우저 너비의 크기를 500px까지만 줄일 수 있다.
• 480px 이하의 화면을 확인하려면 개발자 도구에서 toggle device toolbar를 클릭하여 모바일 화면으로 변경해야한다.

 

 

 

 

반응형에서의 요소의 비율 계산

계산	결과
작은 값/큰 값(기준 값) * 100	960/960 x 100 = 100%
	350/960 x 100 = 36.45%
	550/960 x 100 = 57.29%

 

 

 

반응형 구현 시 수정해야 할 주요 내용

• 고정값으로 되어 있는 px, rem, em 등의 수치를 %, vw, vh 등의 비율의 단위로 변경해야 한다.
• float을 이용하여 가로배치했던 것을 해제할 때는 float:none을 설정한다.
• 해당 구간에서만 나타나거나 안보이도록 할 요소에 display:block 또는 display:none을 설정한다.
• 배경 지정을 해제할 때는 background:none을 설정한다.
• 크기를 내용의 크기만큼 자연스럽게 설정되도록 할 때는 width:auto 또는 height:auto로 설정한다.

 

 

 

반응형 주의사항

• 반응형에서 작성하는 CSS가 기존의 CSS를 대체할 수 있도록 우선순위가 높아야 한다.
• 만약 반응형 CSS가 별도의 파일로 구분되어 있다면 로드 순서가 main.css -> responsive.css 순서여야하는 것이다.
• (하단에 있을수록 우선순위가 높아지므로)

 

 

 

반응형에서의 이미지 구현(레티나 이미지)

PC의 pixel ratio는 1이다.

고해상도 스크린(pixel ratio가 2이상인 휴대폰, 태블릿 등)에서는 100*100px의 크기에 200*200의 픽셀이

표현되기 때문에 흐려보이게 된다.

애초에 크기가 큰 이미지는 상관이 없으나 로고나 아이콘같은 작은 크기의 이미지(png 등)는 문제가 생길 수 있다.

처음 이미지를 저장할 때부터 사용하려는 사이즈보다 최소 2배 이상의 사이즈로 저장해서

pc용과 고해상도스크린용 두가지로 구분하여 사용하는 것이 좋다.