brunch

매거진 IMPREZA 테마 활용

라이킷 8 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by oksambari Dec 15. 2021

#7-1. 기본 레이아웃 설정, 세로선 만들기

그리드 디자인 사이트 만들기

먼저 참고사이트의 레이아웃 기준들을 파악해 보겠습니다.

콘텐츠의 총넓이를 90%로 비율 형태로 지정을 하고 있습니다.

모바일 화면은 0~1000px까지로 계획이 되었고, 1000px까지 칼럼들은 1열로 내려갑니다.

헤더, 본문, 푸터에서 사용된 색들을 확인합니다. 크게 black and white 계열로 사용이 되고 있고, 강조색으로는 #2aad88 색을 사용 중입니다.

기본 폰트 사이즈는 pc 화면에서는 14px, 모바일 화면에서는 12px을 사용 중이고, 폰트는 noto sans 계열입니다.

각 섹션 간의 간격은 pc에서는 80px, 모바일에서는 5vh(화면 높이의 5%)로 변경됩니다.

기본적인 정보들을 확인했다면 이제 테스트 사이트에 적용할 차례입니다.

1. 기본 레이아웃 설정하기

Impreza > 테마 옵션을 이용해서 기본 레이아웃 관련 옵션들을 설정합니다. 먼저 'Site Layout'탭에서 콘텐츠의 넓이, 위아래 간격, 1열로 변경되는 시점 및 모바일 화면으로 전환되는 시점을 입력합니다. 이때 최대 넓이는 px로만 입력이 가능한데, 이런 경우 Custom CSS 입력을 이용해서 직접 입력을 하면 되겠습니다. 위아래 간격(padding)도 모바일 화면을 고려해서 원하는 값으로 추가 정의를 해 줍니다. (80px -> 5vh)

색 입력 부분입니다. 헤더, 콘텐츠, 푸터로 구분되어 각각 기본 색, 그리고 오른쪽에 또 다른(Alternate) 색 조합을 설정할 수 있게 돼 있습니다. (이후에 반전색 적용 시 사용!)

'타이포그래피' 탭에서는 사용될 폰트 종류, 본문 기본 글자 사이즈를 지정할 수 있습니다. h1~h6까지 미리 필요한 폰트 사이즈의 타이틀 태그를 만들어 놓을 수 있습니다.

2. 그리드 라인 넣기

화면 맨 위에서 맨 아래까지 이어지고, 콘텐츠의 영역 양쪽 끝과 가운데 1/3, 2/3 지점에 그어지는 선을 만들어야 합니다.

참고사이트를 보면 '<div class="p-line"></div>' 태그를 별도로 넣어서 css를 가지고 선(border)을 그은 것으로 보입니다. 같은 방법으로 넣어 봤습니다.

우선 화면 어딘가에 이 태그를 넣어야 css로 스타일을 넣을 수 있겠죠. 화면 어딘가라고 하면 </body> 태그라고 하는 화면에 보이는 요소들의 끝 지점 이전에 들어가야 하는데, 테마 옵션에 원하는 코드를 넣을 수 있는 곳이 있습니다.

이제 이 grid-line이라는 태그에 대해, css를 추가해 주면 전 화면을 덮는 세로 라인이 추가됩니다. z-index를 이용해서 라인이 맨 아래(z-index:0) > 그 위로 본문 콘텐츠 영역(l-canvas > z-index:1)이 오게 할 수 있습니다.

선보다 본문 영역이 위에 있게 했으니, 본문 영역에 백그라운드 색이 들어가 있다면 바닥에 그어진 선이 안 보이게 됩니다. 그래서 본문의 백그라운드 색은 투명하게 설정을 해야 합니다. 대신 전체 화면의 배경색은 custom css를 이용해서 body 태그에 백그라운드 색을 적용하면 되겠습니다.