<!-- HTML, Hyper Text Markup Language -->
- 하이퍼텍스트 마크업 언어
- 프로그래밍 언어 X
- 프레젠테이션 언어 > 무엇인가를 표현하는 기능을 가지는 언어
- Hyper Test > 링크
- Markup Langauge > 언어 표기법 : <명령어>
~ SGML > 모든 마크업 언어의 시조
~ HTML > 표현 언어
~ XML > eXtensible Markup Language > 데이터 통신 or 저장(CSV)
- XHTML > XML + HTML
<!-- HTML 주관 단체 -->
- W3C, World WIde Web Consortium
- https://w3.org
- HTML 1.0 ~ HTML 5
- HTML 4.01, XHTML 1.0, HTML5
~ HTML 4.01: 가장 대중화된 버전(웹을 활성화시킴)
~ XHTML 1.0: XML + HTML > 문법 강력하게 준수
~ HTML5: 2014년
<!-- HTML 문서 확장자 -->
- *.html
- *.htm
<!-- Context Root Path★★★★★-->
- 웹서버가 가지는 콘텐츠의 최상위 폴더
<!-- HTML 언어 구성 요소 -->
1. 태그(Tag), 엘리먼트(Element)
2. 속성(Attribute)
3. 텍스트(PCDATA)
4. 엔티티(Entity)
5. 주석(Comment)
6. 선언문(Declaration)
7. 외부 요소
8. 기타
//태그(Tag), 엘리먼트(Element)
- 예약어(명령어)를 <>로 묶어놓은 요소
- ★★★용도에 맞는 것을 사용해야 한다.
- 출력될 웹페이지의 골격 형성
a. 레이아웃 형성
b. 요소를 배치
c. 콘텐츠를 출력
- 태그 표현 방식
a. <태그명>내용물</태그명>
- 쌍태그
- <태그명>: 시작태그
- </태그명>: 끝태그
- 영역을 가지는 태그
b. <태그명>, <태그명 />, <태그명></태그명>
- 단독태그
- 빈태그(Empty tag)
- 영역을 가지지 않는 태그
- 태그 내용물 형식, Content Type
a. 자식 태그
- 또다른 태그를 내용물로 가진다.
- 문자열을 직접 가질 수 없다.
~ <html>
b. PCDATA
- Parsed Character Data > 파싱 가능한 문자열
- 문자열을 내용물로 가진다.
- 태그를 내용물로 가질 수 없다.
~ <title>
c. Empty
- 아무것도 가지지 않는다.> 빈 태그, 단독 태그
d. Mixed
- 자식으로 태그와 문자열이 모두 올 수 있다.
- 혼합형
- a + b + c
- HTML 태그의 대부분이 혼합형이다.
- 태그 중첩(Nesting Tags)이 가능하다.
<h1> Hello, <i>HTML</i> </h1>// 속성, Attribute
- 태그명 뒤에 공백으로 구분하여 이름="값"을 넣어준다. (이름="값"에서 공백은 들어갈 수 없다.)
<h1 id="title"> Hello, HTML </h1>
<h1 id="title" class="test"> Hello, HTML </h1>
- 종류에 따라 어느 태그에서나 사용되는 속성도 있고, 특정 태그에서만 사용되는 속성도 있다.
- 필수 속성도 있고, 선택적인 속성도 있다.
- 태그의 성질을 정의하는 요소
- 태그가 가지는 데이터의 한 종류
- 표기법
a. <시작태그 속성명="값"></끝태그>
b. <단독태그 속성명="값">
c. <시작태그 속성명="값" {속성명="값"}></끝태그>
d. <시작태그 속성명="값"></끝태그> : 사용 O
e. <시작태그 속성명='값'></끝태그> : 사용 O
f. <시작태그 속성명=값></끝태그> : 절대 사용 X
- HTML 속성 유형
1. 숫자(단위 없음)
a. 픽셀(px) > 화소 > 화상(이미지)를 구성하는 최소 단위 > 단일 색상을 가지는 점 1개
b. 글자수
2. 숫자(단위: %)
- 부모 태그 영역을 100으로 하는 상대 단위★★★★
3. 열거형
- 정해져 있는 속성값 중 하나를 선택해서 사용
4. 색상
- 색상명, RGB
5. 플래그형(boolean)
- 속성명 기재(true), 미기재(false)
6. 문자열
- 자유롭게 기재
7. URL
- 상대경로, 절대경로, 외부경로
// 텍스트(PCDATA)
- 태그가 가지는 데이터의 한 종류
- 용도: 화면에 출력하는 데이터
// 엔티티(Entity)
- 브라우저와 미리 약속된 표현
- 이 표현을 소스에 작성하면 브라우저는 이 표현을 그대로 출력하지 않고, 미리 약속된 표현으로 바꾸어서 출력한다.
- 치환 명령어
- Built-in Entity
- &엔티티명;
~
~ < > less than
~ > > greater than
- &#문자코드;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ex03_tag</title>
</head>
<body>
<div> 이곳이 PCDATA 영역입니다. 브라우저가 문법을 검사하는 영역입니다.
그래서 예약어가 있으면 해석을 한다. 오늘 <br>태그를 배웠습니다. <br>태그는 개행문자 역할을 합니다.</div>
<div>© Copyright 2023 All rights reserved</div>
<div>A</div>
</body>
</html>//주석, Comment Tags
- 화면에 노출되지 않는 부연 설명
<!-- 내용 -->// 공백 문자, Whitespace
- 편집기 상의 엔터, 탭, 스페이스
- 브라우저가 페이지 소스 상의(종류와 상관없이) 1개 이상의 연속된 공백 문자들을 단 1개의 공백 문자로 치환해서 화면에 출력한다.
- 공백 문자 처리 방법
1. 스페이스 표현
- 공백 2글자 > 엔티티 1개
- &표현;
~
- 화면에 출력될 떄 공백 1개로 바꿔서 출력해라.
- non-break space
2. 탭 표현
- 표현 방법 없음
- 브라우저 > 편집기 X > 탭 개념 자체가 없음
3. 개행문자 표현
- <br> 태그 사용 > \r\n 역할
- line break
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ex02_whitespace</title>
</head>
<body>
하나 둘 셋
<br>
넷
<br>
<br>
<br>
<br>
<br>
다섯
HTML4.01 > XHTML 1.0 > (이전 버전 호환성 X) > XHTML 2.0(X) - 망함..
(이전 버전 호환성 X) > HTML 5
</body>
</html>//기본 문서 구조, HTML Documents
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charse="UTF-8">
<title>HTML 문서의 기본 구조</title>
</head>
<body>
<h1>Hello, HTML</h1>
</body>
</html>
- 태그들의 트리 구조로 되어 있다.(계층 구조)★★★★
<html>
- 문서 전체를 감싸는 역할
- 루트 태그
- 스스로 하는 일은 없다. > 컨테이너 역할
<head>
- 문서의 머릿말 역할
- 문서 내부 정보 기술
- 브라우저에게 전달할 내용 > 화면에 출력(X)
1. <meta>
- 페이지에 대한 여러 가지 정보를 기술
2. <title>
- 문서 제목(제목 표시줄에 출력)
a. 문서의 제목으로 사용
b. 검색 엔진의 수집 대상 > 검색 결과의 제목으로 사용
c. 북마크 제목으로 사용
<body>
- 브라우저에 출력될 내용을 담는 역할
- 사람이 봐야 할 내용을 작성
- 화면에 출력되는 모든 내용을 가지는 태그
- 혼합형 > 태그, 문자열
- 속성
1. bgcolor
- background color
- 문서 배경색
2. background
- background image
- 문서 배경이미지
- HTML 색상 표현 방법
- 색 배합 > 참조 사이트(웹 색 조합)
1. 색상명
- Named Color, Well-known Color
- 미리 약속된 몇 가지 색상명을 사용(140가지)
2. RGB
- Red + Green + Blue
- 각 색상의 단계 > 256단계(0~255)
- 256 x 256x 256 = 16,777,216
- #RRGGBB
- #000000(검정색) ~ #FFFFFF(흰색)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ex05_body</title>
</head>
<!-- <body bgcolor="LightPink"> -->
<body bgcolor="#FEB5C5">
</body>
</html> - HTML 자원 경로 표현 방법
- . : 현재 문서가 포함된 폴더 > 현재 폴더
- .. : 부모 폴더
- 이름 : 자식 폴더
- 자바 구분자: \
- 웹 구분자: /
1. 상대경로
- 현재 페이지가 있는 폴더를 기준으로 표현하는 방법
- . : 현재 폴더
~ background="./images/PC.png"
~ background="images/PC.png"
2. 절대 경로
- 고정된 기준점을 사용해서 표현하는 방법
- '/'으로 시작
~ background="/client/html/images/PC.png"
3. 로컬 경로
- 드라이브명으로 시작하는 방법
- 현재는 대부분의 브라우저가 지원하지 않음. > 나는 보이지만 다른 사람은 안 보임.. > 사용 불가!
~ background="C:\Users\user\Desktop\class\code\client\ClientTest\src\main\webapp\html\images\PC.png"
4. 외부 경로
- 다른 사이트의 자원 주소를 참조
- 내 것도 내 것, 남의 것도 내 것!
- 관리 불가능
~ background="https://t1.daumcdn.net/daumtop_chanel/op/20200723055344399.png"
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ex05_body</title>
</head>
<body background="images/PC.png">
<!-- <body background="/client/html/images/PC.png"> -->
<!-- <body background="https://t1.daumcdn.net/daumtop_chanel/op/20200723055344399.png"> -->
안뇽
</body>
</html>'클라이언트 > HTML' 카테고리의 다른 글
| HTML 블록, 인라인 (0) | 2023.03.02 |
|---|---|
| HTML 시멘틱 마크업 (0) | 2023.03.01 |
| HTML 콘텐츠 모델 (0) | 2023.03.01 |
| HTML 태그의 종류 (0) | 2023.02.28 |
| Visual Studio Code 프로그램 설치 및 기본 기능 익히기 (0) | 2023.02.26 |
