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