요즘에는 웹사이트를 출력할 수 있는 디스플레이 장치가 굉장히 많다.
예전에는 컴퓨터만 웹사이트에 접속이 가능해서 많이 사용하는 컴퓨터 해상도로 맞추고 그 해상도에서 사용이 되지 않을시 원치않은 스크롤바가 만들어지는 문제가 있었다.
고정형 디자인
이런식으로 원치 않는 스크롤바가 생성된다.
핸드폰부터 5K 디스플레이까지 웹사이트 화면을 보여주는 디자인을 반응형 디자인이라고 한다.
이 때는 고정폭이 아닌 변동폭으로 사이즈를 설정하여 반응형 디자인을 만들 수 있다.
반응형 디자인
반응형 디자인은 세 가지 기술을 조합해서 사용하는 방법을 의미한다고 한다.
1. 유동 격자
유동 격자는 grid를 사용하라고 하는데.. 여전히 flex도 많이 사용하는것으로 보인다.
grid와 flex의 차이를 대략적으로 예시 참고하여 알아보자.
GRID
grid
display: grid; : 해당 요소 안과 밖 모두 block 처럼 동작한다.
inline-grid
display: inline-grid; : 해당 요소 안에서는 block 처럼 동작하지만 다른 요소들과는 inline 처럼 동작한다.
FLEX
flex
display: flex; : 해당 요소 안에서는 inline 처럼 동작하지만 다른 요소들과는 block 처럼 동작한다.
inline-flex
display: inline-flex; : 해당 요소 안과 밖 모두 inline 처럼 동작한다.
grid에 대한 자세한 설명은 grid 란?, flex에 대한 자세한 설명은 flex 란?을 참고하자.
2. 유동 이미지
<img src="이미지 URL" alt="유동 이미지" width="이미지 너비" height="이미지 높이" style="max-width: 100%; height: auto;" />
max-width: 100%, height: auto; 이용하여 이미지 사이즈가 작으면 상관없으나, 크면 100% 까지만 크기가 커지게 설정할 수 있다.
유동 이미지에 대한 자세한 사항은 유동 이미지를 참고하자.
3. 미디어 쿼리
미디어 쿼리를 사용하여 모바일, 태블릿, 노트북, 데스크탑 등에서 디자인이 깨지지 않게끔 설정할 수 있다.
태블릿
노트북
데스크탑
이렇게 미디어쿼리 설정하는 방법은 미디어 쿼리를 참고하자.