2. HTML 주석, 태그, 엘리먼트

Joo·2022년 5월 13일
0

HTML

목록 보기
2/3
post-thumbnail

오늘은 HTML의 주석, 태그, 엘리먼트에 대해서 알아보겠습니다.

주석

HTML에서 코드에대한 부가설명이 필요할때 사용하는것이 주석이라고 보면 되겠습니다.

<!-- 주석내용 입력 --> 

이런식으로 사용하며 앞의 < 라던가 -- 를 일일이 입력을 직접 입력하여 사용할 수도 있지만 단축키 ctrl+/ 를 사용하면 선택한줄 혹은 선택한부분에 주석처리가 자동으로 됩니다.

Tag

태그는 직역하면 꼬리표라는 의미를 가지고있습니다.
html 에서 아래와같은 표현을 볼 수 있습니다.

<tag></tag>

이런 표현을 태그라고합니다. html에서 문법적표시라고 볼수 있습니다.

엘리먼트

엘리먼트는 요소라는 의미를 가지고 있습니다.

<시작태그></종료태그>

보통 위처럼 시작태그와 종료태그로 되어있는것들을 엘리먼트라고 부릅니다.
ex)

<p></p>

위의 요소는 문단 엘리먼트라고 불립니다.

하지만 꼭 시작태그와 종료태그로 구성되어있지않은 엘리먼트들도 있습니다.

<hr />

위의 코드처럼 되어있는것들은 따로 종료태그가 없어서 빈요소라고 불러집니다.

그리고 이런 엘리먼트(요소)는
블록레벨요소 와 인라인요소 로 나눠져있습니다.

블록레벨요소

블록레벨요소는 가로에 해당 요소말고 다른 요소는 못옵니다. 혼자서 너비 100%를 사용합니다.
만약 어떠한 요소안에 들어있는 블록레벨요소는 해당 요소의 너비 100%를 사용합니다.

인라인요소

인라인요소는 딱 내용물 크기만큼만 차지하는 요소입니다.
그래서 블록레벨요소와는 다르게 다른 요소가 옆에 올수 있습니다.

이런 블록레벨요소와 인라인요소는 사용하는 기본 규칙이 있습니다.
1. 인라인요소는 블록레벨요소 안에 넣어서 사용해야합니다.
2. 블록레벨요소 안에 또다른 블록레벨 요소를 넣어서 사용할 수 있습니다.
3. 단, 예외적으로 h1 ~ h6, p, address 요소들은 또 다른 블록레벨요소를 넣어서 사용 할 수 없습니다. -> (여기서 address는 호완성으로 p요소는 허용됩니다.)

이렇게 오늘 주석과 태그, 엘리먼트에 대해서 알아봤습니다.
혹시나 틀린내용이 있거나 수정해야하는부분, 추가해야하는 내용이 있으면 편하게 댓글 부탁드립니다!
감사합니다.

profile
Frontend 개발자를 목표로 하고있습니다!

0개의 댓글