WEB | HTML 정리

HTML의 시작

---

strong 태그

아무 태그없이 작성한 HTML은 밋밋하다. 중요한 단어를 강조하기 위해 어떤 부분을 진하게 만들고 싶다면

<strong></strong>

위 태그를 사용한다.

---

u 태그

이미 강조한 단어 중 더 강조하고 싶은 단어가 있어 밑줄을 긋고 싶다면

<u></u>

위 태그를 이용한다.

---

h 태그

제목을 나타내고 싶다면

<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

위 태그를 이용한다. 숫자가 커질수록 크기는 작아진다.

---

모든 태그를 암기?

세상에는 많은 태그가 있고 한 웹페이지에서 그 많은 태그를 모두 사용하지 않는다. 전부 다 외울 필요가 없다는 뜻이다.

https://www.advancedwebranking.com/html/

해당 사이트에서는 많은 웹페이지에서 쓰이는 태그들의 순위를 보여준다. 이를 참고하여 어떤 태그들이 왜 많이 사용되는지를 파악하고 똑똑하게 코딩하자.

---

줄바꿈의 필요성

줄바꿈이 하나도 없어 글이 복잡해 보이면 읽기가 싫어진다. 이를 위해서 줄바꿈을 해준다.

---

br 태그

먼저 br 태그로 줄바꿈을 하면

<h1>Nutrition</h1>
the substances that you take into your body as food and the way that they <strong>influence your <u>health</u></strong>:
<br>Good nutrition is essential if patients are to make a quick recovery.
<br>improvements in nutrition
<br><br>Nutrition is a critical part of health and development. Better nutrition is related to improved infant, child and maternal health, stronger immune systems, safer pregnancy and childbirth, lower risk of non-communicable diseases (such as diabetes and cardiovascular disease), and longevity.
Healthy children learn better. People with adequate nutrition are more productive and can create opportunities to gradually break the cycles of poverty and hunger.
Malnutrition, in every form, presents significant threats to human health. Today the world faces a double burden of malnutrition that includes both undernutrition and overweight, especially in low- and middle-income countries.

결과는 위와 같다. br 태그는 닫는 태그가 없고 몇 번이든지 쓸 수 있다. 2개를 연속해서 쓰면 줄바꿈을 2번한다.

---

p 태그

p 태그로 단락을 표현하면

<h1>Nutrition</h1>
the substances that you take into your body as food and the way that they <strong>influence your <u>health</u></strong>:
<br>Good nutrition is essential if patients are to make a quick recovery.
<br>improvements in nutrition
<p>Nutrition is a critical part of health and development. Better nutrition is related to improved infant, child and maternal health, stronger immune systems, safer pregnancy and childbirth, lower risk of non-communicable diseases (such as diabetes and cardiovascular disease), and longevity.</p>
<p>Healthy children learn better. People with adequate nutrition are more productive and can create opportunities to gradually break the cycles of poverty and hunger.</p>
<p>Malnutrition, in every form, presents significant threats to human health. Today the world faces a double burden of malnutrition that includes both undernutrition and overweight, especially in low- and middle-income countries.</p>

결과는 위와 같다. br 태그와는 달리 단락을 표현하는 데에 있어서 더 깔끔하고 보기 좋다. 그런데 br 태그처럼 단락 사이에 여백을 더 주고 싶을 때는 어떻게 해야 할지 의문이 생긴다. 여기서 CSS가 등장한다.

---

p 태그와 CSS의 조합

<p style="margin-top:40px;">Nutrition is a critical part of health and development. Better nutrition is related to improved infant, child and maternal health, stronger immune systems, safer pregnancy and childbirth, lower risk of non-communicable diseases (such as diabetes and cardiovascular disease), and longevity.</p>

윗부분의 여백을 주는 CSS 코드를 합치면 br 태그보다 더 정교하게 여백을 조정할 수 있다.

---

img 태그

글만 있는 밋밋한 웹페이지에 이미지를 삽입하기 위해서는 img 태그가 필요하다.

단순히 이미지 태그가 존재한다고 해서 웹페이지에 이미지가 삽입되는 것은 아니다. 어떤 이미지를 삽입할 것인지 정보를 주어야 하는데 이를 속성이라고 한다.

---

Attribute(속성)

<img src="nutrition.jpg">

html 파일이 존재하는 프로젝트 파일에 있는 nutrition.jpg 이미지를 가지고 와 아래처럼 웹페이지에 나타내준다.

그런데 의도와는 달리 사이즈가 너무 커 제대로 이미지를 확인할 수 없다. 그래서 width와 height 값을 주어 사이즈를 조정한다.

---

width, height

width, height 속성은 언제나 명시하는 것이 좋다.

웹페이지가 로드될 때 브라우저가 이미지를 위한 적절한 공간을 남겨둘 수 있으나 속성이 명시되어 있지 않으면 웹페이지의 레이아웃이 변경될 수도 있다.

<img src="nutrition.jpg" width="500">

width, height 속성값은 pixel 단위로 명시해야 한다. HTML4.01에서 width 속성값은 pixel 단위와 퍼센트(%) 단위로도 정의할 수 있었으나 HTML5에서는 오직 pixel 단위만을 사용해야 한다.

출처 : http://tcpschool.com/html-tag-attrs/img-width

---

부모, 자식 관계 태그

아래같은 코드에서 p는 부모 태그, a는 자식 태그라고 불린다.

<p>
  <a>
  </a>
</p>

필요에 따라 부모, 자식 관계가 달라질 수 있다. 꼭 a의 부모가 p여야 하는 것은 아니다. 그런데 고정된 관계인 태그들이 존재한다.

---

li 태그

li 태그는 목록을 만들어준다. 그런데 아래처럼 코드를 작성하면

  <li>Carbohydrate</li>
  <li>Protein</li>
  <li>Fat</li>
  <li>Bread</li>
  <li>Butter</li>
  <li>vegetable</li>

서로 다른 주제의 목록을 구분할 수가 없다. li 태그는 이를 위해 서로 다른 목록을 구분할 수 있도록 경계를 나타내주는 ol 혹은 ul 태그를 항상 부모로 가진다.

---

ol 혹은 ul 태그

ol 태그는 ordered list의 줄임말로 li 태그를 가진 목록을 자동으로 넘버링 해준다.

ul 태그는 unordered list의 줄임말로 목록을 넘버링 해주지 않는다.

<ul>
  <li>Carbohydrate</li>
  <li>Protein</li>
  <li>Fat</li>
</ul>
<ul>
  <li>Bread</li>
  <li>Butter</li>
  <li>vegetable</li>
</ul>

서로 다른 목록을 구분할 수 있게 된 것을 확인할 수 있다.

---

!DOCTYPE html

<!DOCTYPE html>

html 태그를 정의하기 전에 가장 먼저 선언되어야 한다. HTML 태그는 아니나 html 버전이 무엇인지 웹브라우저에게 알려주는 역할이다.

---

html 태그

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>

  </body>
</html>

DOCTYPE 선언을 제외한 모든 다른 HTML 요소를 포함하기 위함이며, 웹브라우저에게 HTML 문서임을 알려주는 역할이다. head, body 태그를 모두 묶는다.

---

head, title, meta 태그

title, meta 태그는 모두 본문을 설명하며 head 태그 안에 존재한다.

head 태그는 body(본문)를 설명하는 태그(title, meta)를 묶는다.

<head>
   <meta charset="utf-8">
   <title>WEB - Nutrition</title>
</head>

title 태그는 검색엔진에서 책표지와 같은 존재이다. 문서의 제목을 정의할 때 사용하는데 title에 선언한 제목이 웹브라우저에서 탭의 이름이 된다.

meta 태그는 메타데이터를 정의할 때 사용하며, 웹브라우저가 html 문서를 utf-8 인코딩 방식으로 읽도록 해준다. charset은 문자규칙을 뜻한다.

---

a 태그

anchor 즉 닻을 의미하는 태그로 링크를 걸어주는, 웹페이지와 웹페이지를 연결해주는 태그이다.

<a href="https://en.wikipedia.org/wiki/Nutrition#Nutritional_groups" target="_blank" title="Nutrition wikipedia">Nutrition</a>

---

a 태그의 속성들

href(hypertext reference): 링크의 목적지를 가리키는 속성이다. Nutrition을 클릭하면 열리는 페이지 링크를 정의해준다.

target: 링크된 페이지를 클릭했을 때 문서가 열릴 위치를 명시한다. "_blank"는 새로운 탭에서 링크가 열리도록 하는 속성값이다.

title: Nutrition에 마우스를 올리면 속성값을 툴팁으로 띄운다.