사이트 스타일 지정 및 사용자 경험 개선¶

이 튜토리얼에서는 포트폴리오 사이트에 기본 사이트 테마를 추가하고 사용자 경험을 개선합니다.

스타일 추가¶

사이트 스타일을 지정하려면 mysite/static/css/mysite.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;
}

이제 포트폴리오 사이트를 다시 로드하여 스타일을 반영합니다.

참고

다시 로드한 후에도 웹 페이지 스타일이 업데이트되지 않으면 브라우저 캐시를 지워야 할 수 있습니다.

사용자 경험 개선¶

포트폴리오 사이트의 사용자 경험을 개선하는 방법에는 여러 가지가 있습니다.

mysite/templates/base.html 파일을 다음과 같이 수정하여 시작합니다:

{# wagtailuserbar 제거: #}
{% load static wagtailcore_tags %}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>
            {% 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 %}
        </title>
        {% if page.search_description %}
        <meta name="description" content="{{ page.search_description }}" />
        {% endif %}
        <meta name="viewport" content="width=device-width, initial-scale=1" />

        {# 라이브 미리보기 패널의 모든 링크가 새 탭에서 열리도록 강제합니다 #}
        {% if request.in_preview_panel %}
        <base target="_blank">
        {% endif %}

        {# 지원되는 색 구성표 추가: #}
        <meta name="color-scheme" content="light dark">

        {# 인라인 SVG로 파비콘 추가: #}
        <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🍩</text></svg>"/>

        {# 전역 스타일시트 #}
        <link rel="stylesheet" type="text/css" href="{% static 'css/mysite.css' %}">

        {% block extra_css %}
        {# 추가 스타일시트를 추가하려면 템플릿에서 이것을 재정의하십시오 #}
        {% endblock %}
    </head>

    <body class="{% block body_class %}{% endblock %}">
        {# wagtailuserbar 제거: #}

        {% include "includes/header.html" %}

        {# 블록 콘텐츠를 <main> HTML5 태그로 래핑하십시오: #}
        <main>
            {% block content %}{% endblock %}
        </main>

        {% include "includes/footer.html" %}

        {# 전역 자바스크립트 #}

        <script type="text/javascript" src="{% static 'js/mysite.js' %}"></script>

        {% block extra_js %}
        {# 추가 자바스크립트를 추가하려면 템플릿에서 이것을 재정의하십시오 #}
        {% endblock %}
    </body>
</html>

이전 템플릿에서 다음과 같은 수정 사항을 적용했습니다:

기본 템플릿에서 wagtailuserbar 를 제거했습니다. 튜토리얼 뒷부분에서 wagtailuserbar 를 header 템플릿에 추가할 것입니다. 이 변경 사항은 키보드 및 화면 판독기 사용자의 사용자 경험을 개선합니다.
사이트에서 지원되는 색 구성표를 브라우저에 알리기 위해 <meta name="color-scheme" content="light dark"> 를 추가했습니다. 이렇게 하면 사이트가 어두운 테마와 밝은 테마 모두에 적응합니다.
<link> 태그를 사용하여 인라인 SVG로 포트폴리오 사이트에 파비콘을 추가했습니다.
{% block content %} 및 {% endblock %} 태그를 <main> HTML5 태그로 래핑했습니다. <main> 태그는 웹 페이지의 주요 콘텐츠를 나타내는 데 사용되는 시맨틱 HTML5 태그입니다.

또한, 템플릿에 하드코딩하는 대신 사이트 메뉴에서 사용할 홈페이지 제목을 동적으로 가져와야 합니다. 홈페이지의 자식 페이지가 ‘메뉴에 표시’ 옵션이 선택되어 있으면 사이트 메뉴에 포함해야 합니다. 마지막으로, base 템플릿에서 제거한 wagtailuserbar 를 header 템플릿에 추가해야 합니다. 이렇게 하면 키보드 및 화면 판독기 사용자의 경험이 향상됩니다.

이전 단락에서 언급된 개선 사항을 적용하려면 mysite/templates/includes/header.html 파일을 다음과 같이 수정합니다:

{# wagtailuserbar 로드: #}
{% load wagtailcore_tags navigation_tags wagtailuserbar %}

<header>
    {% get_site_root as site_root %}
    <nav>
        <p>
          <a href="{% pageurl site_root %}">{{ site_root.title }}</a> |
          {% for menuitem in site_root.get_children.live.in_menu %}

            {# '메뉴에 표시'가 선택된 홈페이지의 자식 페이지를 추가합니다 #}
            <a href="{% pageurl menuitem %}">{{ menuitem.title }}</a>{% if not forloop.last %} | {% endif %}

          {% endfor %}
        </p>
    </nav>

    {# wagtailuserbar 추가: #}
    {% wagtailuserbar "top-right" %}
</header>

사용자 경험을 개선할 수 있는 또 다른 방법은 키보드 사용자를 위한 건너뛰기 링크를 추가하는 것입니다. 건너뛰기 링크는 키보드 탐색기 및 화면 판독기의 탐색 경험을 향상시키는 웹 접근성 기능입니다. 건너뛰기 링크를 통해 사용자는 주요 콘텐츠로 직접 이동할 수 있습니다.

건너뛰기 링크를 추가하려면 mysite/static/css/mysite.css 파일에 다음 스타일을 추가합니다:

.skip-link {
    position: absolute;
    top: -30px;
}

.skip-link:focus-visible {
    top: 5px;
}

스타일을 추가한 후 mysite/templates/base.html 파일로 이동하여 고유 식별자를 추가합니다:

{% include "includes/header.html" %}

{# 고유 식별자 추가: #}
<main id="main">
  {% block content %}{% endblock %}
</main>

마지막으로 mysite/templates/includes/header.html 파일로 이동하여 다음과 같이 수정합니다:

{% load wagtailcore_tags navigation_tags wagtailuserbar %}
<header>
  {# 이것을 추가합니다: #}
  <a href="#main" class="skip-link">콘텐츠로 건너뛰기</a>

  {% get_site_root as site_root %}
  <nav>
    <p>
      <a href="{% pageurl site_root %}">{{ site_root.title }}</a> |
      {% for menuitem in site_root.get_children.live.in_menu %}
        <a href="{% pageurl menuitem %}">{{ menuitem.title }}</a>{% if not forloop.last %} | {% endif %}
      {% endfor %}
    </p>
  </nav>
  {% wagtailuserbar "top-right" %}
</header>

이전 템플릿에서 <a> (앵커) 요소를 추가하여 콘텐츠로 건너뛰기 링크를 만들었습니다. href 속성을 #main 으로 설정했습니다. 내부 앵커는 기본 템플릿의 main 요소에 연결됩니다.

잘하셨습니다! 이제 Wagtail 사이트 스타일을 지정하는 방법을 알았습니다. 다음 섹션에서는 포트폴리오 사이트의 연락처 페이지를 만드는 방법을 알려줍니다.