HTML 태그에 관한 정리진**HTMLHTML(Hyper Text Markup Language)은 웹 페이지를 위한 마크업 언어이다. 마크업 언어란, 활자 시대에 인쇄 교정지에 펜을 이용해 직접 손으로 쓴 주석을 뜻하는 ‘마크-업’에서 유래되었는데, 현재 문서의 속성을 설정하기 위한 용도로 확장되었다. 즉, HTML은 웹문서에서 속성을 설정하기 위한 문서 작성 언어이고, 태그(tag) 형태로 웹 브라우저에서 보여지는 문서의 내부형식을 규정한다. HTML의 구조는 문서의 내용과 문서 일부분의 특징을 지정해주는 내용으로 구성됐다. 문서 일부분의 특징을 지정하는 마크업을 요소(element)라고 한다. HTML 문서를 이루는 개별적인 부분을 의미하는데, 태그와 속성, 내용으로 표현된다. HTML 형식의 파일은 첫 줄에 DOCTYPE 선언한 뒤, 다음줄부터 요소를 기입한다. 파일 확장자로 *.htm이나 *.html을 사용한다.태그는 문서의 모양, 행동 양식 등을 정해주는 요소를 표시하는 일종의 꼬리표로, 브라우저에게 명령어를 처리하도록 설명한다. 주로 시작과 끝을 나타내는 한 쌍으로 구성되는 복합태그 형태( 내용 )이지만, 단독으로 사용되는 단독태그()도 있다.태그의 특징은 먼저 대소문자를 구별하지 않는다는 점이다. 여러 태그가 중첩되었을 시 그 각각의 쌍들의 순서나 위치가 틀리지 않도록 주의해야 하고, 공백문자나 개행 문자를 무시하여 스페이스(공백)나 리턴(줄 바꿈)을 한번만 인식한다. 그래서 특수 기호를 사용해 공백 및 특수문자를 입력한다.아래는 HTML의 요소와 그 태그를 정리한 글이다.문서의 기본 구조2014년에 새롭게 제작된, HTML5 문서 규약으로 만들어진 웹 문서임을 표시. 97년에 탄생한 HTML4.0은 인터넷 대중화에 크게 기여했지만 태그가 제한적이었음. 자바스크립트를 포함되면서 현재 웹페이지의 모습을 갖추었음.현재 파일이 HTML 문서라는 지시사항을 나타내는 태그. HTML 문서의 처음과 끝에 나타나며 HTML 태그 사이에 HEAD와 BODY가 들어 감.HTML문서에 대한 일반적인 정보를 표시하는 머리말 역할의 태그. 실제 브라우저 화면에는 출력되니 않음. 태그가 기술됨.현재 작성된 HTML 문서의 제목을 표기하는 태그.브라우저의 제목 표시줄에 나타남.제작자, 저작도구, 주요 검색어, 인코딩 사항 등 홉페이지의 각종 정보를 입력. 인공지능이 자료를 조사하다 문서를 파기할 위험을 예방하기 위해 로봇 배제 표준을 설정할 수 있음. 변경 URL으로의 이동 등도 설정 가능.HTML 문서의 본문을 작성하는 부분. 바로 브라우저 화면에 보여지는 홈페이지가 기술되는 부분.제목(headline)문서의 제목이나 머리글의 글자 크기를 지정. (n=1~6) 숫자가 작을수록 글씨체 크기는 커짐.단락(Paragraph)절이나 단락을 구분함.줄을 바꾸면서 동시에 한 줄 띄우는 효과로 요소 앞뒤에 약간의 여백이 자동 추가됨.줄 바꿈(Line Break)줄과 줄 사이에 줄 바꿈을 하기위해 사용됨. 연속해서 사용하면 여러 줄의 빈 줄 삽입이 가능.가로줄(Horizontal Line)단독태그의 형태로 쓰임. 문단이나 내용 사이에 구분을 확실히 하고자 할 때 사용됨. 아무런 속성을 지정하지 않으면 기본적으로 선의 길이가 화면 크기에 맞춰 나오고, 음각이 져 있음.작성된 형식 유지(Pre-formatted Text)화면에 입력한 상태를 그대로 보이고자 할 때 쓰임. 공백문자는 한번밖에 인식이 안되지만 이 요소를 이용하면 빈칸, 탭, 줄 바꿈이 작성하고 싶은 대로 보임단락 인용(Block Quotation)다른 글의 내용을 단락 단위로 인용하여 포함한다. 들여쓰기로 구분하여 표시됨.문서 꾸미기다양한 텍스트 꾸미기텍스트 강조(Emphasis)기울여서 표시강한 강조(Strong Emphasis)진하게 표시작은(Small) 글자작은 글씨로 표시하이라이트 효과형광펜 표시아래 첨자(Subscript)아래에 작게 표시위 첨자(Superscript)위에 작게 표시목록 나열하기순서 없는 목록(Unordered List)순서 없이 목록을 적을 때 사용. 앞에 검은 점이 붙음순서 있는 목록(Ordered List)순서가 필요할 때 사용. 의 앞에 숫자가 오름차순으로 정렬나열된 항목(list item), 의 하위 요소정의 목록 (Description/Definition List)사전과 같이 용어나 단어를 설명하는 목록을 만들 때 사용용어(term)설명(description)표의 기본 구조테이블표를 만드는 데 사용함. 그 의외에도 문장이나 이미지를 적절히 배치하기 위해서도 많이 쓰임. 행(row)과 열(column)로 구성됨.테이블 안에서 하나의 행을 지정테이블의 머리글을 쓸 때 사용. 굵은 글씨체로 가운데 정렬.각 셀의 데이터를 쓸 때 사용되고, 왼쪽 정렬rowspan위아래 줄의 셀 병합colspan옆 칸의 셀 병합표의 제목을 나타냄. 한번만 사용가능해서 바로 뒤에 사용하는 것을 권장.가운데 정렬표의 머리줄. 머릿글 내용을 그룹화할 때 사용표의 몸체. 본문 내용을 그룹화할 때 사용. 이 부분만 스크롤 가능. 여러 번 사용할 수 있음표의 꼬리줄. 바닥글을 그룹화할 때 사용웹 문서의 의미적 구조화초기 웹문서는 단순한 정보를 전달했지만 발전하면서 검색엔진 등 컴퓨터가 문서를 파악하고 이해할 수 있어야 하는 경우가 많아졌다. 컴퓨터는 글의 위치, 모양 등등으로 내용을 알 수 없고 사람이 알려주는 것만 인식할 수 있기 때문에, 따로 화면에 표현되는 것은 없지만 논리적으로 표현하기 위해서 문서 구조화가 만들어졌다.문서 구조화 요소머리말머리말 영역.웹 문서의 제목, 소개 등 문서 관련 설명을 표기하는 요소를 포함탐색 메뉴다른 웹 문서나 문서 내의 이동을 위한 내비게이션 링크를 표현할 때 쓰임독립된 본문웹 문서에서 주요 내용을 가진 독립적인 본문을 표할 때 사용문서 내 섹션 그룹웹 문서 내에서 절 단위로 구문하거나 의미가 비슷한 그룹으로 문서를 구분하기 위해서 사용부수 정보본문의 내용과 구별되는 별개의 정보를 표현하기 위해 사용꼬리말웹 문서의 꼬리말에 해당하는 저자정보, 저작권 정보, 이용조건, 관련 링크들을 나타내기 위해 사용 ... ... ... ... ... .... ... 하이퍼텍스트(hypertext)서로 연관된 문서나 텍스트 조각들을 연결하여 원하는 정보를 찾아갈 수 있게 도와준다.텍스트 뿐만 아니라 이미지, 그래픽, 오디오, 비디오 등등 멀티미디어 정보가 서로 연결되어 있는 것을 나타낸다. 웹의 모든 정보 접근은 반드시 연결 링크를 선택해서 내비게이션을 하게 된다.하이퍼텍스트는 텍스트를 연결하고, 하이퍼링크는 나머지 멀티미디어 정보를 연결한다. 서로 역할은 동일하다. 노드와 링크로 표현된다.노드HTML문서나 멀티미디어 정보를 표현하는 기본단위링크노드를 연결해 내비게이션이 가능하도록 하는 구성요소앵커HTML 문서 내에서 링크의 출발점이나 도착점을 의미앵커 영역: 앵커가 설정되어 있는 영역HTML 문서에서 사용되는 링크의 종류는 외부 문서와 연결하는 링크와, 문서내의 다른 지점으로 연결하는 링크(책갈피 링크)가 있다.: 링크(link)href: 이동하고자 하는 문서 위치를 지정절대주소-URL 형식의 인터넷 주소w3c 홈페이지 방문상대주소-같은 폴더 위치에서부터 상대주소로 링크된 것으로 간주(예시: 위키디피아의 목차에서 각각의 내용으로 넘어가게 만든 링크) 책 목록 title: 하이퍼링크에 설명하고 싶을 때 사용됨w3c 홈페이지 방문w3c 홈페이지 방문책갈피- 동일한 문서 내에서 특정 지점으로 연결시작점(링크 설정): 시작점 링크목적지(문서 내 이동): : 이미지 삽입src: 이미지 파일 이름을 지정width, height: 이미지 크기 조정, 지정하지 않으면 본래 이미지 크기로 화면에 나옴alt: 대체 텍스트(alternate text)-이미지를 로드하지 못한 경우 그 위치에 설명 텍스트를 이미지에 지정그림, 사진, 다이어그램과 텍스트 등의 콘텐츠를 함께 묶어(예:) 하나의 독립된 단위로 취급독립된 단위여서 제거하더라도 콘텐츠흐름에 영향을 주지 않음.요소를 위한 제목을 표현하고, 내에 위치함.
