[HTML] HTML 언어 구성 요소

💡HTML이란?

---

HTML(Hyper Text Markup Languate)은 하이퍼 텍스트 마크업 언어의 약자이다.

HTML은 프로그래밍 언어가 아니며, 무언가를 표현하는 기능을 가졌기 때문에 프레젠테이션 언어라고 부른다.

 

• Hyper Text: 링크
• Markup: 언어 표기법 <키워드>
• SGML: 메타언어

꺾새로 문법을 표시하는 방법을 Markup이라고 한다.
HTML 외에도 XTHML, XML, VoiceXML, **ML로 끝나면 대부분 비슷한 표기법을 사용한다고 생각하면 된다.

SGML은 다른 언어를 정의할 수 있는 기능을 가진 언어로, 메타언어라고 한다.
SGML로 또 다른 언어를 만들어 낼 수 있으며, 모든 마크업 언어는 SGML 언어로 만들어 낸 것이라고 할 수 있다.

SGML을 사용하기 편하게 재정의한 게 바로 HTML이다.

HTML 주관 단체

W3C

W3C (World Wide Web Consortium)은 WWW 모든 기술 생성하고 주관하는 단체이다.

Web Hypertext Application Technology Working Group (WHATWG)

하지만 현재는 주도권을 빼앗겨 웹에 대한 모든 것을 WHATWG에서 만든다.

 

HTML의 역사

팀 버너스리가 월드 와이드 웹의 하이퍼텍스트 시스템을 고안하여 개발하였다.

• HTML 1.0 ~ HTML 5 (2014년)
• HTML 4.01: 가장 대중화된 버전
• XHTML 1.0: HTML + XML > 문법을 강력하게 준수한다.
• 웹 표준화 진행(개발자)
• HTML 5
• HTML Living Standard: 버전을 명시하지 않는 버전

HTML Living Standard는 버전을 명시하지 않고 기능을 조금씩 추가 발전하기로 했다.

따라서 HTML5 이후의 HTML은 버전을 명시하지 않는다.

 

HTML 개발 환경

텍스트 편집기

• 1. 메모장
• 2. IDE > Eclipse, IntelliJ, Visual Studio..
• 3. Sublime Text, Atom, Breakets, Visual Studio Code..

Visual Studio Code가 IDE까지 잡아먹고 있는 중이다.🍗

스프링 또는 웹 개발을 Visual Studio Code로 개발하는 사람들이 많아졌다.

 

실행 환경/도구 (브라우저)

브라우저 안에 컴파일러와 실행기가 동시에 들어 있기 때문에 실행 환경으로서 브라우저를 사용할 수 있다.

• 1. 크롬
• 2. 엣지
• 3. 파이어폭스
• 4. 사파리
• 5. 모바일 브라우저***

 

HTML 문서 확장자

• *.html
• *.htm

HTML 문서 확장자로는 .html과 .htm을 사용할 수 있으며, 보통 .html을 사용하는 편이다.

 

💡HTML 언어 구성 요소

---

1. 태그(Tag), 엘리먼트(Element)

2. 속성(Attribute)

3. 텍스트(PCDATA)

4. 엔티티(Entity)

5. 주석(Comment)

6. 선언문(Declaration)

7. 외부 요소

8. 기타 등등

 

1. 태그(Tag), 엘리먼트(Element)

태그는 예약어(명령어)를 <>로 묶어놓은 요소이다.

출력될 웹페이지의 골격을 형성하며, 출력과 관계된 행동을 한다.

a. 레이아웃 형성

b. 요소를 배치

 

1.1 태그 표현 방식

a. <태그명>내용물 영역</태그명>

• <태그명>: 시작 태그
• </태그명>: 끝 태그

쌍태그라고 부르며, 영역을 가지는 태그이다.

 

b. <태그명>

• <태그명>
• <태그명></태그명>
• <태그명 />

단독태그, 빈태그(Empty Tag)라고 부른다.

 

1.2 태그 내용물 형식 (Content Type)

• <태그명>내용물</태그명>

a. 자식 태그

자식 태그는 또 다른 태그들이 내용물로 올 수 있다.

문자열이 올 수 있다.

 

b. PCDATA (Parsed Charactor Data) > 문자열

PCDATA는 문자열만 올 수 있다.

자식 태그는 올 수 없다.

 

c. Empty

Empty는 아무것도 가지지 않는다.

단독태그, 빈 태그가 올 수 있다.

 

d. Mixed

Mixed는 혼합형이다.

자식으로 태그와 문자열이 올 수 있다.

 

2. 속성(Attribute)

속성은 태그의 성질을 정의하는 요소이다.

태그가 가지는 데이터의 한 종류이다.

아래의 텍스트와 함께 설명하도록 한다.

 

속성의 표기법

a.

<시작태그 속성명="값"></끝태그>

<시작태그 속성명="값" 속성명="값" 속성명="값"></끝태그>

 

b.

<단독태그 속성명="값">

 

c.

<시작태그 속성명="값"></끝태그> : 사용 O

<시작태그 속성명='값'></끝태그> : 사용 O

<시작태그 속성명=값></끝태그> : 절대 사용 금지

 

3. 텍스트(PCDATA)

텍스트는 태그가 가지는 데이터의 한 종류이다.

 

XML File 생성

XML은 Extended Markup Language로서 확장 가능한 언어라는 뜻이다. 따라서 태그를 사용자의 마음대로 정의할 수 있다.

태그는 구조를 만드는 역할을 하며, 데이터는 시작 태그와 끝 태그 내의 영역에 담으면 된다. 이는 데이터베이스로 치면 태그가 컬럼의 역할을 하고 있는 셈이다.

 

XML의 사용

<?xml version="1.0" encoding="UTF-8"?>

<주소록>
	<회원 번호 = "1">
		<번호>1</번호>
		<이름>아이작</이름>
		<나이>24</나이>
		<주소>수원시</주소>
	</회원>
	<회원 번호 = "2">
		<번호>1</번호>
		<이름>소피아</이름>
		<나이>25</나이>
		<주소>고양시</주소>
	</회원>
</주소록>

각 데이터를 구분하기 위해 번호를 붙여 데이터를 표현할 수 있으며, 이를 속성이라고 한다. 그리고 속성 내에 텍스트(데이터)가 들어간다.

속성으로 표현하는 방법은 간략하게 표현할 수 있다는 장점이 있지만, 복잡한 내용을 표현하기 어렵다는 단점이 있다.

 

속성과 텍스트

<font color="blue" size = "7">홍길동입니다.</font>

• PCDATA: "홍길동입니다."
• 데이터 속성: color, size
• 속성 데이터: "blue", "7"

 

4. 엔티티(Entity)

엔티티는 브라우저와 정해진 약속이 되어 있는 표현을 소스에 작성하면 브라우저가 화면에 출력하기 전에 약속된 표현으로 바꿔서 출력해 주는 역할을 한다.

이런 것들을 Built-in Entity라고 한다.

 

&엔티티명;

  > 공백 1개
<
>
&
©
&#문자코드;

이 중 &nbsp, &lt, &gt는 반드시 알고 있어야 한다.

 

&lt &gt &copy

<font> A > B = true</font>
<br>
<font> A < B = false</font>
<br>
<font> A &gt; B = true</font>
<br>
<font> A &lt; B = false</font>
<br>
&copy;Copyright 2023.test
<br>

꺽새는 '>', '<'이 아닌 &lt, &gt를 사용하여 표현하며, &Copy를 이용해 ©를 표현할 수 있다.

 

5. 주석(Comment)

주석은 단일/다중 라인 모두 Ctrl + Shift + / 단축키로 표현한다.