HTML
4/16 Html class
많이느린아이
2024. 4. 16. 18:13
HTML Class(2) 25764cc230034a8c8820d7e69270c7db.pdf
0.53MB
기초적인 구조
<!DOCTYPE html> <!-- 이 선언은 문서의 유형과 사용되는 HTML의 버전을 정의합니다 -->
<html lang="en"> <!-- HTML 문서의 시작 태그로, 언어를 영어로 지정(검색)합니다 -->
<head>
<meta charset="UTF-8"> <!-- 이 메타 태그는 문서의 문자 인코딩을 UTF-8로 지정합니다. UTF-8은 많은 다양한 언어와 문자를 지원합니다 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 이 메타 태그는 반응형 디자인을 위한 뷰포트 속성(WIDTH..-> 모바일 디바이스)(해상도 설정적용)을 설정합니다 -->
<title>문서</title> <!-- 문서의 제목으로, 브라우저의 제목 표시줄이나 탭에 나타납니다 (새로고침)기능으로 사용하는것도 괜찮다. -->
</head>
<body>
<!-- HTML 문서의 본문으로, 여기에는 실제로 보이는 내용이 들어갑니다 -->
<!-- 이 예제에서는 <body> 태그 사이에 내용이 없습니다 -->
</body>
<!-- 잘못된 위치에 문단 태그가 있습니다. 이는 올바르게 표시되지 않으며 <body> 태그 내부에 배치해야 합니다 -->
<p>문단태그</p> <!-- 이는 "문단태그"라는 한국어 텍스트 내용을 가진 문단 태그입니다 -->
<p>문단태그</p> <!-- 이는 HTML 인코딩된 텍스트입니다 (<와 >는 각각 <와 >를 나타냅니다). 따라서 이 텍스트는 HTML 태그로 해석되지 않고 "<p>문단태그</p>"로 표시됩니다 -->
</html>
특수문자 사용법 (nbsp는 ⇒ 스페이스바)
<!DOCTYPE html> <!-- HTML5 문서 유형 선언 -->
<html lang="en"> <!-- 문서 언어를 영어로 설정 -->
<head>
<meta charset="UTF-8"> <!-- 문자 인코딩을 UTF-8로 설정 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 반응형 디자인을 위한 뷰포트 설정 -->
<title>HTML5 기본 구조 요소</title> <!-- 문서 제목 설정 -->
</head>
<body>
<!-- 헤더 부분 -->
<header>
<h1 style="text-align: center;"><HTML 특수문자 ></h1> <!-- 제목 가운데 정렬 -->
</header>
<!-- 본문 -->
<section>
<article>
# 풀스택 개발자를 위한 웹프로그래밍 #
<p></p>
HTML & CSS3 & JavaScript jQuery
</article>
</section>
© 코스모
® 2024
<!-- 푸터 -->
<footer>
<small>사이트 정보 표시</small> <!-- 사이트 정보 표시 -->
</footer>
</body>
</html>
이미지 넣기
<!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>
<figure>
<img src = "images/a.jpg" alt = "no images" title="탈주">
</figure>
<figure>
<img src = "images/b.jpg" alt = "no images" tilte ="부산">
</figure>
</body>
</html>
다른 위치(사이트,문서..등등) 이동 할 때
- 열렸던 사이트를 모두 기억하고있다.
GET 방식:
GET 방식은 폼 데이터를 URL의 쿼리 문자열에 붙여서 서버에 전송합니다. 이 방식은 주로 데이터가 민감하지 않을 때 사용하며, 데이터를 브라우저의 URL에 노출시키기 때문에 보안에 취약할 수 있습니다. 이 방식은 주로 데이터를 검색하거나 요청하는 데 사용됩니다.
htmlCopy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GET 방식 폼</title>
</head>
<body>
<h2>GET 방식 폼</h2>
<form action="get_handler.php" method="get">
<label for="search">검색어:</label><br>
<input type="text" id="search" name="q"><br><br>
<input type="submit" value="검색">
</form>
</body>
</html>
위의 예제에서 사용자가 검색어를 입력하고 "검색" 버튼을 클릭하면, 브라우저는 **get_handler.php?q=사용자가입력한검색어**와 같은 URL을 생성하여 해당 페이지로 이동합니다.
POST 방식:
POST 방식은 폼 데이터를 HTTP 요청의 본문에 담아서 서버에 전송합니다. 이 방식은 데이터가 민감할 때 사용되며, URL에 데이터가 노출되지 않기 때문에 GET 방식보다 안전합니다.
htmlCopy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>POST 방식 폼</title>
</head>
<body>
<h2>POST 방식 폼</h2>
<form action="post_handler.php" method="post">
<label for="username">사용자명:</label><br>
<input type="text" id="username" name="username"><br>
<label for="password">비밀번호:</label><br>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="로그인">
</form>
</body>
</html>
위의 예제에서 사용자가 사용자명과 비밀번호를 입력하고 "로그인" 버튼을 클릭하면, 브라우저는 **post_handler.php**로 POST 요청을 보냅니다. 이 요청의 본문에는 사용자가 입력한 데이터가 포함됩니다.