장고 🍡 : html, form

김나현·2024년 8월 18일

Django: 마감에 쫓기는 완벽주의자를 위한 웹 프레임워크

목록 보기

11/62

요청들어오면 urls가 view로 보냄
views는 Templates에 있는 .html 파일을 렌더링

url에 이름 붙힐 수 있음. 경로헷갈리지 않게 name="new" 이런식

form 태그 구조

<form action="서버 처리 URL" method="요청 방식">
    <!-- 폼 요소들 -->
</form>

action: 폼 데이터가 제출될 URL을 지정합니다. (서버의 엔드포인트)
method: 폼 데이터를 전송할 방법을 지정합니다. (GET 또는 POST)

action뒤에 폼 데이터가 제출될 URL을 지정

form 태그에서 가장 중요한 것은 input의 name 속성

name 속성은 각

<input>

필드에 붙이는 이름표와 같아서, 서버가 어떤 데이터가 무엇인지 식별하고 처리할 수 있게 해줍니다.

받는 데이터의 속성을 name에 저장

name이 없으면?

폼 데이터와 함께 전송되지 않기 때문에, 서버는 이 필드의 값을 받을 수 없어요.

개발자는 name 속성을 필드의 목적이나 의미를 잘 나타내는 이름으로 설정해야 합니다.

input태그에 name이 없으면 아무리 적어도 데이터 전송 안됨.

name 속성이 없으면: 해당 입력 필드의 데이터는 폼이 제출될 때 서버로 전송되지 않기 때문에, 서버는 그 데이터를 받을 수 없습니다.
자유로운 네이밍: name 속성 값은 개발자가 정의할 수 있으며, 각 필드의 데이터가 의미 있는 이름으로 식별될 수 있도록 설정할 수 있습니다.

+ id

폼 요소와의 상호작용

id 속성은 폼의 라벨과 입력 필드를 연결할 때 유용합니다. id가 없으면 라벨을 클릭했을 때 입력 필드가 자동으로 포커스되지 않습니다.

label for="user_email"

id="user_email" (input안에)

일치해야 함

<label for="username">사용자 이름:</label>
<input type="text" id="username">코드를 입력하세요

html
코드 복사
사용자 이름:

위의 예제에서 for="username"는 라벨을 클릭할 때 해당 입력 필드에 포커스를 맞춥니다. id가 없으면 이 기능이 작동하지 않습니다.

id 속성의 사용에 대해서는 두 가지 중요한 규칙이 있습니다:

각 id는 문서 내에서 유일해야 한다:

한 HTML 문서 내에서 같은 id 값을 가진 요소는 단 하나만 존재해야 합니다. 즉, id 값이 중복되면 안 됩니다. 이렇게 해야 브라우저와 서버가 요소를 정확하게 식별하고 조작할 수 있습니다.
id 속성의 값은 유일해야 하지만, 다른 id 값은 여러 개 있을 수 있다:

문서 내에서 여러 개의 요소가 있을 수 있지만, 각 요소에 붙이는 id 값은 서로 다르게 해야 합니다. 예를 들어, id="header"를 가진 요소가 두 개 이상 있으면 안 됩니다.

"마크업"이라는 단어는 "무언가를 표시하거나 강조하는 행위"를 의미해요. 원래 이 단어는 출판이나 인쇄 분야에서 사용되던 용어인데, 원고에 수정 사항이나 주석을 표시할 때 사용되었어요. 즉, 중요한 부분을 "마크(표시)"해서 다른 사람들이 쉽게 이해할 수 있도록 돕는 거죠.

과의 차이점:

는 한 줄의 텍스트를 입력받습니다.
는 기본적으로 여러 줄의 텍스트를 입력받으며, rows와 cols 속성을 통해 크기를 조절할 수 있습니다.

<a> 태그의 기본 구조 html 코드 복사 <a href="URL">링크 텍스트</a> href 속성: 링크가 연결될 대상 URL을 지정합니다. 링크 텍스트: 사용자가 클릭할 수 있는 링크의 텍스트입니다.

일반적인 name 속성 값 예시

이름 입력 필드

html
코드 복사

name="first_name": 사용자의 이름을 입력받는 필드
name="last_name": 사용자의 성을 입력받는 필드
이메일 입력 필드

html
코드 복사

name="email": 사용자의 이메일 주소를 입력받는 필드
비밀번호 입력 필드

html
코드 복사

name="password": 사용자의 비밀번호를 입력받는 필드
전화번호 입력 필드

html
코드 복사

name="phone": 사용자의 전화번호를 입력받는 필드
체크박스

html
코드 복사

뉴스레터 구독
name="subscribe": 구독 여부를 나타내는 체크박스
라디오 버튼

html
코드 복사
남성
여성
name="gender": 사용자의 성별을 선택하는 라디오 버튼 그룹
드롭다운 리스트

html
코드 복사
<option value="usa">미국</option> <option value="korea">한국</option> name="country": 사용자가 선택한 국가를 전송하는 드롭다운 리스트 날짜 입력 필드
html
코드 복사

name="birthdate": 사용자의 생일을 입력받는 필드

마크업의 의미
Mark(표시하다) + Up(강조하다): 어떤 내용을 표시해서 강조하거나 구별하는 것을 의미해요.
마크업 언어에서의 "마크업": 문서의 텍스트에 태그를 사용해 구조와 의미를 표시하는 것을 뜻해요. 이를 통해 컴퓨터나 웹 브라우저가 문서를 해석하고, 화면에 올바르게 표시할 수 있게 도와줘요.
예시로 이해하기
출판에서 "마크업": 원고에 "이 부분은 제목으로", "이 문장은 굵게" 등의 표시를 하여, 최종 인쇄물에서 어떻게 표시될지 지시하는 작업이에요.

HTML에서 "마크업": 텍스트에 <h1>, <p>, <b> 같은 태그를 사용해 "이것은 제목입니다", "이것은 문단입니다", "이것은 굵은 텍스트입니다"라고 표시하는 것과 같아요. 요약 "마크업"은 내용을 표시하고 구조화하는 것을 뜻해요. 마크업 언어에서는 문서나 텍스트에 태그를 사용해 특정 의미를 부여하고, 그 구조를 정의하는 것을 의미해요. HTML이 대표적인 마크업 언어로, 웹 페이지에서 텍스트와 이미지를 표시하는 방식이나 구조를 정의하는 데 사용되죠.

"마크업 언어"라는 말은 텍스트에 태그(tag)를 추가해서 그 텍스트의 구조와 의미를 정의하는 언어를 의미해요. 쉽게 말해서, ~~마크업 언어는 내용을 어떻게 표시할지를 지정하는 규칙들이 모인 언어~~라고 할 수 있어요.

나의 말:
<> 이거를 태그라고 해? 괄호 아니야?

ChatGPT의 말:

좋은 질문이에요! <와 > 이 두 기호는 모양만 보면 꺾쇠 괄호(또는 각괄호)라고 불러요. 하지만 HTML에서 이 기호들은 태그를 감싸는 역할을 해요. 그래서 우리는 이 기호로 감싸진 내용을 태그라고 부르는 거예요.

예를 들어 볼게요: <p>: 여기서 <p>는 태그에요. <와 > 사이에 p라는 문자가 들어가 있죠. 이 태그는 HTML에서 "이 텍스트는 문단(paragraph)입니다"라고 표시하는 데 사용돼요.

HTML 문서의 기본 구조

먼저, HTML 문서의 가장 기본적인 구조를 살펴볼게요:

html 코드 복사 <!DOCTYPE html> <html> <head> <title>웹 페이지 제목</title> </head> <body> <h1>안녕하세요!</h1> <p>이것은 첫 번째 문단입니다.</p> </body> </html>

각 부분 설명 <!DOCTYPE html>: 이 선언은 문서가 HTML5 표준을 따르고 있다는 것을 웹 브라우저에 알려주는 역할을 해요. HTML 문서의 가장 첫 줄에 위치해요. <html>: 이 태그는 HTML 문서의 시작과 끝을 나타내요. 모든 HTML 코드는 <html> 태그 안에 들어가요. <head>: 이 부분에는 웹 페이지에 대한 메타데이터(정보)를 포함해요. 여기에는 페이지 제목, CSS 스타일시트, 자바스크립트 파일 등을 넣을 수 있어요. <title>: 이 태그는 웹 브라우저의 탭이나 창 제목으로 표시되는 내용을 정의해요. <body>: 이 태그 안에 실제로 웹 페이지에 표시될 내용이 들어가요. 여기에는 텍스트, 이미지, 링크, 비디오 등 다양한 요소들이 포함될 수 있어요. 자주 사용하는 HTML 태그들 <h1> ~ <h6>: 제목을 표시하는 태그예요. <h1>이 가장 큰 제목이고, <h6>이 가장 작은 제목이에요. 예시: html 코드 복사 <h1>큰 제목</h1> <h2>중간 제목</h2> <h3>작은 제목</h3> <p>: 문단을 나타내는 태그예요. <p>로 감싼 내용은 웹 페이지에서 하나의 문단으로 표시돼요. 예시: html 코드 복사 <p>이것은 문단입니다.</p> <a>: 링크를 만드는 태그예요. href 속성을 사용해 링크할 주소를 지정할 수 있어요. 예시: html 코드 복사 <a href="https://www.google.com">구글로 이동</a> <img>: 이미지를 삽입하는 태그예요. src 속성으로 이미지 파일의 위치를 지정해요. 예시: html 코드 복사 <img src="image.jpg" alt="이미지 설명"> <ul>, <ol>, <li>: 목록을 만드는 태그들이에요. <ul>은 순서가 없는 목록(불릿포인트), <ol>은 순서가 있는 목록(숫자), <li>는 목록의 항목을 나타내요. 예시: html 코드 복사 <ul> <li>첫 번째 아이템</li> <li>두 번째 아이템</li> </ul> <ol> <li>첫 번째 아이템</li> <li>두 번째 아이템</li> </ol> **<div>**와 <span>: <div>는 블록 레벨 요소로, 주로 섹션을 나눌 때 사용돼요. <span>은 인라인 요소로, 텍스트의 일부를 따로 스타일링할 때 사용돼요. 예시: html 코드 복사 <div> <h2>섹션 제목</h2> <p>섹션 내용</p> </div> <p>이것은 <span style="color: red;">빨간색</span> 텍스트입니다.</p> 요약 HTML 문서는 태그들로 구성되어 있고, 각 태그는 <태그이름> 형태로 시작해요. HTML의 기본 구조는 <html>, <head>, <body>로 나뉘고, 내용은 <body> 안에 들어가요. 자주 사용하는 태그들을 활용해 텍스트, 이미지, 링크 등을 웹 페이지에 표시할 수 있어요.

form 태그에서 가장 중요한 것
input의 name 속성

모든 html 파일에 토큰이 있어?
ChatGPT의 말:

아니요, 모든 HTML 파일에 CSRF 토큰이 있는 것은 아니에요. CSRF 토큰은 특정 상황에서만 필요합니다. 주로 폼 제출이나 사용자의 요청이 서버에 중요한 작업을 요청할 때 사용됩니다.

폼 제출:

사용자가 서버로 데이터를 제출하는 폼에는 CSRF 토큰이 포함됩니다. 이 토큰은 사용자의 요청이 신뢰할 수 있는 것임을 보장하기 위해 사용됩니다.
예를 들어, 사용자 로그인, 댓글 작성, 게시물 생성 같은 폼에는 CSRF 토큰이 필요합니다.

crud 에서 r만 제외

민감한 요청:

웹 애플리케이션의 중요한 작업이나 상태를 변경하는 요청(예: 비밀번호 변경, 계정 설정)에는 CSRF 토큰을 포함시킵니다.

그럼 같은 토큰을 주고 받는거야?
ChatGPT의 말:
ChatGPT
네, 맞아요! 같은 토큰을 주고받는 게 맞습니다. 더 구체적으로 설명해볼게요.

토큰의 흐름
서버가 토큰을 생성:

사용자가 폼을 요청할 때, 서버는 CSRF 토큰을 생성합니다. 이 토큰은 매우 랜덤하고 고유한 문자열입니다.
서버가 HTML 폼에 토큰을 포함:

서버는 생성된 토큰을 폼 안에 숨겨진 입력 필드로 포함시켜서, 사용자에게 보냅니다.
예를 들어, 사용자가 HTML 폼을 받게 되면, 폼 안에 처럼 토큰이 포함되어 있습니다.
사용자가 폼을 제출:

사용자가 폼을 작성하고 제출하면, 이 토큰도 함께 서버로 전송됩니다.
서버는 사용자가 제출한 폼의 데이터를 받으면서, 그 안에 포함된 토큰도 확인합니다.
서버가 토큰을 검증:

서버는 처음에 보낸 토큰과, 사용자가 제출한 토큰이 일치하는지 확인합니다.
토큰이 일치하면, 이 요청이 실제로 해당 사용자가 한 것이 맞다고 판단하고 요청을 처리합니다.
만약 일치하지 않으면, 요청이 의심스러운 것으로 간주하고 처리하지 않습니다.

요약
서버가 HTML 폼을 생성할 때 토큰을 포함시켜 보내고, 사용자가 폼을 제출할 때 이 같은 토큰을 다시 서버로 보냅니다.
서버는 처음에 생성한 토큰과 제출된 토큰이 같은지 확인하여, 요청의 안전성을 판단합니다.
이 과정을 통해 CSRF 공격을 방지하고, 사용자 요청이 신뢰할 수 있는 것임을 보장하는 것입니다.

김나현

참 쉽죠? #개발계의 밥아저씨를 꿈꿉니다⋆⁺₊⋆ ☾⋆⁺₊⋆

장고 🍡 : html, form

Django: 마감에 쫓기는 완벽주의자를 위한 웹 프레임워크

form 태그에서 가장 중요한 것은 input의 name 속성

input태그에 name이 없으면 아무리 적어도 데이터 전송 안됨.

+ id

label for="user_email"

id="user_email" (input안에)

일치해야 함

"마크업 언어"라는 말은 텍스트에 태그(tag)를 추가해서 그 텍스트의 구조와 의미를 정의하는 언어를 의미해요. 쉽게 말해서, 마크업 언어는 내용을 어떻게 표시할지를 지정하는 규칙들이 모인 언어라고 할 수 있어요.

HTML 문서의 기본 구조

0818 그놈의 렌더링 또 찾아봄

장고 기초 주차

0개의 댓글