반응형 웹 기초(1)

'유노코딩'님의 <입문자를 위한 반응형 웹 기초 강의>를 토대로 작성한 글입니다. 이 자리를 빌어서 양질의 강의 제공에 대한 감사의 인사를 전합니다.

반응형 웹

• 기기나 브라우저의 크기에 맞게 구성이나 크기를 변경해가며 반응하는 웹 문서 또는 이를 위해 사용하는 기법.
• 가장 핵심이 되는 키워드 : ‘가변성’
  $\qquad$ → 브라우저의 크기나 사용자의 기기에 일일이 대응할 수 있어야 함.
• 우선적으로 HTML 웹문서에 viewport 속성에 관한 meta태그를 추가한다.

    <meta name="viewport" content="width=device-width,initial-scale=1">

	// content 속성에서 width와 height는 px단위로 설정이 가능하다.
	// content 속성 안에 user-scalable=no 로 사용자의 화면 축소/확대 여부를 설정한다.
	

참고1

상대단위 em, rem

• em : 부모 요소의 글꼴 크기를 기준으로 한다.
• rem : 루트 요소의 글꼴 크기를 기준으로 한다.
  $\qquad$ → 기본 글꼴은 16px, * {font-size: ? px} 로 조정한다.
• 참고 : em으로 패딩과 마진을 줄 때는 부모 요소가 아닌 자기 자신의 글자 크기를 기준으로 한다.

→ 최근 프로젝트에서 내가 맡은 부분의 폰트 크기 변화가 많지 않으므로, 쉽게 적용해볼 법하다.
→ em, rem 에 관해 겉핥기로 애매하게 알고 있었는데 이번 기회에 확실하게 알았다.

뷰포트 단위 vw, vh

• vw : 뷰포트 너비의 1/100 크기
• vh : 뷰포트 높이의 1/100 크기
• vmin : 뷰포트 너비와 높이 중 작은 쪽의 1/100 크기
• vmax : 뷰포트 너비와 높이 중 큰 쪽의 1/100 크기

→ vmin, vmax가 필요한 이유에 대해서 더 알아보았다. 참고

• 폰트에 활용한다면 뷰포트에 따라 예기치 않게 너무 커지거나, 작아지는 현상을 방지할 수 있다.