티스토리 뷰

반응형

HTML이란?

👓 HTML의 생김새

웹 페이지를 구성하는 요소 하나하나가 태그이다.
태그를 통해 요소의 종류를 명시하며, HTML5 웹 표준에 맞게 작성한다!
<a>contents</a>와 같이 작성하며,
앞의 <a>는 여는 태그, </a>는 닫는 태그, contents는 내용 부분이다.
그리고 이것을 다 합하여 요소라고 한다!
일관성 있게 태그 이름을 소문자로 작성하는 것을 권한다.





🧣 빈 요소

내용이 없는 요소를 빈 요소라 부른다. (Empty elements)
닫는 태그를 명시하지 않아도 되며,
Self-Closing element, Void element, Single tag라고도 부른다.


<area>,<base>,<br>,<col>,<embed>,<hr>,
<img>,<input>,<link>,<meta>,<param>,<source> 등이 있다.


https://developer.mozilla.org/ko/docs/Glossary/Empty_element





🧢 요소의 중첩

요소 안에 다른 요소가 들어갈 수 있다.


1. 여러 요소가 중첩될 때에는, 열린 순서의 반대로 닫아야 한다!

❌
<p>안녕하세요!<strong></p>또야입니다!</strong>
⭕
<p>안녕하세요!<strong>또야입니다!</strong></p>

잘못 쓰면, 의도한 대로 화면에 표현되지 않는다.



2. 포함관계를 나타내기 위해 들여쓰기를 사용한다.
아래 코드에서 li는 ul에 포함된 관계이다.

<ul>
  <li>원</li>
  <li>투</li>
  <li>뚜리</li>
</ul>




👘 주석

코드에 대한 메모를 하거나 사용하지 않는 코드를 숨길 때 사용한다.
아래와 같이 사용한다.

<--! comments -->

좋은 주석을 쓰는 방법도 검색하여 참고해보았다.

https://ko.javascript.info/comments





HTML 문서의 구조

<!DOCTYPE html>
<!-- 1️⃣ 나는 HTML5 문서이다! -->
<html>
  <!-- 2️⃣ 나는 head와 body의 부모이자 root 요소! -->
  <head>
    <!-- 3️⃣ 나는 head, 웹브라우저가 인식할 수 있는 부분! -->
  </head>
  <body>
    <!-- 4️⃣ 나는 body, 화면에 나타나는 콘텐츠 담당! -->
  </body>
</html>




👔 HEAD 태그

HEAD 태그는 기계(웹브라우저)가 인식 가능한 메타데이터이다!
문서의 속성을 지정해주는 부분이라고 보면 된다.
화면에 직접적으로는 표시되지 않는 부분이다.
메타데이터는 목적을 가지고 만들어진 데이터에 대한 데이터이다.
예로는 meta, title 태그 등을 삽입 가능하다.





🥽 BODY 태그

HEAD 태그와는 다르게, 화면에 직접적으로 보여지는 콘텐츠를 담당한다!
하지만 HEAD 태그와 BODY 태그의 공통점은,
한 HTML 문서 당 하나씩만 존재 가능하다는 점!


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

정말 많은 특성이 있고, 더 이상은 쓰지 않는 특성도 있다. (속성명 변경 등의 이유로)





🐬 블록과 인라인

Block 요소는 팔을 벌려 너비 공간을 가능한 대로 차지!
Inline 요소는 요소의 내용만큼만 차지!


대표적인 Block 요소 : <div>, <p>, <h1>
대표적인 Inline 요소 : <span>, <a>, <em>

❗ 인라인 요소는 블록 요소를 포함할 수 없다.


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>실습</title>
    <style>
      * {
        font-size: 5vw;
      }
    </style>
  </head>
  <body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <span>4</span>
    <span>5</span>
    <span>6</span>
  </body>
</html>

위 코드를 실행해보면,
1 2 3은 아래로, 4 5 6은 우측으로 나열되며 표현된다.





❗ 실습해보자 ❗

가장 큰 예로 하이퍼링크에 대한 색상 변경이 있는데,
코드를 작성해 실습해보자!

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>실습</title>
    <style>
      a:link {
        /* 방문 전 */
        color: blue;
      }
      a:visited {
        /* 방문 후 */
        color: red;
      }
      a:active {
        /* 클릭 시 */
        color: green;
      }
    </style>
  </head>
  <body>
    <a href="https://likethefirst.tistory.com/">티스토리</a>
  </body>
</html>

위 코드는 하이퍼링크를 클릭 전에는 blue 색상,
클릭 당시에는 green 색상, 방문 후에는 red 색상으로 지정해준다.
더이상 link, alink는 사용하지 않는다고 하니 참고할 것!





콘텐츠 카테고리

콘텐츠 카테고리에는


  • 메타데이터 콘텐츠 - 메타데이터 요소
  • 플로우 콘텐츠 - 거의 모든 요소
  • 섹션 콘텐츠 - 구획을 나눌 때 사용
  • 헤딩 콘텐츠 - 제목과 관련
  • 프레이징(구문) 콘텐츠 - 텍스트 마크업
  • 임베디드(내장) 콘텐츠 - 외부 소스 삽입
  • 인터랙티브 콘텐츠 - 사용자와 상호작용

의 7가지가 있고, MDN 공식문서의 기술 요약에
이에 따른 분류가 나와 있으니 어떤 것인지 정도는 알아두고 가는 것이 좋겠다.


❗ 섹션 콘텐츠와 헤딩 콘텐츠는 포함관계에 있지 않다!




반응형
댓글
반응형
Recent Post.
Recent Reply.
Thanks for comming.
오늘은
명이 방문했어요
어제는
명이 방문했어요