딴소리 잠깐
여름방학에 진행한 방학 프로젝트, 그리고 2학기에 참가한 공공데이터 활용 공모전 모두 플러터와 파이어베이스를 이용해 앱을 만드는 프로젝트를 진행했었다.
플러터를 이용해 한 페이지를 구현하는 것 정도는 이제 조금 할 줄 알지만, 웹에 대한 기본이 부족하다 보니 페이지를 연결하는 등 단순 페이지 구현을 넘어선 다른 일들이 어렵게 느껴졌다.
그래서 겨울방학 동안 웹에 대해 공부해보기로 다짐했다. 나름대로 구글링을 해본 결과 udemy의 Web Developer Bootcamp 강의가 평이 괜찮은 것 같았고, 마침 2022년 버전이 새로 나왔다. html, css, javascript, 그리고 그 외에 Ajax, node, express 등 많은 부분을 다뤄주는 것이 마음에 들어서 이 강의를 듣기로 했다.
한국어 자막이 달린 버전도 나왔었지만 어차피 나중에 자료를 찾아볼 때 영어로 찾을 일이 많을 것 같기도 하고, 리뷰에 달린 한국어 자막에 대한 평이 상당히 안좋은 것 같아 그냥 영어 버전을 구매했다. 어려운 영어는 아니라서 못알아듣는 부분은 거의 없는데 진도가 잘 안나가진다.
HTML
Hyper Text Markup Language, HTML은 페이지 안의 정보들을 담는 역할을 한다.
과거에는 table을 활용해 layout을 배치하는 등 단순히 정보를 담는 것 외에 다른 역할도 했지만, CSS의 발전으로 웹을 꾸미는 일은 CSS에게 넘겨주게 되었고, 이제는 정보를 담는 역할에 집중한다.
Element
C 프로그램이 여러 함수로 이루어진 것처럼, HTML은 element들의 집합이다.
element?
일반적인 element는 시작태그 + 내용 + 종료태그 로 이루어져 있다.
시작 태그는 <태그명>의 형태로, 종료 태그는 </태그명>의 형태로 작성한다.
<p>I am a paragraph</p>
위의 <p> element에서 <p>는 시작 태그(opening tag), I am a paragraph는 내용(contents), <\p>는 종료 태그(closing tag)이다.
empty element
<img src="https://~.jpg" alt="그림">
간혹, <img> 태그처럼 종료 태그가 없는 태그도 있는데, 이러한 태그를 빈 태그(empty tag)라고 부른다.
attribute
이미지를 보여줄 때 사용하는 <img> 태그는 이미지의 주소(src), 대체 텍스트(alt) 와 같은 추가적인 정보를 필요로 한다.
여기서 alt나 src와 같은 것들을 attribute라고 하고, 우리는 attribute를 통해 해당 element에게 추가적인 정보를 제공해줄 수 있다.
Basic elements
- 제목(heading),
<h1>~<h6> - 문단(paragraph),
<p> - 리스트(list),
<ol>(ordered),<ul>(unordered)
리스트 안의 내용들은<li>태그로 작성 - 링크(anchor) - attribute로 주소(href)를 가짐
<a href="http://www.~"> - 이미지(image) - attriubte로 이미지의 주소(src)와 대체 텍스트(alt)를 가짐, empty tag
<img src="" alt=""> - 주석
<!--comment-->
HTML 문서 구조
<!DOCTYPE html>
<html>
<head>
<title>tab name</title>
</head>
<body>
<h1>html문서</h1>
</body>
</html>가장 단순한 html 문서는 위의 구조로 생겼다.
위에서부터 한 줄씩 살펴보면,
<!DOCTYPE html> : HTML5임을 말해준다.
<html> : root element라고도 한다. 자식으로 <head>와 <body> 태그를 가진다.
<head> : metadata element라고도 한다. 페이지와 관련된 정보를 담고있는데, 브라우저에 표시되는 탭의 이름을 지정하는 <title> 태그, 문자셋(charset) 등 여러 정보를 지정할 수 있는 <meta> 태그 등이 <head> 태그 안에 들어간다.
<body> : 브라우저에 보여지는, 페이지의 주요 내용들이 담긴 부분이다
element가 무엇인지, 기본적인 element들, 그리고 html 문서의 구조에 대해 정리해봤다. 이정도가 html의 기초라고 할 수 있겠다. 다음 글에는 시맨틱 마크업에 대해, 그리고 다른 주요 태그들을 정리해보겠다.
