ETC
CSS. 그리드 시스템 활용하기
(*ᴗ͈ˬᴗ͈)ꕤ*.ﾟ
2022. 1. 26. 18:38
그리드 시스템을 활용하면 뭐든지 알맞은 비율로 만들 수 있다
거짓말 같지만, 디자인 감각이 하나도 없는 나조차도 뭐가 되어가는 거 같다
오오오오오오오오오오오오오오오오오오~~~~~
기분이 좋다
내가 만든걸 소개 하기 전에 먼저, 그리드 시스템에 대해 알아보겠다
그리드 시스템이란?
배너에 보이는 것 처럼 격자 모양의 틀이다.
페이지 콘텐츠를 일관성 있는 질서와 구조로 디자인할 수 있도록 돕는 그래픽 시스템인 것이다!
저 선에 맡게 딱딱 놔두면 된다
그리드 시스템의 구성요소?
그리드는 칼럼(Column), 거터(Gutter), 마진(Margin) 세 가지 요소로 구성된다.
- (1번) 칼럼 : 실제로 컨텐츠를 포함하는 부분입
- (2번) 거터 : 칼럼과 칼럼 사이의 공간
- (3번) 마진 : 내용과 화면의 왼쪽 및 오른쪽 가장자리 사이의 공간
내가 그리드 시스템으로 만든 레이아웃
피그마로 적용하니 금방 되더라.
근데 이미지를 넣을 곳을 저렇게 확인 해 보니 내 맴대로 되는게 하나도 없다
오른쪽 마지막은 좀 잘리게 나왔으면 좋겠는데....
여튼 한계를 인정하고, 여기서 최대한으로 활용해보고자 한다!
만든 결과물
ㅋㅋㅋㅋㅋㅋㅋㅋㅋ 너무 귀여워
저 앙~ 다문 입 좀 봐ㅠㅠㅠㅠ
저 조그만한 머리에 무슨 생각을 하고 있을지 궁금해 ㅠㅠㅠ
여튼 레이아웃으로 만들기 완성~~
(사실 내 결과물 자랑하려고 글 씀ㅋㅋㅋㅋㅋㅋ)