HTML 정리1

Noma·2021년 1월 18일

*생활코딩 HTML 강의를 공부한 후 정리한 내용입니다.

HTML

: HTML(HyperText Markup Language)은 웹을 이루는 가장 기초적인 구성 요소이며, 웹 콘텐츠의 의미와 구조를 정의할 때 사용된다. 웹 브라우저에 표시되는 글, 이미지 등의 다양한 컨텐츠를 표시하기 위해 "마크업"을 사용한다.

HTML을 '의미'에 맞게 잘 작성하는 것은 비즈니스적인 측면에서 중요하다.

HTML 요소는 문서의 다른 텍스트와 "tag"로 구분한다. tag는 "<", tag 이름, ">"로 이루어진다. tag안의 요소명은 대소문자를 구분하지 않는다. (<title>, <Title>, <TITLE> 모두 OK! )

<strong>creating web pages</strong>

위의 strong이라는 것을 HTML에서는 문법적으로 tag라고 부른다. 앞에 있는 태그를 '열리는 태그', 뒤에 있는 태그를 '닫히는 태그'라고 부르기도 한다.

<strong>creating <u>web</u> pages</strong>

위와 같이, 태그는 중첩해서 사용할 수 있다.

HTML의 여러 태그 중에 무엇인가를 설명하지 않는 태그들은 감싸야하는 컨텐츠가 없기 때문에 태그를 닫지 않는다는 규칙이 있다.
ex ) <img>, <input>, <br>, <hr>, <meta> . . .

태그 이름만으로는 정보가 부족하므로 속성(attribute)을 같이 작성해야한다.

예를들어, 이미지는 <img> 태그만으로는 이미지 못 불러오며 src라는 속성이 작성되어져야 생성 가능하다.

width의 값으로 숫자나 %를 사용하면 원하는 크기로 조정할 수도 있다.

<parent>
  <child></child>
</parent>

(실제로 이런 이름의 태그는 없다)
parent 태그에 대해서 child 태그를 자식 태그라고 한다. 또 child 태그에 대해서 parent 태그를 부모 태그라고 한다.

아래 태그를 보면, p 태그가 a 태그의 부모이고 a 태그가 p 태그의 자식이다.

<p>
  <a href="https://opentutorials.org">opentutorials</a>
</p>

그런데 a 태그는꼭 p 태그의 자식이어야 하는 것은 아니다. 마찬가지로 p 태그가 꼭 a 태그의 부모일 필요는 없다. 직장의 상하관계처럼 필요에 따라서 관계가 달라질 수 있다.

그런데 몇몇 태그들은 부모 자식 관계처럼 고정된 관계인 태그들이 있다. 그것은 바로 ol, ul, li이다.

ul : unordered list로 순서가 없는 목록을 나타낼 때 사용
ol : ordered list로 순서가 있는 목록을 나타낼때 사용
li : 목록의 항목을 나타낸다. 반드시 정렬 목록(<ol>), 비정렬 목록(<ul>, 혹은 메뉴(<menu>) 안에 위치해야 한다.

<ul>
  <li>1. html</li>
  <li>2. css</li>
  <li>3. javascript</li>
</ul>

<ol>
  <li>outer</li>
  <li>pants</li>
  <li>skirt</li>
</ol>

본문은 body 태그로, 본문을 설명하는 태그는 head 태그를 사용해서 표현함으로서 정보를 구조적으로 정돈할 수 있다.

: 사용자에게 보여지는 UI적인 요소가 전혀 없고, 구글에서 검색할때 나오는 타이틀이나 부가설명, 그리고 북마크 추가할 때 나오는 제목이나 아이콘들이 정의되어 있다.

CSS를 연결하는 파트도 head에 작성한다. 즉, head에는 메타데이터만 있다.

또 이 웹페이지가 HTML로서 만들어졌다는 것을 표현하기 위해서 문서의 시작 부분에 <!doctype html>를 추가한다.

: <body>는 사용자에게 보여지는 요소로 HTML 문서의 내용을 나타낸다. 한 문서에 하나의 <body> 요소만 존재할 수 있다.

❗ 참고자료
https://opentutorials.org/course/1
https://developer.mozilla.org/ko/docs/Web/HTML

Frontend Web/App Engineer