브라우저에게 표준 모드로 렌더링하도록 유도하여, 호환성 문제 방치 및 최신웹 표준을 준수하게 함
작성 시 대, 소문자를 구분하지 않음
<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<HTML>
HTML 문서의 시작을 알리는 태그
문서의 모든 내용은 <html> 태그 안에 있어야 한다.
<html> 태그에 가장 많이 사용하는 속성은 "lang"이며, 해당 문서의 기본 언어를 지정.
이를 통해 스크린 리더나 브라우저, 검색 엔진 등에 사용해야 하는 언어 정보를 제공.
<html> <!-- 언어설정: unknown(기본값) = <html lang=""> -->
<html lang="en"> <!-- 영어 -->
<html lang="ko"> <!-- 한국어 -->
....
<head>
HTML 문서의 메타 데이터(<meta>)와 제목, 스타일 시트(<style>) 및 스크립트(<script>)와 폰트와 같은 기타 리소스 등에 대한 정보를 적을 수 있는 태그
외부 스타일 시트 및 스크립트를 불러올 수도 있다.
<meta>
<head> 태그 안에 작성하며, 문서의 메타 데이터(metadata)를 정의하는 데에 사용
이렇게 설정된 메타 데이터는 문서에 작성된 콘텐츠에 대한 정보를 제공하는 데이터로, 브라우저 및 검색 엔진 등이 사용한다.
<!-- HTML 문서의 문자 인코딩을 지정 -->
<meta charset="UTF-8">
<!-- 모바일 장치에서 페이지가 올바르게 렌더링되도록 뷰포트 설정을 지정 (반응형 웹 디자인을 위한 태그) -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 검색 결과나 소셜 미디어에서 페이지의 설명으로 사용 -->
<meta name="description" content="웹 페이지의 설명">
<!-- 검색 엔진 로봇(ex: 구글 검색 엔진 크롤러)에게 페이지를 색인할지 여부를 지정 -->
<meta name="robots" content="index, follow">
<!-- 문서의 저자를 지정 -->
<meta name="author" content="짱구">
<!-- 문서와 관련된 키워드를 지정 -->
<meta name="keywords" content="맛집, 성수동 맛집, 바퀴벌레 튀김">
description 태그
<title>
웹 페이지의 제목을 설정
웹 페이지의 주제와 목적을 명확하게 전달하는 역할
<title> 태그에 표시한 제목이 표시된다.
<body>
웹 페이지에 표시되는 모든 내용을 작성하는 태그
텍스트, 이미지 등과 관련된 다양한 태그를 사용해 <body> 태그에 작성
이를 통해 웹 페이지를 다양하게 구성할 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- body 태그 안에 다양한 태그를 사용해 화면에 표시될 내용을 작성한다 -->
<h1>NO CSS, JavaScript</h1>
<img src="./no-css.jpg">
<h3>행동 강령</h3>
<ul>
<li>HTML만 사용한 웹 사이트에 Social Credit +1000을 부여한다.</li>
<li>이를 어길 시 Social Credit -3000을 부과한다.</li>
<li>만약, -30000 Social Credit을 달성하면 해당 사이트에 비정상 트래픽을 발생시켜 AWS 비용 1000000000원을 발생시킨다.</li>
</ul>
<h3>로그인</h3><br>
<form>
<input type="text" placeholder="ID를 입력하세요."><br>
<input type="password" placeholder="비밀번호를 입력하세요."><br>
<span>* 당신의 데이터는 안전하게 보호되지 않고 URL에 그대로 나타납니다.</span><br>
<button>로그인</button> <button type="button"><a href="no-css-js-club/가입">회원가입</a></button>
</form><br>
<h3>공격 대상 웹사이트</h3>
<p>건방지게 CSS, JavaScript를 사용한 배신자의 웹사이트</p>
<input type="text" placeholder="배신자의 웹 사이트 url">
<button>접수</button>
</body>
</html>
