반응형 그리드 시스템 CSS 오버레이
그냥 퍼블 한번 해보면 안 되겠니?
안녕하세요. 맥가입니다.
혼자 모작하는 방법이나 그리드 시스템 관련 글을 몇 개 작성했지만 아직도 어려워하시는 분들이 많은 듯합니다. 사실 반응형 퍼블리싱 직접 해보지 않고는 이해하기 힘든 부분이 맞습니다. 때문에 퍼블리싱을 해보라고 강요 아닌 강요를 하고 있고요. 오전에 출근해서 이에 대한 궁금증을 조금 더 풀어보고자 이번엔 퍼블리싱으로 접근해봅니다. 먼저 URL을 확인합니다.
반응형 그리드 시스템 CSS 오버레이URL : https://dingle.co.kr/grid/
이것을 딱히 뭐라 불러야 할지 몰라서 그냥 '반응형 그리드 시스템 CSS 오버레이'라고 적었습니다. 실제 퍼블리싱된 페이지를 통해 그리드 시스템을 직접 확인할 수 있도록 가공했습니다. 내가 만든 시안을 직접 퍼블리싱할 때도 그리드 시스템을 띄어놓을 수 있습니다. 창 사이즈를 조절하면서 그리드의 변화를 눈으로 볼 수 있으니 그만의 장점이 있을 거라 생각합니다. 외국 작업자가 만들어놓은 것에 8pt그리드를 적용하고 몇 가지를 수정했습니다.
본인의 작업물에 해당 CSS를 복사해서 붙여 넣으면 작동합니다. 필요시 해당 코드로 따로 CSS파일을 만들어 HTML내에 불러오는 형태로 작업해도 됩니다. 총 3개의 분기로 설정해두었고 기본 요소들은 CSS변수 처리했습니다. 세로 정렬을 위해 8pt그리드도 설정했습니다.
데스크톱 분기 1152px 12컬럼지난 그리드 시스템 관련 글에서 언급한 8pt그리드와 12컬럼을 적용한 데스크톱 분기입니다. 1280 해상도에 대응하기 위해 1152px을 기본 컨테이너로 설정해두었습니다.
태블릿 분기(세로) 640 최적화 8컬럼태블릿 분기인 768 해상도에 대응하기 위해 640px로 컨테이너 설정했습니다. 거터와 양쪽 마진은 데스크톱과 동일합니다. 양쪽 여백이 너무 넓어 부담스럽다면 코드상 해당 offset 수치를 조절해주면 됩니다. 8컬럼입니다.
모바일 분기(세로) 320 최적화 4컬럼모바일은 320 해상도의 4컬럼으로 설정했습니다. 컨테이너 사이즈 외 데스크톱, 태블릿과 나머지는 동일합니다.
CSS3 변수 처리기본으로 사용될 수치와 요소들을 CSS 변수로 잡아두었습니다. :root에서 정의한 값들을 그대로 가져와 여러 클래스에 동일하게 적용할 수 있으며 나중에 :root의 수치만 변경해주면 끝납니다.
CSS변수 적용위에서 정의한 CSS변수를 var(--변수명)으로 가져와 적용할 수 있습니다.
반응형 그리드 시스템과 그에 따른 반응형 디자인은 직접 해보지 않고는 이해하기 힘듭니다. 팀원 중 누군가 포토샵만 열어놓고 그것을 해내려는 걸 지켜보고 있자면 가끔은 답답합니다. 공부를 하고 스킬업을 하려는 자가 제한을 두고 공부를 합니다. 밥상 차리라 하니 밥 짓는 것만 연구합니다. 반찬은요? 퍼블리싱 모르는 자들. 장담하건대 여러분은 그 언젠가 퍼블리싱이 가능한 디자이너에게 지게 됩니다.
해당 HTML 파일 첨부합니다. 초심자를 위해 CSS파일 따로 분리하지 않았습니다.
관련링크
CSS변수 : https://developer.mozilla.org/ko/docs/Web/CSS/Using_CSS_custom_properties
반응형 그리드 생성기
http://www.responsivegridsystem.com/
