HTML 시작하기

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

HTML은 "HyperText Markup Language"의 줄임말로, 하이퍼텍스트(HyperText) 는 페이지 간 하이퍼링크가 포함된 텍스트라는 뜻입니다.

첫 번째 템플릿!

템플릿은 곧 템플릿 파일을 만든다는 뜻이에요. 템플릿 파일에 모든 내용이 저장되겠죠?

템플릿은 templates/blog디렉토리에 저장됩니다.

먼저 blog디렉터리 안에 하위 “디렉토리”인 templates을 생성하세요.

그리고 template디렉토리 내 blog라는 하위 “디렉토리”를 생성하세요.

templates

└───blog

(왜 같은 blog 디렉토리를 만드냐면 나중에 폴더 구조가 복잡해 질 때 좀더 쉽게 찾기 위해 사용하는 관습적인 방법이랍니다)

그리고 웹 사이트를 확인해보세요.

http://127.0.0.1:8000/⁠

⁠

(TemplateDoesNotExists에러가 보인다면, 웹 서버를 다시 시작하세요. 커맨드라인(혹은 콘솔)으로 가서 Ctrl + C를 눌러 웹 서버를 중단합니다. 다시 python manage.py runserver명령을 실행해 서버를 재시작합니다)

⁠

이제 에러가 사라졌어요! 축하합니다. 하지만 웹 사이트에 아무것도 보이지 않네요. 이제 하나씩 고쳐나가 봅시다.

post_list.html템플릿 파일에 아래 내용을 넣어주세요.

< blog/templates/blog/post_list.html >

<html>

<p>Hi there!</p>

<p>It works!</p>

</html>

웹 사이트가 어떻게 보이나요? 확인해보세요.

http://127.0.0.1:8000/⁠

⁠

(이렇게 보이면 잘 작동하는거에요!)

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

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

Head & body

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

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

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

<head>는 브라우저에 페이지에 대한 설정들을 알려주고, <body>는 실제 페이지에 보여줄 내용을 알려줍니다.

< blog/templates/blog/post_list.html >

<html>

<head>

</head>

<body>

<p>Hi there!</p>

<p>It works!</p>

</body>

</html>

파일을 저장하고 페이지를 새로고침 하세요.

⁠

(이렇게 보이면 잘 된거에요! 위에 제목이 바뀌었죠?)

브라우저는 어떻게 "Ola's blog"를 웹 페이지의 제목으로 이해했을까요? 바로 브라우저가 <title>Ola's blog</title>를 해석해 브라우저 제목 표시줄에 내용을 반영한 것입니다.

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

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

맞춤형 템플릿 만들기

나만의 템플릿을 만들어볼거에요!

아래 태그들을 짚고 넘어가요!!

태그

<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> - 페이지 섹션

아래 템플릿 예제가 있어요~ 함 이렇게 해봐요!!

< 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>

</div>

</body>

</html>

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

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

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

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

⁠

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

장고 관리자에서 추가한 글을 보여주는 방법은 곧 알아볼 거에요.

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.