{"title":"첫 번째 장고 앱 작성하기, part 6","version":"5.0","locale":"ko","docname":"intro/tutorial06","url":"/ko/5.0/intro/tutorial06/","canonical":"https://djangodocs.dev/ko/5.0/intro/tutorial06/","summary":"이 튜토리얼은 :doc: ` 튜토리얼 5장 </intro/tutorial05>`에 이어서 시작합니다. 우리는 테스트된 Web-poll 애플리케이션을 구축했으며, 이제 스타일시트와 이미지를 추가할 것입니다. 서버에서 생성 된 HTML을 제외하고, 웹 어플리케이션은 일반적으로 전체 웹 페이지를…","html":"<h1>첫 번째 장고 앱 작성하기, part 6<a class=\"heading-anchor\" href=\"#writing-your-first-django-app-part-6\"><span class=\"visually-hidden\">Link to this heading</span><span aria-hidden=\"true\">#</span></a></h1>\n<p>이 튜토리얼은 :doc:<a href=\"#id1\"><span class=\"problematic\" id=\"id2\">`</span></a>튜토리얼 5장 &lt;/intro/tutorial05&gt;`에 이어서 시작합니다. 우리는 테스트된 Web-poll 애플리케이션을 구축했으며, 이제 스타일시트와 이미지를 추가할 것입니다.</p>\n<p>서버에서 생성 된 HTML을 제외하고,  웹 어플리케이션은 일반적으로 전체 웹 페이지를 렌더링하는 데 필요한 추가 파일 — 예:이미지, JavaScript 또는 CSS — 을 제공해야합니다. Django에서는 이러한 파일을 “정적 파일” 이라고 부릅니다.</p>\n<p>소규모 프로젝트에서는 정적 파일을 웹 서버에서 찾을 수 있는 위치에 보관할 수 있으므로 이는 큰 문제가 되지 않습니다. 그러나 대형 프로젝트, 특히 여러 앱으로 구성된 프로젝트에서는 각 애플리케이션에서 제공하는 여러 정적 파일 세트를 처리하는 것이 까다로워지기 시작합니다.</p>\n<p>이것이 <code class=\"docutils literal notranslate\"><span class=\"pre\">django.contrib.staticfiles</span></code>의 목적입니다: 이것은 각 응용 프로그램(및 여러분이 지정한 다른 위치)의 정적 파일들을 프로덕션 환경에서 쉽게 제공 할 수있는 단일 위치로 수집합니다.</p>\n<aside class=\"admonition-where-to-get-help admonition\">\n<p class=\"admonition-title\">도움을 받을 수 있는 방법</p>\n<p>이 튜토리얼을 수행하는 데 문제가 있는 경우 FAQ 섹션인 :doc:<a href=\"#id1\"><span class=\"problematic\" id=\"id2\">`</span></a>Getting Help &lt;/faq/help&gt;`으로 이동하십시오.</p>\n</aside>\n<section id=\"customize-your-app-s-look-and-feel\">\n<h2><em>앱</em>의 모양과 느낌을 원하는 대로 바꿔보세요.<a class=\"heading-anchor\" href=\"#customize-your-app-s-look-and-feel\"><span class=\"visually-hidden\">Link to this heading</span><span aria-hidden=\"true\">#</span></a></h2>\n<p>먼저, <code class=\"docutils literal notranslate\"><span class=\"pre\">polls</span></code> 디렉토리에 <code class=\"docutils literal notranslate\"><span class=\"pre\">static</span></code> 디렉토리를 만듭니다.  <code class=\"docutils literal notranslate\"><span class=\"pre\">polls/templates/</span></code> 안의 템플릿을 찾는 것과 비슷하게 정적 파일을 찾습니다.</p>\n<p>Django의 <a class=\"reference internal\" href=\"/ko/5.0/ref/settings/#std-setting-STATICFILES_FINDERS\"><code class=\"xref std std-setting docutils literal notranslate\"><span class=\"pre\">STATICFILES_FINDERS</span></code></a>  설정은 다양한 소스에서 정적 파일을 찾는 방법을 알고 있는 파인더 목록을 가지고 있습니다. 기본값 중 하나는 <code class=\"docutils literal notranslate\"><span class=\"pre\">AppDirectoriesFinder</span></code> 인데,  <a class=\"reference internal\" href=\"/ko/5.0/ref/settings/#std-setting-INSTALLED_APPS\"><code class=\"xref std std-setting docutils literal notranslate\"><span class=\"pre\">INSTALLED_APPS</span></code></a> 에서 “정적” 하위 디렉토리를 찾습니다, 방금 생성 한 <code class=\"docutils literal notranslate\"><span class=\"pre\">polls</span></code> 의 경우입니다. 관리 사이트는 정적 파일에 대해 동일한 디렉토리 구조를 사용합니다.</p>\n<p>방금 생성한 <code class=\"docutils literal notranslate\"><span class=\"pre\">static</span></code> 디렉토리 안에 <code class=\"docutils literal notranslate\"><span class=\"pre\">polls</span></code> 라는 또 다른 디렉토리를 만들고 그 안에 <code class=\"docutils literal notranslate\"><span class=\"pre\">style.css</span></code> 라는 파일을 만듭니다. 즉, 스타일 시트는 <code class=\"docutils literal notranslate\"><span class=\"pre\">polls/static/polls/style.css</span></code>에 있어야합니다.  <code class=\"docutils literal notranslate\"><span class=\"pre\">AppDirectoriesFinder</span></code> 정적 파일 검색기 작동 방식 때문에 장고에 있는 이 정적 파일을 템플릿 경로를 참조하는 방식과 유사하게 <code class=\"docutils literal notranslate\"><span class=\"pre\">polls/style.css</span></code> 라고 부를 수 있습니다.</p>\n<aside class=\"admonition-static-file-namespacing admonition\">\n<p class=\"admonition-title\">정적 파일 네임스페이싱</p>\n<p>템플릿과 마찬가지로 정적 파일을 <code class=\"docutils literal notranslate\"><span class=\"pre\">polls/static``에</span> <span class=\"pre\">직접</span> <span class=\"pre\">저장하면</span> <span class=\"pre\">(다른</span> <span class=\"pre\">``polls</span></code> 하위 디렉토리를 만드는 대신) 벗어날 수 있지만, 실제로는 좋지 않은 생각입니다. Django는 이름이 일치하는 첫 번째 정적 파일을 선택합니다. 그런데 만약 <em>다른</em> 응용 프로그램에 같은 이름의 정적 파일이 있으면 Django는 이들 파일을 구별할 수 없습니다. 우리는 Django가 올바른 것을 가리킬 수 있게 해야하는데, 이것을 보장하는 가장 쉬운 방법은 <em>namespacing</em> 입니다. 즉, 정적 파일을 애플리케이션과 <em>다른</em> 디렉토리에 두는 것입니다.</p>\n</aside>\n<p>그 스타일 시트(<code class=\"docutils literal notranslate\"><span class=\"pre\">polls/static/polls/style.css</span></code>)에 다음 코드를 넣으세요.</p>\n<figure class=\"code-block code-block-captioned\" data-language=\"css\"><figcaption class=\"code-block-caption\"><code class=\"docutils literal notranslate\"><span class=\"pre\">polls/static/polls/style.css</span></code></figcaption>\n<div class=\"code-block-toolbar\"><span class=\"code-block-language\">Css</span><button type=\"button\" class=\"copy-button\" data-copy hidden><span class=\"copy-button-label\">Copy</span></button></div><pre role=\"group\" tabindex=\"0\" aria-label=\"Css code\"><code><span class=\"nt\">li</span><span class=\"w\"> </span><span class=\"nt\">a</span><span class=\"w\"> </span><span class=\"p\">{</span>\n<span class=\"w\">    </span><span class=\"k\">color</span><span class=\"p\">:</span><span class=\"w\"> </span><span class=\"kc\">green</span><span class=\"p\">;</span>\n<span class=\"p\">}</span>\n</code></pre></figure>\n<p>다음으로, <code class=\"docutils literal notranslate\"><span class=\"pre\">polls/templates/polls/index.html</span></code>의 맨 위에 다음을 추가하세요.</p>\n<figure class=\"code-block code-block-captioned\" data-language=\"html+django\"><figcaption class=\"code-block-caption\"><code class=\"docutils literal notranslate\"><span class=\"pre\">polls/templates/polls/index.html</span></code></figcaption>\n<div class=\"code-block-toolbar\"><span class=\"code-block-language\">Django template</span><button type=\"button\" class=\"copy-button\" data-copy hidden><span class=\"copy-button-label\">Copy</span></button></div><pre role=\"group\" tabindex=\"0\" aria-label=\"Django template code\"><code><span class=\"cp\">{%</span> <span class=\"k\">load</span> <span class=\"nv\">static</span> <span class=\"cp\">%}</span>\n\n<span class=\"p\">&lt;</span><span class=\"nt\">link</span> <span class=\"na\">rel</span><span class=\"o\">=</span><span class=\"s\">&quot;stylesheet&quot;</span> <span class=\"na\">href</span><span class=\"o\">=</span><span class=\"s\">&quot;</span><span class=\"cp\">{%</span> <span class=\"k\">static</span> <span class=\"s1\">&#39;polls/style.css&#39;</span> <span class=\"cp\">%}</span><span class=\"s\">&quot;</span><span class=\"p\">&gt;</span>\n</code></pre></figure>\n<p><code class=\"docutils literal notranslate\"><span class=\"pre\">{%</span> <span class=\"pre\">static</span> <span class=\"pre\">%}</span></code> 템플릿 태그는 정적 파일의 절대 URL을 생성합니다.</p>\n<p>개발에 필요한 것은 이것이 전부입니다.</p>\n<p>서버를 시작합니다(이미 실행 중이라면 재시작합니다).</p>\n<div class=\"console\" data-console><div class=\"console-panel\" data-platform=\"unix\"><p class=\"console-label\" id=\"console-0-unix-label\">Linux / macOS</p><div class=\"code-block\" data-language=\"console\"><div class=\"code-block-toolbar\"><span class=\"code-block-language\">Shell</span><button type=\"button\" class=\"copy-button\" data-copy hidden><span class=\"copy-button-label\">Copy</span></button></div><pre role=\"group\" tabindex=\"0\" aria-label=\"Shell code\"><code><span class=\"gp\">$ </span>python<span class=\"w\"> </span>manage.py<span class=\"w\"> </span>runserver\n</code></pre></div>\n</div><div class=\"console-panel\" data-platform=\"windows\"><p class=\"console-label\" id=\"console-0-windows-label\">Windows</p><div class=\"code-block\" data-language=\"doscon\"><div class=\"code-block-toolbar\"><span class=\"code-block-language\">Windows</span><button type=\"button\" class=\"copy-button\" data-copy hidden><span class=\"copy-button-label\">Copy</span></button></div><pre role=\"group\" tabindex=\"0\" aria-label=\"Windows shell\"><code><span class=\"gp\">...\\&gt;</span> py manage.py runserver\n</code></pre></div></div></div>\n<p><code class=\"docutils literal notranslate\"><span class=\"pre\">http://localhost:8000/polls/</span></code>를 새로고침하면 질문의 링크가 녹색(Django 스타일!)로 표시되는 것을 볼 수 있으며, 이는 스타일시트가 올바로 적재된 것을 의미합니다.</p>\n</section>\n<section id=\"adding-a-background-image\">\n<h2>배경 이미지 추가하기<a class=\"heading-anchor\" href=\"#adding-a-background-image\"><span class=\"visually-hidden\">Link to this heading</span><span aria-hidden=\"true\">#</span></a></h2>\n<p>다음으로 이미지들을 위 하위 디렉터리를 만듭니다. <code class=\"docutils literal notranslate\"><span class=\"pre\">polls/static/polls/</span></code> 디렉토리에 <code class=\"docutils literal notranslate\"><span class=\"pre\">images</span></code> 하위 디렉토리를 만듭니다. 이 디렉토리 안에 배경으로 사용하려는 이미지 파일을 추가합니다. 이번 튜토리얼에서는 전체 경로가 <a href=\"#id1\"><span class=\"problematic\" id=\"id2\">``</span></a>polls/static/polls/images/background.png``인 <a href=\"#id3\"><span class=\"problematic\" id=\"id4\">``</span></a>background.png``라는 파일을 사용합니다.</p>\n<p>그런 다음, 스타일시트(<code class=\"docutils literal notranslate\"><span class=\"pre\">polls/static/polls/style.css</span></code>)에 이미지에 대한 참조를 추가합니다:</p>\n<figure class=\"code-block code-block-captioned\" data-language=\"css\"><figcaption class=\"code-block-caption\"><code class=\"docutils literal notranslate\"><span class=\"pre\">polls/static/polls/style.css</span></code></figcaption>\n<div class=\"code-block-toolbar\"><span class=\"code-block-language\">Css</span><button type=\"button\" class=\"copy-button\" data-copy hidden><span class=\"copy-button-label\">Copy</span></button></div><pre role=\"group\" tabindex=\"0\" aria-label=\"Css code\"><code><span class=\"nt\">body</span><span class=\"w\"> </span><span class=\"p\">{</span>\n<span class=\"w\">    </span><span class=\"k\">background</span><span class=\"p\">:</span><span class=\"w\"> </span><span class=\"kc\">white</span><span class=\"w\"> </span><span class=\"nb\">url</span><span class=\"p\">(</span><span class=\"s2\">&quot;images/background.png&quot;</span><span class=\"p\">)</span><span class=\"w\"> </span><span class=\"kc\">no-repeat</span><span class=\"p\">;</span>\n<span class=\"p\">}</span>\n</code></pre></figure>\n<p><code class=\"docutils literal notranslate\"><span class=\"pre\">http://localhost:8000/polls/</span></code>을 새로고침하면 화면의 왼쪽 상단에 배경이 나타날 것입니다.</p>\n<aside class=\"admonition admonition-warning\" role=\"note\">\n<p class=\"admonition-title\">경고</p>\n<p>스타일시트와 같이 Django가 생성하지 않은 정적 파일에는 <code class=\"docutils literal notranslate\"><span class=\"pre\">{%</span> <span class=\"pre\">static</span> <span class=\"pre\">%}</span></code> 템플릿 태그를 사용할 수 없습니다. 정적 파일을 서로 연결할 때는 항상 <a href=\"#id1\"><span class=\"problematic\" id=\"id2\">**</span></a>상대 경로**를 사용해야 합니다. 그러면 정적 파일의 여러 경로를 수정할 필요 없이 <code class=\"xref std std-setting docutils literal notranslate\"><span class=\"pre\">STATIC_URL`(</span> <span class=\"pre\">:ttag:`static</span></code> 템플릿 태그에서 URL을 생성하는 데 사용됨)을 변경할 수 있습니다.</p>\n</aside>\n<p>지금까지의 내용은 <strong>기본</strong>입니다. 프레임워크에 포함된 설정 및 다른 것들에 대한 자세한 내용은 <a class=\"reference internal\" href=\"/ko/5.0/howto/static-files/\"><span class=\"doc\">정적 파일 howto</span></a>와 <a class=\"reference internal\" href=\"/ko/5.0/ref/contrib/staticfiles/\"><span class=\"doc\">정적 파일 레퍼런스</span></a>를 참조하십시오. <a class=\"reference internal\" href=\"/ko/5.0/howto/static-files/deployment/\"><span class=\"doc\">정적 파일 배포</span></a>는 실제 서버에서 정적 파일을 사용하는 방법을 설명합니다.</p>\n<p>정적 파일에 익숙해졌으면, Django의 자동 생성되는 관리자 사이트를 커스터마이징하는 법에 대해 배울 수 있는 <a class=\"reference internal\" href=\"/ko/5.0/intro/tutorial07/\"><span class=\"doc\">이 튜토리얼의 7장</span></a>을 보세요.</p>\n</section>","rootId":"writing-your-first-django-app-part-6","toc":[{"title":"앱의 모양과 느낌을 원하는 대로 바꿔보세요.","anchor":"customize-your-app-s-look-and-feel","children":[]},{"title":"배경 이미지 추가하기","anchor":"adding-a-background-image","children":[]}],"breadcrumbs":[{"docname":"intro/index","title":"시작하기","url":"/ko/5.0/intro/"}],"prev":{"docname":"intro/tutorial05","title":"첫 번째 장고 앱 작성하기, part 5","url":"/ko/5.0/intro/tutorial05/"},"next":{"docname":"intro/tutorial07","title":"첫 번째 장고 앱 작성하기, part 7","url":"/ko/5.0/intro/tutorial07/"},"formats":{"html":"/ko/5.0/intro/tutorial06/","markdown":"/ko/5.0/intro/tutorial06.md","json":"/ko/5.0/intro/tutorial06.json"},"source":"https://github.com/django/django/blob/stable/5.0.x/docs/intro/tutorial06.txt","official":"https://docs.djangoproject.com/ko/5.0/intro/tutorial06/","inVersions":["6.1","6.0","5.2","5.1","5.0","4.2","4.1","4.0","3.2","3.1","3.0","2.2","2.1","2.0","1.11"],"inLocales":["en","zh-hans","fr","ja","id","it","pt-br","ko","es","el","pl"]}