6-4 스타일 적용하기

스타일을 적용하면 여백, 글자 크기, 배경 색상과 같은 디자인을 변경할 수 있어요.

스타일을 입력하고 변경사항을 저장한 다음에 앱 화면을 새로고침하면 스타일이 적용돼요.

기본적으로 스타일이 적용되어 있는 레고도 많을 거예요.

아래에 작성되어 있는 카테고리의 스타일만 수정하고 나머지 스타일은 원래대로 저장해 주세요.

중간중간 저장하고 새로고침해서 스타일을 적용했을 때 어떻게 나타나는지 확인해보세요.

아래에 나오는 Main, Base0 등 색상의 이름은 관리자 웹 > 개발 모드 > 환경 설정에서 확인하고 설정할 수 있어요.

목록 화면 스타일 적용

목록 화면에서는 상품 카테고리, 제목, 판매 가격, 사진의 스타일을 수정할 거예요.

관리자 웹 > 앱 설정 > 중고거래 메뉴 > 목록 화면 > 화면 구성 항목 > 상품 카테고리 > 스타일

  • [바깥 여백] 상단 20

  • [안쪽 여백] 상단/하단 3, 좌측/우측 8

  • [글자 크기] 14

  • [글자 색상] BaseM3

  • [글자 굵기] medium

  • [배경 색상] Main

  • [배경 모서리 곡률] 8

관리자 웹 > 앱 설정 > 중고거래 메뉴 > 목록 화면 > 화면 구성 항목 > 제목 > 스타일

  • [바깥 여백] 상단 8, 좌측/우측 20

  • [글자 크기] 18

  • [글자 굵기] bold

관리자 웹 > 앱 설정 > 중고거래 메뉴 > 목록 화면 > 화면 구성 항목 > 판매 가격 > 스타일

  • [바깥 여백] 상단 8

  • [글자 크기] 16

  • [글자 굵기] regular

관리자 웹 > 앱 설정 > 중고거래 메뉴 > 목록 화면 > 화면 구성 항목 > 사진 > 스타일

  • [배경 모서리 곡률] 8

변경사항 저장을 눌러서 바뀐 스타일을 확인해 보세요.

상세 화면 스타일 적용

상세 화면에서는 상품 카테고리, 제목, 판매 가격, 그리드, 사진의 스타일을 수정할 거예요.

관리자 웹 > 앱 설정 > 중고거래 메뉴 > 상세 화면 > 화면 구성 항목 > 상품 카테고리 > 스타일

  • [바깥 여백] 상단 20

  • [안쪽 여백] 상단/하단 3, 좌측/우측 8

  • [글자 크기] 14

  • [글자 색상] BaseM3

  • [글자 굵기] medium

  • [배경 색상] Main

  • [배경 모서리 곡률] 8

관리자 웹 > 앱 설정 > 중고거래 메뉴 > 상세 화면 > 화면 구성 항목 > 제목 > 스타일

  • [바깥 여백] 상단 16, 좌측/우측 20

  • [글자 크기] 24

  • [글자 굵기] bold

관리자 웹 > 앱 설정 > 중고거래 메뉴 > 상세 화면 > 화면 구성 항목 > 판매 가격 > 스타일

  • [바깥 여백] 상단 8

  • [글자 크기] 16

  • [글자 굵기] regular

관리자 웹 > 앱 설정 > 중고거래 메뉴 > 상세 화면 > 화면 구성 항목 > 첫 번째 그리드 > 스타일

  • [바깥 여백] 상단 16

관리자 웹 > 앱 설정 > 중고거래 메뉴 > 상세 화면 > 화면 구성 항목 > 사진 > 스타일

  • [배경 모서리 곡률] 8

변경사항 저장을 눌러서 바뀐 스타일을 확인해 보세요.

등록/수정 화면 스타일 적용

상세 화면에서는 제목, 상품 카테고리, 판매 가격, 내용의 스타일을 수정할 거예요.

관리자 웹 > 앱 설정 > 중고거래 메뉴 > 등록/수정 화면 > 화면 구성 항목 > 제목 > 스타일

  • [안쪽 여백] 상단/하단 0

  • [힌트] 제목을 입력하세요.

관리자 웹 > 앱 설정 > 중고거래 메뉴 > 등록/수정 화면 > 화면 구성 항목 > 상품 카테고리 > 스타일

  • [내용 간격] 5

  • [선택하지 않았을 때 스타일 - 안쪽 여백] 상단/하단 8, 좌측/우측 12

  • [선택하지 않았을 때 스타일 - 테두리 - 색상] Line

  • [선택하지 않았을 때 스타일 - 테두리 - 굵기] 1

  • [선택하지 않았을 때 스타일 - 배경 모서리 곡률] 8

  • [선택하지 않았을 때 스타일 - 글자 크기] 15

  • [선택하지 않았을 때 스타일 - 글자 색상] BaseM2

  • [선택하지 않았을 때 스타일 - 글자 굵기] regular

  • [선택했을 때 스타일 - 안쪽 여백] 상단/하단 8, 좌측/우측 12

  • [선택했을 때 스타일 - 배경 색상] Main

  • [선택했을 때 스타일 - 배경 모서리 곡률] 8

  • [선택했을 때 스타일 - 글자 크기] 15

  • [선택했을 때 스타일 - 글자 색상] BaseM3

  • [선택했을 때 스타일 - 글자 굵기] bold

관리자 웹 > 앱 설정 > 중고거래 메뉴 > 등록/수정 화면 > 화면 구성 항목 > 판매 가격 > 스타일

  • [힌트] 금액을 입력하세요.

관리자 웹 > 앱 설정 > 중고거래 메뉴 > 등록/수정 화면 > 화면 구성 항목 > 내용 > 스타일

  • [힌트] 내용을 입력하세요.

변경사항 저장을 눌러서 바뀐 스타일을 확인해 보세요.

#스타일 적용하기, #안쪽 여백, #바깥 여백, #글자 크기, #글자 색상, #글자 굵기, #배경 색상, #배경 모서리 곡률, #힌트, #내용 간격, #선택하지 않았을 때 스타일, #선택했을 때 스타일, #테두리

2023 07 24 ruru

Last updated