nextron 프로젝트, grid-cols와 col-span으로 UI를 반응형으로 보여주기

최근, nextron 프로젝트의 UI를 퍼블리싱 하고 피드백을 받는 중에, 이슈가 있었다.
바로, UI가 화면 크기에 따라 reponsive하게 보여줘야 한다는 것이다.
이것을 그림으로 형상화 하자면 다음과 같다.

위에 보이 듯, 화면의 크기가 줄어들면 글씨 크기와 block 등이 다 responsive하게 줄어 들어야 한다.
이 UI를 구현하기까지
시행착오가 있었는데 그것은 다음과 같다.

1. Display : flex와 width를 %로 주기.

flex는 태그들을 가로방향으로 일정한 간격을 주어 배치해준다. 그래서 나는 태그를 flex로 주고
Width의 값을 %로 준 뒤, padding값을 주어 의도한 대로 화면을 reponsive하게 주려고 했다.
하지만 결론을 실패!!

해당 방법 대로 구현을 하면 다음과 같다.

이전에 모바일 웹의 프로젝트를 진행한 적이 있어서 위와 같이 구현하였는데, 결론적으로 저 방법은 옳지 못했다.

그래서 찾은 방법은 바로

2. Display : grid이고 grid-cols-N과 cols-span-N이다.

1)Grid-cols-N이란 무엇인가?

N개의 열을 가진 그리드를 의미한다. 그리드 레이아웃이 N개의 수평 열을 갖고 있음을 알려준다.

2) cols-span-N이란 무엇인가?

해당 그리드 아이템이 N개의 열에 걸쳐 있음을 알려준다.
즉, 총 N개의 Grid 중 N개의 그리드를 담당하고 있다고 할 수 있다.
(예: Grid-cols-7 (7개의 그리드 중) cols-span-5 (5개의 그리드를 담당하고 있다.)

위의 내용을 형상화 해보았다.

그리고 그 다음 문제가 있었다. 바로 font-size 또한 responsive하게 해야 했다.
이것은 font-size를 vw로 정의하면 되는 문제였다.
Vw는 Viewport width, 뷰포트 너비의 백분율을 나타낸다. 뷰포트는 사용자가 보고 있는 웹 페이지의 화면영역을 의미하며, vw단위는 해당 뷰포트의 너비에 상대적으로 크기를 지정한다.

위의 방식 대로 구현한 결과, 의도한 대로 화면이 responsive하게 되었다.

지금까지 UI를 responsive하게 구현한 방법에 대해서 기록하였다.
근래에 UI 그리는 작업을 많이 하고 있는데,
이를 통해 내 실력도 한 층 상승하고 있음을 느낀다.
마지막으로 지금 프로젝트 UI 구현하는데 도움이 된 사이트 링크를 공유하면서 글을 마친다.

공유 링크 : https://tw-elements.com/docs/standard/extended/grid-columns/