brunch

매거진 IMPREZA 테마 활용

라이킷 10 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by oksambari Dec 08. 2021

#6-5. 테이블 만들기(History, Contact

상점 소개 사이트 만들기

참고사이트에서는 정보 안내를 위한 테이블 형태의 구조를 표시하기 위해 html 태그 중 dl 요소를 사용했습니다.

※
HTML <dl> 요소는 설명 목록을 나타냅니다. <dl>은 <dt>로 표기한 용어와 <dd> 요소로 표기한 설명 그룹의 목록을 감싸서 설명 목록을 생성합니다. 주로 용어사전 구현이나 메타데이터(키-값 쌍 목록)를 표시할 때 사용합니다.

모바일에서는 폰트의 크기, 공간(padding), 넓이 정도만 변화가 되었고, 칼럼의 개수는 유지되어서 표시되고 있습니다.

이제 이걸 내가 만드는 페이지에도 구현을 하려고 한다면 어떻게 해야 할까요?

1. Html을 적고, 스타일은 CSS 정의

페이지 빌더의 화면 요소 중 'Custom HTML'을 이용하면 html 코드를 적어서 표시할 수 있습니다. dl, dt, dl과 관련된 스타일 정의들은 페이지의 css 입력 부분에 추가합니다.

페이지를 열어 보니 큰 문제없이 바로 잘 표시가 되는 걸 볼 수 있네요.

2. 로우를 이용해 테이블 구조 만들기 + 일부 스타일은 CSS로 추가

html로 테이블 구조를 만들 경우 내용이 길다면, 수정이 필요할 때 html 구조 내에서 찾아 바꿔야 해서 번거로울 때가 있습니다. 그리고 테이블 구조 내에 이미지나 버튼이 들어가면 모두 html로 적어야 하기 때문에 구조가 복잡해질 수 있습니다.

이런 불편한 점을 해결하기 위해 플러그인을 설치해서 테이블 한 칸 한 칸만 관리하면 되는 플러그인을 쓰기도 하는데요, 저는 플러그인 추가를 가급적 하지 않기 위해서이기도 하고, 페이지 빌더 내에 칼럼을 쉽게 나눌 수 있는 방법이 있어 로우를 이용해서 테이블 구조를 만드는 것을 선호합니다.

로우 안의 각 칼럼도 빌더 내에서 편집이 가능합니다. 각 칼럼의 공간을 디자인 설정에서 pc, 모바일에 맞게 설정합니다. 칼럼에 들어갈 텍스트, 이미지, 아이콘, 버튼 등도 이제 페이지 빌더 요소로 간단히 추가가 가능합니다.

한 줄이 완성된 다음에는 '편집' 버튼 옆의 '복사' 버튼을 이용하면 한 줄을 더 추가하기도 쉽습니다.

History 페이지의 테이블 구조는 위아래가 이어지는 형태의 점과, 선이 존재합니다. 이건 칼럼의 설정에서는 할 수 없고 css의 :before, :after를 이용해서 점과 선을 추가하면 되겠습니다.

!!!

페이지 빌더 내 모든 칼럼은 모바일 화면의 분기점 미만에서는 모두 1열로 변경이 되므로, 칼럼들에 대한 조치가 필요합니다. 모바일에서도 칼럼을 일정 넓이로 유지시키려면 칼럼 편집 > 'Responsive Options'를 이용해서 모바일 화면에서의 넓이를 지정해 주면 되겠습니다. (설정을 안 하면 stacking) 1/6 넓이라는 건 비율로 지정이 되는 것이므로, 이것과 max-width 속성을 함께 사용하면 특정 넓이 이상이 되지는 않게 할 수도 있습니다.