본문으로 건너뛰기
실습하기

HTML 총정리

HTML은 "HyperText Markup Language"의 약자로 웹 페이지의 구조와 내용을 정의하는데 사용되는 마크업 언어입니다.

웹 브라우저는 HTML 코드를 해석해 사용자에게 웹 페이지를 표시합니다.

HTML의 기본 구조:​

HTML
<!DOCTYPE html>
<html>
  <head>
    <title>문서의 제목</title>
  </head>
  <body>
    웹 페이지의 주요 내용
  </body>
</html>

  1. <!DOCTYPE html>: 문서 타입 선언. 현재 문서가 HTML5로 작성되었음을 나타냅니다.

  2. <html>: HTML 문서의 시작과 끝을 나타냅니다.

  3. <head>: 문서의 메타 정보, 스타일, 스크립트 등의 정보를 포함합니다.

  4. <title>: 브라우저 탭에 표시되는 문서의 제목을 설정합니다.

  5. <body>: 실제 웹 페이지의 내용을 포함합니다.


몇 가지 주요 HTML 태그:​

  1. 제목 태그: <h1>, <h2>, ..., <h6> - 웹 페이지의 제목이나 부제목을 나타냅니다.

  2. 단락 태그: <p> - 텍스트 단락을 생성합니다.

  3. 링크 태그: <a href="URL">링크 텍스트</a> - 다른 페이지로의 링크를 생성합니다.

  4. 이미지 태그: <img src="이미지URL" alt="대체 텍스트"> - 웹 페이지에 이미지를 삽입합니다.

  5. 목록:

    • 순서 있는 목록: <ol><li>항목1</li><li>항목2</li></ol>
    • 순서 없는 목록: <ul><li>항목1</li><li>항목2</li></ul>

폼 관련 태그:​

  1. 폼 태그: <form action="URL" method="POST"> ... </form> - 사용자 입력을 수집하는 폼을 생성합니다.

  2. 입력 태그: <input type="text" name="이름"> - 텍스트 입력 필드를 생성합니다.

  3. 버튼: <button type="submit">제출</button> - 폼 제출 버튼을 생성합니다.


지금까지 웹사이트의 골격, HTML 강의를 수강하느라 정말 고생 많으셨습니다 🙌

다음 강의는 웹사이트의 옷, CSS가 무엇이고 어떻게 사용하는지 배워보겠습니다!

다음 내용이 궁금하다면?

코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!