[HTML] 2. HTML 이란?

in HTML on Html



2. HTML 이란?

1. HTML은 어떻게 생겼을까

  • 태그라는 요소로 구성된다.
  • 태그를 통해 어떤 요소인지 명시
  • 태그의 이름은 HTML5 웹 표준에 맞게 작성


<p> 내용 </p>

  • 여는 태그
  • 내용
  • 닫는 태그
  • 브라우저 상에는 내용만 보인다



<h1>This is Title</h1>
<p>
    여기 들어간 내용은
    모두 p태그에 포함된다.
    html은 줄바꿈을 인식하지 못한다.
</p>
  • 태그의 경우 대소문자를 구분하진 않지만, HTML5에서는 모두 소문자로 작성하는 것을 권장
  • 태그의 짝을 잘 찾고, 가독성을 높이기 위해 소문자로 하자!



2. 빈 요소 (Empty elements)

  • 내용이 없는 요소 : 이미지, 수평선, 줄바꿈 등등
  • 내용이 없는 요소를 빈 요소라고 부른다.
  • 이 경우 닫는 태그를 추가로 명시하지 않아도 된다.
  • Empty element, Self-Colsing element, Void element, Single Tag …


<br>
<br/>
// 슬래시 작성은 optionable 하다! 과거의 유물
// 명시적으로 빈요소라는 것이 보이므로 명시적이고 싶다면 사용해도 👍
// 어떤 표현법을 쓰든 일관성있게 작성하자
<hr>
<img src = "...">
<meta charset="utf-8>
<input type="text">

<p></p>
// 빈요소로 태어나지 않은 태그에 내용을 작성하지 않는다고 해서 빈요소가 되는 것이 아니다! 👎👎



3. 요소의 중첩 (Nesting)

  • 요소 안에 다른 요소가 들어가는 포함관계를 성립할 수 있다.
  • 이렇게 여러 요소가 중첩될 경우에는, 열린 순서의 반대로 닫혀야만 한다.
  • 서로의 포함관계(부자관계)를 구분하기 위하여 들여쓰기를 사용한다.
<body>
    // ul과 li는 포함 관계, 들여쓰기 사용
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    // content에는 text/다른요소 가능
    // 아래의 경우 h1은 "요소안에" "strong" "들어갈수있다." 총 3개의 자식을 갖음
    <h1>요소안에 <strong> 다른 요소가 </strong> 들어갈 수 있다.</h1>
</body>



4. 주석 (Comments)

  • 브라우저는 주석을 무시하여 사용자가 주석을 보이지 않게 한다.
  • 주석의 목적은 코드에 메모를 추가하거나, 사용하지 않는 코들르 임시로 처리하기 위함이다
  • 주석을 남발하지 않는다.



5. HTML 문서의 구조

<!DOCTYPE html> // 웹 표준화 전에는 버전을 표시했음 현재는 과거의 유물
<html> // 페이지 전체의 컨텐츠를 감싸는 루트(root) 요소
    <head> // 웹브라우저 화면에 직접적으로 나타나진 않는 웹페이지의 정보
        meta tag : 문서의 일반적인 정보와 문자 인코딩을 명시
        title
    </head>
    <body> // 웹브라우저 화면에 나타나는 모든 요소
    </body>
</html>



6. HEAD 태그

모르는 태그를 알고싶을 땐? keyword + mdn 검색하여 찾아보기

  • head : 기계가 식별할 수 있는 문서 정보(메타데이터)를 담는다.
  • 제목, 스크립트, 스타일시트 …
  • 주 목적은 기계 처리를 하기 위함이고, 사람이 읽을 수 있는 정보가 아니다.
  • title 요소는 only 1
  • 태그 생략은 가급적 지양하자



7. BODY 태그

  • 화면에 보여지는 모든 요소들이 담기는 곳
  • 태그 생략 지양
  • mdn 문서에 나오는 특성 중 빨간휴지통 아이콘이 있는 것이 사용 지양
  • 해당 특성들은 body 로 구현하기 보다 js 로 구현하자



8. 태그를 구분짓는 특성

구획을 나누는 태그 for layout

  • 단독으로 사용했을 때에는 눈에 보이지 않는다.
  • 여러가지 요소들을 묶어서 그룹화


그 자체로 요소인 태그

  • 단독으로 사용했을 때에도 눈으로 확인할 수 있다.



9. 블록과 인라인

블록 (Block)

  • 블록 레벨 요소는 언제나 새로운 줄에서 시작하고, 좌우 양쪽으로 최대한 늘어나 가능한 모든 너비를 차지한다.
  • 상자를 아래로 쌓는 것
  • 자기가 차지할 수 있는 모든 가로를 다 차지한다. (부모가 물려준 범위 안에서)


인라인 (Inline)

  • 인라인 요소는 줄의 어느 곳에서나 시작할 수 있다.
  • 바로 이전 요소가 끝나는 지점부터 시작하여, 요소의 내용(content)만큼만 차지한다.


포함 규칙

  • 같은 형태의 다른 요소를 안에 포함할 수 있다. (블록 > 블록, 인라인 > 인라인)
  • 대부분의 블록 요소는 다른 인라인 요소도 안에 포함할 수 있다.
  • 인라인 요소는 블록 요소를 포함할 수 없다. 🤫



10. 콘텐츠 카테고리

  • HTML5 부터 비슷한 특징을 가진 요소끼리 묶어서 7가지 카테고리로 세분화
  • 하나의 HTML 요소가 여러 콘텐츠 카테고리 내의 포함관계에 들어갈 수도 있다.


  • 메타데이터 콘텐츠 : 문서의 메타 데이터, 다른 문서를 가리키는 링크 등을 나타내는 요소
  • 플로우 컨텐츠 : 웹 페이지상에 메타데이터를 제외하고 거의 모든 요소. 보통 텍스트나 임베디드 콘텐츠를 포함 (가장 광범위)
  • 섹션 콘텐츠 : 웹 문서의 구획을 나눌 때 사용 (헤딩,섹션 교집합 불가능)
  • 헤딩 콘텐츠 : 섹션의 제목과 관련된 요소
  • 프레이징 콘첸츠 : 문단에서 텍스트를 마크업 할 때 사용
  • 임베디드 콘텐츠 : 이미지나 비디오 등 외부 소스를 가져오거나 삽입할 때 사용되는 요소
  • 인터렉티브 콘텐츠 : 사용자와의 상호작용을 위한 컨텐츠 요소



나의 회고 🤫

<!DOCTYPE html> 과 빈태그의 닫힌태그와 관련하여 이것들이 웹표준화 이전의 유물이라는 사실을 처음 알게되어 신선했다.
또한 콘텐츠 카테고리에 관련된 사항은 처음 접하게 된 것인데 태그들의 분류표로서, 간단하게 알아두면 좋을 것 같다.
항상 인라인과 블록이 헷갈렸는데 이 강의를 통해 자세히 공부하여 더이상 헷갈리지 않도록 해야겠다. 🤔🤔