728x90
★ HTML
- 태그들의 트리구조로 이루어져 있다. (계층구조)
- <html>
- 문서 전체를 감싸는 역할
- 루트 태그
- 스스로 하는 일은 없다 > 컨테이너 역할
★ 태그(Tag), 엘리먼트(Element)
- 예약어(명령어)를 <>로 묶어놓은 요소
- 출력될 웹페이지의 골격 형성
a. 레이아웃 형성
b. 요소를 배치
c. 콘텐츠를 출력 - 1. 태그 표현 방식
a. <태그명>내용물</태그명>
- 쌍태그
- <태그명> : 시작태그
- </태그명> : 끝태그
- 영역을 가지는 태그
b. <태그명>, <태그명 />, <태그명></태그명>
- 단독태그
- 빈태그(Empty Tag)
- 영역을 가지지 않는 태그
- 2. 태그 내용물 형식, Content Type
- <태그> 내용물 </태그>
a. 자식 태그
- 또 다른 태그를 내용물로 가진다.
- 문자열을 직접 가질 수 없다.
b. PCDATA, 문자열
- Parsed Character Data > 파싱 가능한 문자열
- 문자열을 내용물로 가진다.
- 태그를 내용물 가질 수 없다.
c. Empty
- 아무것도 가지지 않는다. > 빈태그, 단독태그
d. Mixed
- 자식으로 태그와 문자열이 모두 올 수 있다.
- 혼합형
- a + b + c
- HTML 태그의 대부분이 혼합형이다. - 3. 속성(Attribute)
- 태그의 성질의 정의하는 요소
- 태그가 가지는 데이터의 한 종류
- 표기법
a. <시작태그 속성명="값"></끝태그>
b. <단독태그 속성명="값">
c. <시작태그 속성명="값" 속성명="값" 속성명="값"></끝태그>
d. <시작태그 속성명="값"></끝태그> : 사용 O > 수업때 사용
e. <시작태그 속성명='값'></끝태그> : 사용 O
f. <시작태그 속성명=값></끝태그> : 절대 사용 X - 4. 텍스트(PCDATA)
- 태그가 가지는 데이터의 한 종류
- 용도 : 화면에 출력하는 데이터
- 5. 엔티티(Entity)
- 브라우저와 미리 약속된 표현 > 이 표현을 소스에 작성하면 브라우저는 이 표현을 그대로 출력하지 않고, 미리 약속된 표현으로 바꿔서 출력한다.
- 치환 명령어
- Built-in Entity
- &엔티티명;
-
- < less than
- > greater than
- &#문자코드;
- ex 소스코드)
<div> 이곳이 PCDATA 영역입니다. 이 영역을 부라우저가 문법 검사하는 영역입니다. 그래서 예약어가 있으면 해석을 한다. 오늘 <br> 태그를 배웠습니다. <br> 태그는 개행 문자 역할을 합니다.</div>
<div>© Copyright 2023 All rights reserved.</div>
<div>A+</div>
문자열입니다.
★ head
- <head> 태그
- 브라우저가 보는 정보
- 문서 내부 정보
- <head> 자식 태그
- 1. <meta>
- 페이지에 대한 여러가지 정보를 기술
- 2. <title>
- 문서 제목(제목 표시줄에 출력)
a. 문서의 제목으로 사용
b. 검색 엔지의 수집 대상 > 검색 결과의 제목으로 사용
c. 북마크 제목으로 사용
- 문서 제목(제목 표시줄에 출력)
- ex 소스코드)
- 1. <meta>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="author" content="홍길동"><!-- 개발자 -->
<meta name="generator" content="Eclipse 2022.03"><!-- 개발도구 -->
<meta name="keywords" content="HTML,수업예제,head태그"><!-- 키워드 -->
<meta name="description" content="HTML 강의예제입니다"><!-- 설명 -->
<title>제목입니다.</title>
</head>
<body>
홍길동입니다.
</body>
</html>
★ body
- <body> 태그
- 화면에 출력되는 모든 내용을 가지는 태그
- 혼합형
- <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) > 00~FF
- 256 x 256 x 256 = 16,777,216
- #RRGGBB
- #000000(검정색) ~ #FFFFFF(흰색)
- HTML 자원 경로 표현 방법
- . : 현재 문서가 포함된 폴더 > 현재 폴더
- .. : 부모 폴더
- 이름 : 자식 폴더
- 자바 구분자 : \
- 웹 구분자 : /
- 1. 상대 경로
- 현재 페이지가 있는 폴더를 기준으로 표현하는 방법
- . : 현재 폴더
- background = "images/dog.jpg"
- background = "./images/dog.jpg"
- 2. 절대 경로
- 고정된 기준점을 사용해서 표현하는 방법
- '/'으로 시작
- '/client' == webapp 폴더
- /client/html/images/dog.jpg
- 3. 로컬 경로
- "C:\class\code\client\ClientTest\src\main\webapp\html\images\dog.jpg"
- 지원 안함
- 4. 외부 경로
- 다른 사이트의 자원의 주소를 참조
- "https://t1.daumcdn.net/daumtop_chanel/op/20200723055344399.png"
- 내것도 내것!! 남의것도 내것!!
- 관리 불가능!
- 소스코드 ex)
- 1. bgcolor
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<!-- <body bgcolor="E98D44">-->
<body background="https://t1.daumcdn.net/daumtop_chanel/op/20200723055344399.png">
</body>
</html>
★ <p> 태그
- <p>, paragraph
- 문단 태그
- 문단을 표현(=텍스트 집합)
- 쌍태그(<p>문단의 내용</p>)
- 혼합용(텍스트 + 자식태그)
- p.align 속성
- 내용물의 수평 정렬
- horizontal alignment
- 열거형 > left|center|right|justify(양쪽정렬)
- 사용 ex)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<p align="justify">
더 뉴 메르세데스-AMG EQE는 고성능 브랜드 메르세데스-AMG가 두 번째로 선보이는 고성능 전기 세단이다. AMG의 전용 전기 듀얼 모터와 함께 사운드, 외관 및 인테리어 디자인, 각종 옵션 등에 AMG 전용 솔루션이 적용된 것이 특징이다.
</p>
<p>
박양원 메르세데스-벤츠코리아 제품전략기획팀 상무는 “메르세데스-벤츠는 전동화 전략에 따라 2022년 모든 세그먼트에 전기차를 완성한 이후 전기차 포트폴리오를 고성능 브랜드 AMG로까지 확장해 나가고 있다”며 “더 뉴 AMG EQE는 메르세데스-AMG의 기술력과 독보적 감성으로 전기차에 스포티함과 역동적인 주행 경험을 결합해 전기 주행 퍼포먼스의 미래를 제시할 것”이라고 말했다.
</p>
<p>
더 뉴 메르세데스-AMG EQE 53 4MATIC+는 최신 리튬 이온 기술을 사용해 제조된 90.56kWh의 고성능 배터리가 탑재된다. 1회 충전 시 최대 354km(국내 인증 기준)를 주행할 수 있으며, 최대 170kW까지의 급속 충전을 지원한다. AMG 전용 전기 모터는 강력한 파워, 효율성 및 소음 안정의 최적의 균형을 이룬다.
</p>
<!-- 태그는 용도에 맞게 사용할 것 -->
더 뉴 메르세데스-AMG EQE는 고성능 브랜드 메르세데스-AMG가 두 번째로 선보이는 고성능 전기 세단이다. AMG의 전용 전기 듀얼 모터와 함께 사운드, 외관 및 인테리어 디자인, 각종 옵션 등에 AMG 전용 솔루션이 적용된 것이 특징이다.
<br><br>
박양원 메르세데스-벤츠코리아 제품전략기획팀 상무는 “메르세데스-벤츠는 전동화 전략에 따라 2022년 모든 세그먼트에 전기차를 완성한 이후 전기차 포트폴리오를 고성능 브랜드 AMG로까지 확장해 나가고 있다”며 “더 뉴 AMG EQE는 메르세데스-AMG의 기술력과 독보적 감성으로 전기차에 스포티함과 역동적인 주행 경험을 결합해 전기 주행 퍼포먼스의 미래를 제시할 것”이라고 말했다.
<br><br>
더 뉴 메르세데스-AMG EQE 53 4MATIC+는 최신 리튬 이온 기술을 사용해 제조된 90.56kWh의 고성능 배터리가 탑재된다. 1회 충전 시 최대 354km(국내 인증 기준)를 주행할 수 있으며, 최대 170kW까지의 급속 충전을 지원한다. AMG 전용 전기 모터는 강력한 파워, 효율성 및 소음 안정의 최적의 균형을 이룬다.
</body>
</html>728x90
'웹페이지' 카테고리의 다른 글
| HTML STEP 4 - STYLE (0) | 2023.04.11 |
|---|---|
| HTML STEP 3 - HR (0) | 2023.04.11 |
| HTML STEP 2 - Heading (0) | 2023.04.11 |
| Eclipse Tomcat 연동 (0) | 2023.04.10 |
| HTML - 기초 환경 셋팅 (0) | 2023.04.10 |
728x90
★ HTML
- 태그들의 트리구조로 이루어져 있다. (계층구조)
- <html>
- 문서 전체를 감싸는 역할
- 루트 태그
- 스스로 하는 일은 없다 > 컨테이너 역할
★ 태그(Tag), 엘리먼트(Element)
- 예약어(명령어)를 <>로 묶어놓은 요소
- 출력될 웹페이지의 골격 형성
a. 레이아웃 형성
b. 요소를 배치
c. 콘텐츠를 출력 - 1. 태그 표현 방식
a. <태그명>내용물</태그명>
- 쌍태그
- <태그명> : 시작태그
- </태그명> : 끝태그
- 영역을 가지는 태그
b. <태그명>, <태그명 />, <태그명></태그명>
- 단독태그
- 빈태그(Empty Tag)
- 영역을 가지지 않는 태그
- 2. 태그 내용물 형식, Content Type
- <태그> 내용물 </태그>
a. 자식 태그
- 또 다른 태그를 내용물로 가진다.
- 문자열을 직접 가질 수 없다.
b. PCDATA, 문자열
- Parsed Character Data > 파싱 가능한 문자열
- 문자열을 내용물로 가진다.
- 태그를 내용물 가질 수 없다.
c. Empty
- 아무것도 가지지 않는다. > 빈태그, 단독태그
d. Mixed
- 자식으로 태그와 문자열이 모두 올 수 있다.
- 혼합형
- a + b + c
- HTML 태그의 대부분이 혼합형이다. - 3. 속성(Attribute)
- 태그의 성질의 정의하는 요소
- 태그가 가지는 데이터의 한 종류
- 표기법
a. <시작태그 속성명="값"></끝태그>
b. <단독태그 속성명="값">
c. <시작태그 속성명="값" 속성명="값" 속성명="값"></끝태그>
d. <시작태그 속성명="값"></끝태그> : 사용 O > 수업때 사용
e. <시작태그 속성명='값'></끝태그> : 사용 O
f. <시작태그 속성명=값></끝태그> : 절대 사용 X - 4. 텍스트(PCDATA)
- 태그가 가지는 데이터의 한 종류
- 용도 : 화면에 출력하는 데이터
- 5. 엔티티(Entity)
- 브라우저와 미리 약속된 표현 > 이 표현을 소스에 작성하면 브라우저는 이 표현을 그대로 출력하지 않고, 미리 약속된 표현으로 바꿔서 출력한다.
- 치환 명령어
- Built-in Entity
- &엔티티명;
-
- < less than
- > greater than
- &#문자코드;
- ex 소스코드)
<div> 이곳이 PCDATA 영역입니다. 이 영역을 부라우저가 문법 검사하는 영역입니다. 그래서 예약어가 있으면 해석을 한다. 오늘 <br> 태그를 배웠습니다. <br> 태그는 개행 문자 역할을 합니다.</div>
<div>© Copyright 2023 All rights reserved.</div>
<div>A+</div>
문자열입니다.
★ head
- <head> 태그
- 브라우저가 보는 정보
- 문서 내부 정보
- <head> 자식 태그
- 1. <meta>
- 페이지에 대한 여러가지 정보를 기술
- 2. <title>
- 문서 제목(제목 표시줄에 출력)
a. 문서의 제목으로 사용
b. 검색 엔지의 수집 대상 > 검색 결과의 제목으로 사용
c. 북마크 제목으로 사용
- 문서 제목(제목 표시줄에 출력)
- ex 소스코드)
- 1. <meta>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="author" content="홍길동"><!-- 개발자 -->
<meta name="generator" content="Eclipse 2022.03"><!-- 개발도구 -->
<meta name="keywords" content="HTML,수업예제,head태그"><!-- 키워드 -->
<meta name="description" content="HTML 강의예제입니다"><!-- 설명 -->
<title>제목입니다.</title>
</head>
<body>
홍길동입니다.
</body>
</html>
★ body
- <body> 태그
- 화면에 출력되는 모든 내용을 가지는 태그
- 혼합형
- <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) > 00~FF
- 256 x 256 x 256 = 16,777,216
- #RRGGBB
- #000000(검정색) ~ #FFFFFF(흰색)
- HTML 자원 경로 표현 방법
- . : 현재 문서가 포함된 폴더 > 현재 폴더
- .. : 부모 폴더
- 이름 : 자식 폴더
- 자바 구분자 : \
- 웹 구분자 : /
- 1. 상대 경로
- 현재 페이지가 있는 폴더를 기준으로 표현하는 방법
- . : 현재 폴더
- background = "images/dog.jpg"
- background = "./images/dog.jpg"
- 2. 절대 경로
- 고정된 기준점을 사용해서 표현하는 방법
- '/'으로 시작
- '/client' == webapp 폴더
- /client/html/images/dog.jpg
- 3. 로컬 경로
- "C:\class\code\client\ClientTest\src\main\webapp\html\images\dog.jpg"
- 지원 안함
- 4. 외부 경로
- 다른 사이트의 자원의 주소를 참조
- "https://t1.daumcdn.net/daumtop_chanel/op/20200723055344399.png"
- 내것도 내것!! 남의것도 내것!!
- 관리 불가능!
- 소스코드 ex)
- 1. bgcolor
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<!-- <body bgcolor="E98D44">-->
<body background="https://t1.daumcdn.net/daumtop_chanel/op/20200723055344399.png">
</body>
</html>
★ <p> 태그
- <p>, paragraph
- 문단 태그
- 문단을 표현(=텍스트 집합)
- 쌍태그(<p>문단의 내용</p>)
- 혼합용(텍스트 + 자식태그)
- p.align 속성
- 내용물의 수평 정렬
- horizontal alignment
- 열거형 > left|center|right|justify(양쪽정렬)
- 사용 ex)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<p align="justify">
더 뉴 메르세데스-AMG EQE는 고성능 브랜드 메르세데스-AMG가 두 번째로 선보이는 고성능 전기 세단이다. AMG의 전용 전기 듀얼 모터와 함께 사운드, 외관 및 인테리어 디자인, 각종 옵션 등에 AMG 전용 솔루션이 적용된 것이 특징이다.
</p>
<p>
박양원 메르세데스-벤츠코리아 제품전략기획팀 상무는 “메르세데스-벤츠는 전동화 전략에 따라 2022년 모든 세그먼트에 전기차를 완성한 이후 전기차 포트폴리오를 고성능 브랜드 AMG로까지 확장해 나가고 있다”며 “더 뉴 AMG EQE는 메르세데스-AMG의 기술력과 독보적 감성으로 전기차에 스포티함과 역동적인 주행 경험을 결합해 전기 주행 퍼포먼스의 미래를 제시할 것”이라고 말했다.
</p>
<p>
더 뉴 메르세데스-AMG EQE 53 4MATIC+는 최신 리튬 이온 기술을 사용해 제조된 90.56kWh의 고성능 배터리가 탑재된다. 1회 충전 시 최대 354km(국내 인증 기준)를 주행할 수 있으며, 최대 170kW까지의 급속 충전을 지원한다. AMG 전용 전기 모터는 강력한 파워, 효율성 및 소음 안정의 최적의 균형을 이룬다.
</p>
<!-- 태그는 용도에 맞게 사용할 것 -->
더 뉴 메르세데스-AMG EQE는 고성능 브랜드 메르세데스-AMG가 두 번째로 선보이는 고성능 전기 세단이다. AMG의 전용 전기 듀얼 모터와 함께 사운드, 외관 및 인테리어 디자인, 각종 옵션 등에 AMG 전용 솔루션이 적용된 것이 특징이다.
<br><br>
박양원 메르세데스-벤츠코리아 제품전략기획팀 상무는 “메르세데스-벤츠는 전동화 전략에 따라 2022년 모든 세그먼트에 전기차를 완성한 이후 전기차 포트폴리오를 고성능 브랜드 AMG로까지 확장해 나가고 있다”며 “더 뉴 AMG EQE는 메르세데스-AMG의 기술력과 독보적 감성으로 전기차에 스포티함과 역동적인 주행 경험을 결합해 전기 주행 퍼포먼스의 미래를 제시할 것”이라고 말했다.
<br><br>
더 뉴 메르세데스-AMG EQE 53 4MATIC+는 최신 리튬 이온 기술을 사용해 제조된 90.56kWh의 고성능 배터리가 탑재된다. 1회 충전 시 최대 354km(국내 인증 기준)를 주행할 수 있으며, 최대 170kW까지의 급속 충전을 지원한다. AMG 전용 전기 모터는 강력한 파워, 효율성 및 소음 안정의 최적의 균형을 이룬다.
</body>
</html>728x90
'웹페이지' 카테고리의 다른 글
| HTML STEP 4 - STYLE (0) | 2023.04.11 |
|---|---|
| HTML STEP 3 - HR (0) | 2023.04.11 |
| HTML STEP 2 - Heading (0) | 2023.04.11 |
| Eclipse Tomcat 연동 (0) | 2023.04.10 |
| HTML - 기초 환경 셋팅 (0) | 2023.04.10 |
