Skip to content

Latest commit

 

History

History
173 lines (134 loc) · 6.61 KB

2. what-is-html.md

File metadata and controls

173 lines (134 loc) · 6.61 KB

HTML이란 무엇인가?

1. HTML은 어떻게 생겼을까?

2. 빈 요소(Empty elements)

3. 요소의 중첩(Nesting)

4. 주석(Comments)

5. HTML 문서의 구조

6. HEAD 태그

7. BODY 태그

8. 태그를 구분짓는 특성

9. 블록과 인라인

10. 콘텐츠 카테고리

1. HTML은 어떻게 생겼을까?

  • 웹 페이지를 구성하고 있는 요소(element) 하나하나를 "태그"라는 표기법으로 작성
  • 태그를 통해 어떤 요소인지(제목, 본문, 이미지, 비디오 등) 명시
  • 태그의 이름은 HTML5 웹 표준에 맞게 작성 

<p>내용</p>
  • 여는 태그(Opening tag) : <요소의 이름>
  • 닫는 태그(Closing tag) : </요소의 이름>
  • 내용(Content) : 요소의 내용
  • 요소(Element) : 여는 태그, 닫는 태그, 내용을 통틀어 요소(element)라고 한다.

    태그의 경우 대소문자를 구분하진 않지만, HTML5에서는 모두 소문자로 적는것을 권장하고 있다.


2. 빈 요소(Empty elements)

<br>
<hr>
<img src="http://image.url/images/icon.jpg">
<meta charset="utf-8">
<input type="text" name="name">
  • 내용(content)이 없다면? ex) 이미지, 수평선, 줄바꿈 등
  • 내용이 없는 요소를 빈 요소(Empty element)라 부른다.
  • 이 경우 닫는 태그를 추가로 명시하지 않아도 된다.
  • Empty element, Self-Closing element, Void element, Single tag...
  • 빈 요소의 경우 태그 안 마지막에 / 를 넣어 표시해도 된다. ex) <br />



3. 요소의 중첩(Nesting)

<ul>
  <li>하나</li>
  <li>둘</li>
  <li>셋</li>
<ul>
  • 요소 안에 다른 요소가 들어가는 포함관계를 성립할 수 있다.
  • 이렇게 여러 요소가 중첩될 경우에는, 열린 순서의 반대로 닫혀야만 한다.
  • 이렇게 서로의 포함관계(부자관계)를 구분하기 위하여 들여쓰기를 사용한다.



4. 주석(Comments)

  • 브라우저는 주석을 무시하여 사용자가 주석을 보이지 않게 한다.
  • 주석의 목적은 코드에 메모를 추가하거나, 혹은 사용하지 않는 코드를 임시로 처리하기 위함이다.
<p>I'm not inside a comment</p>
<!-- <p>I am!</p> -->

I'm not inside a comment



5. HTML 문서의 구조

<!DOCTYPE html>
<html>
  <head>
    <!-- HEAD 영역 -->
  </head>
  <body>
    <!-- BODY 영역 -->
  </body>
</html>
  • <!DOCTYPE html> : 문서의 타입이 html임을 명시. html5가 표준화되기 전에는 특정 버전을 명시해야만 했는데 현재는 대부분의 브라우저가 웹표준을 준수하고 있어 쓰지 않아도 상관없다. 하지만 오랜 시간 관습화되어 보통 쓰기 마련이다.
  • html : 페이지 전체의 컨텐츠를 감싸는 루트(root) 요소
    • head : 웹브라우저 화면에 직접적으로 나타나진 않는 웹페이지의 정보
      • meta tag : 문서의 일반적인 정보와 문자 인코딩을 명시
      • title : 페이지의 제목
    • body : 웹 브라우저 화면에 나타나는 모든 컨텐츠



6. HEAD 태그

  • <head>요소는 기계가 식별할 수 있는 문서 정보(메타데이터)를 담습니다. 정보로는 문서가 사용할 제목, 스크립트, 스타일 시트 등이 있습니다.
  • 최상위 제목, 작성자 목록 등 사람에게 보여야 할 정보는 <header>요소를 사용하세요.

출처 : https://developer.mozilla.org/ko/docs/Web/HTML/Element/head

7. BODY 태그

  • <body> 요소는 HTML 문서의 내용을 나타냅니다. 한 문서에 하나의 <body> 요소만 존재할 수 있습니다.

출처 : https://developer.mozilla.org/ko/docs/Web/HTML/Element/body

8. 태그를 구분짓는 특성

  • 구획을 나누는 태그(Layout)
    • 단독으로 사용했을 때에는 눈에 보이지 않는다.
    • 여러가지 요소들을 묶어서 그룹화
  • 그 자체로 요소인 태그
    • 단독으로 사용했을 때에도 눈으로 확인할 수 있다.

9. 블록과 인라인

  • 블록(Block)

    • 블록 레벨 요소는 언제나 새로운 줄에서 시작하고, 좌우 양쪽으로 최대한 늘어나 가능한 모든 너비를 차지한다.
    • 상자를 아래로 쌓는 것!

  • 인라인(Inline)

    • 인라인 요소는 줄의 어느 곳에서나 시작할 수 있다.
    • 바로 이전 요소가 끝나는 지점부터 시작하여, 요소의 내용(content)만큼만 차지한다.
  • 포함 규칙
    • 같은 형태의 다른 요소를 안에 포함할 수 있다.
    • 대부분의 블록 요소는 다른 인라인 요소도 안에 포함할 수 있다.
    • 인라인 요소는 블록 요소를 포함 할 수 없다.

10. 콘텐츠 카테고리

  • HTML5부터 비슷한 특징을 가진 요소끼리 묶어서 7가지 카테고리로 세분화
  • 하나의 HTML 요소가 여러 콘텐츠 카테고리 내의 포함관계에 들어갈 수도 있다.
카테고리 설명
메타데이터 콘텐츠(Metadata Content) 문서의 메타 데이터(정보), 다른 문서를 가리키는 링크 등을 나타내는 요소
플로우 콘텐츠(Flow Content) 웹 페이지상에 메타데이터를 제외하고 거의 모든 요소. 보통 텍스트나 임베디드 콘텐츠를 포함
섹션 콘텐츠(Section Content) 웹 문서의 구획을 나눌 때 사용
헤딩 콘텐츠(Heading Content) 섹션의 제목과 관련된 요소
프레이징 콘텐츠(Phrasing Content) 문단에서 텍스트를 마크업 할 때 사용
임베디드 콘텐츠(Embedded Content) 이미지나 비디오 등 외부 소스를 가져오거나 삽입할 때 사용되는 요소
인터랙티브 콘텐츠(Interactive Content) 사용자와의 상호작용을 위한 컨텐츠 요소