HTML의 언어와 구성 요소
다음이 웹 페이지를 만들기 위한 기본적인 마크업 언어이다.
문서 제목Hello World!
이것은 간단한 HTML 문서입니다.
그렇게 되면 위와 같이 출력이 되는데
leng > 언어설정
head > 웹 문서에 필요한 설정
(위의 코딩에서는 문서의 문자 인코딩(UTF-8)을 설정하고 모바일 기기에서의 뷰포트를 설정했다.)
title > 문서의 제목을 정의하고 브라우저의 탭에 표시 된다.
body > 실제 브라우저에 텍스트,이미지,링크등들이 들어간다.
h1 > body 안에 들어가는 제목이다. h2, h3 숫자가 늘 수록 제목의 크기가 작아진다.
(아래에 예시, 꼭 숫자 순서대로 갈 필요없고 1에서 바로 3으로 사용도 가능)
사랑해
사랑해
사랑해
p (Paragraph) > 단락을 표시한다. 한 단락마다 자유 내용을 넣고 /p로 닫아주면 그것이 한 단락이 된다.
위에서 배운 요소들로 실습 과제들을 해보았다.
h1으로 '오늘의 할 일' 큰 제목을 정의 했다.
그리고 a href로 제목 앞에 "하이퍼 링크 주소"를 입력을 하고 닫는h 안에 닫는 a를 넣었다.
그 다음으로 p들로 단락을 표시했다.
Live Preview를 통해 사이트가 만들어지고 하이퍼링크도 잘 적용된 모습을 확인했다!
그리고 추가로 여러 요소들을 알아봤다.
| 태그 | 설명 | 예시 코드 |
|---|---|---|
<!DOCTYPE html> | HTML5 문서임을 선언 | <!DOCTYPE html> |
<html> | HTML 문서의 시작 태그 | <html></html> |
<head> | 문서 메타정보를 포함하는 부분 | <head><title>문서 제목</title></head> |
<meta charset="UTF-8"> | 문자 인코딩 설정 | <meta charset="UTF-8"> |
<title> | 문서 제목을 설정 | <title>문서 제목</title> |
<body> | 본문 내용이 포함되는 부분 | <body></body> |
<h1> ~ <h6> | 제목을 정의 (1~6까지) | <h1>제목 1</h1>, <h2>제목 2</h2> |
<p> | 문단을 정의 | <p>이것은 문단입니다.</p> |
<a> | 하이퍼링크를 생성 | <a href="https://www.example.com">링크 텍스트</a> |
<img> | 이미지를 삽입 | <img src="image.jpg" alt="이미지 설명"> |
<ul> | 순서 없는 리스트 (Bullet List) | <ul><li>항목 1</li><li>항목 2</li></ul> |
<ol> | 순서 있는 리스트 (Numbered List) | <ol><li>첫 번째 항목</li><li>두 번째 항목</li></ol> |
<li> | 리스트 항목을 정의 | <li>항목 1</li> |
<strong> | 강조된 텍스트 (굵은 글씨) | <strong>강조된 텍스트</strong> |
<em> | 강조된 텍스트 (이탤릭체) | <em>이탤릭체 텍스트</em> |
<table> | 테이블을 생성 | <table><tr><td>셀 1</td></tr></table> |
<tr> | 테이블의 행을 정의 | <tr><td>셀 1</td></tr> |
<td> | 테이블의 데이터를 정의 | <td>셀 1</td> |
<form> | 사용자 입력 폼을 생성 | <form action="/submit"><input type="text" name="username"></form> |
<input> | 폼 입력 필드를 생성 | <input type="text" name="username"> |
내 동료 Chat GPT가 만들어줬다.
당장 이 요소들로 사이트들을 만들어 보면 재밌겠다.
아래에는 HTML을 학습할 수 있는 사이트들이다
MDN
https://developer.mozilla.org/ko/docs/Learn/HTML/Introduction_to_HTMLW3school
https://www.w3schools.com/html/default.asp
조각 레몬