2021. 4. 26. 03:29ㆍ코 딩 공 부/H T M L
기본 태그
<!DOCTYPE> 태그
● 설명
- 문서 정의 태그(Document Type Definition)
- 문서에서 사용되는 언어와 버전을 지정하는데 사용한다. 즉 HTML 이 어떤 버전으로 작성되었는지 미리 선언해 웹 브라우저가 내용을 올바르게 표시할 수 있도록 해준다.
- <!DOCTYPE> 태그는 모든 HTML문서의 최상단에 기술한다.
● DTD(Document Type Definition)
문서 형식 정의(DTD)는 페이지를 불러오기 위한 기본이 되는 문서타입을 정하는 것으로 브라우저에 현재의 웹 페이지가 어떤 문서 형식을 가지는지 전달해준다.
- 호환 모드(Transitional Mode) : Transitional//EN
생략해도 실행하는데 지장이 없는 트랜지셔널 모드를 말한다.
- 엄격모드(Strict Mode) : Strict//EN
생략을 허용하지 않는 xml 같이 올바른 형식의 문서(Well Formed Document)를 의미한다.
주석
● 설명
- 문서의 내용을 설명하거나 나중에 태그 분석 등에 사용하기 위해서 사용한다.
● 형식
<!-- 주석 내용 입력 -->
<html>~</html>
● 설명
- HTML 문서의 최상위 태그로 HTML문서의 시작과 끝을 나타낸다.
- head 요소와 body 요소를 포함할 수 있다.
- lang 속성으로 내용에서 사용할 언어를 지정할 수 있다.
● 속성
manifest : 문서의 애플리케이션 캐시 매니페스트 주소
전역 속성 : 공통 속성
<head>~</head>
● 설명
- html 요소 내부의 첫번째 요소로 사용
- head 요소는 문서의 메타데이터 집합을 나타낸다.
- 대부분 title 요소를 포함해야 하지만 HTML로 쓴 이메일의 제목 줄 처럼 상위 레벨의 프로토콜애서 타이틀 정보를 얻을 수 있을 때는 생략할 수 있다.
- 그 밖에 script, style, meta 요소를 정의할 수 있다.
<title>~</title>
● 개요
- HTML 문서의 제목 표시 부분을 기술한다. 이 부분에 기술된 내용은 브라우저의 제목 표시줄에 나타난다.
<meta>
● 설명
- 메타 정보 태그(Meta-Information)
- meta 요소는 title 요소나 base 요소, link 요소, style 요소, script 요소로 표현할 수 없는 다양한 메타데이터를 표시한다.
- 내장 스크립트와 CSS 정보, 스크립트와 CSS 파일 링크 정보 뿐만 아니라 검색 엔진을 위한 해당 문서의 검색 키워드 정보도 담을 수 있다.
- 가장 일반적으로 사용되는 속성은 name, content 속성이다.
- name 속성, http-equiv 속성, charset 속성 중 하나를 반드시 써야 한다.
- name 속성이나 http-equiv 속성을 기술할 경우 content 속성도 기술해야 한다.
- http-equiv 속성을 기술한 경우 meta 요소는 반드시 head 요소 내에 써야한다. http-equiv 속성이 없는 meta 요소는 head 요소 또는 head 요소의 자식 요소인 noscript 요소 내부에 써야 한다.
● 속성
- charset : 문자 인코딩을 정의 HTML 5 추가 속성
- content : 지정된 메타 키에 대한 관련 정보를 지정
- http-equiv : HTTP 응답 메세지 헤더에 대한 정보를 제공
속성 값 : content-type, default-style, refresh
- name : 요소에 대한 이름을 지정
속성 값 : application-name, author, description, generator, keywords
- scheme : 관련 메타 요소의 content 속성의 값을 나타내기 위해 사용할 수 있는 스키마를 지정
<body>~</body>
● 설명
- body 요소는 문서의 주된 콘텐츠를 나타낸다.
- HTML 문서에는 body 요소를 반드시 하나 기술한다.
● 속성
참고 : HTML5 에서는 대부분의 속성을 지원하지 않음(style로 처리)
alink : 사용자(시각 브라우저 용)가 선택한 하이퍼 링크 표시 텍스트의 색상을 설정
background : 배경이미지 지정
bgcolor : 배경색을 지정
link : 방문하지 않은 하이퍼 링크의 색상을 설정
text : 텍스트의 전경색을 설정
vlink : 방문한 하이퍼 링크 텍스트의 색상을 설정
<hx>~</hx>
● 설명
- 글자크기를 지정하는 태그로 x는 1~6사이의 숫자(1 : 가장 큰 글씨, 6 : 가장 작은 글씨)이다.
- <h> 태그는 자동으로 줄 바꿈이 이루어지며 타이틀을 입력할 경우에 보통 사용한다.
● 속성
align="left"|"center"|"right"|"justify" : 정렬 방식 지정(HTML5 에서는 지원하지 않음)
<p>~</p>
● 설명
- 문단 태그(paragraph)
- 단락을 정의
- <p>태그는 <br><br>과 유사하다. <p> 태그의 원래 목적은 단순히 줄을 나누는 것이 아니라 문단을 브라우저에게 알려주는데에 있다.
- <p>태그는 종료 태그를 생략할 수 있는데 이는 웹 브라우저들이 <p>태그와 만나게 되면 그 이전의 문단이 끝났다고 해석하기 때문이다.
● 속성
align="left"|"center"|"right"|"justify" : 정렬 방식 지정(HTML5 에서는 지원하지 않음)
<br>
● 설명
- 줄 바꿈 태그(Line Break). 줄 바꿈을 지정하는데 사용한다.
<hr>
● 설명
- 수평선 태그(Horizontal Rule). 문서 내에 수평선을 넣어주는 태그이다.
● 속성
참고 : HTML5에서는 속성을 지원하지 않음(style로 처리)
size="선 굵기"
width="선 길이" : %를 사용하면 브라우저의 폭을 기준으로 선의 길이를 지정
noshade : 입체감 삭제
align="left"|"center"|"right" : 좌우 중앙 지정시 사용되며 지정하지 않는 경우에는 중앙 정렬이 된다.
Block Level Element와 Inline Level Element
HTML 요소는 블럭요소와 인라인 요소로 나눌 수 있다.
● 블록 레벨 요소(Block Level Element)
- 블록 레벨 요소는 전후 줄 바꿈이 들어가 다른 요소들을 다른 줄로 밀어내고 혼자 한 줄을 차지
- 특징
· 항상 새로운 라인에서 시작한다.
· 화면 크기 전체의 가로 폭을 차지한다.
· width, height, margin, padding 프로퍼티 지정이 가능하다.
· block 레벨 요소 내에 inline 레벨 요소를 포함할 수 있다.
· block 레벨 요소 예
div, h1~h6, p, ol, ul, li, hr, table, form 등
● 인라인 레벨 요소(Inline Level Element)
- 인 라인(inline) 레벨 요소는 전후 줄 바꿈없이 다른 요소들과 나란히 배치
- 특징
· 새로운 라인에서 시작하지 않으며 문장의 중간에 들어갈 수 있다. 즉 줄을 바꾸지 않고 다른 요소와 함께 한 행에 위치한다.
· content의 너비만큼 가로 폭을 차지한다.
· width, height 속성은 무시되며 margin과 padding 속성은 좌우 간격만 반영이되고 상하 간격은 반영이 되지 않는다.
· 상, 하 여백은 line-height로 지정한다.
· inline 레벨 요소 뒤에 공백(엔터, 스페이스 등)이 있는 경우, 정의하지 않은 공백(4px)이 자동 지정된다.
· inline 레벨 요소 내에 block 레벨 요소를 포함할 수 없다.
· inline 레벨 요소는 일반적으로 block 레벨 요소에 포함되어 사용된다.
· inline 레벨 요소 예
span, a, strong, img, br, input, select, textarea, button 등
HTML 특수 문자와 공통으로 사용하는 속성
html 특수문자
● 설명
- HTML에서 <.>,&," 등 은 특별한 의미를 갖고 있으므로 다음과 같이 표현한다.
공통적으로 사용하는 속성(Global Attributes)
● 속성
- accesskey : 문서의 요소에 단축키 설정
- class : 문서의 요소를 식별. 스타일 시트 선택자
- dir : HTML문서의 요소안에 있는 텍스트의 방향을 설정
- id : 요소의 유일한 식별자. 스타일 시트 선택자
- lang : 요소 내용의 언어를 지정
- style : 요소에 대한 인라인 스타일을 지정
- tabindex : 탭 순서에서의 위치를 지정
- title : 해당 element의 제목
● HTML5 추가 속성
- contenteditable : 편집 가능한 영역임을 표시하는 속성(true 또는 false) 일반적으로 편집할 수 없는 <p>요소도 contenteditable 속성으로 지정되면 편집할 수 있는 요소가 된다. 변경한 내용을 처리하기 위해서는 별도의 기능을 자바 스크립트로 서버 측 프로그램을 통해서 구현해야한다.
- contextmenu
일반적인 프로그램에서 마우스 오른쪽 버튼을 클릭했을 때 나타나는 단축 메뉴와 같은 기능을 작성하기 위한 속성. contextmenu 속성에 지정된 id 를 가진 메뉴를 구성하는 <menu> 요소가 표시된다.
- data-* : HTML안에 속성처럼 데이터를 저장하거나 추가
- draggable : 지정된 요소를 드래그 할 수 있게 한다. 웹 브라우저 외부로까지 드래그가 가능하다.
- dropzone : 드래그된 데이터를 드롭할 때 복사, 이동, 링크
- hidden : CSS를 사용하지 않고도 HTML내에서 요소를 숨길 수 있다.
fornatting 관련 태그
주요 formatting 관련 태그
● <b>~</b>
- 글자 강조 태그(bold). 볼드체(굵은 글씨체)
- 키워드, 리뷰에서의 상품명, 기타 보통 볼드체로 표현하는 텍스트에 사용
● <em>~</em>
- 텍스트 강조 태그(Emphasis). 주관적인 강조를 나타낼 뿐 중요성을 나타내지는 않는다.
- 강조체(이탤릭체). i 태그와 동일하게 출력
● <i>~</i>
- 이탤릭체 태그(Italic)
- 다른 언어에서 쓰이는 숙어의 인용, 생각, 꿈, 분류학 명칭, 기타 보통 이탤릭체로 표현하는 택스트에 사용
● <dfn>~</dfn>
- 용어 정의 태그(Defining Instance of a Term)
- 웹 페이지 내의 용어, 단어 등을 정의할 때 사용(이탤릭체로 표현)
● <pre>~</pre>
- 서식 설정 텍스트 태그(Performatted Text)
- 서식이 설정된 텍스트를 표시하는 데 사용
- <pre> 태그는 텍스트 박스에 입력된 그대로 상태를 웹 페이지 상에 보여주는 태그
● <sub>~</sub>
- 첨자 텍스트 태그(Subscript)
- 아래첨자
● <sup>~</sup>
- 슈퍼 스크립트 태그(Superscript)
- 위 첨자
● <s>~</s>
- 텍스트 가운데 선 정의 태그(Strikethrough)
- 문자의 가운데에 선을 넣어 준다.
● <u>~</u>
- 밑줄 태그(Underline)
● <cite>~</cite>
- 인용 태그(Citation)
- 제목(예를 들면 책, 노래, 영화, TV 쇼, 그림, 조각 등 제목)을 나타낼때 사용
● <code>~</code>
- 코드 예제 태그(Code Listing)
- 컴퓨터와 관련된 모든 코드 마크업 하는 코드, XML 속성이름, 파일이름 등을 표시하기 위해 사용
programming 관련 태그
<script>~</script>
● 설명
- 스크립팅 태그(Scripting)로 HTML 문서 내에 스크립트 선언에 사용
● 속성
- charset : 문자 인코딩을 정의
- defer : 기본적으로 웹 브라우저가 외부 자바스크립트를 불러오는 일반 script 태그를 만나게 되면, 우선 해당 스크립트를 내려받아 해석하고 실행 할 때 까지 웹 문서의 HTML 코드 parsing 작업을 잠시 뒤로 미룬다. 하지만 async 혹은 defer 된 스크립트는 문서 parsing 작업의 중단 없이 동시에 내려받게 된다.
- async : 비동기적으로 실행. HTML5 추가 속성
- language : 태그의 언어 속성을 표시
- src : 외부 파일 또는 리소스에 대한 URI를 지정
- type : 스크립트 언어나 데이터 포맷을 표시. 생략하면 type="text/javascript"
<noscript>~</noscript>
● 설명
- 스크립트 미 지원 대처 태그 (No Script Support Content)
- 자바 스크립트 나 다른 스크립트 언어를 지원하지 않는 브라우저에 대한 대체 콘텐츠를 제공하는데 사용
<embed>
● 설명
- 개체 포함 태그(Embedded Object). HTML 5 에서 새로 추가된 태그
- HTML 웹 페이지에 멀티미디어(동영상, 음악 등)를 포함하는데 사용
● 속성
- height : 요소의 높이를 정의
- src : 포함하고자 하는 외부 자원의 주소를 지정
- type : 인스턴스화 할 플러그인의 유효한 MIME 타입을 지정
- width : 요소의 너비를 정의
<object>~</object>
● 설명
- 개체 포함 태그(Embedded Object)
- HTML 문서에 멀티미디어를 포함하는데 사용
- HTML 문서에 객체 파일을 삽입할 때 사용
- <object> 태그가 내장된 플러그인에 매개 변수를 전달하는 <param> 태그를 사용할 수 있다.
● 속성
- 참고 : HTML5 에서는 대부분의 속성을 지원하지 않음(style로 처리)
- align : 정렬 방식 HTML5 에서는 지원하지 않음
- form : form_id. HTML5 추가 속성
- type : 자원의 타입을 명시
- usemap : 외부 자원이 이미지인 경우 이미지 맵과 연결(#mapname)
- width : 요소의 너비를 정의
<param>
● 설명
- 개체 매개 변수 태그
- <object> 태그를 사용하여 포함 된 개체에 매개 변수를 전달하는데 사용
● 속성
- name : 매개변수의 이름을 정의
- type : media_type. HTML 5에서는 지원하지 않음
- value : 매개변수의 값을 정의
- valuetype : 값 유형을 지정. HTML 5에서는 지원하지 않음
'코 딩 공 부 > H T M L' 카테고리의 다른 글
| HTML - HTML 테이블 관련 태그 (0) | 2021.05.17 |
|---|---|
| HTML - HTML 레이아웃 관련 태그 (0) | 2021.04.28 |
| HTML - HTML 개요 (0) | 2021.04.23 |