✔️ media query
💡 미디어 타입에 따라 스타일을 다르게 적용할 수 있는 방법 제공 ! 반응형 웹 구현 시 가장 핵심적인 요소 중 하나 !
반응형 웹사이트를 만들 때 media query를 사용해서 화면 크기, 해상도, 방향 등 디바이스 특성에 따라 스타일 변경할 수 있다. 이 때, viewport의 width , height 값에 따라 구간별로 다른 CSS 속성을 적용한다. 미디어 쿼리는 예외를 작성하므로 상단보다는 하단에 작성하는 것이 적합한데 이는 오버라이딩을 하기 위한다. @media 키워드 사용하고 그 뒤에 원하는 미디어 타입과 스타일을 정의한다.
// 🌱 example
// 형태 예시
@media screen and (max-width: 600px){
/* 스타일 정의 */
}✔️ viewport
💡 display 상에서 웹을 보여주고 있는 ‘ 화상표시 영역( 화면 표시 영역 ) '
viewport meta tag의 속성을 활용하여 다음과 같은 부분을 정의할 수 있다.
- viewport content 속성 값
width=device-width- 웹 페이지의 너비를 디바이스 너비에 맞춤
- 상하 스크롤이 주로 쓰이는 웹
height=device-height- 웹 페이지의 높이를 디바이스 높이에 맞춤
- 좌우 스크롤이 주로 쓰이는 웹
initial-scale- 초기 화면 배율 설정
- 1 = 100%
minimum-scale- 최소 화면 배율 설정
- 화면이 극단적으로 축소되는 것 방지
miximum-scale- 최대 화면 배율 설정
- 화면이 극단적으로 확대되는 것 방지
user-scalable=no- 유저가 크기 조절을 할 수 없게 막는 속성
- 사용자의 편의성을 최대한 고려하여 배려하는 반응형 웹에서 사용 거의 X
✔️ responsive units( 가변 크기 단위 )
💡 상대적인 크기 단위 중
em,rem,%가장 많이 사용하는 단위
| 단위 | 설명 |
|---|---|
em | 요소를 감싸고 있는 부모 요소의 글자 크기를 기준으로 하는 단위 |
rem | html 요소( 최상위 요소 )의 글자 크기를 기준으로 하는 단위 |
vw | 브라우저의 너비(가로)를 기준으로 하는 단위 |
vh | 브라우저의 폭(세로)을 기준으로 하는 단위 |
vmin | 브라우저의 너비와 폭 중에서 더 작은 값을 기준으로 하는 단위( IE9에서는 vmin대신 vm으로 지원 ) |
vmax | 브라우저의 너비와 폭 중에서 더 큰 값을 기준으로 하는 단위( IE11, Edge13, Edge14 에서는 지원하지 않음 ! |
% | 부모 요소의 크기에 상대적인 비율을 나타내는 단위 |
// 🌱 example
// 전체 텍스트 영역 상대적 폰트크기: 1.2rem, p 태그로 내부 텍스트 크기 90%로 지정
<div style='font-size: 1.2rem;'> Sample text ✨
<p style='font-size: 90%;'> smaller text inside </p>
</div>✔️ image resizing( 가변 이미지/ 가변 동영상 )
💡 화면 너비에 따라 크기가 자동으로 조정되는 가변 이미지, 가변 동영상 등 사용
CSS 최대 너비 속성 또는 백분율 값을 사용하여 이미지 크기를 제어한다. 이를 통해 로딩 속도를 높이고 불필요한 데이터 트래픽을 줄일 수 있다.
// 🌱 example
<img src='image.jpg' alt='image' width='50%' height='50%' />✔️ grid system( 가변 그리드 )
그리드 시스템을 적용하여 유동적인 레이아웃을 구성해 다양한 디바이스에 대응하는 반응형 웹 구현할 수 있다.
- 웹 그리드 시스템 구성 요소
Column: 실제로 컨텐츠를 포함하는 영역Margin: 여백, 컨텐츠 영역의 양 끝에 있는 공간Gutter:Column들 사이의 공간, 컨텐츠 배치 시 구분을 위한 역할
✔️ mobile ?
데스크 탑 환경에서 화면 배치보다 모바일 환경에서 화면 배치가 더 어렵다. 이는 작은 화면에 적절하게 콘텐츠를 배치해야 하기 때문이다. 이 때문에 디자인 및 개발 시 작은 화면을 시작으로 큰 화면 을 위한 작업을 함으로써 더 다양한 환경에 쉽게 적용할 수 있는 웹을 만들 수 있다.
또한 모바일 환경의 화면 개발시에는 모바일에서 보기에 불필요한 요소 숨김 처리함으로써 사용자의 시선을 집중시키고 페이지 로딩 속도 또한 개선할 수 있다. 예시로 네비게이션 바의 경우 데스크톱 버전은 상단에 메뉴를 고정하고 모바일 환경에서는 햄버거 메뉴를 활용할 수 있다. 숨김 처리의 경우 CSS의 display: none / visibility: hidden 를 활용한다.
모바일 기기에서는 버튼이나 링크 등을 데스크 탑 환경에서 보다 클릭하기 어려우므로 UI 요소의 간격을 충분히 유지하고 적당한 크기로 조절해야 한다.
✔️ touch event
💡 터치 이벤트? 마우스 이벤트와 다르게 사용자의 터치 동작을 인식하여 이벤트 처리
모바일 환경에서는 마우스 대신 사용자의 터치를 이용하여 스크롤, 클릭, 드래그 등의 동작을 수행한다. 스와이프 핀치 줌 등의 제스처 기능도 지원하므로 제스처 이벤트 처리하는 것도 중요하다.
이를 위해 JavaScript 라이브러리 / Hammer.js / TouchSwipe와 같은 프레임워크 사용할 수 있고 터치, 스와이프, 핀치 투 줌과 같은 사용자 작업을 감지하고 적절한 응답 제공한다.
✔️ device width ?
- 가장 작은 디바이스:
< 576px - 모바일 디바이스:
<= 768px - 태블릿 디바이스:
768px < x <= 992px - 데스크탑:
992px < x <= 1200px - 큰 화면 데스크탑:
1200px <
✔️ framework & library
Bootstrap, Foundation, Bulma와 같은 반응형 프레임워크 및 라이브러리 사용하여 개발 프로세스의 속도를 크게 높이고 웹 사이트 전체에서 일관된 반응형 디자인을 보장할 수 있다.
✔️ test & debugging
반응형 웹사이트는 다양한 기기와 브라우저 환경에 적용하기 위함이기 때문에 각각의 기기와 환경에서 잘 동작하는지 확인하기 위한 테스트 수행해야 한다. 그리드와 반응형 웹 구성 단위가 모든 브라우저에 호환되지 않을 수도 있기 때문에 Chrome, Firefox, Safari, Internet Explorer 등 다양한 브라우저에서 확인하고 스마트폰, 태블릿 및 데스크톱 컴퓨터 등 다양한 장치에서 테스트해야 한다.
