1. HTML 이 중요한 이유
- 정보 전달 + 접근성 (accessibility)
: HTML 은 웹 페이지를 만드는 언어 (브라우저가 알아들을 수 있는 문서 형식)이다. 따라서 누군가에게 정보를 전달을 하는 목적으로 사용된다. 검색 엔진에서 검색을 했을 때, 텍스트 기반으로 검색하기 때문에 이미지로 꾸며진 글보다, 텍스트로 구성된 정보를 더 빠르게 찾을 수 있다.
2. HTML Tag
① 주로 사용되는 태그
|
이름 |
설명 |
|
<!doctype html> |
'이것은 html이다' 를 관용적으로 보여주기 위해 쓰는 표현 |
|
<meta charset="utf-8"> |
웹 페이지의 문자 규칙을 utf-8로 읽어오라는 뜻 |
|
<html></html> |
전체를 감싸서 html 이라는 것을 보여줌 |
|
<head></head> |
본문을 설명하는 부분 |
|
<title></title> |
웹 페이지의 제목 |
|
<body></body> |
본문 |
|
HTML new line tag <br> |
줄 바꿈 태그의 의미만을 가지고 있음 |
|
HTML paragraph tag <p> |
어디서 부터 어디 까지가 한 단락인지 표현 (줄바꿈 + 정보) |
|
img src =“이미지 디렉토리 위치”> |
이미지 추가 태그로, 속성들을 추가할 수 있고, 속성들의 위치는 상관 없음 |
|
<input> |
무언가 입력할 때 사용 |
|
<div> </div> divison tag |
구역을 나눠서 묶어줄 때 사용 |
|
<span> </span> |
특정 글자를 꾸며줄 때 사용 |
|
<textarea> </textarea> |
긴 글을 입력할 때 사용 |
|
<a> </a> |
anchor(닻) 의 첫 글자를 딴 태그 |
|
<a href =“url”> |
href = hypertext reference, 링크를 달아주는 태그 |
|
새 창으로 열고 싶다면, <a href = "url" target = “_blank”> |
|
|
Tool tip 으로 url 이 무엇인지 알려주고 싶다면, <a href = "url" title = “설명”> |
② 부모, 자식 태그
-
부모 태그 : 포함 하고 있는 태그
-
자식 태그 : 포함 되어 있는 태그
|
목차 태그 |
이름 |
설명 |
|
<li> </li> |
list |
목차를 만들 수 있고, 반드시 부모 태그 <ul> 또는 <ol> 이 필요 |
|
<ul> </ul> |
unordered list |
목차를 구분, 반드시 자식 태그를 가지고 순서가 필요 없음 |
|
<ol> </ol> |
ordered list |
목차를 구분, 반드시 자식 태그를 가지고 순서를 가짐 |
|
테이블 태그 |
||
|
<table> </table> |
표를 만들어 줌 |
|
|
<thead> </thead> |
제목 데이터를 하나로 묶을 때 사용 |
|
|
<tbody> </tbody> |
내용 데이터를 하나로 묶을 때 사용 |
|
|
<tfoot> </tfoot> |
내용 데이터 중 결과 값을 하나로 묶을 때 사용 |
|
|
<tr> </tr> |
셀들로 이루어진 하나의 행을 묶어줌 |
|
|
<th> </th> |
제목이 되는 하나의 데이터 셀 |
|
|
<td> </td> |
내용이 되는 하나의 데이터 셀 |
|
'Tech > HTML' 카테고리의 다른 글
| [HTML] 웹 접근성과 시멘틱 마크업(Semantic Markup) (0) | 2022.04.28 |
|---|---|
| [HTML] HTML4와 HTML5의 차이 (0) | 2021.01.16 |