송희의 알찬 일기

[WEB] HTML 문법 정리 #1 본문

일상 일기

[WEB] HTML 문법 정리 #1

애쏭1004 2023. 8. 22. 20:53

HTML (HyperText Markup Language)은 웹 페이지를 만들기 위한 표준 마크업 언어이다.

HTML은 웹 페이지의 구조를 설명하고 있으며, 웹 브라우저는 이 HTML 코드를 읽어 사용자에게 웹 페이지를 표시한다.

 

아래는 HTML의 주요 요소와 기본 문법에 대한 간략한 정리이다.

기본 구조

<!DOCTYPE html>
<html>
<head>
    <title>페이지 제목</title>
</head>
<body>
    웹 페이지의 내용
</body>
</html>

주요 태그

  1. 헤드 태그
    • <head>: 문서의 메타데이터를 포함하는 섹션.
    • <title>: 문서의 제목.
    • <meta>: 메타 정보 제공.
    • <link>: 외부 리소스 연결.
    • <style>: 인라인 CSS 스타일 정의.
    • <script>: 자바스크립트 코드 포함.
  2. 본문 태그
    • <body>: 실제 페이지 내용.
    • <h1>, <h2>, ... , <h6>: 제목 태그.
    • <p>: 단락.
    • <a href="URL">: 하이퍼링크.
    • <img src="이미지경로" alt="설명">: 이미지 삽입.
    • <ul>, <ol>, <li>: 목록.
    • <br>: 줄 바꿈.
    • <hr>: 수평선.
  3. 폼 태그
    • <form>: 폼 시작.
    • <input>: 입력 필드.
    • <label>: 입력 필드 라벨.
    • <textarea>: 텍스트 영역.
    • <select>, <option>: 드롭다운 목록.
  4. 테이블 태그
    • <table>: 테이블 시작.
    • <tr>: 테이블 행.
    • <td>: 테이블 데이터.
    • <th>: 테이블 헤더.
  5. 기타
    • <div>: 블록 수준의 컨테이너.
    • <span>: 인라인 수준의 컨테이너.
    • <iframe>: 내장 프레임.
    • <audio>, <video>: 오디오 및 비디오 컨텐츠 재생.

속성

태그 내에 포함되어 특정 기능이나 스타일을 정의하는 부분을 속성(attribute)이라고 합니다. 예를 들어, <a> 태그의 href 속성은 링크의 대상 URL을 지정한다.

<a href="https://www.example.com">이곳을 클릭하면 example.com으로 이동합니다.</a>

주석

<!-- 이 부분은 주석입니다. 웹 브라우저에서는 표시되지 않습니다. -->

이러한 기본적인 구조와 태그들을 조합하면 다양한 웹 페이지를 만들 수 있다.

 

 

'일상 일기' 카테고리의 다른 글

[WEB] JavaScript 문법 정리 #3  (0) 2023.08.23
[WEB] CSS 문법 정리 #2  (0) 2023.08.23
[ChatGPT] 홈페이지 만들기 #1  (0) 2023.08.22
[보건증 발급] 시흥 보건소에서 보건증 발급 받기  (0) 2023.08.22
[용산 아이파크몰] 볼거리 가득! 실내 데이트로 안성맞춤  (3) 2023.08.21
'일상 일기' Related Articles more