# 6-4 스타일 적용하기

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

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

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

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

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

아래에 나오는 Main, Base0 등 색상의 이름은 관리자 웹 > 개발 모드 > [환경 설정](https://docs.ohmyapp.io/main/class/puppy-app/9)에서 확인하고 설정할 수 있어요.

## 목록 화면 스타일 적용

<div align="left"><figure><img src="https://3976660509-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDgfvhQgmY9NbRK0Sln7j%2Fuploads%2FP2rBT3OlouwUmcBoyUmD%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202023-07-25%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%201.08.43.png?alt=media&#x26;token=87a95a8b-20d5-49d5-a1a1-7b07d3efc007" alt="" width="563"><figcaption></figcaption></figure></div>

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

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

* \[바깥 여백] 상단 20
* \[안쪽 여백] 상단/하단 3, 좌측/우측 8
* \[글자 크기] 14
* \[글자 색상] BaseM3
* \[글자 굵기] medium
* \[배경 색상] Main
* \[배경 모서리 곡률] 8&#x20;

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

* \[바깥 여백] 상단 8, 좌측/우측 20
* \[글자 크기] 18
* \[글자 굵기] bold

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

* \[바깥 여백] 상단 8
* \[글자 크기] 16
* \[글자 굵기] regular

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

* \[배경 모서리 곡률] 8

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

## 상세 화면 스타일 적용

<div align="left"><figure><img src="https://3976660509-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDgfvhQgmY9NbRK0Sln7j%2Fuploads%2F9mEoGVIMujT1JjIP1NUR%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202023-07-25%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%201.27.41.png?alt=media&#x26;token=b164942b-75c1-49b3-ac2c-7dc0e631215a" alt="" width="563"><figcaption></figcaption></figure></div>

상세 화면에서는 상품 카테고리, 제목, 판매 가격, [그리드](https://docs.ohmyapp.io/main/guide/develop_app/4/block/layout/grid), 사진의 스타일을 수정할 거예요.

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

* \[바깥 여백] 상단 20
* \[안쪽 여백] 상단/하단 3, 좌측/우측 8
* \[글자 크기] 14
* \[글자 색상] BaseM3
* \[글자 굵기] medium
* \[배경 색상] Main
* \[배경 모서리 곡률] 8&#x20;

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

* \[바깥 여백] 상단 16, 좌측/우측 20
* \[글자 크기] 24
* \[글자 굵기] bold

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

* \[바깥 여백] 상단 8
* \[글자 크기] 16
* \[글자 굵기] regular

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

* \[바깥 여백] 상단 16

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

* \[배경 모서리 곡률] 8

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

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

<div align="left"><figure><img src="https://3976660509-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDgfvhQgmY9NbRK0Sln7j%2Fuploads%2F1ATevWpMOjMBE4pnl6xE%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202023-07-25%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%201.59.44.png?alt=media&#x26;token=a14fb467-360e-44ce-94e0-ec6b5e26e12e" alt="" width="563"><figcaption></figcaption></figure></div>

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

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

* \[안쪽 여백] 상단/하단 0
* \[[힌트](https://docs.ohmyapp.io/main/guide/develop_app/4/style/hint)] 제목을 입력하세요.

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

* \[내용 간격] 5
* \[선택하지 않았을 때 스타일 - 안쪽 여백] 상단/하단 8, 좌측/우측 12
* \[선택하지 않았을 때 스타일 - 테두리 - 색상] Line
* \[선택하지 않았을 때 스타일 - 테두리 - 굵기] 1
* \[선택하지 않았을 때 스타일 - 배경 모서리 곡률] 8
* \[선택하지 않았을 때 스타일 - 글자 크기] 15
* \[선택하지 않았을 때 스타일 - 글자 색상] BaseM2
* \[선택하지 않았을 때 스타일 - 글자 굵기] regular
* \[선택했을 때 스타일 - 안쪽 여백] 상단/하단 8, 좌측/우측 12
* \[선택했을 때 스타일 - 배경 색상] Main
* \[선택했을 때 스타일 - 배경 모서리 곡률] 8
* \[선택했을 때 스타일 - 글자 크기] 15
* \[선택했을 때 스타일 - 글자 색상] BaseM3
* \[선택했을 때 스타일 - 글자 굵기] bold

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

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

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

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

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

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

2023 07 24 ruru