# 6-4 스타일 적용하기
스타일을 적용하면 여백, 글자 크기, 배경 색상과 같은 디자인을 변경할 수 있어요.
스타일을 입력하고 변경사항을 저장한 다음에 앱 화면을 새로고침하면 스타일이 적용돼요.
기본적으로 스타일이 적용되어 있는 레고도 많을 거예요.
아래에 작성되어 있는 카테고리의 스타일만 수정하고 나머지 스타일은 원래대로 저장해 주세요.
중간중간 저장하고 새로고침해서 스타일을 적용했을 때 어떻게 나타나는지 확인해보세요.
아래에 나오는 Main, Base0 등 색상의 이름은 관리자 웹 > 개발 모드 > [환경 설정](/main/class/puppy-app/9.md)에서 확인하고 설정할 수 있어요.
## 목록 화면 스타일 적용
목록 화면에서는 상품 카테고리, 제목, 판매 가격, 사진의 스타일을 수정할 거예요.
관리자 웹 > 앱 설정 > 중고거래 메뉴 > 목록 화면 > 화면 구성 항목 > 상품 카테고리 > 스타일
* \[바깥 여백] 상단 20
* \[안쪽 여백] 상단/하단 3, 좌측/우측 8
* \[글자 크기] 14
* \[글자 색상] BaseM3
* \[글자 굵기] medium
* \[배경 색상] Main
* \[배경 모서리 곡률] 8
관리자 웹 > 앱 설정 > 중고거래 메뉴 > 목록 화면 > 화면 구성 항목 > 제목 > 스타일
* \[바깥 여백] 상단 8, 좌측/우측 20
* \[글자 크기] 18
* \[글자 굵기] bold
관리자 웹 > 앱 설정 > 중고거래 메뉴 > 목록 화면 > 화면 구성 항목 > 판매 가격 > 스타일
* \[바깥 여백] 상단 8
* \[글자 크기] 16
* \[글자 굵기] regular
관리자 웹 > 앱 설정 > 중고거래 메뉴 > 목록 화면 > 화면 구성 항목 > 사진 > 스타일
* \[배경 모서리 곡률] 8
변경사항 저장을 눌러서 바뀐 스타일을 확인해 보세요.
## 상세 화면 스타일 적용
상세 화면에서는 상품 카테고리, 제목, 판매 가격, [그리드](/main/guide/develop_app/4/block/layout/grid.md), 사진의 스타일을 수정할 거예요.
관리자 웹 > 앱 설정 > 중고거래 메뉴 > 상세 화면 > 화면 구성 항목 > 상품 카테고리 > 스타일
* \[바깥 여백] 상단 20
* \[안쪽 여백] 상단/하단 3, 좌측/우측 8
* \[글자 크기] 14
* \[글자 색상] BaseM3
* \[글자 굵기] medium
* \[배경 색상] Main
* \[배경 모서리 곡률] 8
관리자 웹 > 앱 설정 > 중고거래 메뉴 > 상세 화면 > 화면 구성 항목 > 제목 > 스타일
* \[바깥 여백] 상단 16, 좌측/우측 20
* \[글자 크기] 24
* \[글자 굵기] bold
관리자 웹 > 앱 설정 > 중고거래 메뉴 > 상세 화면 > 화면 구성 항목 > 판매 가격 > 스타일
* \[바깥 여백] 상단 8
* \[글자 크기] 16
* \[글자 굵기] regular
관리자 웹 > 앱 설정 > 중고거래 메뉴 > 상세 화면 > 화면 구성 항목 > 첫 번째 그리드 > 스타일
* \[바깥 여백] 상단 16
관리자 웹 > 앱 설정 > 중고거래 메뉴 > 상세 화면 > 화면 구성 항목 > 사진 > 스타일
* \[배경 모서리 곡률] 8
변경사항 저장을 눌러서 바뀐 스타일을 확인해 보세요.
## 등록/수정 화면 스타일 적용
상세 화면에서는 제목, 상품 카테고리, 판매 가격, 내용의 스타일을 수정할 거예요.
관리자 웹 > 앱 설정 > 중고거래 메뉴 > 등록/수정 화면 > 화면 구성 항목 > 제목 > 스타일
* \[안쪽 여백] 상단/하단 0
* \[[힌트](/main/guide/develop_app/4/style/hint.md)] 제목을 입력하세요.
관리자 웹 > 앱 설정 > 중고거래 메뉴 > 등록/수정 화면 > 화면 구성 항목 > 상품 카테고리 > 스타일
* \[내용 간격] 5
* \[선택하지 않았을 때 스타일 - 안쪽 여백] 상단/하단 8, 좌측/우측 12
* \[선택하지 않았을 때 스타일 - 테두리 - 색상] Line
* \[선택하지 않았을 때 스타일 - 테두리 - 굵기] 1
* \[선택하지 않았을 때 스타일 - 배경 모서리 곡률] 8
* \[선택하지 않았을 때 스타일 - 글자 크기] 15
* \[선택하지 않았을 때 스타일 - 글자 색상] BaseM2
* \[선택하지 않았을 때 스타일 - 글자 굵기] regular
* \[선택했을 때 스타일 - 안쪽 여백] 상단/하단 8, 좌측/우측 12
* \[선택했을 때 스타일 - 배경 색상] Main
* \[선택했을 때 스타일 - 배경 모서리 곡률] 8
* \[선택했을 때 스타일 - 글자 크기] 15
* \[선택했을 때 스타일 - 글자 색상] BaseM3
* \[선택했을 때 스타일 - 글자 굵기] bold
관리자 웹 > 앱 설정 > 중고거래 메뉴 > 등록/수정 화면 > 화면 구성 항목 > 판매 가격 > 스타일
* \[힌트] 금액을 입력하세요.
관리자 웹 > 앱 설정 > 중고거래 메뉴 > 등록/수정 화면 > 화면 구성 항목 > 내용 > 스타일
* \[힌트] 내용을 입력하세요.
변경사항 저장을 눌러서 바뀐 스타일을 확인해 보세요.
> \#스타일 적용하기, #안쪽 여백, #바깥 여백, #글자 크기, #글자 색상, #글자 굵기, #배경 색상, #배경 모서리 곡률, #힌트, #내용 간격, #선택하지 않았을 때 스타일, #선택했을 때 스타일, #테두리
2023 07 24 ruru
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.ohmyapp.io/main/class/puppy-app/6/6-4.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.