[HTML] HTML 구성요소 및 기본적인 정보와 키워드
- 웹 개발/HTML
- 2019. 3. 20. 21:56
HTML 문서에서 사용하는 기본적인 키워드
doctype , document type, 문서 유형
- 선언문의 한 종류
- HTML(X), DTD(O),
- 브라우저에게 현재 문서가 어떤 종류의 문서다.. 라고 알려주는 역할
HTML 구문들
<html></html> : 문서 루트 태그. 모든 html 내용은 이 태그 안에서 기재된다. 페이지 컨테이너
<head></head> : 문서정보, 브라우저가 보는 정보
<meta> : 여러가지 정보 저장 기술 예를들어, <meta charset="UTF-8"> 이렇게 인코딩 처리가능
<body></body> : 출력정보, 주로 사람이 보는 정보(화면)
HTML 주석처리
<!-- 주석입니다. 단일, 다중으로 구분하지 않고 이 주석 하나입니다. -->
공백 문자, WhiteSpace
- 스페이스, 탭, 개행문자
- HTML 문서 소스 상에 존재하는 공백 문자들을 실행기(브라우저)가 처리하는 독특한 방법
- 모든 브라우저는 소스 상의 종류에 상관없이 연속된 공백은 모두 1개의 스페이스로 치환한다.
사용자 공백문자열 처리 방법
1. HTML 사용
a. 스페이스
- > non-break-space
- &엔티티명;(특수문자) > Built-in-Entity
- 엔티티 : 브라우저가 약속된 표현으로 치환해서 출력하는 요소
b. 개행 문자
- <br> 태그 사용
- line-break
2. CSS 사용
클라이언트측 프로그래밍(서버측 - 자바, 스프링, db)
1. HTML5
- 출력할 페이지의 뼈대(레이아웃,틀)와 내용물(데이터 - 문자열,이미지,동영상 등) 작성하는 역할
- 서식 작업에 약함(서식 기능 거의 없음)
2. CSS3
- 스타일 시트
- 1번의 결과물에 서식을 입히는 작업
3. Javascript
- 프로그래밍 언어
- HTML과 CSS의 결과물(정적 페이지-움직임이 없음, 인쇄물)
- 페이지에 프로그래밍 기능을 추가하는 역할
- 처음목적 : 사용자 입력데이터의 유효성 검사
- but 현재는 많은 일을 하고 있다.
HTML 구성요소
1. 태그(tag)
- 문서의 골격 형성
2. 태그의 형식
a. <태그명>내용</태그명>
-쌍태그
-<태그명> : 시작태그
-</태그명> : 끝태그
-자신의 영역을 가지는 태그(Content)
b. <태그명>
-단독태그, 빈태그, Empty Tag
-자신의 영역을 가지지 않는 태그
3. 태그 내용의 형식, Content Type
- <p>내용물...뿌직</p>
a. 자식 태그
-태그의 내용물로 또 다른 태그만(***) 올 수 있다.
-<a>
<b></b>
<c></c>
</a>
-<a>
<b></b>
홍길동
</a>
b. PCDATA, Parsed Character Data
- 문자열
- 태그의 내용물로 문자열만 올 수 있다.
- 해석된 문자 데이터 > 브라우저(실행기)가 인식하고 구문 분석하는 대상이되는 영역
- <-> CDATA(브라우저가 해석을 안하는 문자열 영역)
- 모든 PCDATA는100% 화면에 출력
c. Empty
- 태그의 내용이 없다.
- 주로 단독태그가 이 형태를 가진다.
d. 혼합형, Mixed Type
- 태그의 내용물로 자식태그나 문자열을 모두 가질 수 있다.
- a + b + c
- <body>
4. 속성, Attribute
- 태그의 성질을 정의하는 역할
- 태그(= 객체), 속성(= 속성, 프로퍼티)
- PCDATA와 유사(= 태그를 표현하는 데이터 역할)
- 태그의 출력물(PCDATA)를 표현하는 세부적인 옵션(설정)
- <시작태그 속성명 ="값"> </끝태그>
- <단독태그 속성명="값">
- <시작태그 속성명 ="값" 속성명 = "값" 속성명="값"></끝내그>
- 태그마다 이미 정해진 속성만 사용가능하다.
- 속성명 = "값" <div class = "one two">
- 속성명 = '값' <div class = 'one two'>
- 속성명 = 값 //비권장 <div class = one two>//에러
XML 기준으로 데이터의 역할
1. PCDATA -> 화면에 출력되는 데이터 용도 + 태그(출력되는 데이터의 성질 or 모양을 제어)
2. 속성 데이터
5. PCDATA, 텍스트
- 화면에 출력되는 데이터
6. Comment, 주석
7. Entity, 엔티티 개체
- 미리 정해져있는 표기법에 따라 브라우저 출력할 때 약속된 표현으로 치환해서 출력하는 요소
- &엔티티명;
- -> 공백
- < (<)
- > (>)
- " (")
- & (&)
- ' (')
- &#문자코드;
'웹 개발 > HTML' 카테고리의 다른 글
| [HTML] a태그이동, javascript:void(0)? (0) | 2019.03.29 |
|---|---|
| [HTML] 목록 태그 (ol, ul, dl, li) (0) | 2019.03.27 |
| [HTML] 서식태그의 종류 (2) | 2019.03.24 |
| [HTML] p태그, 제목태그(h1~h6), hr태그(수평선태그) (0) | 2019.03.23 |
| [HTML] <head>태그와 <body>태그 (0) | 2019.03.23 |