CodeGym /행동 /Frontend SELF KO /HTML 태그와의 첫 만남

HTML 태그와의 첫 만남

Frontend SELF KO

레벨 1 , 레슨 2

사용 가능

1. 태그

태그는 여러 가지 유형이 있어. 첫 번째로, 단일 태그랑 쌍 태그가 있어. 일반적으로 쌍 태그가 더 많이 보이거든. 그리고, 아마 이미 눈치챘겠지만, 쌍 태그는 항상 한 쌍으로 등장해. 열림과 닫힘이 함께 다니는 거지.

열림 태그 — 그냥 삼각 괄호 안에 있는 키워드일 뿐이야.


<tag>

예시:

HTML

      
<h1>

닫힘 태그는 열림 태그와 비슷하지만 키워드 앞에 슬래시(/)가 있어.


</tag>

예시:

HTML

      
</h1>

열림 태그 는 항상 쌍에서 첫 번째. 절대 안 돼! 닫힘 태그가 먼저 나오고, 그 다음에 열림 태그가 나오는 건. 그런 HTML 문서는 유효하지 않은 걸로 간주돼.

그리고 쌍 태그에 대한 중요한 정보가 있어. 문서에는 쌍 태그가 많을 수 있고, 그것들은 중첩될 수도 있어. 즉, HTML 문서의 모든 텍스트는 태그로 감싸질 수 있고, 그 안에 다른 태그가 포함될 수도 있어. 예시:

HTML

      
<html>
    그냥 일반 텍스트
        <a href="http://codegym.cc/about">
            재미있는 링크
        </a>
    다른 텍스트
</html>

말하자면, HTML 텍스트에는 이런 태그의 순서를 볼 수 있어:


<h1> <h2> </h2> </h1>

하지만 이런 건 안 돼:


<h1> <h2> </h1> </h2>

만약 열림 태그 <h2>가 <h1>-태그 쌍 안에 있다면, 그 쌍의 닫힘 태그 </h2>도 <h1>-태그 안에 있어야 해.

이렇게 문서의 모든 태그는 특정 태그 트리를 만들어. 가장 상위 태그로 시작해서, 문서를 감싸는 태그인데, 보통은 <html>라 불리고, 그 안에 자식 태그 쌍들이 있고, 이 자식들에도 또 자식들이 있고 이런 식으로.

사실, 태그가 있는 문서를 처리하는 프로그램은 문서를 이렇게 봐— 태그와 포함된 텍스트로 이루어진 트리 정도로.

빈 태그

만약 태그에 내용물이 없다면, 보통 이렇게 보이거든:


<tag> </tag>

이런 태그를 위해 만들어진 특별한 짧은 표기법:


<tag/>

이 태그는 닫힘 태그와는 다르다 — 슬래시(/)가 맨 끝에 있어. 이건 단지 빈 태그 쌍을 짧게 표현한 거야. 그래서 이런 태그를 '빈 태그'라고 불러.

단일 태그

하지만 HTML에는 특수 단일 태그도 있어. 이 태그들은 닫힘 태그가 없어. 이런 태그의 리스트는 HTML 표준에 의해 정의돼. 예시:

총 14개 정도 있고, 그중 절반은 시스템 태그고, 나머지는 HTML 초기 버전에서부터 존재하던 것들이야. 요즘은 이런 태그들을 새로 추가하려고 하지는 않아.

코멘트

TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION