이끼의 생각

Django Web (12) HTML 과 장고 템플릿 본문

파이썬 장고 웹 프레임워크

Django Web (12) HTML 과 장고 템플릿

IKKIson 2019. 5. 21. 03:58

전편에서 템플릿이 없어서 에러가 발생하였습니다. 이제 꼬리에꼬리를 무는 에러를 수정할 수 있습니다.^^


이번엔 장고 템플릿에 대해 알아 볼껀데 그전에 웹 페이지와 HTML에 대해 알아보겠습니다.




HTML이란?


HTML은 크롬이나 파이어폭스, 사파리 등과 같은 웹 브라우저가 해석할 수 있는 간단한 코드예요. 사용자에게 웹 페이지를 표시할 때 사용합니다.


HTML은 "HyperText Markup Language"의 줄임말로, 하이퍼텍스트(HyperText) 는 페이지 간 하이퍼링크가 포함된 텍스트라는 뜻입니다. 마크업(Markup) 이란 누군가(브라우저)가 문서를 해석하도록 표시(mark)를 했다는 뜻이에요. HTML은 태그(tag) 들로 이루어져 있어요. 태그는 <(여는 태그) 로 시작하고 >(닫는 태그)로 끝나는데, 이는 마크업 요소(elements) 를 말합니다.



HTML은 제목, 단락, 목록 등과 같은 본문을 위한 구조적 의미를 나타내는 것뿐만 아니라 링크, 인용과 그 밖의 항목으로 구조적 문서를 만들 수 있는 방법을 제공합니다. 그리고 이미지와 객체를 내장하고 대화형 양식을 생성하는 데 사용될 수 도 있습니다.




주의!!


많은 분들이 잘못알고 계시거나 정확하기 구분하기 어려운 부분이 있습니다.



"HTML은 프로그래밍 언어같은데요?"


"난 HTML언어로 프로그래밍 해요~"


"난 HTML언어로 웹페이지를 잘만들어. 난 프로그래밍을 잘하는 거같아~~"



답은 정해져 있죠ㅎㅎ 네. HTML은 프로그래밍 언어가 아닙니다. 마크업 언어입니다. 


HTML은 텍스트에 컨텍스트와 구조를 추가하는 방식이며, 대표적으로 웹페이지를 구성하는데 사용됩니다.

반면, 프로그래밍 언어는 컴퓨터가 일을 처리하는 과정을 서술한 것이죠. 그래서 프로그래밍 언어는 시스템의 리소스들, 쓰레드, 데이터베이스, 네트워크 등을 사용하여 복잡한 연산과정(논리)으로 일을 처리합니다.


다시 말해서, HTML은 콘텐츠를 표시하기 위해 열거하는 방법, 프로그래밍 언어는 일을 처리하는 논리적인 서술 방법이라는 차이가 있습니다.

(프로그래밍언어에 대해 단 하나의 정의를 애기한 것이 아닌, 마크업 언어와의 차이를 설명한 것이니 확대 해석이나 오해가 없으시길....)




장고 템플릿이란?


장고의 템플릿은 어떤 것인지 알아 볼까요?


템플릿(Template)이란 서로 다른 정보를 일정한 형태로 표시하기 위해 재사용 가능한 파일을 말해요. 예를 들면 편지에도 같은 템플릿을 사용할 수 있어요. 편지의 내용이나 수신인 주소는 달라져도 같은 디자인, 레이아웃을 사용하는 때도 있으니까요. 장고 템플릿 양식은 HTML을 사용합니다.




블로그에 템플릿 추가하기!


템플릿은 곧 템플릿 파일을 만든다는 뜻이에요. 템플릿 파일에 모든 내용이 저장되겠죠? 이미 알고 있을 것 같아요.



(1) 템플릿 디렉토리 생성 (템플릿 모듈 만들기)


템플릿은 blog/templates/blog디렉토리에 저장됩니다. 먼저 blog디렉터리 안에 하위 디렉터리인 templates을 생성하세요. 그리고 template디렉토리 내 blog라는 하위 디렉토리를 생성하세요.


blog

├── migrations

 |           └── __init__.py

├── template           <- 추가!

 |           └── blog    <- 추가!

├── __init__.py

├── admin.py

├── models.py

├── tests.py

├── urls.py

└── views.py



하부 디렉터리를 갖는 이유는 웹서버의 구조가 복잡해 질때를 고려하여 보다 쉽게 작업하기 위한 관습적인 방법입니다. 나중에 MVC같은 아키텍처 패턴이나 DDD 같은 구조적인 내용도 함께 공부할 것입니다.



(2) html 템블릿 만들기


이제 blog/templates/blog디렉토리 안에 post_list.html이라는 새 파일(현재는 빈 파일)을 만드세요.




자! 이제 웹사이트를 확인해볼까요?




(3) 간단한 HTML 추가하기


드디어 에러가 사라졌습니다!! 하지만 웹 사이트에 아무것도 없으니 심심하네요.

아래의 html 소스를 템플릿 파일에 넣어 봅시다.

- 경로 : blog/templates/blog/post_list.html


<html>

    <p>Hi there!</p>

    <p>It works!</p>

</html>




웹 페이지에서 어떻게 보이나 확인해볼께요~



잘 작동하고 있네요~.




HTML 문법 맛보기


이번엔 HTML 에 대해 잠깐 알아 보겠습니다.



(1) <html>


모든 웹 페이지는 <html>로 시작해 </html>로 마칩니다. 가장 기본적인 태그이지요. 모든 내용은 시작 태그 <html>과 닫는 태그인</html> 사이에 넣어야합니다.


HTML 페이지에서는 두 가지 요소, head와 body로 구분됩니다.



(2) <head>


head 는 문서 정보를 가지고 있지만, 웹 페이지에서 보이지 않는 정보들을 담는 영역입니다.



(3) <body>


body 란 웹 페이지에 직접적으로 보이는 내용이 들어갑니다. 웹 페이지의 내용은 모두 이 body태그안에 들어갑니다.



<head>는 브라우저에 페이지에 대한 설정들을 알려주고,

<body>는 실제 페이지에 보여줄 내용을 알려줍니다.


(4) <p>


<p>는 문단 태그입니다. 문단의 끝 역시 </p>로 닫습니다.



(5) 태그


태그는 / 로태그 마침하고 여러 태그를 중첩(nested)해서 사용할 수 있습니다. (모든 태그를 꼭 닫아줘야합니다)


태그는 상자에 뭔가 집어넣는 것과 같아요. <html></html>라고 하는 큰 상자가 있다면, 상자 안에는 <body></body> 상자가 있고, 또 그 상자 안에는 <p></p>라는 더 작은 상자가 있는 것과 같아요.


태그 마침과 중첩의 규칙을 잘 따라야 해요. 그렇지 않으면, 브라우저가 해석할 수 없어 페이지가 원하는 모습으로 나오지 않게 됩니다.



(6) 자주사용하는 태그들

  • <h1>A heading</h1> - 큰 제목
  • <h2>A sub-heading</h2> - 중 제목
  • <h3>A sub-sub-heading</h3> - 소 제목... <h6>레벨까지 사용할 수 있습니다.
  • <em>text</em> - 텍스트 기울기 (Italic)
  • <strong>text</strong> - 텍스트를 두껍게(Bold)
  • <br /> - 줄바꿈 (br은 스스로 닫히는 태그로 속성을 사용할 수 없습니다)
  • <a href="http://djangogirls.org">link</a> - 하이퍼링크 걸기
  • <ul><li>first item</li><li>second item</li></ul>- 목록 만들기
  • <div></div> - 페이지 섹션



(7) HTML 간단하게 써보기


아래의 내용을 템플릿 파일에 넣어 웹 페이지를 확인해봅시다.

- 경로 : blog/templates/blog/post_list.html


<html>

    <head>

        <title>IKKIson's blog</title>

    </head>

    <body>

        <p>Hi there!</p>

        <p>It works!</p>

    </body>

</html>



파일을 저장하고 새로고침해서 페이지를 확인해봅시다.




웹 브라우저가 <title>IKKIson's blog</title>를 해석해 브라우저 제목 표시줄에 내용을 반영한 것입니다. (해당 페이지를 북마크를 할 때도 동일합니다)




블로그에 템플릿 적용하기


배운 내용을 활용하여 블로그에 적용하겠습니다.


앞에서 배운 태그들을 활용하여 템플릿 예제를 만들어 볼께요.


아래 템플릿 예제를 추가하겠습니다.

- 경로 : blog/templates/blog/post_list.html


<html>

    <head>

        <title>Django Girls blog</title>

    </head>

    <body>

        <div>

            <h1><a href="">Django Girls Blog</a></h1>

        </div>


        <div>

            <p>published: 14.06.2014, 12:14</p>

            <h2><a href="">My first post</a></h2>

            <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>

        </div>


        <div>

            <p>published: 14.06.2014, 12:14</p>

            <h2><a href="">My second post</a></h2>

            <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut f.</p>

        </div>

    </body>

</html>





이 템플릿에는 세 개의 div 섹션이 있습니다.


- 첫 번째 div는 블로그 제목을 가지고 있어요. 머리말과 링크이지요.

- 나머지 두 div는 블로그 게시일과 h2로 된 블로그 제목과 링크를가 있습니다. 두 p(문단)의 하나는 날짜를, 다른 하나는 블로그를 가리키죠.


태그로 웹 페이지 화면이 아래와 같이 바뀝니다.



이전 템플릿은 동일한 내용 만을 보여줬어요. 이처럼 템플릿은 같은 양식 을 사용하지만, 다른 정보들을 보여줄 때 사용됩니다.



장고 관리자에서 추가한 글을 보여주는 방법은 조금있으면 알아볼 수 있을 겁니다.





**출처 및 참고**

[블로그] 초보몽키님의 개발공부로그

[Wikidocs] 핀코인님의 Django 자습

[프로그래머스] 정두식님의 장고를활용한 웹사이트만들기 동영상강의

[오픈소스튜로리얼] Quasar Beyond님의 Django : Python WebFrameWork 동영상강의

[장고걸스공식] 이수진님 외. 장고걸스 튜토리얼 한국어번역

[장고걸스공식] 이수진님 외. 장고걸스 튜토리얼 심화 한국어번역

장고 공식 Document Tutorial

저작자표시 비영리 변경금지

'파이썬 장고 웹 프레임워크' 카테고리의 다른 글

Django Web (13) 장고 ORM과 쿼리셋  (1) 2019.05.25
Django Web 장고가 무엇인가요?  (0) 2019.05.21
Django Web (11) 장고 뷰 View  (0) 2019.05.21
Django Web (10) [실습] 블로그 만들기 - urls  (0) 2019.05.20
Django Web (9) 장고 urls  (0) 2019.05.20
'파이썬 장고 웹 프레임워크' Related Articles more
Comments