Django HTML

HTML Tag

<h1> - </h1> : 글의 제목을 이루는 태그로, 2부터 숫자를 늘리면 부제목으로 바뀐다.

<p> - </p> : 글의 단락을 이루는 태그.

tag : 태그는 열린 태그와 닫힌 태그로 존재하는데, 열린 태그 하나만 존재하는 경우도 존재한다. (Input)

List

orderlist : <ol> tag를 사용하는데, item location을 추적하는데 좋다. (순서가 있는 list)
unorderlist : <ul> tag를 사용하는데, 글머리 기호를 사용한다. (순서가 없는 list)

위 두 개의 list 둘 다 <li>를 사용한다. (중첩 가능)

Live preview
작은 공간에 local server를 hosting 하여 web-page를 미리 볼 수 있게 한다.

div and span

<div> - </div> : HTML Tag의 영역 (division)을 만들 수 있다. 이를 통해 HTML을 다른 section으로 분리가 가능하다.

<span> - </span> : Inline container를 만드는데 사용된다는 점을 제외하면 div tag와 매우 유사하다.

div와 span tag는 CSS를 사용할 때 유용한데, 실제로 Tag를 사용하여 div or span 내에 포함된 contents에만 스타일을 적용할 수 있다.

Inline container
HTML 및 CSS에서 요소의 표시 방식 중 하나로, Contents를 수평으로 배치하고 다른 요소가 함께 흐르게 하는 역할.

속성이라는 것은 HTML Tag 안에 추가하거나, 별도의 CSS 파일에 Style 속성을 정의한 다음 HTML을 연결하는 방식이 존재한다.

후자의 방식에서 실제로 작동하기 위해서는 속성이 필요한 일부 HTML Tag가 자주 사용된다.

여기서 필요한 Tag들 중 두 가지는 바로 아래와 같다.

Image Tag : Image source로 JPEG or PNG와 같은 이미지 파일을 표시가 가능하다.
anchor Tag : 다른 web-page와 같은 다른 hypertext 참조에 연결할 수 있게 해준다.

<img src = "이미지파일" alt = "대체표시">

이 img 태그에는 닫는 태그가 존재하지 않는다.

<a href = ""></a>

이 a tag는 열려고 하는 다른 HTML file이나, 방문할 web-site 또는 web-page에 대한 참조를 제공한다.

참조하려는 파일이 같은 폴더 안에 있는 경우 가능하지만 실제 web-page도 가능하고, Default로 밑줄을 가지고 있다.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="test.png" alt="Image not available" />
    
    <a href="www.udemy.com">Udemy</a>
</body>

Table

<table> : 테이블 자체를 정의한다. Default 값으로 테이블에는 테두리가 없다.

테두리가 없는 것은 유용한데, 그 이유는 표를 사용하여 페이지의 특정 방식으로 정보를 구성하려고 하지만 표처럼 보이는 것은 원하지 않는 경우가 있어서이다. 원한다면 table level 에서 속성을 정의할 수 있다.

<table border="1"> 
	<thead>
    	<th>Col 1</th>
        <th>Col 2</th>
        <th>Col 3</th>
    </thead>
		<tr>
        	<td>data 1</td>
            <td>data 2</td>
            <td>data 3</td>
        </tr>
</table>

<thead> : 테이블 헤드로서 이 헤드 내부에 열 <th>을 넣는다. 굳이 정의할 필요는 없고 나온다면 글꼴이 굵게 나온다.

border="number" : 숫자에 따라 두께를 변경할 수 있다. 숫자가 커질수록 두께 또한 두꺼워진다.

<tr> : 새로운 행

<td> : 테이블 내부의 sell

위의 둘은 정의한 순서대로 배치된다. (정의한 순서란 thead 안의 열을 의미)

새 행에 넣고 싶으면 <tr>에 들어있는 것들을 Ctl+V 해서 옮긴다.

HTML은 열 이름과 나머지 행 간의 차이점을 default로 글꼴로 구분함. 테이블이 점점 더 커질수록 HTML에 많은 것을 입력해야 함을 알 수 있다.

근데, Django가 이러한 부분을 자동화할 수 있다.

for loop의 일부에 행 생성을 넣는 것과 같은 작업을 수행할 수 있다.

그러면 DB에 있는 내용을 기반으로 테이블을 자동으로 구성 가능하다.

Form

HTTP(HyperText Transfer Protocol) : 통신을 가능하게 하는데 사용되는 Protocol.

HTTPS(HyperText Transfer Protocol Security) : 암호화를 통해 HTTP가 보호된다는 의미이다.

Method

1. GET method : 서버로부터 데이터를 받는다.

2. POST method : 데이터를 서버에 전송한다.

- web-site를 사용하여 client로부터 정보를 받는 주요한 method

ex) client가 사진을 upload, SNS 게시물 update 등

<label> : 사용자가 form page에서 볼 수 있는 것과 사용자가 실제로 제공할 수 있는 곳을 정보로 취하는 input tag를 지시함.

form tag에서 action은 기본적으로 사용자가 form을 제출한 후 이동하는 위치이다.

<form action="위치"></form>

<input> : Default 는 text type이다. 즉, text input은 텍스트를 입력할 수 있는 Box이다.

input을 더 사용하면 같은 라인에 정렬된다. 만약 다른 라인에 있길 원한다면 break tag(<br>) 이용.

type이 submit 으로 바뀐다면 HTML은 이게 관련된 form의 작업을 실행하기 위한 클릭 가능 버튼이라는 것으로 이해한다.

즉, 다양한 타입의 정보를 수용할 수 있는 input이 있다는 것이다.

type = submit : 다른 모든 input에서 정보를 가져온 다음 계속해서 form 작업을 수행한다.

input tag에 id를 선언하면, label tag에서 같은 id를 사용(label for=)하는 경우 연결되어있음을 알 수 있다. (label이 어떤 순서로 표시되는지 관계없음)

submit을 누르면 모든 입력을 가져온 다음, form에서 action을 실행한다.

실제로 정보를 다른 페이지로 보내고 싶으면 이름을 지정한다.

그러면 URL에 key-value(ex> python)의 data를 전달하기 시작한다. (but, 일반적으로 비밀번호 같은 보안 정보는 URL로 전송 X)

input value : submit 버튼에 표시되는 문자열을 지정할 수 있다.

email type : 이메일 형식! name@.. (자동 오류 확인)
password type : 자동으로 숨긴다.

placeholder : 입력된 문자열이 없을 때까지 사라지지 않는 문자열

일반적으로 HTML 문서를 만들 때, doc로 입력해서 전체 헤딩을 생성한 다음 전체 본문을 만든다.

input type = "radio" : 체크 박스를 만든다.

input의 name을 동일한 것을 사용하면 동일한 namespace를 공유하고 있어 HTML이 동시에 선택하지 못하도록 한다.

name으로는 어떤 것이 선택되었는지 알 수 없으므로 input tag에 value 속성을 추가한다.

<html>
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Document</title>
 </head>
 <body>
     <form action="">
         <label for="lname">Last Name : </label>
         <input type="text" id="lname" name="lname"><br>
         <label for="fname">First Name : </label>
         <input type="text" id="fname" name="fname"><br>
         <label for="address">Address :</label>
         <input type="text" id="address" name="address"><br>
         <label for="email">Email : </label>
         <input type="email" id="email" name="value"><br>
         <label for="coupon">Coupon : </label>
         <input type="text" id=coupon name="coupon"><br>
         
         <label for="yes">yes : </label>
         <input type="radio" id="yes" name="account" value="yes"><br>
         <label for="no">No :</label>
         <input type="radio" id="no" name="account" value="no"><br>
         
         <select name="order" id="">
             <option value="Very good">5</option>
             <option value="good">4</option>
             <option value="soso">3</option>
             <option value="bad">2</option>
             <option value="so bad">1</option>
             <textarea name="comment" id="" cols="30" rows="10"></textarea>
         </select>
         
         
         <br>
         <input type="submit">
     </form>
     
 </body>
 </html>

input tag와 label tag 간의 속성을 정리하면 아래와 같다.

id : input에 대한 label 연결
name : input들을 함께 연결가능하게 함.
value : 다음 페이지로 바뀔 때 실제로 어떤 버튼을 클릭하고 있는지 구별한다.

즉, name-value가 python의 key-value 쌍과 같은 역할을 한다고 볼 수 있다.

<select> : radio 타입과는 달리 drop-down 형식으로 option을 많이 주는 형식으로, 이것도 name-value 쌍으로 구성된다.

<textarea name= , cols= , rows= ></textarea> : 단순한 텍스트 박스와는 다르게 사용자가 스스로 크기를 조정할 수 있고, 행과 열의 크기를 조정해서 default size를 제공할 수 있다. 이것도 name-value 쌍으로 구성된다.

'Back-end > Django' 카테고리의 다른 글

Django 기본 요소 (URL과 View, Model) (1)	2024.12.29
Django 개발 준비 (1)	2024.12.26
Django CSS (3)	2024.10.22
Django (Web Programming) (3)	2024.09.04