태그?
컴퓨터가 특정 기능을 수행하도록 하는 명령어. 기본 구조는 다음과 같이 태그를 열고, 그 안에 내용을 넣고, 다시 닫도록 되어있다. (굳이 범위를 지정해줄 필요가 없는 경우 닫는 태그가 없다.)<(Tag)> 내용 </(Tag)> 기본 태그에 태그 속성을 덧붙여서 원하는 기능을 추가할 수 있다.
적절한 태그 사용의 중요성
가능한 용도에 맞는 태그를 정확히 사용하는 것이 유리하다.적절한 태그를 모르더라도 원하는 웹페이지의 기능/디자인을 시각적으로 비슷하게 구현하는 게 가능한데, 왜 정확한 태그를 사용해야 할까?
-
코드 가독성 (for 사람, 기계)
태그는 단순히 기능 수행의 역할만 할 뿐 아니라, 그 코드를 읽는 주체로 하여금 해당 부분이 어떠한 목적으로 짜여진 코드인지를 알려주는 역할도 수행한다.
쉬운 예로, 제목에 해당하는 부분에title,heading태그를 써야 내 코드를 읽는 동료나, 단말기 혹은 검색엔진 알고리즘 등 기계가 해당 부분이 제목임을 쉽게 인식할 수 있다. -
관리성 (업무효율)
넘버링 형식의 리스트를 웹사이트에 추가한다고 했을 때, 1. @@ 2. @@ 3. @@ 이런 식으로 직접 타이핑해줄 수도 있지만, 내용 수정이 필요한 경우 넘버링을 다시 타이핑해야 한다는 불편함이 있다.
ol,li등 리스트 태그를 활용했다면 자동으로 넘버링을 해주기 때문에 더욱 빠른 수정이 가능했을 것이다.
주요 태그 ⭐️
-
<!doctype html>: HTML 문서임을 알리는 관용적 코드 -
기본 뼈대가 되는 필수 태그들:
HTML>head,body -
title: 웹페이지의 타이틀. head 태그 안에 들어가게 된다.
<title> 제목 </title>meta: HTML 코드는 UTF-8로 저장된다. 해당 코드를 웹브라우저가 열 때도 UTF-8로 열어야 오류가 없는데, head 아래에 다음을 선입력해서 이를 명령한다.
<meta charset="utf-8">heading: 제목 태그. h1 ~ h6 까지만 설정 가능하다.
<h1> 제목 </h1>앞서 말했듯 태그에는 속성을 추가할 수 있는데, 만약 제목에 색을 입히고 싶다면 다음과 같은 코드가 가능하다.
<h1 style=color:"brown"> 제목 </h1>a: anchor - 링크 태그. (정보의 바다에 닻을 내린다는 비유적 네이밍)a href: Hypertext의 'h' + Reference의 'ref'. 특정 내용에 링크를 삽입할 수 있다.
<a href="주소"> 웹사이트에 표시할 내용 </a>웹 상의 페이지, 혹은 여러개의 HTML 페이지를 연결하여 다층적 웹사이트를 구성할 수 있다. 또한 그 뒤에 태그를 덧붙여 기능을 추가할 수 있다.
- 새 창으로 링크 열기:
target="_blank" - 링크에 커서 올리면 툴팁으로 정보 표시:
title="@@@"
<a href="주소" target="_blank" title="@@@">img: 이미지 삽입 태그.src라는 속성을 통해 어떤 이미지를 가져올지 설정해야 한다.
<img src="이미지 주소">이미지 크기를 조정하고 싶은 경우 width 속성을 통해 조절 가능하다.
<Img src="이미지 주소" width="80%">strong: 볼드체
<strong> 내용 </strong>u: 밑줄
<u> 내용 </u>- 리스트 태그
ul: Unordered list. 해당 파트는 리스트임을 표시하는 태그. li의 부모 태그.
ol: Ordered list. ul의 넘버링 버전.
li: 리스트. ul, ol의 자식 태그
<ul>
<li> contents1 </li>
<li> contents2 </li>
</ul>p: paragraph. 문단을 형성하는 태그. 내용 앞 뒤로 일정 간격 벌어지게 된다.
<p> 내용 </p>br: break. 줄 바꿈 태그 (닫을 필요 없음)
넓이에 깊이 더하기