Html(HyperText Markup Language)
Html은 웹 페이지를 만들기 위한 가장 기본이 되는 마크업 언어입니다.
웹 브라우저가 어떻게 내용을 구조화 시키고 표시할지를 정의합니다.
가장 기본적인 html 문서는 다음과 같습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>문서 제목</title>
</head>
<body>
<h1>Hello World!</h1>
<p>간단한 HTML 문서 만들기</p>
</body>
</html>
다음의 웹 문서의 요소는 다음과 같습니다.
- <html lang="en">: HTML 문서의 시작, lang 속성은 문서의 언어를 지정
- <head>: 문서에 대한 메타 정보. ex) 문자 인코딩, 뷰포트 설정, 제목 등
- <meta charset="UTF-8">: 문서의 문자 인코딩을 UTF-8로 설정
- <meta name="viewport" content="width=device-width, initial-scale=1.0">: 모바일 기기에서 적절한 뷰포트를 설정
- <title>: 문서의 제목을 정의
- <body>: 실제 콘텐츠가 들어가는 부분, 텍스트, 이미지, 링크 등 포함 가능
- <h1> : 제목을 나타내는 태그, 숫자가 작을수록 더 중요한 큰 제목을 의미
- <p> : 본문 내용을 작성하는 태그, 문단을 구성할 때 사용
여기서, 각 요소들은 여는 태그 <> 와 닫는 태그 </>로 구성되어 있습니다.
각 태그 사이에는 텍스트를 넣을 수도 있고, 혹은 자식 요소를 추가할 수도 있습니다.
그렇다면, 모든 요소들을 암기해서 작성을 해야할까요?
물론 암기하고 있다면 빠르게 코드를 작성할 수도 있습니다.
그렇다고 필수는 아니고, 검색하면서 사용해도 좋습니다. 그리고, 많이 사용을 하다보면 자연스럽게 외워집니다!
실습해보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 이론학습</title>
</head>
<body>
<h1><a href="https://ozcodingschool.com/">오늘의 할 일</a></h1>
<ul>
<li>HTML 예습하기</li>
<li>MDN 사이트 접속하기</li>
<li>w3school 사이트 접속하기</li>
<li>실습 도전하기</li>
</ul>
</body>
</html>
참고하기
https://developer.mozilla.org/ko/docs/conflicting/Learn_web_development/Core/Structuring_content
HTML 소개 | MDN
developer.mozilla.org
https://www.w3schools.com/html/default.asp
W3Schools.com
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
'개발' 카테고리의 다른 글
| CSS 입문하기 #2 (0) | 2026.03.26 |
|---|---|
| CSS 입문하기 #1 (0) | 2026.03.26 |
| Git과 Github (0) | 2026.03.26 |
| CLI(Command Line Interface) 환경 알아보기 (0) | 2026.03.26 |
| IDE와 Code Editor의 차이 (VS Code는 어디에 속할까?) (0) | 2026.03.26 |