[WANTED] PRE-ONBORADING FE 챌린지 9월 - 1

<< 주제 : 당신의 코드는 기본에 충실한가요? >>

- 부제 : HTML & CSS 는 무시할만한 것들이 아니다!  ✨-

 

0) 반응형 웹 사이트란?

• 하나의 웹 사이트로 접속하는 기기의 화면 크기에 맞춰 자동으로 레이아웃 및 콘텐츠를 구성하는 개발 방법
• 왜 반응형 웹이 성행하게 되었나?
  • 스마트폰 & 태블릿 등의 대중화로 인한 중요성이 인식됨
  • 즉, 인터넷에 접속되는 기기가 다양해지면서 다양한 스크린 사이즈에 대응해야하는 이슈가 생김

1) 반응형 웹 사이트의 범위

• 화면크기 (viewport)
• 화면방향 (가로, 세로)
• 픽셀밀도
  • 얼마나 고해상도 폰인가?
  • Ratio가 얼마나 되는가?
• 화면 비율 
  • ex) 2:3, 9:16비율 등
• 마우스 포인터
  • pointer: corase 
  • pointer: fine 
  • hover ... 등등
  • 참고하면 좋은 블로그 : https://marshallku.com/web/tips/css%EB%A1%9C-%EA%B8%B0%EA%B8%B0-%ED%8C%8C%EC%95%85%ED%95%98%EA%B8%B0
• 프린트 장치
  • 모니터 화면에서 볼때의 비율과 해당 화면을 프린트 해서 볼때의 비율이 달라질 수 있음
  • 주로 공기업, 공공기관, 교육기관 에서 화면 프린트를 자주 사용함
• 컬러&컬러모드 (light, dark 모드 등)
• 주변 광도
• 고대비모드
  
  • 시스템 상에서 색 대비를 강하게 해주는 모드로, 주로 시각 장애인이 사용하는 모드 
    • ex) 검정 화면에 노란색 글씨
    • 한국에서는 사례가 적지만 외국에서 많이 사용함.
    • 실제로 해외에서는 고대비 모드를 지원하지 않아 사용자가 고소를 해서 승소한 사례도 다수 있었음
• 애니메이션 & 투명도

2) 반응형 웹을 만들 때, 사용하면 유용한 사이트

• mediaqueriestest.com
•  browsleak.com
  •  화면 크기 사이즈 등, 화면이 움직일때 어떤 값들이 변경되는지 다양한 옵션 값들을 볼 수 있는 사이트
  • https://mediaqueriestest.com/
  • https://browserleaks.com/css
• giona.net
  •  미디어 쿼리를 만들어주는 사이트
  • https://giona.net/tools/css3-mediaquery-generator/
• screensiz.es
• blisk.io/devices
• mydevice.io
• yesviz.com/viewport
  • 각 화면들의 해상도를 확인할 수 있는 사이트
  • https://screensiz.es/
  • https://blisk.io/devices
  • https://www.mydevice.io/
  • https://yesviz.com/viewport/

3) 비트맵과 벡터

	벡터	비트맵
특징	- 좌표를 계산해서 그래픽을 만듦 - (비트맵과 비교했을 때) 용량이 작음	- 점(픽셀)을 모아 그래픽을 만듦 - (벡터와 비교했을 때) 용량이 큼
장점	확대, 축소해도 그래픽이 깨지지 않음 (ai, svg, eps, pdf)	복잡한 이미지 표현이 가능함 (jpg, png, gif, bmp, webp)
단점	복잡한 이미지 표현이 어려움	확대하거나 축소하면 그래픽이 깨짐

• 웹 페이지에서 이모티콘이나 이미지가 커졌다, 작아졌다 했을 때 깨지지 않는 이유는 보통 벡터로 이루어져있기 때문임
  • Q. 그럼 이미지를 쓸 때, png로 다 쓰면 되나??
  • A. 무작정 쓰면 안됨. 웹페이지는 포함된 파일들의 용량에 따라 페이지 속도가 달라지기 때문.
    • gif, png, jpg, sgv는 각 상황에 따라 적절하게 사용해야 함!

4) 해상도와 밀도

• 실제 기기의 디스플레이 픽셀과 CSS에서 인식하는 픽셀이 다름
  • 예전에는 똑같았는데, 웹에 DPR이라는 개념이 들어오면서 "밀도"가 생김
• PPI(Pixel Per Inchi) 
  • 1인치 안에 픽셀이 얼마나 들어가는가? 를 의미함
• DPR(Device Pixel Ratio) 
  • 모바일 작업을 할 때 필수적으로 알야야 함
  • CSS 미디어쿼리에서 DPR
  • 한 개의 픽셀 안에 몇 개의 화소를 집어넣을 수 있는가? 를 의미함
    
    • ex) dpr이 3이라는 뜻은 CSS 1픽셀 안에 dive pixel이 9개 욱여넣어져 있다는 뜻 (그만큼 엄청 선명하다!!)

이미지 출처 : https://tomroth.com.au/dpr/

5) 사이즈의 종류와 특징

	고정	기준	환산
px	O	화면	1px = 화면 최소의 픽셀
%	X	부모요소	1% = 부모 요소 크기의 1%
em	X	부모 폰트 크기	1em = 부모 요소의 폰트 크기
rem	X	root(html)	1rem = html 태그의 폰트 크기
vw	X	viewport	1vw = viewport 너비의 1%
vh	X	viewport	1vh = viewport 높이의 1%
vmin	X	viewport	vw와 vh 중 작은 값
vmax	X	viewport	vw와 vh 중 큰 값