HTML이란?

-HyperText Markup Language 하이퍼텍스트 마크업 랭귀지의 줄임말
-HyperText = 웹 사이트에서 링크를 클릭해 다른 문서나 사이트로 즉시 이동할 수 있는 기능
-Markup = 태그(tag)를 사용해 문서에서 어느 부분이 제묵이고 본문인지, 어느 부분이 사진이고 링크인지 표시하는 것을 말함
-즉 웹에서 자유롭게 오갈 수 있는 웹 문서를 만드는 언어

HTML기본 구조

<!doctype> = 문서유형을 지정('이제부터 처리할 문서는 html 문서이고 어떤 유형을 사용했으니 그 버전에 맞는 방법으로 해석하라')라고 알려주는 것
< html > = 웹 문서 시작과 < /html > 끝을 표시하는 태그
< head > = 브라우저에게 정보를 주는 태그(화면에는 보이지 않지만 웹 브라우저가 알아야 할 정보들은 모두 head 부분에 입력한다.)
< title > = 문서 제목(head 태그 안에서 가장 중요한 태그, title태그에서 지정하는 내용은 거의 모든 웹 브라우저의 제목 표시줄에 표시됨,즐겨찾기로 추가할 때 title 태그 안의 내용으로 추가됨)
< mata > = 문자 세트를 비롯한 문서 정보(웹 브라우저 화면에는 보이지 않지만 웹 문서와 관련된 정보들을 지정한다)
< body > = 실제 브라우저에 표시될 내용

텍스트 관련 태그들

덩어리로 묶어주는 태그(블록)

< h1 > ~ < h6 > = 제목표시
< p > = 단락 만들기
< br > = 줄 바꾸기
< hr > = 분위기 전환을 위한 수평 줄 넣기
< blockquote > = 인용문 넣기(다른 블로그나 사이트의 글을 인용할 경우 이용함)
< pre > = 입력하는 그대로 화면에 표시하기(HTML은 아무리 많은 공백을 넣어도 브라우저 창에는 한 개의 공백만 표시됨, 히지만 pre 태그는 소스에 표시한 공백이 브라우저에 그대로 표시됨)

한 줄로 표시하는 태그(인라인)

< strong >, < b > = 굵게 표시하기
< em >, < i > = 이탤릭체로 표시하기
< q > = 인용 내용 표시하기(인라인 레벨 태그이기 때문에 줄바꿈 없이 다른 내용과 한 줄로 표시됨, 인용 내용을 구별할 수 있도록 인용 내용에 따옴표가 생김)
< mark > = 형광펜 효과 내기
< span > = 줄바꿈 없이 영역 묶기(태그 자체로는 아무 의미가 없지만, 텍스트 단란 안에서 줄바꿈 없이 일부 텍스트만 묶어 스타일을 적용하려고 할 때 주고 사용)
< ruby > = 동아시아 글자 표시하기(주로 동아시아 국가들의 글자에 주석을 함께 표기하기 위한 용도로 사용됨, 주석으로 표시할 내용을 ruby 태그 안에 rt 태그로 표시)

목록을 만드는 태그

< ul >, < li > = 순서 없는 목록 만들기(각 항목 앞에 작은 원이나 사각형 같은 불릿이 붙음, CSS의 list-style-type 속성을 이용해 불릿을 수정함)
< ol >, < li > = 순서 목록 만들기(여러 속성이 함께 사용되어 목록의 숫자 표기 방법이나 시작하는 숫자 등을 바꿀 수 있다. type 속성 = 숫자의 종류를 다양하게 조절가능, start 속성 = 중간 번호부터 시작할 수 있음, reversed 속성 = 항목을 역순으로 표시)
< dl >, < dt >, < dd > = 설명 목록 만들기(dl 태그는 목록을 만들고, dt 태그는 제목을, dd 태그는 설명을 표시함)

표를 만드는 태그

< table >, < tr >, < td >, < th > = 기본적인 표 만들기(table = 테이블, tr = 행, td = 열)
< ht > = 표에 제목 셀 만들기
< colspan >, < rowspan > = 행 또는 열 합치기(여러 열을 하나로 합치려면 td 태그나 th 태그 안에서 colspan(세로), rpwspan(가로) 속성을 사용해 몇 개의 셀로 합칠지 지정)
< caption >, < figcaption > = caption = 표에 제목 붙이기(table 태그 바로 다음에 사용됨), figcaption = < figure > 태그로 감싼 후 < figcaption > 태그를 이용해 제목이나 설명 글 입력 중앙정렬 되지 않음)
aria-descrilbedby = 표에대한 설명 제공하기(화면 낭독기에서 표를 읽어 줄 때 도움이 됨)
< thead >, < tbody >, < tfoot > = 표 구조 정의하기
< col >, < colgroup > = 여러 열 묶어 스타일 지정하기