🐧HTML(Hyper Text MarkUp Language)
◈ HTML(Hyper Text MarkUp Language) : 태그(Tag)를 사용하여 웹문서를 구조적으로 표현하기 위한 언어
→ 브라우저 엔진에 의해 해석되어 실행(출력)되는 언어
→ CSL(Client Script Language) : HTML,CSS,JavaScript
◈ 태그를 사용하여 웹문서(HTML File) 작성 - 태그는 대소문자 미구분
◈ 시작태그와 종료태그가 하나의 짝으로 구성 - HTML 태그는 독립태그(시작태그만 있음) 존재
◈ 시작태그와 종료태그 사이에 하위태그 또는 태그내용 표현
◈ 시작태그에는 속성과 속성값을 사용하여 태그를 다양하게 표현
📌DOCTYPE : 웹문서의 종류를 표현 - HTML5를 이용하여 작성된 웹문서
<!DOCTYPE html>
📌html 태그 : 웹문서(HTML File)을 작성하기 위해 사용하는 최상위 태그(Root Tag)
→ 하위태그 : head, body
◈ 최상위 태그는 무조건 하나 있어야함<html>
📌head 태그 : 웹문서(HTML File)에 대한 정보를 제공하기 위한 태그
<head>
📌meta 태그 : 웹문서에 대한 부가적인 정보(MetaData)를 태그 속성과 속성값으로 제공하는 태그
◈ charset 속성 : 웹문서에 대한 문자형식(CharacterSet - 인코딩 : Encoding) 을 속성값으로 설정
◈ 브라우저가 웹문서를 해석할 때 사용하는 문자의 인코딩 방식을 제공
◈ 기본 속성값 : ISO-8859-1(서유럽어)
◈ euc-kr : 한글 관련 인코딩(완성형), utf-8 : 한글 관련 인코딩(조합형)<meta charset="UTF-8">
─────────────────────────────────────
◈ meta charset="UTF-8"이 없을경우
📌title : 웹문서의 제목을 설정하는 태그
<title>HTML</title>
📌body : 브라우저 출력영역(Document)에 박스모델(BoxModel)을 출력하기 위한 태그
→ 하위태그 : h1, div, p, img, span, form 등 - 웹문서를 구성하는 박스모델 태그
→ 박스모델 태그는 블럭 레벨 태그와 인라인 레벨 태그로 구분
◈ 블럭 레벨 태그(Block Level Tag) : 하나의 태그가 하나의 라인을 모두 사용하는 태그
→ div, h1, p, ol, ul, li 등
◈ 인라인 레벨 태그(Inline Level Tag) : 하나의 태그가 라인 일부분을 사용하는 태그
→ span, img, input, select 등
◈ 인라인 레벨 태그의 하위태그로 블럭 레벨 태그 사용 불가능<body>📍hn 태그 : 태그내용을 문단의 제목을 표현하는 태그 - n : 1~6 - 제목크기
◈ align 속성 : 태그내용을 정렬하기 위한 속성
◈ title 속성 : 툴팁 기능을 이용하여 설명문을 제공하는 속성<h1 align="left" title="문단의 제목을 표현합니다.">문단 제목-1</h1> <h2 align="right">문단 제목-1</h2> <h3 align="center">문단 제목-1</h3> <h4 align="justify">문단 제목-1</h4> <h5>문단 제목-1</h5> <h6>문단 제목-1</h6>
※툴팁 : 문단 제목-1에 마우스 커서 올려놓으면 "문단의 제목을 표현합니다." 상자가 나옴
─────────────────────────────────────📍hr 태그 : 수평선(구분선) 표현
◈ width 속성 : 박스모델의 폭을 설정하기 위한 속성 - 속성값 : 크기
◈ 위치 또는 크기의 단위 : px(기본) - 절대값, % - 상대값<hr width="600"> <hr width="50%">
※ 절대값은 브라우저 크기가 줄어들어도 크기 고정
※ 상대은 브라우저 크기가 줄어들면 크기 변경
─────────────────────────────────────📍p 태그 : 태그내용으로 문단을 표현하는 태그
→ 태그내용이 박스모델을 벗어난 경우 자동으로 줄바꿈 처리
→ 웹문서에서 엔터(Enter)로 줄바꿈 처리를 할 수 없으며 다수의 공백은 하나의 공백으로 처리📍b 태그 : 태그 내용을 굵게 출력하기 위한 태그
📍i 태그 : 태그 내용을 기울려 출력하기 위한 태그
📍br 태그 : 줄바꿈 처리하기 위한 태그
<p><b>CSL(Client Script Language - HTML, CSS, JavaScript)</b>를 배우고 <i>SSL(Server Script Language - Servlet JSP)</i>를 공부할 것입니다.</p> <p>HTML은 웹문서를 구조적으로 표현하며<br>CSS는 웹문서를 디자인하는 언어입니다.</p>
─────────────────────────────────────📍HTML에서 사용 불가능한 문자는 회피문자(Escape Character)로 표현
→ (공백), &(&), <(<), >(>), "(") 등<p><홍길동>님 & <임꺽정>님, 반갑습니다.</p> <p><홍길동>님 & <임꺽정>님, 반갑습니다.</p>
─────────────────────────────────────📍pre 태그 : 태그내용을 그대로 출력하는 태그
<pre>홍길동님, 만나서 반갑습니다. 다음에 다시 만나요.</pre>
─────────────────────────────────────📍★div 태그 : 범위(영역)을 설정하기 위한 블럭 레벨 태그
◈ style 속성 : 박스모델의 스타일을 설정하기 위한 속성
속성값으로 CSS 스타일 관련 속성과 속성값 설정📍span 태그 : 범위(영역)을 설정하기 위한 인라인 레벨 태그
<div style="font-size: 24px">오늘은 <span style="color: red">2022년 11월 8일 화요일입니다.</span> 내일은 <span style="color: green;">2022년 11월 9일 수요일</span>입니다.</div>
