HTML
HTML이란, Hyper Text Markup Language의 약자로서 웹 페이지를 만드는 언어이다.
그리고 Markup은 원래 인쇄할 때 원고에서 교정표시를 나타내는 뜻으로 써, 말 그대로 Mark 하는 것을 말한다.
웹 문서에서는 특정 텍스트에 Mark하기 위하여 HTML 태그(tag)라는 것을 사용한다.
<h1>제목</h1>
<p>내용이 들어올 자리입니다.</p>
<a href="http://www.naver.com">네이버로 이동</a>- 위 예시와 같이 제목과 같이 크게 볼 수 있도록 하려면 <h1> 태그를 사용
- 내용과 같은 글의 문단을 표시하려면 <p> 태그를 사용합니다.
- 다른 웹 문서로 이동하기 위하여 <a> 태그를 사용합니다.
HTML 태그(Tag)
HTML 태그는 웹 문서에 어떤 표시를 해주는 것이다.
예를들면 글자 크기, 글자색, 글자 모양 등을 변경하거나 하이퍼 링크와 같은 문서연결 기능을 넣을 수도 있다.
HTML 태그 사용법은 다음과 같다.
<h1>제목</h1>
<header>헤더</header>
<footer>푸터</footer>
<main>메인</main>
<p>본문</p>
<a href="http://www.naver.com">네이버로 이동</a>
태그 구조
HTML 태그는 다음과 같은 구조로 이루어져 있다.
태그 특징
- 태그는 시작태그 <h1>와 종료태그 </h1>로 이루어져 있다.
- 태그 사이에 콘텐츠를 선언합니다. 예) <h1>제목</h1> "제목"이 콘텐츠 이다.
- 콘텐츠가 없는 태그는 종료태그를 생략할 수 있습니다.
- 시작태그 안에 있는 class는 HTML Tag의 속성이며 class 말고도 다양한 속성이 있습니다.
- HTML 태그는 Element, 즉! 요소 또는 노드 라고도 부른다. 태그 = 요소(Element) = 노드(Node)
HTML 문서 기본구조
웹 페이지를 작성하려면 기본적으로 선언되어야 하는 것들이 있다.
이것을 HTML 문서 기본구조라 하며, 그 구조는 다음과 같다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>문서 제목</title>
</head>
<body>
<h1>짐코딩 HTML 강좌</h1>
<a href="https://www.youtube.com/c/gymcoding">링크 클릭!</a>
<p>이번 시간에 배울 내용은 HTML 입니다.</p>
</body>
</html>
<!DOCTYPE html>
- 도큐먼트 타입으로 현재 문서가 어떤 버전으로 작성되었는지 미리 표시한다.
- 태그는 아니며 웹 문서 제일 처음에 표시한다.
- <!DOCTYPE html> 은 HTML5 버전 이라는 뜻이며, 이전 버전인 HTML 4.01 에서는 더 복잡하게 사용했었다.
<html lang="ko"> ~ </html>
- 웹 문서의 시작(<html>)과 끝(</html>)을 나타내는 태그이다.
- lang="ko" - lang 속성은 웹 문서가 어떠한 언어로 작성되었는지 표시하는 <html>태그의 속성이다.
- 현재 ko(korean) 한국어로 작성되었다는 뜻이며, 이러한 속성은 웹 접근성 향상에 도움을 준다.
<head>~</head>
- <html> 태그의 자식(Child)태그로, HTML 문서 정보나 문서에서 사용할 외부 파일 링크를 넣는 구간이며, 웹 브라우저에 표시되지는 않는다.
<meta charset="UTF-8">
- HTML 파일의 인코딩을 알려주는 태그로서, 쉽게 말하면 브라우저에게 이 문서를 어떻게 그리는지 알려주는 용도이다.
- <meta charset="UTF-8"> 태그를 입력 해야지 한글, 특수문자 들이 깨지지 않고 잘 출력 된다.
<body>~</body>
- <html> 태그의 자식(Child)태그로, HTML 문서 내용을 넣는 구간 이며, 실제 웹 브라우저 안에 표시된다.
- <body> 태그 안에 실제 문서내용을 입력하여 웹 사이트를 만듭니다.
HTML 주석
주석은 HTML 소스 내에 메모를 남기는 것을 말합니다.
사용법: <!-- 메모내용 --> 메모 내용란에 메모할 문자를 작성한다.
<!-- 메모내용 -->
<h2>영양성분</h2>
<!--
메모내용이 여러줄일 경우
-->
<h2>영양성분</h2>- 주석은 실제 웹 화면에 보이지 않습니다.
- 웹 화면에 보이지 않으나, "소스보기"를 통하여 볼 수 있으니 중요한 정보를 남겨서는 안된다.
본 내용은 유튜버 짐코딩님의 웹 개발 강의를 정리한 것 입니다. 하단 링크 참고해주세요!
https://www.youtube.com/c/gymcoding
짐코딩 - 웹 개발 입문부터 실무까지
【실전코딩 짐코딩 클럽 💪🏋️♀️】 👉 https://gymcoding.co (짐코딩 사이트, 강의교안 등등) 【짐코딩 클럽 온라인 강의 🎉】 👉 https://edu.gymcoding.co 👉 모든 유료강의 구독자 할인 쿠폰코드
www.youtube.com
'HTML' 카테고리의 다른 글
| [HTML] 🖼️ 이미지 & 멀티미디어 (0) | 2024.08.12 |
|---|---|
| [HTML] Inline VS Block Element (0) | 2024.08.09 |
| [HTML] Sementic Tag 란? (0) | 2024.08.08 |
| [HTML] HTML 기본 태그 (0) | 2024.08.08 |
| [HTML] Emmet (0) | 2024.08.06 |
