Programming Blog

10. HTML 시작하기 본문

Python

10. HTML 시작하기

Go-ong 2019. 1. 25. 17:05

HTML 시작하기


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

    장고 템플릿 양식은 HTML을 사용한다. 

HTML 이란 무엇일까?
  • HTML은 웹 브라우저가 해석할 수 있는 간단한 코드이다. 사용자에게 웹 페이지를 표시할 때 사용한다.

첫 번째 템플릿

  • 템플릿은 곧 템플릿 파일을 만든다는 뜻이다. 
    템플릿은 blog/templates/blog 디렉토리에 저장된다. 먼저 blog 디렉토리 안에 하위 디렉토리인 templates을 생성한다.
    그리고 template 디렉토리 내 blog라는 하위 디렉토리를 생성한다.
    이렇게 디렉토리를 여러 개 만드는 이유는 복잡한 구조에서 파일을 쉽게 찾기 위한 방법이다.

    다음 blog/templates/blog 디렉토리 안에 post_list.html 이라는 새 파일(현재는 빈 파일)을 만든다.

    그리고 웹 사이트를 확인한다. http://127.0.0.1:8000/

    TemplateDoesNotExists 에러가 보인다면 웹 서버를 재시작한다. 

    그리고 post_list.html 파일에 아래의 코드를 넣어준다.

    1
    2
    3
    4
    <html>
        <p>Hi there!</p>
        <p>It works!</p>
    </html>
    		cs
    모든 웹 페이지는 <html>로 시작해 </html>로 마치며, 가장 기본적인 태그이다. 모든 내용은 시작 태그 <html>과 닫는 태그인 </html> 사이에 넣어야 한다.

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


head & body

  • 각 HTML 페이지는 두 가지 요소, head와 body로 구분된다.
    - head 란 문서 정보를 가지고 있지만, 웹 페이지에서 보이지 않는 정보들을 담는 영역이다.
    - body 란 웹 페이지에 직접적으로 보이는 내용이 들어간다. 웹 페이지의 내용은 모두 이 body태그 안에 들어간다.
    <head> 는 브라우저에 페이지에 대한 설정들을 알려주고, <body> 는 실제 페이지에 보여줄 내용을 알려준다.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <html>
        <head>
            <title>Ola's blog</title>
        </head>
        <body>
            <p>Hi there!</p>
            <p>It works!</p>
        </body>
    </html>
    		cs
    다음과 같이 작성하고 페이지를 새로고침 해본다.

  • <title> 태그로 탭에 있는 웹 페이지의 제목 표시줄을 설정한다.
    해당 페이지 북마크를 할 때도 동일하다.

여러 가지 태그들

1
2
3
4
5
6
7
8
9
<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> - 페이지 섹션
cs



아래의 템플릿 예제를 보면 이 템플릿에는 세 개의 div 섹션이 있다.
 - 첫 번째 div 는 블로그 제목을 가지고 있고 머리말과 링크를 뜻한다.
 - 나머지 두 div 는 블로그 게시일과 h2 로 된 블로그 제목과 링크를 가지고 있다. 
    두 p(문단) 의 하나는 날짜를, 다른 하나는 블로그를 가리킨다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<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>
cs


이처럼 템플릿은 같은 양식을 사용하지만, 다른 정보들을 보여줄 때 사용된다.


그리고 작업을 마쳤을 때 배포를 해준다.

GitHub에 코드를 커밋, 푸시 한다. (로컬 콘솔)

$ git status

$ git add --all .

$ git status

git 으로 업로드 할 파일들을 확인한다.( git 에서 업로드 할 모든 파일들은 녹색으로 표시된다.)


$ git commit -m "설명"

위의 명령으로 github 저장소에 변경 사항을 히스토리에 저장하고, 수정 변경된 내용을 알려준다.


완성되면 github로 업로드 한다.
$ git push


PythonAnywhere에서 새 코드를 가져와 웹 앱을 다시 부른다.


PythonAnywhere의 배시 콘솔 창에서

$ cd ~/my-first-blog

$ git pull 

위의 코드를 실행한다.


코드가 다 되었는지 확인하고 싶으면 파일 탭(Files)에가서 내 코드가 PythonAnywhere에 있는지 확인한다.

마지막으로 Web tab으로 가서 웹 앱을 다시 불러오기(Reload)를 하면 인터넷에도 업데이트가 된 것을 확인할 수 있다.



<github에 파일 옮기는 코드 - 로컬 콘솔 창에서>
$ git status (변경된 파일 빨간색) $ git add --all .
$ git status (변경될 파일 녹색)

$ git commit -m "설명"
$ git push

<github에서 PythonAnywhere로 파일 복사하는 코드 - PythonAnywhere 배시 콘솔 창에서>

$ cd ~/my-first-blog
$ git pull


'Python' 카테고리의 다른 글

Python 정규표현식 사용 List  (0) 2021.09.01
11. 장고 ORM과 쿼리셋(QuerySets)  (0) 2019.01.25
9, 장고 뷰 만들기  (0) 2019.01.25
8. 장고 urls  (0) 2019.01.25
7. 배포하기  (0) 2019.01.24
'Python' Related Articles more
Comments