# 사이트 스타일 지정 및 사용자 경험 개선
이 튜토리얼에서는 포트폴리오 사이트에 기본 사이트 테마를 추가하고 사용자 경험을 개선합니다.
## 스타일 추가
사이트 스타일을 지정하려면 `mysite/static/css/mysite.css` 파일로 이동하여 다음을 추가합니다:
```css
*,
::before,
::after {
box-sizing: border-box;
}
html {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif, Apple Color Emoji, "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
body {
min-height: 100vh;
max-width: 800px;
margin: 0 auto;
padding: 10px;
display: grid;
gap: 3vw;
grid-template-rows: min-content 1fr min-content;
}
a {
color: currentColor;
}
footer {
border-top: 2px dotted;
text-align: center;
}
header {
border-bottom: 2px dotted;
}
.template-homepage main {
text-align: center;
}
```
이제 포트폴리오 사이트를 다시 로드하여 스타일을 반영합니다.
```{note}
다시 로드한 후에도 웹 페이지 스타일이 업데이트되지 않으면 브라우저 캐시를 지워야 할 수 있습니다.
```
## 사용자 경험 개선
포트폴리오 사이트의 사용자 경험을 개선하는 방법에는 여러 가지가 있습니다.
`mysite/templates/base.html` 파일을 다음과 같이 수정하여 시작합니다:
```html+django
{# wagtailuserbar 제거: #}
{% load static wagtailcore_tags %}
{% block title %}
{% if page.seo_title %}{{ page.seo_title }}{% else %}{{ page.title }}{% endif %}
{% endblock %}
{% block title_suffix %}
{% wagtail_site as current_site %}
{% if current_site and current_site.site_name %}- {{ current_site.site_name }}{% endif %}
{% endblock %}
{% if page.search_description %}
{% endif %}
{# 라이브 미리보기 패널의 모든 링크가 새 탭에서 열리도록 강제합니다 #}
{% if request.in_preview_panel %}
{% endif %}
{# 지원되는 색 구성표 추가: #}
{# 인라인 SVG로 파비콘 추가: #}
{# 전역 스타일시트 #}
{% block extra_css %}
{# 추가 스타일시트를 추가하려면 템플릿에서 이것을 재정의하십시오 #}
{% endblock %}
{# wagtailuserbar 제거: #}
{% include "includes/header.html" %}
{# 블록 콘텐츠를 HTML5 태그로 래핑하십시오: #}
{% block content %}{% endblock %}
{% include "includes/footer.html" %}
{# 전역 자바스크립트 #}
{% block extra_js %}
{# 추가 자바스크립트를 추가하려면 템플릿에서 이것을 재정의하십시오 #}
{% endblock %}
```
이전 템플릿에서 다음과 같은 수정 사항을 적용했습니다:
1. 기본 템플릿에서 `wagtailuserbar` 를 제거했습니다. 튜토리얼 뒷부분에서 `wagtailuserbar` 를 `header` 템플릿에 추가할 것입니다. 이 변경 사항은 키보드 및 화면 판독기 사용자의 사용자 경험을 개선합니다.
2. 사이트에서 지원되는 색 구성표를 브라우저에 알리기 위해 `` 를 추가했습니다. 이렇게 하면 사이트가 어두운 테마와 밝은 테마 모두에 적응합니다.
3. `` 태그를 사용하여 인라인 SVG로 포트폴리오 사이트에 파비콘을 추가했습니다.
4. `{% block content %}` 및 `{% endblock %}` 태그를 `` HTML5 태그로 래핑했습니다. `` 태그는 웹 페이지의 주요 콘텐츠를 나타내는 데 사용되는 시맨틱 HTML5 태그입니다.
또한, 템플릿에 하드코딩하는 대신 사이트 메뉴에서 사용할 홈페이지 제목을 동적으로 가져와야 합니다. 홈페이지의 자식 페이지가 '메뉴에 표시' 옵션이 선택되어 있으면 사이트 메뉴에 포함해야 합니다. 마지막으로, `base` 템플릿에서 제거한 `wagtailuserbar` 를 `header` 템플릿에 추가해야 합니다. 이렇게 하면 키보드 및 화면 판독기 사용자의 경험이 향상됩니다.
이전 단락에서 언급된 개선 사항을 적용하려면 `mysite/templates/includes/header.html` 파일을 다음과 같이 수정합니다:
```html+django
{# wagtailuserbar 로드: #}
{% load wagtailcore_tags navigation_tags wagtailuserbar %}
{% get_site_root as site_root %}
{# wagtailuserbar 추가: #}
{% wagtailuserbar "top-right" %}
```
사용자 경험을 개선할 수 있는 또 다른 방법은 키보드 사용자를 위한 건너뛰기 링크를 추가하는 것입니다. 건너뛰기 링크는 키보드 탐색기 및 화면 판독기의 탐색 경험을 향상시키는 웹 접근성 기능입니다. 건너뛰기 링크를 통해 사용자는 주요 콘텐츠로 직접 이동할 수 있습니다.
건너뛰기 링크를 추가하려면 `mysite/static/css/mysite.css` 파일에 다음 스타일을 추가합니다:
```css
.skip-link {
position: absolute;
top: -30px;
}
.skip-link:focus-visible {
top: 5px;
}
```
스타일을 추가한 후 `mysite/templates/base.html` 파일로 이동하여 고유 식별자를 추가합니다:
```html+django
{% include "includes/header.html" %}
{# 고유 식별자 추가: #}
{% block content %}{% endblock %}
```
마지막으로 `mysite/templates/includes/header.html` 파일로 이동하여 다음과 같이 수정합니다:
```
{% load wagtailcore_tags navigation_tags wagtailuserbar %}
{# 이것을 추가합니다: #}
콘텐츠로 건너뛰기
{% get_site_root as site_root %}
{% wagtailuserbar "top-right" %}
```
이전 템플릿에서 ` (앵커)` 요소를 추가하여 _콘텐츠로 건너뛰기_ 링크를 만들었습니다. `href` 속성을 `#main` 으로 설정했습니다. 내부 앵커는 기본 템플릿의 `main` 요소에 연결됩니다.
잘하셨습니다! 이제 Wagtail 사이트 스타일을 지정하는 방법을 알았습니다. 다음 섹션에서는 포트폴리오 사이트의 연락처 페이지를 만드는 방법을 알려줍니다.