HTML(Hyper Text MarkUp Language) : 웹문서를 구조적으로 표현하기 위한 언어
브라우저 엔진에 의해 해석되어 실행(출력)되는 언어 CSL(Client Script Language) :HTML,CSS,JavaScript
특징
태그(Tag)를 사용하여 웹문서 작성-태그는 대소문자 미구분
시작태그와 종료태그가 하나의 짝으로 구성 / HTML 태그는 독립태그 존재
시작태그와 종료태그 사이에 하위태그 또는 태그내용 표현
시작태그는 속성과 속성값을 사용하여 태그를 다양하게 표현
태그
DOCTYPE : 웹문서의 종류를 표현 - HTML5 이용하여 작성된 웹문서
<!DOCTYPE html>HTML 태그 : HTML 파일을 작성하기 위해 사용하는 최상위 태그(RootTag) 하위태그 : head,body
<html>head태그 : 웹문서(HTML FIle)에 대한 정보를 제공하기 위한 태그 > 하위태크 : meta, title, style, script, link 등
<head>meta 태그 : 웹문서에 대한 부가적인 정보(MetaData)를 속성과 속성값으로 제공
charset 속성 : 웹문서에 대한 문자형식(CharacterSet - 인코딩 : Encoding)을 속성값으로 설정
브라우저가 웹문서를 해석할 때 사용하는 문자의 인코딩 방식을 제공
기본 속성값 : ISO-8859-1(서유럽어(영국어 - 영어))
euc-kr : 한글 관련 인코딩(완성형), utf-8 : 한글 관련 인코딩(조합형)
<meta charset="UTF-8">title : 웹문서의 제목을 설정하는 태그
<title>HTML</title>
</head>body : 브라우저 출력영역(Document)에 ✨박스모델(BoxModel)를 출력하기 위한 태그
하위태그 : h1, div, p, img, span, form 등 - 웹문서를 구성하는 박스모델 태그
✨박스모델 태그는 블럭 레벨 태그와 인라인 레벨 태그로 구분
블럭 레벨 태그(Block Level Tag) : 하나의 태그가 하나의 라인을 모두 사용하는 태그 - div, h1, p, ol, ul, li 등
인라인 레벨 태그(Inline Level Tag) : 하나의 태그가 라인 일부분을 사용하는 태그 - span, imh, input, select 등
인라인 레벨 태그의 하위태그로 블럭 레벨 태그 사용 불가능
<body>
<!-- 시맨틱 태그(Semantic Tag) : 웹문서를 구조적으로 표현하기 위해 의미를 부여한 태그 -->
<!-- > header(머릿부), nav(메뉴), section(몸체부), article(본문), aside(보조문), footer(꼬릿부) -->
<!-- > 시맨틱 태그를 사용하지 않아도 웹문서 작성 가능 -->
<!-- > 시맨틱 태그를 사용하여 의미있는 요소를 표현하여 누구나 쉽게 의미를 전달받을 수 있도록 작성 - 웹퍼블리싱 -->
<!-- header 태그 : 웹문서의 머릿부를 표현하기 위한 태그 -->
<header>
<nav></nav>
</header>
<!-- hn 태그 : 태그내용으로 문단의 제목을 표현하는 태그 - n : 1~6 - 제목크기 -->
<!-- align 속성 : 태그내용을 정렬하기 위한 속성 - 속성값 : left(기본), right, center, justify(양쪽) -->
<!-- title 속성 : 툴팁 기능을 이용하여 설명문(속성값)을 제공하는 속성 -->
<h1 align="left" title="문단의 제목을 표현합니다.">문단 제목-1</h1>
<h2 align="right">문단 제목-2</h2>
<h3 align="center">문단 제목-3</h3>
<h4 align="justify">문단 제목-4</h4>
<h5>문단 제목-5</h5>
<h6>문단 제목-6</h6>
<!-- hr 태그 : 수평선(구분선) 표현 -->
<!-- width 속성 : 박스모델의 폭을 설정하기 위한 속성 - 속성값 : 크기 -->
<!-- 크기(위치)를 표현하는 단위 : px(기본) - 절대값, %(백분율) - 상대값 -->
<hr width="600">
<!-- p 태그 : 태그내용으로 문단을 표현하는 태그 -->
<!-- => 태그내용이 박스모델의 폭을 벗어난 경우 자동으로 줄바꿈 처리 -->
<!-- => 웹문서에서 엔터(Enter)로 줄바꿈 처리를 할수 없으며 다수의 공백은 하나의 공백으로 처리 -->
<!-- b 태그 : 태그내용을 굵게 출력하기 위한 태그 - 강조 -->
<!-- i 태그 : 태그내용을 기울려 출력하기 위한 태그 - 강조 -->
<p><b>CSL(Client Script Language - HTML, CSS, JavaScript)</b>를 배우고
<i>SSL(Server Script Language - Servlet, JSP)</i>를 공부할 것입니다.</p>
<!-- br 태그 : 줄바꿈 처리하기 위한 태그 -->
<p>HTML은 웹문서를 구조적으로 표현하며<br>CSS는 웹문서를 디자인하는 언어입니다.</p>
<!-- HTML에서 사용 불가능한 문자는 회피문자(Escape Character)로 표현 -->
<!-- => (공백), &(&), <(<), >(>), "(") 등 -->
<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>
</body>