고정 헤더 영역
상세 컨텐츠
본문
HTML이란 무엇일까요? 프로그래밍 언어가 아닌 컨텐츠의 구조를 정의하는 마크업 언어입니다.
여기서 컨텐츠라고 하면 글, 이미지, 하이퍼링크, 비디오 등 웹에서 사용하고 표현하는 컨텐츠를 생각하시면 됩니다.
HTML의 기본 구성요소는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test page</title>
</head>
<body>
<img src="images/firefox-icon.png" alt="My test image">
</body>
</html>- <!DOCTYPE html> — doctype. 1991년 2월쯤 좋은 html로 인정받기 위한 일련의 규칙으로 지금은 사용하지 않음
- <html></html> 이 요소는 페이지 전체의 컨텐츠를 감싸며, 루트(root) 요소라고도 합니다.
- <head></head> 여기에는 keywords (en-US)와 검색 결과에 표시되길 원하는 페이지 설명, 컨텐츠를 꾸미기 위한 CSS, 문자 집합 선언 등과 같은 것들이 포함됩니다.
- <body></body> 이것은 페이지에 방문한 모든 웹 사용자들에게 보여주길 원하는 모든 컨텐트를 담고 있으며, 그것이 텍스트일 수도, 이미지, 비디오, 게임, 플레이할 수 있는 오디오 트랙이나 다른 무엇이든 될 수 있습니다.
- <meta charset="utf-8"> — 이 요소는 문서가 사용해야 할 문자 집합을 utf-8(Unicode Transformation Format - 8bit)으로 설정합니다 >> https://namu.wiki/w/UTF-8
- <title></title> — <title> 요소. 이 요소는 페이지의 제목을 설정하는 것으로 페이지가 로드되는 브라우저의 탭에 이 제목이 표시됩니다. 이 요소는 북마크나 즐겨찾기에서 페이지를 설명하는 것으로도 사용됩니다.
이미지
<img> 요소를 다시 살펴보도록 합시다:
<img src="images/firefox-icon.png" alt="My test image"><img src="사진파일경로" alt="이미지를 볼 수 없는 사용자들을 위한 설명문">
문자 나타내기
제목 : h: heading element
<h1>Heading Element 1</h1>
<h2>Heading Element 2</h2>
<h3>Heading Element 3</h3>
<h4>Heading Element 4</h4>
<h4>Heading Element 5</h4>
<h4>Heading Element 6</h4>
문단 : p : paragraph element
<p>This is a single paragraph</p>
목록에는 <ul>과 <ol>이 있다.
ul : unordered list > https://developer.mozilla.org/ko/docs/Web/HTML/Element/ul#%EC%8B%9C%EB%8F%84%ED%95%B4%EB%B3%B4%EA%B8%B0
ol : ordered list
https://developer.mozilla.org/ko/docs/Web/HTML/Element/ol
<ul 태그 입력>
<ul>
<li>Milk</li>
<li>Cheese
<ul>
<li>Blue cheese</li>
<li>Feta</li>
</ul>
</li>
</ul>
<ol 태그 입력>
<ol>
<li>Mix flour, baking powder, sugar, and salt.</li>
<li>In another bowl, mix eggs, milk, and oil.</li>
<li>Stir both mixtures together.</li>
<li>Fill muffin tray 3/4 full.</li>
<li>Bake for 20 minutes.</li>
</ol>
결과가 궁금하시면 html 파일로 만들어서 열어보시면 됩니다.
하이퍼 링크 연결
<a href="https://www.mozilla.org/en-US/about/manifesto/">Mozilla Manifesto</a>
<a href="url 주소를 입력해주세요">하이퍼 링크에 표시될 문자를 입력해주세요</a>'Programming Language > HTML' 카테고리의 다른 글
| HTML 많이 쓰이는 태그 - Semantic (0) | 2022.12.07 |
|---|
