수학에서 덧셈 기호를 +로 나타내고, 뺄셈 기호를 -로 나타내듯
웹 사이트에서 화면에 표시되는 정보를 약속 한 것이 HTML
HyperText는 단순 텍스트 이상의, 링크 등의 개념이 포함 된 텍스트
Markup은 꺽쇠(<, >)로 이루어진 태그를 사용하는 규격
으로, 태그들을 이용하여 텍스트 이상의 요소를 정의하는 약속된 언어라고 할 수 있다.
실제로 웹사이트에 표시되는 문자, 사진, 영상, 레이아웃 모두 HTML로 구성되어있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>제목을 입력하세요.</title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
— doctype.
아주 오래전 HTML 이 막 나왔을 때 (1991년 2월쯤),
doctype은 (자동 오류 확인이나 다른 유용한 것을 의미하는)
good HTML로 인정받기 위해 HTML 페이지가 따라야 할 일련의
규칙으로의 연결통로로써 작동하는 것을 의미하였습니다.
하지만, 최근에는 아무도 그런 것들에 대해 신경쓰지 않으며
그저 모든 것이 올바르게 동작하게 하기 위해 포함되어야 할
역사적인 유물일 뿐입니다. 지금은, 그게 알아야 할 전부 입니다.
<html></html>
— <html>
요소. 이 요소는 페이지 전체의 컨텐츠를
감싸며, 루트(root) 요소라고도 합니다.
<head></head>
— <head>
요소. 이 요소는 HTML 페이지에
포함되어 있는 모든 것들
(여러분의 페이지를 조회하는 사람들에게 보여주지 않을 컨텐츠)
의 컨테이너 역할을 합니다.
여기에는 keywords (en-US)와 검색 결과에 표시되길 원하는
페이지 설명, 컨텐츠를 꾸미기 위한 CSS, 문자 집합 선언 등과 같은 것들이 포함됩니다.
<body></body>
— <body>
요소.
이것은 페이지에 방문한 모든 웹 사용자들에게 보여주길 원하는
모든 컨텐트를 담고 있으며, 그것이 텍스트일 수도, 이미지, 비디오,
게임, 플레이할 수 있는 오디오 트랙이나 다른 무엇이든 될 수 있습니다.
<meta charset="utf-8">
— 이 요소는 문서가 사용해야 할 문자 집합을
utf-8으로 설정합니다 (utf-8 문자 집합에는 인간의 방대한
주류 기록언어에 있는
대부분의 문자가 포함되어 있습니다).
본질적으로 여러분이 사용할 수 있는 어떠한 문자 컨텐트도
다룰 수 있습니다. 이 문자 집합을 설정하지 않을 이유가 없으며,
그렇게 설정하면 나중에 발생할 수 있는 일부 문제를 피할 수 있습니다.
<title></title>
— <title>
요소. 이 요소는 페이지의 제목을
설정하는 것으로 페이지가 로드되는 브라우저의 탭에 이 제목이 표시됩니다.
이 요소는 북마크나 즐겨찾기에서 페이지를 설명하는 것으로도 사용됩니다.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>스파르타코딩클럽 | HTML 기초</title>
</head>
<body>
<!-- 구역을 나누는 태그들 -->
<div>나는 구역을 나누죠</div>
<p>나는 문단이에요</p>
<ul>
<li> bullet point!1 </li>
<li> bullet point!2 </li>
</ul>
<!-- 구역 내 콘텐츠 태그들 -->
<h1>h1은 제목을 나타내는 태그입니다. 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글 검색이 잘 되거든요.</h1>
<h2>h2는 소제목입니다.</h2>
<h3>h3~h6도 각자의 역할이 있죠. 비중은 작지만..</h3>
<hr>
span 태그입니다: 특정 <span style="color:red">글자</span>를 꾸밀 때 써요
<hr>
a 태그입니다: <a href="http://naver.com/"> 하이퍼링크 </a>
<hr>
img 태그입니다: <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
<hr>
input 태그입니다: <input type="text" />
<hr>
button 태그입니다: <button> 버튼입니다</button>
<hr>
textarea 태그입니다: <textarea>나는 무엇일까요?</textarea>
</body>
</html>
+이 밖에도 많기 때문에 궁금한게 있을 땐
mdn 들어가서 찾아보고 적용해보기!
(https://developer.mozilla.org/ko/docs/Web/HTML/Element)
👉잠깐! 정렬의 중요성
코드의 정렬이 제대로 되어있지 않으면, 코드의 생김새를 파악할 수 없어 오류를 해결하기가 무척 어려워집니다. Pycharm에서 ctrl+alt+L (맥은 cmd+alt+L) 로 자동정렬 기능을 사용해보세요.
<VSC 단축키>
[출처] Visual Studio Code 단축키 정리(VSC)|작성자 범이월
[출처] 스파르타코딩
[출처] https://ofcourse.kr/html-course/HTML-%EC%9E%85%EB%AC%B8