[HTML] HTML과 엘리먼트

JAY·2022년 11월 10일

CSS JavaScript html markup-language

HTML 1

웹을 이루는 가장 기초적인 구성 요소
- HTML : 웹 콘텐츠의 의미와 구조를 정의할 때 사용
- CSS : 웹 페이지의 모양/표현
- JavaScript : 기능/동작

0️⃣ HTML?

HTML이란?

HTML(Hyper Text Markup Language)은 웹 페이지를 만들기 위한 표준 마크업 언어이다.

웹 페이지와 그 내용을 구조화하기 위해 사용되는 코드이다.
컨텐츠의 서로 다른 부분들을 씌우거나(wrap) 감싸서(enclose) 다른 형식으로 보이게 하거나 특정한 방식으로 동작하도록 하는 일련의 요소(elements)로 이루어져 있다.
엘리먼트들은 브라우저에 콘텐츠들을 어떻게 표시하는지를 말해준다.
엘리먼트들은 헤드 제목, 단락이나 링크들과 같이 내용을 라벨링 하기도 한다.
tags로 감싸는 것으로 단어나 이미지를 다른 어딘가로 하이퍼 링크(hyperlink)하거나 단어들을 이탤릭체로 표시하고 글씨체를 크게 또는 작게 만드는 등의 일을 할 수 있다.

Hypertext?

"Hypertext(하이퍼텍스트)"란 웹 페이지를 다른 페이지로 연결하는 링크를 말한다. 링크는 웹의 근본적인 속성으로, 인터넷에 자료를 올리고 다른 사람이 만든 페이지로 링크함으로써 월드 와이드 웹(www) 세계의 능동적인 일원이 될 수 있다.

HTML은 웹 브라우저에 표시되는 글과 이미지 등의 다양한 콘텐츠를 표시하기 위해 "마크업"을 사용한다. HTML 마크업은 다양한 "요소"를 사용하며 요소는 많은 종류가 존재한다.

Markup Language?

마크업 언어란? 마크업 언어는 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한 가지이다. 태그는 문서의 구조를 표현하는 역할을 하는데 이러한 태그 방법의 체계를 마크업 언어라 한다. 일반적으로 데이터를 기술하는 정도로만 사용되기에 프로그래밍 언어와는 구별된다. 다만 MXML이나 XAML처럼 특정 프로그래밍 언어와 강하게 연관되어 기능하거나 제한적으로 프로그래밍 언어의 기능을 갖춘 것도 일부 있는데 이 경우는 구변이 명확하지 않다. 마크업 언어는 표현적 마크업/절차적 마크업/기술적 마크업으로 분류된다.

1️⃣ HTML element란?

1. 구성

<tagname> Contents.. </tagname>

여는 태그(opening tag)
- 요소의 이름으로 구성
- 여닫는 꺾쇠괄호로 감싸진다
- 요소가 시작되는 곳, 또는 효과를 시작하는 곳임을 암시한다
닫는 태그(closing tag)
- 여는 태그에 추가로 요소의 이름 앞에 전방향 슬래시가 포함
- 요소의 끝을 의미
컨텐츠(content)
- 요소의 내용(content)
요소(element)
- 요소는 여는 태그와 닫는 태그, 그리고 컨텐츠로 이루어진다
- 내용이 없는 엘리먼트도 있다. 빈 요소라고 한다. ex) <img>, <br>
- HTML 요소는 "태그"를 사용해서 문서의 다른 텍스트와 구분한다.
  태그는 "<", 태그 이름, ">"로 이루어진다.
  태그 안의 요소 이름은 대소문자를 구분하지 않는다.
  즉, 대문자, 소문자, 아니면 섞어서도 작성할 수 있다. 예를 들어 요소는 <Title>, <TITLE>, 그 외 기타 가능한 모든 방법으로 작성할 수 있다.

2. 속성(Attribute)

실제 컨텐츠로 표시되길 원하지 않는 추가적인 정보를 담고 있다.
속성이 항상 가져야 하는 것
- 요소 이름(요소가 하나 이상 속성을 이미 가지고 있다면 이전 속성)과 속성 사이의 공백
- 속성 이름 뒤에는 등호(=)
- 속성값의 앞뒤에 여닫는 인용부호(" 또는')

3. 요소 중첩

요소를 다른 요소 안에 넣을 수 있다. <p>내 고양이는 <strong>아주</strong> 고약해.</p>
태그의 여닫는 순서를 지켜야 한다.
여기서는 <strong>이 더 나중에 나왔기 때문에 <p>보다 먼저 닫아 주었다.

4. 빈 요소

내용이 없는 요소들이 존재(img, btn, input 등) <img src="images/firefox-icon.png" alt="My test image">

5. 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.
아주 오래전 HTML이 막 나왔을 때 (1991년 2월쯤), doctype은 (자동 오류 확인이나 다른 유용한 것을 의미하는) good HTML로 인정받기 위해 HTML 페이지가 따라야 할 일련의 규칙으로의 연결통로로써 작동하는 것을 의미했다. 하지만 최근에는 아무도 그런 것들에 대해 신경 쓰지 않으며 그저 모든 것이 올바르게 동작하게 하도록 포함되어야 할 역사적인 유물일 뿐이다. 지금은, 그게 알아야 할 전부이다.
<html></html> = <html> 요소.
페이지 전체 컨텐츠를 감싸며 루트(root) 요소라고도 한다.
<head></head> = <head> 요소.
문서의 상단부. 브라우저 화면에 직접 보이지 않으며, 숨은 데이터를 정의하는 태그들이 들어가는 부분, 즉 문서 메타데이터를 담는다. (정보로는 제목, 스크립트, 스타일 시트 등이 있다.)
페이지에 포함된 모든 것들(보는 사람에게 보여주지 않을 것을 포함한)의 컨테이너 역할을 한다. 여기에는 키워드와 검색결과에 포함되길 원하는 페이지에 대한 설명, 콘텐츠를 꾸미는 CSS, 문자 집합 선언들과 같은 것이 포함된다.
<body></body> = <body> 요소.
페이지의 본문. 브라우저에 직접 표현하고 싶은 모든 컨텐츠를 담는 부분이다.
페이지에 방문한 사용자들에게 보여주길 원하는 모든 콘텐츠를 담고 있다. 텍스트, 이미지, 비디오, 게임, 플레이 가능한 오디오 트랙 등등.
<meta charset="utf-8"> = 문서가 사용해야 할 문자 집합을 utf-8로 설정한다. 인간 주류 기록언어의 문자 대부분이 포함되어 있다.(어떠한 문자 컨텐츠도 다룰 수 있다)
<title></title> = 페이지의 제목을 설정한다. 브라우저 탭에 표시되고 즐겨찾기에서 페이지의 설명으로도 사용된다. (페이지가 로드되는 브라우저의 탭에 이 제목이 표시된다)

entity reference란?

HTML에서 <, >, ". & 등의 특수문자로 html의 구문의 일부이다. 이것을 텍스트에 포함하기 위한 <, > 등의 코드를 말한다.

HTML 주석?

 으로 작성할 수 있다. 브라우저는 주석을 무시하여 사용자가 볼 수 없게 한다. 목적은 코드에 메모를 포함해 논리나 코드를 설명할 수 있도록 하는 것이다.

2️⃣ HTML head와 메타데이터

💡 HTML의 head을 사용하는 목적과 HTML 문서에 어떤 영향을 끼칠 수 있는지에 대해 알아보자.

1. HTML metadata

head는 페이지가 로드됐을 때 브라우저에 표시되지 않는 부분이다. 페이지 제목, CSS 링크, 파비콘, 다른 메타데이터*들에 대한 정보를 포함한다.

*다른 메타데이터라는 것은 작성자, 문서를 설명하는 중요한 키워드 같은 HTML에 관한 데이터를 말한다.

웹 브라우저는 html 문서를 정확히 렌더링하기 위해 head 안에 포함된 정보를 사용한다.

2. HTML head

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <p>This is my page</p>
  </body>
</html>

<head> 엘리먼트의 콘텐츠이다. <body> 엘리먼트와 달리 헤드는 브라우저에 표시되지 않는다. head가 하는 일은 문서의 메타데이터를 포함하는 것이다.

<title>이란?
- html 문서의 제목을 나타내는 메타데이터이다.
- 북마크할때 제목으로 제안되기도 한다.
- <h1> 과 혼동하지 않도록 주의해야 한다. 이것은 페이지 내용의 제목이며 일반적으로 페이지당 한번만 사용한다.
메타데이터: <meta> 엘리먼트란?
- 메타데이터는 데이터와 html을 설명하는 데이터이다.
- html은 메타데이터를 문서에 추가하는 공식적인 방법이 있다. <meta> 엘리먼트를 사용하는 것이다.
- 메타 엘리먼트에 들어갈 수 있는 메타데이터의 종류는 매우 많다.
- 자주 볼 수 있는 것은 <meta charset="utf-8" />이 있다.
  이것은 문서의 문자 인코딩을 규정한다. utf-8은 많은 인간 언어의 문자들을 포함하고 있다. 이것은 웹페이지가 어떤 언어를 표시하는 것을 다룰 수 있다는 의미이다. 다른 문자 인코딩을 선택하면 제대로 표시되지 않는 문제가 생길 수도 있다. 크롬 같은 어떤 브라우저들은 잘못된 인코딩을 자동으로 고쳐줘서 문제가 생기지 않을 수도 있다. 하지만 아무튼 위험요소를 배제하기 위해 utf-8로 설정하는 것이 좋다.
작성자와 설명을 추가하는 방법? 많은 <meta> 엘리먼트는 name과 content 속성을 갖고 있다:
- name은 메타 엘리먼트가 어떤 정보의 형태를 보이고 있는지 알려준다.
- content는 실제 메타데이터의 컨텐츠다.
- 이 두 개는 페이지에서 관리자를 정리하고 머릿말을 요약하는 데 유용하다.
```
<meta name="author" content="Chris Mills">
<meta name="description" content="The MDN Learning Area aims to provide
complete beginners to the Web with all they need to know to get
started with developing web sites and applications.">
```
  - 저자 지정은 컨텐츠 작성자에 대한 정보를 보여준다. 일부 컨텐츠 관리 시스템에는 이 정보를 자동추출해 사용하는 기능이 있다.
  - 페이지 콘텐츠 관련 키워드를 포함하는 것은 검색엔진에서 이 페이지가 더 많이 보일 확률을 높인다. (Search Engine Optimization, SEO)
- 커스텀 아이콘?
  - 커스텀 아이콘을 추가하는 방법
    1. 인덱스 페이지와 같은 디렉터리에 .ico 파일을 저장한다. 다른 포맷(.gif, .png)도 가능하지만, 익스플로러 6 이전을 고려한다면 .ico가 좋다고 한다.
    2. 헤드에 링크 태그를 추가한다.
      
      <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
HTML에 CSS와 JavaScript 적용하기
- 현대의 모든 웹사이트는 상호작용 기능이 많은 영상 플레이어, 지도, 게임 등을 위해 JavaScript가 필요하고, 이것들을 더 멋져 보이게 하도록 CSS가 사용된다.
- 이것들은 <link>와 <script> 엘리먼트를 사용해 웹 페이지에 가장 일반적으로 적용된다.
  - <link>는 head에 위치해야 한다. <link rel="stylesheet" href="my-css-file.css">
    - rel="stylesheet" : 문서의 스타일 시트임을 나타냄과 동시에
    - href="my-css-file.css" : 스타일 시트 파일의 경로를 포함하는 href를 내포한다.
  - <script>는 헤드와 바디에 위치할 수 있다. ~~head에만 들어갈 필요가 없다.~~ <script src="my-js-file.js"></script> ⭐ </body> 태그 바로 앞, 문서 본문의 맨 끝에 넣는 것이 좋으며, JavaScript를 적용하기 전에 모든 HTML 내용을 브라우저에서 읽었는지 확인하는 것이 좋다. 액세스 과정에서 JavaScript가 아직 존재하지 않는 요소라고 판단하며 에러가 날 수 있다. defer를 사용하면 html 파싱이 끝난 후 자바스크립트를 로드하도록 할 수 있다. html이 모두 로드되고 자바스크립트가 실행되면 페이지에 아직 존재하지 않는 엘리먼트에 자바스크립트가 접근해서 발생하는 에러를 방지할 수 있다. 작성 위치는 mdn에 따르면 헤드에 쓰라는 말밖에 없지만 w3s에는 바디 최하단에 놓이면 표시되는 속도를 향상할 수 있다고 한다. 스크립트 해석이 표시하는 속도를 저하하기 때문이라고 한다. 스크립트는 외부 파일로 뺄 수도 있다. 이렇게 하면 html과 코드를 분리할 수 있고 유지보수가 쉬워진다. 캐시된 자바스크립트는 페이지 로드 속도를 향상할 수 있다.
문서의 주요 언어를 설정하는 방법?
- html 태그에 lang 속성을 추가한다. <html lang="en-US">
- 검색 엔진에 잘 노출될 수 있고 화면판독기로 시각장애인들에게 유용하다. 하위섹션은 다른 언어로 되도록 설정할 수 있다.
  - HTML 문서는 언어가 설정되어 있으면 검색 엔진에 의해 더 효과적으로 indexing되며 (예를 들어 언어별 결과에 올바르게 표시되도록..) 화면 판독기를 사용하여 시각장애가 있는 사용자에게 유용하다.
    (예: 6이라는 숫자는 프랑스어와 영어에서 모두 존재하지만, 각기 다른 발음이 적용된다)
  - 또한, 문서의 하위 섹션을 다른 언어로 인식하도록 설정할 수도 있다.
    예를 들어 다음과 같이 일본어 일본어로 된 섹션에 대해서는 일본어로 인식하도록 할 수 있다: <p>Japanese example: <span lang="jp">ご飯が熱い。</span>.</p>

3️⃣ HTML text fundamentals

HTML의 주요 작업 중 하나는 브라우저가 텍스트를 올바르게 표시 할 수 있도록 텍스트 구조와 의미 (시멘틱(semantics)라고도 함)를 제공하는 것이다.

: 개발자의 의도대로 HTML 문서를 표시하도록 텍스트 구조를 제공하는 것!

🤔 왜 구조가 필요할까?

사용자 경험과 SEO에 좋은 영향을 미치기 때문에 구조화하는 것이 좋다. 또한, 시맨틱을 유지하는 것이 좋다. (이것은 다른 문서에 작성한다)
추가로:

웹 페이지를 보는 사용자는 필요한 컨텐츠를 빠르게 훑어보는 경향이 있고 자주 heading만 읽기도 한다.
검색 엔진들은 페이지 내 heading을 페이지 검색 순위에 영향을 주는 중요한 키워드를 고려해 indexing 한다. heading이 없다면, 이 페이지는 검색 엔진 최적화에 관해서는 형편없게 된다.
그러므로 컨텐츠를 구조적인 markup에 적용하자 !

1. 제목과 단락

대부분의 구조화된 텍스트는 제목과 단락으로 구성된다. 구조화된 내용은 읽고 이해하기 쉽게 만든다.

각 단락은 <p></p> 안에 둘러싸여 있어야한다. <p>나는야 단락이라네, 아 그렇다네.</p>
각 제목도 heading 요소 안에 둘러싸여 있어야한다. <h1>내가 제목임.</h1>
- <h1></h1>~<h6></h6> <h1>: 제목, <h2>: 각 장의 제목, <h3>: 각 장의 하위 절

될 수 있으면 페이지당 하나의 <h1>만 사용한다. 또한, 각 표제는 계층적으로 올바른 순서로 사용해야 한다!

(mdn에 따르면 6까지 있지만 웬만하면 3까지만 사용하라고 한다) 너무 깊은 heading 계층의 문서는 다루기 힘들고 탐색하기 어렵다. 이런 경우엔 가능하다면 컨텐츠를 여러 페이지로 나누는 것이 바람직하다.

2. lists란?

unorderd(<ul></ul>)와 ordered(<ol></oi>)가 있다.

3. Nesting lists(중첩된 리스트)란?

리스트 안에 다른 리스트를 넣을 수 있다.

<ul>
    <li>contents
        <ol>
            <li>contents</li>
            ...
        </ol>
    </li>
</ul>

4. emphasis(강조), importance(중요)란?

강조와 중요성을 표시하는 시맨틱한 태그들이 있다.

em 요소는 중요성을 전달하려는 의도를 갖고 있지 않다.
중요성을 전달하기 위함이라면, strong 요소가 더 적절하다.
<em>은 강조하는 태그이다.
- 브라우저에 이탤릭체로 표시되지만 CSS 같은 것으로 바꿀 수 있다. 이탤릭체로 스타일링을 위해서 쓰지 마라. (스타일링을 위해서는 <span>에 CSS를 더하거나 <i> 요소 쓰면 됨)
  - TMI.. I am glad you weren't late. - 상대가 늦지 않은 것에 대해 진심으로 안도 I am glad you weren't late. - 상대가 조금 늦게 도착한 것에대해 비꼬거나 짜증을 표현
<strong>은 중요성을 표시하는 태그이다.
- 브라우저에 볼드처리되지만 CSS 같은 것으로 바꿀 수 있다. 단지 굵게 스타일링을 하기 위해 쓰지 마라. (스타일링을 위해서는 <span>에 CSS를 더하거나 <b> 요소 쓰면 됨)
- 다른 태그 안에 쓸 수 있다.

JAY

이전 포스트