티스토리 뷰


문서 구조를 표현하는 태그


 문서 구조를 표현하는 XHTML 태그를 대략적으로 분류하고, 분류 된 태그를 XHTML의 "태그"로 하나씩 소개하고 있습니다.


 이러한 태그 류는 XHTML의 골격 (프레임)이되는 부분을 형성해 나가는 데 사용되는 XHTML 태그의 설명 (= 마크 업)을 실시하는데 기초가되는 태그 류입니다.


 html 태그가 가장 바깥 쪽 (조상)이되어, 그 내부 (아이) 위에서 head 태그, body 태그 등 순서로 마크 업됩니다.




페이지로 만들기 (.html 파일) 문서 구조를 고려하여 정보 구조로 논리적으로 맞는지라는 것을 생각하면서 마크 업을합시다.





html 태그


 html의 각각의 태그는 html 태그를 정점으로하는 계층 구조로되어 있습니다.


 그 중 html 태그는 가장 기초가되는 태그에서 다른 태그는 모두 html 태그의 자식이나 후손 (※)이되는 관계입니다.


 또한 html 파일을 만들 때 먼저 설명해야한다 태그의 1 개로, 그 직접적인 아이 (1 개의 안쪽)으로 body 태그와 head 태그가 설명됩니다.


※ 부모와 자식의 관계를 잘 이용하여 태그를 작성합니다. 부모가되는 블록 수준 태그는 그 자식 태그에만 스타일이 적용됩니다.


 html HTML 태그의 모든 조상이되는 html 태그


- 예

<html>

<head>

<title> 테스트 </ title>

</ head>

<body>

여기가 본문입니다.

</ body>

</ html>



- DOM의 참조 방법

[window] document.getElementById ( "[ID 속성 값 이름]")

[window] document.body.parentNode

[window] document.documentElement







body 태그


 body 태그의 내부에 기술 된 태그가 브라우저 화면에 렌더링되는 것입니다.


 시각적으로 확인할 수있는 부분이며,이 안에 div 태그를 사용하여 와이어 프레임이되는 블록을 마크 업하고 있습니다.


 body 브라우저에 표시되는 부분의 시작과 끝을 나타내는 body 태그


- 예

<html> 

<head> 

<title> body 태그 예제 </ title> 

</ head> 

<body> 

body 태그에 그려진 텍스트는 실제로 브라우저에 표시된다. 

</ body> 

</ html>


- DOM의 참조 방법

[window] document.body





head 태그


 head 태그 내에 기술 된 내용은 실제로 브라우저 화면에서 확인할 수 없습니다.


 외부 스타일 시트 파일이나 외부 JavaScript 파일을로드하는 등 내용의 설명이 head 태그 내에합니다.


 head에는 컨텐츠의 정보 자원에 의미 (의미)을 갖게하기 ​​위해 메타 데이터를 작성하거나 검색 엔진 크롤링을 제어 할 수 있습니다.


 head 메타 정보와 외부 에셋 가져 오기를 기술하는 영역의 head 태그


- 예

<html> 

<head> 

<title> body 태그 예제 </ title> 

</ head> 

<body> 

... 

</ body> 

</ html>


- DOM의 참조 방법

[window] document.getElementById ( "[ID 속성 값 이름]") [window] document.getElementsByTagName ( "head") [0]








meta 태그


 head 태그의 자식으로 기술 된 컴퓨터가 해석 할 수있는 메타 데이터를 설명하는 태그입니다.


 유명한 곳으로는 name 속성 값에 keyword 값으로 content 속성 값에 문서 (문서)와 관련된 키워드를 작성할 수 있습니다.


 또한 name 속성 값에 description 값으로 content 속성의 값으로 해당 문서 (문서)의 개요를 설명하는 문장을 작성할 수 있습니다.


 meta 메타 정보를 나타내는 meta 태그


 title 태그


 head 태그의 자식으로 마크 업 된 문서 (문서)의 제목을 설명하는 태그입니다.


 각 html 파일에 기술되어있는 내용의 전반적인 제목을 작성합니다.


 title 문서 (페이지)의 제목을 나타내는 title 태그


- 예

<html> 

<head> 

<meta name = "description" 

content = "여기 사이트의 설명문을 쓸 실제 화면에는 표시되지"/> 

<meta name = "keywords" 

content = "[키워드 1], [키워드 2], [키워드 3] "/> 

<title> meta 태그 예제 </ title> 

</ head> 

<body> 

... 

</ body> 

</ html>


- DOM의 참조 방법

[window] document.getElementById ( "[ID 속성 값 이름]")








h1 ~ h6 태그


 제목을 나타내는 태그입니다.


 h1, h2, h3, h4, h5, h6라는 식으로 알파벳 "h"뒤에 숫자 1 ~ 6가 붙습니다.


 h1은 문서 내에서 가장 큰 제목이되는 정보를 표현하고 싶을 때 마크 업됩니다. h2, h3 ......라는 식으로 숫자가 증가함에 따라 제목 수준이 줄어 듭니다. h6가 가장 작은 제목 태그입니다.


 문서 구조를 의식하면 h1가 나타나면 다음은 h2 같은 식으로 마크 업을하고 잘못도 h6 태그에서 h1 태그가 나타나는 일이 없도록합시다.


 h1 ~ h6 문서 (페이지) 제목을 표현하는 h1 ~ h6 태그


- 예

<html> 

<head> 

<title> title 태그 예제 </ title> 

</ head> 

<body> 

<h1> 큰 제목 </ h1> 

<h2> 큰 제목 </ h2> 

<h3> 중간 제목 </ h3 > 

<h4> 중간 제목 </ h4> 

<h5> 부제목 </ h5> 

<h6> 부제목 </ h6> 

</ body> 

</ html>


- DOM의 참조 방법

[window] document.getElementById ( "[ID 속성 값 이름]")







span 태그


 문장의 일부만에 특정 스타일을 추가하고 싶을 때 등에 이용되는 것이 span 태그입니다. 인라인 태그로 작동합니다.


 span span 태그는 인라인 태그로 구조화를 표현하기위한 태그


- 예

이것은 span 샘플 입니다.


<html> 

<head> 

<title> title 태그 예제 </ title> 

</ head> 

<body> 

<p> 이것은 <span> span 샘플 </ span>입니다. </ p> 

</ body> 

</ html>


- DOM의 참조 방법

[window] document.getElementById ( "[ID 속성 값 이름]")






div 태그


 스타일 시트에서 사이트를 디자인 할 때 반드시라고해도 좋을 정도 필요하게된다 태그입니다. html 코드를 큰 묶음으로 블록으로 취급하고 싶은 경우에 사용합니다 (태그 화).


 사이트를 구성하는 와이어 프레임이되는 부분에 주로 사용됩니다.


 div div 태그는 블록 레벨 태그로 구조화를 표현하기위한 태그


- 예

이것은 div 요소의 샘플입니다.


<html> 

<head> 

<title> div 요소의 샘플 </ title> 

</ head> 

<body> 

<div> 

<p>이 div 요소의 샘플입니다. </ p> 

</ div> 

</ body> 

</ html>


- DOM의 참조 방법

[window] document.getElementById ( "[ID 속성 값 이름]")







address 태그


 문서 작성자 (html 작성자)의 연락처를 설명하는 태그입니다.


 문의처를 명기 한 문장에 마크 업되는 것이 보통 블록 레벨 태그로 작동합니다.


- 예

<html> 

<head> 

<title> address 요소의 샘플 </ title> 

</ head> 

<body> 

<address> 연락처 : 

<a href="mailto:info@example.com"> info@example.com </a> 

</ address> 

</ body> 

</ html>


- DOM의 참조 방법

[window] document.getElementById ( "[ID 속성 값 이름]")





※ download & Next Menu



저작자 표시 비영리 변경 금지
신고
댓글