1. 태그의 의미와 역할
HTML 에서는 기본적으로 웹 문서에 표현 하고 싶은 텍스트(내용)을 태그(Tag)라는 요소를 활용해 표시 할 수 있습니다. 여기서 태그란 기본적으로 웹 문서에서 나타내고 싶은 콘텐츠의 특성을 나타내는 요소로서 시작 태그와 종료 태그 안에 콘텐츠의 내용을 작성하는 방식으로 사용 됩니다.
<p> 이것은 p태그 입니다. </p>뿐만 아니라 태그 중 일부는 종료 태그 없이 단독으로 사용하는 단일 태그가 존재합니다. 이러한 단일 태그들은 일반 태그들과 달리 특수한 용도를 목적으로 사용되는 경우가 대부분입니다.
<p> 저는 p태그입니다. </p> <br> 그리고 이것은 단일 태그 br입니다.태그 안에서 작성 되는 또다른 태그도 존재를 하는데, 바로 설명드린 br태그 뿐만 아니라 다양한 태그들이 태그 안에서 중첩되어 사용 될 수 있습니다. 이러한 중첩 태그들은 특정 콘텐츠를 꾸며주는 것을 목적으로 대부분 사용됩니다.
<p> 저는 <strong>p태그</strong> 입니다. </p> <br> 그리고 이것은 단일 태그 br입니다.이러한 태그들은 몇 몇의 컨텐츠 없이 단독으로 사용되는 단일 태그들을 제외하면 대부분 시작 태그와 종료 태그로 구성되어 있기 때문에 해당 단일 태그들(
<br>,<hr>,<img>,<input>,<meta>,<link>)을 외우는 걸로도 충분히 종료 태그까지 쓰이는 태그들을 구분하실 수 있습니다더불어서 해당 몇 몇의 태그들은 외견상 차이점이 없으나 의미상으로 다른 특징을 보이는 관계의 태그들이 존재합니다. 이러한 관계들에 차이점을 보이는 태그의 쓰임새는 검색 엔진이 해당 태그의 컨텐츠 정보의 중요도를 보다 원활히 파악 할 수 있도록 해주는 역할을 수행합니다.
또한 태그들을 통해 수학 기호를 표현 하는 것도 가능한데, 대표적으로
sub태그와sup태그가 있습니다. 이들은 각각 위 첨자(superscript)와 아래 첨자(subscript)로서의 역할을 합니다.
2. CSS에서 대체 가능한 태그들
CSS의 등장 및 발전으로 기존에 HTML에서 해오던 특정 태그들의 역할을 CSS로 대체 할 수 있게 경우를 소개하겠습니다.
3. Emmet을 이용한 태그 단축 입력 방법
이러한 태그들을 입력 하는 방법은 기본적으로 수동 타이핑을 하거나, 특정 IDE("Integrated Development Environment”)의 특정 라이브러리의 도움을 받아 자동 완성 되도록 도움을 받아 타이핑 할 수 있는데, 이러한 태그의 입력은 몇몇의 특별한 작성법을 알게 되면 타이핑 속도를 절약 할 수 있게 됩니다. 이러한 약어 기반의 작성법을 Emmet이라고 부릅니다.
<!-- 🔍 꺽쇠(>)와 곱하기 연산(*)을 이용하여 자식 및 자손 태그 생성법 --> ✔ div>ul>li: 왼쪽부터 차례대로 태그를 오른쪽 꺽쇠(>)를 입력하여 생성을 하면 왼쪽 태그부터 오른쪽 태그까지 직계 관계를 형성하는 코드가 생성이 됩니다. <div> <ul> <li></li> </ul> </div> ✔ ul>li*3 또는 (ul>li*3)*3: 중복으로 생성하고 싶은 태그가 단일 태그일 경우 뒤에 곱하기 연산자(*)를 삽입하고 개수를 지정하여 생성이 가능합니다. 물론 두 개 이상의 태그 조합을 중복으로 생성할 경우 괄호로 감싼 후 곱하기 연산자로 복사할 개수를 지정하면 됩니다. <!-- ul>li*3의 경우 --> <ul> <li></li> <li></li> <li></li> </ul> <!-- (ul>li*3)*3의 경우 --> <ul> <li></li> <li></li> <li></li> </ul> <ul> <li></li> <li></li> <li></li> </ul> <ul> <li></li> <li></li> <li></li> </ul> <!-- 🔍 플러스 기호(+)를 이용하여 같은 레벨의 태그 (형제 요소)를 작성하는 방법 --> ✔ h1+p: h1와 p 태그가 같은 레벨 선상에서 형제 요소로 생성됩니다. <h1></h1> <p></p> ✔ ul>li+p: ul태그와 li태그와 p태그를 직계 관계로 포함시킨 후 생성합니다. <ul> <li></li> <p></p> </ul> <!-- 중괄호 기호 ({})를 이용하여 해당 태그의 텍스트를 작성하는 방법 --> ✔ p{Hello}: <p>Hello</p> 텍스트 삽입 <!-- 대괄호 기호([])를 이용하여 해당 태그의 속성을 설정하는 방법 --> img[src="image.jpg"]: <img src="image.jpg"> 속성 추가 ✔ a[href="https://www.example.com"]{Click}: <a href="https://www.example.com">Click</a> 텍스트와 속성 추가 <!-- 닷(.) 기호와 샵(#) 기호를 이용하여 속성에 id, class 삽입--> ✔ p#pTagId{this is P Tag Id}: <p id="pTagId">this is P Tag Id</p> 삽입 ✔ p.pTagClass{this is P Tag Class}: <p id="pTagClass">this is P Tag Class</p> 삽입 <!-- 달러 기호($)를 이용하여 해당 태그의 특정 텍스트를 반복하는 방법--> ✔ p#target_${id:target_$}*10: <p id="target_1">id:target_1</p> 부터 <p id="target_10">id:target_10</p>까지, 달러 기호가 들어간 부분이 1부터 10까지 반복 되어 생성이 됩니다.
