[HTML & CSS] 1. HTML & HTML 태그

18 분 소요

`HTML` (`HyperText Mark-up Language`) : 웹 문서의 구조를 기술하는 마크업 언어

하이퍼링크 (hyperlink) : 문서 내 어떤 요소와 다른 요소 간의 비선형적 (nonlinear) 연결
하이퍼텍스트 (hypertext) : 하이퍼링크를 통해 상호 연결되어 네트워크처럼 구성된 문서

<html>
<head>
	<div style="color: blue; font-size: 15px;">
		Hello World!
	</div>
</head>
</html>

Hello World!

HTML 요소 (HTML Elements) : HTML 문서나 웹 페이지를 이루는 개별적인 부분
- HTML 태그 (HTML Tags) <tag></tag> : 요소의 시작과 끝을 나타내 문서의 구조를 명시하는 마크업 기호
  - HTML 속성 (HTML Attributes) <tag element=""> : 여는 태그 내에서 명령어를 구체화하는 속성
    - HTML 변수 (HTML Arguments) <tag element="value"> : 태그 내의 속성에 해당되는 인자
HTML 내용 (HTML Contents) : HTML 문서를 통해 화면에 표시될 내용

# `HTML` 전역 속성 (`HTML Global Attributes`) : 모든 `HTML` 요소에서 사용 가능한 속성

`class`와 `id` : `CSS`나 `JavaScript`에서 요소를 선택하거나 접근할 때 사용하는 속성

클래스 (class="") : HTML 문서에서 정의된 요소의 별칭
아이디 (id="") : HTML 문서에서 정의된 고유한 식별자

<div class="class">
	<div id="id">
	  class & id
	</div>
</div>

`lang` : 웹 문서의 텍스트가 어떤 언어로 작성되었는지 나타내는 속성

<p lang="ko">한글</p>
<p lang="en">english</p>

한글

english

`style` : 요소에 적용할 `CSS`을 나타내는 속성

<div style="color: white; font-size: 15px; background-color: black;">
	<a href="https://pocj8ur4in.github.io" target="_blank" title="pocj8ur4in">
  	  pocj8ur4in
	</a>
</div>

pocj8ur4in

`title` : 요소의 설명을 나타내는 속성

<p title="pocj8ur4in">pocj8ur4in</p>

pocj8ur4in

# 범위 관련 `HTML` 태그

`<html></html>` : HTML으로 작성된 문서임을 선언하는 태그

<!DOCTYPE html> : 마크업 언어에서의 문서 형식을 정의하는 태그
- DTD 태그 (Document Type Definition)
- 웹 브라우저의 렌더링 엔진이 관용 모드 (Quirks Mode)가 아닌 표준 모드로 렌더링
- HTML5`` :<!DOCTYPE html>```으로 선언

<!DOCTYPE html>
<html lang="ko">
...
</html>

`<head></head>` : 웹 문서의 속성을 선언하는 태그

실제 웹 브라우저 화면 상에는 출력되지 않는 HTML 문서의 정보들을 넣음

<!DOCTYPE html lang="ko">
<html lang="ko">
<head>
...
</head>
...
</html>

`<body></body>` : 웹 문서의 모양을 선언하는 태그

실제 웹 브라우저 화면 상에는 출력되는 HTML 문서의 레이아웃을 넣음

<!DOCTYPE html>
<html lang="ko">
...
<body>
...
</body>
</html>

# 메타 정보 관련 태그

메타 정보 (meta data) : 웹 서버와 웹 브라우저 간 상호 교환되는 정보

`<title></title>` : 웹 문서의 제목을 선언하는 태그

브라우저의 제목 표시줄이나 페이지 탭에 표시되는 제목을 출력

<!DOCTYPE html>
<html lang="ko">
<head>
	<title>웹 문서의 제목</title>
</head>
</html>

`<base />` : 웹 문서에 포함된 모든 상대 `URL`들에 대한 기준 `URL`를 선언하는 태그

상대 URL를 사용하는 다른 HTML 요소보다 앞에 위치해야 함
한 문서에 하나의 <base>만을 사용 가능
문서 내에 <base>가 존재하지 않으면, 해당 문서의 기준 URL는 (현재 위치).(상대 URL)

<!DOCTYPE html>
<html lang="ko">
<head>
	<base href="기준 URL (절대 경로, 상대 경로 모두 가능)"
	target="_self (현재 창에서 열기) | _blank (새로운 창에서 열기)" />
</head>
</html>

`<link />` : 현재 웹 문서와 외부 리소스 간의 관계를 정의하는 태그

HTML, CSS, 아이콘 등을 가져옴

link 속성	설명
rel	현재 웹 문서와 외부 소스 간의 관계
href	외부 소스의 주소
type	외부 소스의 타입

<!DOCTYPE html>
<html lang="ko">
<head>
<link
	rel="manifest"			<!--? 현재 웹 문서와 웹 익스텐션이 포함하는 manifest.json을 연결할 때 -->
	href="manifest.json"/>
<link
	rel="canonical"			<!--? 검색 엔진을 위한 대표 URL를 설정하는 rel 변수 -->
	href="대표 URL"/>			<!--? 웹 문서 내 URL는 다르나 동일한 내용의 웹 문서가 있을 때 사용 -->
<link
	rel="shortcut icon"		<!--? 브라우저 탭에 표시될 아이콘을 설정하는 rel 변수 -->
	href="PUBLIC_URL%/favicon.ico"
	type="image/x-icon"
	sizes="16x16"/>
<link					<!--? 애플 메타 태그 (apple meta tag) -->
	rel="apple-touch-icon"		<!--? '홈 화면에 추가' 기능을 사용할 때 표시될 웹 사이트의 아이콘을 설정하는 rel 변수 -->
	href="%PUBLIC_URL%/img/apple-icon-57.png"
	sizes="12x57"/>
<link
	rel="apple-touch-startup-icon"	<!--? '홈 화면에 추가' 기능을 사용할 때 로딩 시 스타트업 이미지을 설정하는 rel 변수 -->
	sizes="320x460"			<!--? 단, 이미지의 크기가 각 기기에 맞게끔 정확히 맞춰져 있어야 제대로 화면에 표시 -->
	href="%PUBLIC_URL%/img/apple-icon-320.png"/>
</head>
</html>

`<style></style>` : 현재 웹 문서의 스타일 정보를 정의하는 태그

CSS 선택자, 속성, 값을 설정

style 속성	설명
type	외부 소스의 타입

<!DOCTYPE html>
<html lang="ko">
<head>
<style>
	body { background-color: #fff; }
	div { color: #000; }
</>
</head>
</html>

`<meta />` : 기타 메타데이터 요소들을 선언하는 태그

검색 엔진 등이 웹 페이지를 읽을 때 해당 서비스에서 이 페이지를 어떻게 표시할지 설명

meta 태그의 속성 값	설명
name	메타 정보의 이름 선언 : 웹 서버가 웹 브라우저의 요청에 대해 응답할 정보들을 지정하는 속성
http-equiv	HTTP 문서의 초기 정보 선언 : 웹 서버가 웹 문서 내에 HTML 응답 헤더를 넣어 웹 브라우저가 초기 정보를 지정하는 속성
content	메타 정보의 내용 선언 : name 변수와 http-equiv 태그를 선언할 때 같이 포함되어야 할 내용을 지정하는 속성

<!DOCTYPE html>
<html lang="ko">
<head>
 <meta
 name="description"				<!--? 웹 브라우저의 검색 결과에 표시될 웹 문서의 설명을 선언하는 name 변수 -->
 content="설명"/>				<!--? content 값은 공백을 포함해 최대 150글자여야 함 -->
   
 <meta
 name="keywords"				<!--? 웹 브라우저의 검색 엔진에 의해 검색될 검색 키워드를 선언하는 name 변수 -->
 content="키워드1, 키워드2,..."/>
    
 <meta
 name="date"					<!--? 웹 문서가 작성된 날짜를 선언하는 name 변수 -->
 content="2022-09-21T17:38:06+09:00"/>		<!--? content 값은 "연도-월-일T시:분:초+(GMT)" 형식으로 작성 -->
						<!--? GMT는 그리니치 표준시와 현 국가/지역 사이의 시차를 의미 -->

 <meta
 name="robots"					<!--? 검색 로봇을 제어하는 name 변수 -->
 content="robots의 content 변수1,..."/>		<!--? Index : 해당 문서를 포함해 링크가 걸린 곳을 수집 대상으로 지정 -->
						<!--? Noindex : 해당 문서를 수집 대상에서 제외 -->
						<!--? Follow : 해당 문서를 수집 대상으로 지정 -->
						<!--? Nofollow : 해당 문서를 포함해 링크가 걸린 곳을 수집 대상에서 제외 -->
						<!--? All : 'Index, Follow'와 동일 -->
						<!--? None : 'Noindex, Nofollow'와 동일 -->
 <meta
 name="viewport"				<!--? 모든 장치에서 웹 문서가 잘 보이도록 뷰 포트를 설정하는 name 변수 -->
 content="width=device-width,
 initial-scale=1.0"/>

 <meta						<!--? twitter : 트위터의 '미리보기'을 설정하는 name 변수 -->
 name="twitter:card"				<!--? twitter:card : 트위터 미리보기를 표시 -->
 content="summary"/>
    
 <meta
 name="twitter:url"				<!--? twitter:url : 트위터 미리보기에서 표시될 웹 페이지 주소 -->
 content="website_url"/>
    
 <meta
 name="twitter:title"				<!--? twitter:title : 트위터 미리보기에서 표시될 웹 페이지 제목 -->
 content="website_name"/> 
    
 <meta
 name="twitter:description"			<!--? twitter:description : 트위터 미리보기에서 표시될 웹 페이지 설명 -->
 content="website_description"/> 
    
 <meta
 name="twitter:image"				<!--? twitter:image : 트위터 미리보기에서 표시될 웹 페이지 이미지 -->
 content="website_image"/>
    
 <meta						<!--? apple-mobile-web-app : 사파리 '홈 화면에 추가'을 설정하는 name 변수 -->
 name="apple-mobile-web-app-title"		<!--? 홈 화면에 추가 기능을 사용할 때 표시될 웹 사이트의 이름 -->
 content="website_name"/>
    
 <meta
 name="apple-mobile-web-app-capable"		<!--? 홈 화면에 추가 기능을 사용할 때 브라우저의 UI 사용 여부 -->
 content="yes"/>
    
 <meta
 name="apple-mobile-web-app-status-bar-style"	<!--? 홈 화면에 추가 기능을 사용할 때 표시될 상태바의 색상 -->
 content="black-translucent"/> 			<!--? default : 회색, black : 검정, black-translucent : 반투명 -->
    
 <meta
 http-equiv="X-UA-Compatible"			<!--? 웹 문서를 렌더링할 IE 버전을 명시해 웹 호환성을 지정하는 http-equiv 변수 -->
 content="X-UA-Compatible의 content 변수"/>	<!--? IE=5,7,8,EmulateIE7,EmulateIE8 : 각 버전에 해당하는 렌더링 방식 사용 -->
						<!--? IE=edge : 항상 최신 표준 모드로 렌더링 -->
						<!--? IE=edge, chrome=1: ~, Chrome이 설치되어 있다면 Chrome으로 렌더링 -->
	
 <meta
 charset="문자 인코딩 방식"/>			<!--? 웹 브라우저의 문자 인코딩 방식 ('호환성 보기') 을 지정하는 http-equiv 변수 -->
						<!--? EUC-KR (ISO-2022-KR) : ISO-숫자 타입 문자 인코딩 (한글을 2비트로 변환) -->
						<!--? UTF-8,16,32 : 유니코드 변환 포맷 인코딩 (모든 문자를 8,16,32비트로 변환) -->

 <meta
 http-equiv="content-security-policy"		<!--? XSS, 데이터 삽입 공격을 대비해 웹 문서 컨텐츠 정책을 명시하는 http-equiv 변수 -->
 content="CSP 지시문"/>				<!--? default-src : 모든 컨텐츠는 현재 도메인에서만 제공 (디폴트 설정) -->
						<!--? connect-src : 연결 가능한 URL 제한 -->
						<!--? script-src : 스크립트 관련 권한 집합 제어 -->
						<!--? style-src : 스타일시트 관련 권한 집합 제어 -->
						<!--? img-src : 이미지 관련 권한 집합 제어 -->
						<!--? font-src : 웹 글꼴을 제공할 수 있는 URL 지정 -->
						<!--? frame-src : 상위 iframe 도메인에서 하위 iframe 도메인을 확인하고 제어 -->
    
 <meta
 http-equiv="content-security-policy"
 content="CSP 지시문 CSP 옵션"/>			<!--? *.trusted.com : 접근 허용할 도메인 지정 -->
						<!--? 'none' : 모든 도메인 차단 -->
						<!--? 'self' : 현재 도메인만 허용 -->
						<!--? 'unsafe-inline' : 소스 코드 내 인라인 자바스크립트 및 CSS 허용 -->
						<!--? 'nonce-암호화된 문자' : 암호화된 방식으로 인라인 자바스크립트 및 CSS 허용 -->

 <meta
 http-equiv="content-script-type"		<!--? 웹 문서에 사용된 프로그래밍 언어를 명시하는 http-equiv 변수 -->
 content="text/프로그래밍 언어"/>
    
 <meta
 http-equiv="default-style"			<!--? 웹 문서에 우선적으로 적용할 스타일 시트를 지정하는 http-equiv 변수 -->
 content="스타일시트"/>
    
 <meta
 http-equiv="refresh"				<!--? 웹 문서를 새로고침하는 시간 간격을 지정하는 http-equiv 변수 -->
 content="시간 간격"; url=""/>			<!--? url="" : 새로고침한 후 이동할 주소 지정 -->
    
 <meta
 http-equiv="cache-control"			<!--? 웹 캐시 사용 여부를 지정하는 http-equiv 변수 -->
 content="no-cache"/>				<!--? no-cache : 사용자의 웹 브라우저가 항상 캐시를 읽지 않고 페이지를 갱신 -->
    
 <meta
 http-equiv="pragma"				<!--? 현재 웹 문서를 캐시로 저장할지 여부를 지정하는 http-equiv 변수 -->
 content="no-cache"/>				<!--? no-cache : 사용자의 웹 브라우저가 항상 캐시를 읽지 않고 페이지를 갱신 -->
    
 <meta
 http-equiv="expires"				<!--? 현재 웹 문서의 웹 캐시 만료일을 지정하는 http-equiv 변수 -->
 content="캐시 만료일"/>
    
 <meta
 http-equiv="장면 전환 http-equiv 변수"		<!--? 특정 상황에서의 장면 전환 효과를 지정하는 http-equiv 변수 -->
 content="revealtrans(duration=수행할 시간,	<!--? page-enter : 현재 페이지 접속 시  -->
 transition=수행할 방법)"/>			<!--? page-exit : 현재 페이지 종료 시 -->
						<!--? site-enter : 현재 사이트 접속 시 -->
						<!--? site-exit : 현재 사이트 종료 시 -->
    
 <meta
 http-equiv="origin-trial"			<!--? 웹 개발자가 웹 문서에 실험단계인 속성을 명시하는 http-equiv 변수 -->
 content="...."/>
    
 <meta						<!--? 오픈그래프 태그 (OpenGraph Tag) -->
 property="og:오픈그래프 변수"			<!--? SNS에 게시될 때 데이터 설정을 최적화하는 property 변수 -->
 content="오픈그래프 변수에 해당되는 값"/>		<!--? og 필수 변수 -->
	  					<!--? title : 웹 사이트 제목 -->
						<!--? type : 웹 문서의 타입 -->
						<!--? image : 웹 문서에 표현될 이미지 -->
						<!--? url : 웹 문서의 대표 URL -->
						<!--? og 옵션 변수 -->
						<!--? description : 웹 문서 내에 표현될 설명 -->
						<!--? locale : 웹 문서 내에 표현될 언어 -->
						<!--? locale:alternate : 웹 문서 내에 표현될 다국적 언어 -->
						<!--? site_name : 웹 문서 내에 표현될 카테고리 제목 -->
						<!--? audio : 웹 문서에 포함되는 오디오 파일 URL -->
						<!--? video : 웹 문서에 포함되는 비디오 파일 URL -->
						<!--? og 오브젝트 변수 -->
						<!--? width : 웹 문서에 표현될 오브젝트의 가로 길이 -->
						<!--? height : 웹 문서에 표현될 오브젝트의 세로 길이 -->
						<!--? url : 웹 문서에 표현될 오브젝트의 URL -->
						<!--? secure_url : 웹 문서에 표현될 오브젝트의 HTTPS URL -->
						<!--? alt : 표현될 오브젝트에 대한 설명 -->
</head>
</html>

# 컨텐츠 구분 관련 태그

`<h1></h1>`~`<h6></h6>` : 문서 정보 계층을 구조화하는 태그

문서나 구분된 영역의 제목을 설정 (Heading)
- 숫자가 낮을 수록 높은 단계의 제목

<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>

h1

h2

h3

h4

h5

h6

`<header></header>` : 문서의 헤더를 선언하는 태그

헤더 (header) 영역 : 일반적으로 로고, 제목, 검색 등이 포함

<header>
<h1>제목</h1>
...
</header>

header { display: block; }

`<footer></footer>` : 문서의 푸터를 선언하는 태그

푸터 (footer) 영역 : 일반적으로 작성자, 저작권, 관련 문서 등이 포함

<footer>
<p>작성자</p>
...
</footer>

footer { display: block; }

`<main></main>` : 문서의 주요 컨텐츠 영역을 선언하는 태그

한 문서에 하나의 <main> 태그만을 선언 가능
IE에서 지원하지 않음

<main>
<h1>주요 컨텐츠</h1>
...
</main>

main { display: block; }

`<article></article>` : 독립적으로 구분되거나 재사용 가능한 영역을 선언하는 태그

<h1>~<h6> 태그를 포함해 식별
작성한 날짜와 시간을 <time> 태그의 datetime 속성으로 작성

<article>
<h2>독립 영역 1</h2>
...
</article>
<article>
<h2>독립 영역 2</h2>
...
</article>

article { display: block; }

`<section></section>` : 문서의 일반적인 영역을 선언하는 태그

<h1>~<h6> 태그를 포함해 식별

<section>
<h2>일반 영역 1</h2>
...
</section>
<section>
<h2>일반 영역 2</h2>
...
</section>

section { display: block; }

`<aside></aside>` : 문서의 별도 컨텐츠 영역을 선언하는 태그

사이드 (aside) 영역 : 일반적으로 광고나 사이드바로 설정

<aside>
<h4>별도 컨텐츠</h4>
...
</aside>

aside { display: block; }

`<nav></nav>` : 다른 페이지로 이동하기 위한 링크를 선언하는 태그

일반적으로 바로가기, 목차, 색인 등으로 설정
<a> 태그로 링크 선언

<nav>
	<a href="/html/">HTML</a> |
	<a href="/html/css/">CSS</a> |
	<a href="/html/css/js/">JavaScript</a>
</nav>
<nav>
    <ol>
        <li><a href="#">HTML</a></li>
        <li><a href="#">CSS</a></li>
        <li><a href="#">JavaScript</a></li>
    </ol>
</nav>

aside { display: block; }

`<div></div>` : 아무것도 나타내지 않은 컨텐츠 영역을 선언하는 태그

일반적으로 CSS와 연게해 꾸미는 목적으로 사용

<div>
<h2>아무것도 나타내지 않은 컨텐츠 영역</h2>
...
</div>

div { display: block; }

# 인라인 텍스트 관련 태그

`<p></p>` : 하나의 문단을 선언하는 태그

<p align="center">문단 1 : 가운데 정렬</p>
<p align="right">문단 2 : 오른쪽 정렬</p>

문단 1 : 가운데 정렬

문단 2 : 오른쪽 정렬

p { display: block; }

`<hr>` : 문단을 분리하는 가로줄을 넣는 태그

↓ 가로줄
<hr>
↑ 가로줄

↓ 가로줄

↑ 가로줄

hr { display: block; }

`<a></a>` : 하이퍼링크를 생성하는 태그

a 속성	설명
download	이 요소가 리소스를 다운로드하는 용도인가? (boolean)
href	링크된 문서를 입력
target	링크된 문서를 어떻게 열지 지정
name	링크의 이름을 지정 (문서 내에서도 이 이름을 이용해 이동 가능)

<a
  href="https://pocj8ur4in.github.io"
  target="_blank"
  title="pocj8ur4in">
    pocj8ur4in
</a>

pocj8ur4in

a { display: inline; }

`<code></code>` : 소스 코드를 넣는 태그

`을 3번 쓰는 것으로 대체 가능

<code>
	print("Hello World!")
<code>

print("Hello World!")

code { display: inline; }

`<time>` : 날짜나 시간을 나타내기 위해 선언하는 태그

<p>Hello World!<time datetime="유효한 날짜나 시간"></p>

time { display: inline; }

`<span></span>` : 아무것도 나타내지 않는 컨텐츠 영역을 선언하는 태그

일반적으로 CSS와 연게해 꾸미는 목적으로 사용

<p>Hello <span style="color:blue">World</span>!</p>

Hello World!

span { display: inline; }

`<br>` : 줄바꿈을 선언하는 태그

Enter 키를 2번 입랙한 것으로 대체 가능

<br>

br { display: inline; }

# 목록 관련 태그

`<li></li>` : 목록을 표시할 때 각 항목들을 선언하는 태그

<ol>과 <ul>은 <li>의 부모
- <li>는 단독으로 사용할 수 없음

li 속성	설명
value	숫자로 항목의 순서 지정

<!--? 잘못된 사용 -->
<li>X</li>
<li>Y</li>
<li>Z</li>

li { display: list-item; }

`<ul></ul>` : 순서 없는 목록을 선언하는 태그

<ul>
	<li>X</li>
	<li>Y</li>
	<li>Z</li>
</ul>

ul { display: block; }

`<ol></ol>` : 순서 있는 목록을 선언하는 태그

정렬된 목록의 항목 순서는 해당 항목의 중요도를 의미할 수 있음

li 속성	설명
start	숫자로 항목에 매겨진 번호의 시작 값 지정
type	항목에 매겨진 번호의 유형 지정

<ol>
	<li>X</li>
	<li>Y</li>
	<li>Z</li>
</ol>

ol { display: block; }

`<dl></dl>` : 용어 (`<dt></dt>`)와 정의 (`<dd></dd>`) 쌍의 영역을 선언하는 태그

<dd>와 <dt>는 <dl>의 자식
- <dd>와 <dt>는 단독으로 사용할 수 없음
키 (key)와 값 (value)의 형태를 표현할 때 사용

<dl>
  <dt>용어 1</dt><dd>정의 1</dd>
  <dt>용어 2</dt><dd>정의 2</dd>
</dl>

용어 1: 정의 1
용어 2: 정의 2

dl, dt, dd { display: block; }

# 표 관련 태그

`<table>`, `<tr>`, `<th>`, `<td>` : 표를 만드는 태그

데이터 표(<table>)의 행(<tr>), 머리글 열(<th>)과 내용 열(<td>)을 생성

table 태그	설명
tr	표의 행 표현
th	표의 머리말 열 표현
td	표의 내용 열 표현

table 컨텐츠 구분	설명
caption	표의 제목 부분 기술
col	표의 열 정보 기술
thead	표의 헤더 부분 기술
tbody	표의 본문 부분 기술
tfoot	표의 푸터 부분 기술

table 관련 속성	설명
abbr	th : 표에서 열에 대한 설명
scope	th : 어느 부분의 머리말인지 명시 col / row : 자신의 열 / 자신의 행 colgroup / rowgroup : 모든 열 / 모든 행
colspan	표에서 병합하려는 열의 수
rowspan	표에서 병합하려는 행의 수

<table>
  <caption>OO고등학교 시간표</caption>
  <thead>
    <tr>
      <th> </th>
      <th>월</th>
      <th>화</th>
      <th>수</th>
      <th>목</th>
      <th>금</th> 
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1교시</th>
      <td>수학</td>
      <td rowspan="2">국어</td>
      <td>수학</td>
      <td>과학</td>
      <td>영어</td>
    </tr>
    <tr>
      <th>2교시</th>
      <td rowspan="2">사회</td>
      <td>영어</td>
      <td>국어</td>
      <td rowspan="3">음악</td>
    </tr>
    <tr>
      <th>3교시</th>
      <td>수학</td>
      <td rowspan="2">미술</td>
      <td>영어</td>
    </tr>
    <tr>
      <th>4교시</th>
      <td>체육</td>
      <td>사회</td>
      <td>영어</td>
    </tr>
  </tbody>
</table>

OO고등학교 시간표
	월	화	수	목	금
1교시	수학	국어	수학	과학	영어
2교시	사회	국어	영어	국어	음악
3교시	사회	수학	미술	영어
4교시	체육	사회	미술	영어

table { display: table; }
tr { display: table-row; }
th, td { display: table-cell; }

# 멀티미디어 관련 태그

`<img>` : 이미지를 삽입하는 태그

img 속성	설명
src	이미지 파일의 경로를 지정 절대 경로 : http:// 또는 https:// 상대 경로 : /path/filename
alt	이미지가 출력되지 않을 경우 이미지에 대한 설명을 제공
title	이미지에 대한 추가 정보를 제공 (마우스가 접근하면 말풍선으로 표시)
width, height	이미지의 가로, 세로의 길이를 지정 (HTML5 : 픽셀만 지정 가능, %는 CSS 대체)
border	이미지의 경계선의 두께를 지정 (기본값 : 1px)

<img src="https://cdn.pixabay.com/photo/2020/10/21/04/01/leaves-5672036_1280.png"
  alt="leaves-5672036_1280.png"
  title="이미지"
  height="360px"
  width="360px"
  border="0px">

img { display: inline; }

`<audio>` : 오디오를 삽입하는 태그

audio 속성	설명
src	삽입할 오디오의 주소 지정
autoplay	오디오의 자동 재생 여부 지정
controls	오디오의 소리 조절, 시간대 탐색, 일시정지 및 재시작을 할 수 있는 컨트롤러 생성
loop	비디오의 재시작 여부 지정
preload	웹 문서를 열 때 동영상, 메타데이터 로드 여부 지정 auto : 모두 로드 metadata : 메타데이터만 로드 none : 모두 로드하지 않음

audio { display: inline; }

`<video>` : 비디오를 삽입하는 태그

video 속성	설명
src	삽입할 비디오의 주소 지정
poster	삽입할 비디오 썸네일 이미지의 주소 지정
type	삽입할 비디오의 타입 지정
height	비디오의 출력 영역 높이 지정
width	비디오의 출력 영역 너비 지정
poster	비디오 포스터 프레임의 주소 지정
autoplay	비디오의 자동 재생 여부 지정
controls	비디오의 소리 조절, 시간대 탐색, 일시정지 및 재시작을 할 수 있는 컨트롤러 생성
loop	비디오의 재시작 여부 지정
preload	웹 문서를 열 때 동영상, 메타데이터 로드 여부 지정 auto : 모두 로드 metadata : 메타데이터만 로드 none : 모두 로드하지 않음

video { display: inline; }

`<figure></figure>` : 이미지나 다이어그램 영역을 삽입하는 태그

<figcation> : <figure>에 포함되어 이미지나 다이어그램의 설명을 추가하는 태그

<figure>
  <figcaption>
    figure
  </figcaption>
  <img
    src="https://cdn.pixabay.com/photo/2020/10/21/04/01/leaves-5672036_1280.png"
    alt="leaves-5672036_1280.png"
    title="이미지"
    height="360px"
    width="360px">
</figure>

figure { display: block; }
figcation { display: inline; }

# 프레임 관련 태그

`<iframe></iframe>` : 웹 문서 안에 박스형으로 프레임을 넣어 문서 안의 문서를 표현하는 태그

중첩된 브라우저 프레임 : 다른 HTML 문서를 현재 HTML 문서에 삽입

iframe 속성	설명
name	프레임의 이름 지정
src	삽입할 웹 문서의 주소 지정
height	프레임의 높이 지정
width	프레임의 너비 지정
sandbox	일기 전용으로 삽입 (Boolean) allow-form : 양식 제출 가능 allow-scripts : 스크립트 실행 가능 allow-same-origin : 같은 도메인의 리소스 사용 가능
frameborder	프레임 테두리 표시 여부 지정 (Boolean)
allowfullscreen	프레임의 전체 화면 모드 전환 여부 지정

<div>
	<iframe
		src="https://github.com/pocj8ur4in"
		width="360"
		height="360"
		scrolling="no"
		frameborder="1"
		allowfullscreen="true"
		allow="
			clipboard-write;
			encrypted-media;
			picture-in-picture;
			web-share"
		sandbox="
			allow-same-origin
			allow-popups
			allow-scripts"
		>
	</iframe>
</div>

iframe { display: inline; }

# 스크립트 관련 태그

`<script></script>` : 외부 스크립트 파일을 참조하는 태그

외부 스크립트 파일 : javascript, CSS

script 속성	설명
src	삽입할 외부 스크립트의 주소 지정
async	스크립트의 비동기적 실행 여부 (Boolean)
defer	문서 파싱 후 작동 여부 (Boolean)
type	삽입할 외부 스크립트의 타입 지정
frameborder	프레임 테두리 표시 여부 지정 (Boolean)
allowfullscreen	프레임의 전체 화면 모드 전환 여부 지정

<script type="application/ld+json">	<!--? 구조화된 JSON-LD 데이터 스니펫 : 제목, 작성자 및 세부 정보를 Google이 수집 -->
  {
    "@context": "https://schema.org",
    
      "@type": "website",
      "name": "website_name",
      "author": {
        "@type": "Person",
        "name": "Person_name"
      },
      "description": "website_description",
      "url": "website_url"
  }
</script>

script { display: none; }

# 양식 관련 태그

`<form></form>` : 웹 서버에 제출하기 위한 양식의 입력값을 받는 태그

<form>이 다른 <form>을 자식 요소로 포함할 수 없음

form 태그가 동작하는 과정

사용자가 브라우저를 통해 폼이 있는 웹 문서에 방문

사용자가 브라우저를 통해 폼의 내용을 입력

폼 안에 있는 모든 데이터를 웹 서버로 전송

웹 서버는 전송받은 폼 데이터의 처리를 위해 웹 프로그램으로 전달

웹 프로그램에서 데이터를 처리하고, 결과에 따른 새로운 웹 문서를 웹 서버로 전달

웹 서버는 전송받은 새로운 웹 문서를 브라우저로 전송

브라우저는 전송받은 새로운 웹 문서를 표현

form 속성	설명
name	폼을 식별하기 위한 고유한 이름 지정
accept-charset	폼 전송에 사용할 문자 인코딩 방식 지정
autocomplete	자동 완성 기능을 사용할지 여부 지정 (ON \| OFF)
action	입력 양식에 입력된 값을 저장할 데이터베이스 문서 지정 (해당 문서는 PHP나 ASP로 작성)
novalidate	양식 데이터의 유효성을 검사하지 않을지 지정
target	action에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정
method	HTTP 메소드 (웹 서버와의 통신 방식) 지정 (GET \| POST)

<html>
  <body>
    <form
      action = "http://localhost:4000/form.jsp"
      accept-charset="utf-8"
      name = "person_info"
      method = "get"> 
    </form>
  </body>
<html>

form { display: block; }

`<label></label>` : 양식에 이름을 지정하는 태그

<label for=""> : label의 for의 값과 양식의 id의 값이 같으면 연결하는 속성
<label> 가능 요소 : <button>, <input>, <progress>, <select>, <textarea>

<label for="input-label">
  input-text
</label>

<input type="text" id="input-text">

<label for="checkbox-label">
  checkbox-text
</label>

<input type="checkbox" id="checkbox-text">

input-text checkbox-text

label { display: inline; }

`<input>` : 입력값을 입력받을 필드를 선언하는 태그

input 속성	설명
name	입력값 필드을 식별하기 위한 고유한 이름 지정
type	입력값 필드의 종류를 지정

input type 변수	설명
text	한 줄의 문자열 생성 (기본 변수)
password	비밀번호 생성
range	지정한 범위의 숫자 생성
checkbox	선택/해제할 수 있는 항목 (중복 가능) 생성
radio	선택/해제할 수 있는 항목 (중복 불가) 생성
submit	클릭할 경우 입력값을 전송하는 버튼 생성
search	클릭할 경우 입력값을 검색하는 버튼 생성
reset	클릭할 경우 입력값을 초기화하는 버튼 생성
file	파일을 업로드하는 버튼 생성
hidden	입력값 없이 폼과 함께 전송해야 하는 정보를 감쌈 (hidden flied)

<input type="text" name="text">

<input type="password" name="password">

<input type="range" name="range">

<input type="checkbox" name="checkbox" value="1">1
<input type="checkbox" name="checkbox" value="2">2
<input type="checkbox" name="checkbox" value="3">3
<input type="checkbox" name="checkbox" value="4">4
<input type="checkbox" name="checkbox" value="5">5

1 2 3 4 5

<input type="radio" name="radio" value="1">1
<input type="radio" name="radio" value="2">2
<input type="radio" name="radio" value="3">3
<input type="radio" name="radio" value="4">4
<input type="radio" name="radio" value="5">5

1 2 3 4 5

<input type="submit" name="submit">

<input type="search" name="search">

<input type="reset" name="reset">

<input type="file" name="file">

input { display: inline-block; }

`<button></button>` : 클릭 가능한 버튼을 생성하는 태그

button 속성	설명
autofocus	페이지가 로드될 때 자동으로 포커싱 여부 (Boolean). 문서 내에 고유해야 함
disabled	버튼의 비활성화 여부 (Boolean)
name	폼 데이터와 함께 전송될 버튼의 이름을 지정
type	버튼의 종류를 지정 (button, reset, submit)

<button name="button">
	버튼
</button>

button { display: inline-block; }

`<textarea></textarea>` : 여러 줄의 문자열 값을 입력받는 태그

textarea 속성	설명
autofocus	페이지가 로드될 때 자동으로 포커싱 여부 (Boolean). 문서 내에 고유해야 함
autocomplete	자동 완성 기능을 사용할지 여부 지정 (ON \| OFF)
disabled	텍스트 에이리어의 비활성화 여부 (Boolean)
rows	텍스트 에이리어의 행의 개수을 지정
cols	텍스트 에이리어의 열의 개수을 지정
maxlength	텍스트 에이리어에 입력 가능한 최대 문자 수
placeholder	텍스트 에이리어에 입력할 문자열에 대한 힌트
readonly	읽기 전용 여부 (Boolean)

<textarea cols="50" rows="10"></textarea>

textarea { display: inline-block; }

`<progress></progress>` : 작업의 진행률을 표시하는 태그

progress 속성	설명
max	작업의 총량 지정
value	작업의 진행량 지정

<progress value="70" max="100">70 %</progress>

70 %

progress { display: inline-block; }

`<select></select>` : 드롭다운 목록을 생성하는 태그

드롭다운 항목(<option>)의 드롭다운 목록(<select>) 제공

select 속성	설명
autocomplete	자동 완성 기능을 사용할지 여부 지정 (ON \| OFF)
disabled	드롭다운 목록의 비활성화 여부 (Boolean)
multiple	다중으로 선택할지 여부 (Boolean)
name	드롭다운 목록의 이름 지정
size	드롭다운 목록에서 한 번에 볼 수 있는 행의 개수

select { display: inline-block; }

`<option></option>` : 드롭다운 목록에 대한 드롭다운 항목을 생성하는 태그

<option>는 선택적 빈 태그로 사용 가능
<optgroup>으로 그룹화 가능

option 속성	설명
disabled	드롭다운 항목의 비활성화 여부 (Boolean)
label	드롭다운 항목의 제목 지정 (생략되면 포함된 텍스트를 표시)
selected	옵션이 선택되었음을 표시 (Boolean)
value	양식으로 제출될 값 (생략되면 포함된 텍스트를 값으로 사용)

<form>
    <select>
        <option>a</option>
        <option>b</option>
        <option>c</option>
        <option>d</option>
    </select>
</form>
<form>
    <select autofocus>
        <option>e</option>
        <option>f</option>
        <option>g</option>
        <option>h</option>
    </select>
</form>
<form>
    <select disabled>
        <option>i</option>
        <option>j</option>
        <option>k</option>
        <option>l</option>
    </select>
</form>
<form>
    <select multiple>
        <option>m</option>
        <option>n</option>
        <option>o</option>
        <option>p</option>
    </select>
</form>
<form>
    <select name="select box" size="2">
        <option>q</option>
        <option>r</option>
        <option>s</option>
        <option>t</option>
    </select>
</form>

option, optgroup { display: block; }

`<fieldset></fieldset>` : 같은 목적의 양식을 그룹화하는 태그

<legend> 태그로 제목을 지정할 수 있음

<form>
  <fieldset>
    <legend>커피 사이즈</legend>
    <label>
        <input type="radio" name="size" value="t" />
        톨
    </label>
    <label>
        <input type="radio" name="size" value="g" />
        그란데
    </label>
    <label>
        <input type="radio" name="size" value="v" />
        벤티
    </label>
  </fieldset>
</form>

fieldset, legend { display: block; }

Twitter LinkedIn

pocj8ur4in

HTML (HyperText Mark-up Language) : 웹 문서의 구조를 기술하는 마크업 언어

# HTML 전역 속성 (HTML Global Attributes) : 모든 HTML 요소에서 사용 가능한 속성

class와 id : CSS나 JavaScript에서 요소를 선택하거나 접근할 때 사용하는 속성

lang : 웹 문서의 텍스트가 어떤 언어로 작성되었는지 나타내는 속성

style : 요소에 적용할 CSS을 나타내는 속성

title : 요소의 설명을 나타내는 속성

# 범위 관련 HTML 태그

<html></html> : HTML으로 작성된 문서임을 선언하는 태그

<head></head> : 웹 문서의 속성을 선언하는 태그

<body></body> : 웹 문서의 모양을 선언하는 태그

# 메타 정보 관련 태그

<title></title> : 웹 문서의 제목을 선언하는 태그

<base /> : 웹 문서에 포함된 모든 상대 URL들에 대한 기준 URL를 선언하는 태그

<link /> : 현재 웹 문서와 외부 리소스 간의 관계를 정의하는 태그

<style></style> : 현재 웹 문서의 스타일 정보를 정의하는 태그

<meta /> : 기타 메타데이터 요소들을 선언하는 태그

# 컨텐츠 구분 관련 태그

<h1></h1>~<h6></h6> : 문서 정보 계층을 구조화하는 태그

h1

h2

h3

h4

h5

h6

<header></header> : 문서의 헤더를 선언하는 태그

<footer></footer> : 문서의 푸터를 선언하는 태그

<main></main> : 문서의 주요 컨텐츠 영역을 선언하는 태그

<article></article> : 독립적으로 구분되거나 재사용 가능한 영역을 선언하는 태그

<section></section> : 문서의 일반적인 영역을 선언하는 태그

<aside></aside> : 문서의 별도 컨텐츠 영역을 선언하는 태그

<nav></nav> : 다른 페이지로 이동하기 위한 링크를 선언하는 태그

<div></div> : 아무것도 나타내지 않은 컨텐츠 영역을 선언하는 태그

# 인라인 텍스트 관련 태그

<p></p> : 하나의 문단을 선언하는 태그

<hr> : 문단을 분리하는 가로줄을 넣는 태그

<a></a> : 하이퍼링크를 생성하는 태그

<code></code> : 소스 코드를 넣는 태그

<time> : 날짜나 시간을 나타내기 위해 선언하는 태그

<span></span> : 아무것도 나타내지 않는 컨텐츠 영역을 선언하는 태그

<br> : 줄바꿈을 선언하는 태그

# 목록 관련 태그

<li></li> : 목록을 표시할 때 각 항목들을 선언하는 태그

<ul></ul> : 순서 없는 목록을 선언하는 태그

<ol></ol> : 순서 있는 목록을 선언하는 태그

<dl></dl> : 용어 (<dt></dt>)와 정의 (<dd></dd>) 쌍의 영역을 선언하는 태그

# 표 관련 태그

<table>, <tr>, <th>, <td> : 표를 만드는 태그

# 멀티미디어 관련 태그

<img> : 이미지를 삽입하는 태그

<audio> : 오디오를 삽입하는 태그

<video> : 비디오를 삽입하는 태그

<figure></figure> : 이미지나 다이어그램 영역을 삽입하는 태그

# 프레임 관련 태그

<iframe></iframe> : 웹 문서 안에 박스형으로 프레임을 넣어 문서 안의 문서를 표현하는 태그

# 스크립트 관련 태그

<script></script> : 외부 스크립트 파일을 참조하는 태그

# 양식 관련 태그

<form></form> : 웹 서버에 제출하기 위한 양식의 입력값을 받는 태그

<label></label> : 양식에 이름을 지정하는 태그

<input> : 입력값을 입력받을 필드를 선언하는 태그

<button></button> : 클릭 가능한 버튼을 생성하는 태그

<textarea></textarea> : 여러 줄의 문자열 값을 입력받는 태그

<progress></progress> : 작업의 진행률을 표시하는 태그

<select></select> : 드롭다운 목록을 생성하는 태그

<option></option> : 드롭다운 목록에 대한 드롭다운 항목을 생성하는 태그

<fieldset></fieldset> : 같은 목적의 양식을 그룹화하는 태그

참고

[SpringBoot] 3. Spring Data

[SQLD] 4. 관리 구문

[SQLD] 3. SQL 활용

[SQLD] 2. SQL 기본

`HTML` (`HyperText Mark-up Language`) : 웹 문서의 구조를 기술하는 마크업 언어

# `HTML` 전역 속성 (`HTML Global Attributes`) : 모든 `HTML` 요소에서 사용 가능한 속성

`class`와 `id` : `CSS`나 `JavaScript`에서 요소를 선택하거나 접근할 때 사용하는 속성

`lang` : 웹 문서의 텍스트가 어떤 언어로 작성되었는지 나타내는 속성

`style` : 요소에 적용할 `CSS`을 나타내는 속성

`title` : 요소의 설명을 나타내는 속성

# 범위 관련 `HTML` 태그

`<html></html>` : HTML으로 작성된 문서임을 선언하는 태그

`<head></head>` : 웹 문서의 속성을 선언하는 태그

`<body></body>` : 웹 문서의 모양을 선언하는 태그

`<title></title>` : 웹 문서의 제목을 선언하는 태그

`<base />` : 웹 문서에 포함된 모든 상대 `URL`들에 대한 기준 `URL`를 선언하는 태그

`<link />` : 현재 웹 문서와 외부 리소스 간의 관계를 정의하는 태그

`<style></style>` : 현재 웹 문서의 스타일 정보를 정의하는 태그

`<meta />` : 기타 메타데이터 요소들을 선언하는 태그

`<h1></h1>`~`<h6></h6>` : 문서 정보 계층을 구조화하는 태그

`<header></header>` : 문서의 헤더를 선언하는 태그

`<footer></footer>` : 문서의 푸터를 선언하는 태그

`<main></main>` : 문서의 주요 컨텐츠 영역을 선언하는 태그

`<article></article>` : 독립적으로 구분되거나 재사용 가능한 영역을 선언하는 태그

`<section></section>` : 문서의 일반적인 영역을 선언하는 태그

`<aside></aside>` : 문서의 별도 컨텐츠 영역을 선언하는 태그

`<nav></nav>` : 다른 페이지로 이동하기 위한 링크를 선언하는 태그

`<div></div>` : 아무것도 나타내지 않은 컨텐츠 영역을 선언하는 태그

`<p></p>` : 하나의 문단을 선언하는 태그

`<hr>` : 문단을 분리하는 가로줄을 넣는 태그

`<a></a>` : 하이퍼링크를 생성하는 태그

`<code></code>` : 소스 코드를 넣는 태그

`<time>` : 날짜나 시간을 나타내기 위해 선언하는 태그

`<span></span>` : 아무것도 나타내지 않는 컨텐츠 영역을 선언하는 태그

`<br>` : 줄바꿈을 선언하는 태그

`<li></li>` : 목록을 표시할 때 각 항목들을 선언하는 태그

`<ul></ul>` : 순서 없는 목록을 선언하는 태그

`<ol></ol>` : 순서 있는 목록을 선언하는 태그

`<dl></dl>` : 용어 (`<dt></dt>`)와 정의 (`<dd></dd>`) 쌍의 영역을 선언하는 태그

`<table>`, `<tr>`, `<th>`, `<td>` : 표를 만드는 태그

`<img>` : 이미지를 삽입하는 태그

`<audio>` : 오디오를 삽입하는 태그

`<video>` : 비디오를 삽입하는 태그

`<figure></figure>` : 이미지나 다이어그램 영역을 삽입하는 태그

`<iframe></iframe>` : 웹 문서 안에 박스형으로 프레임을 넣어 문서 안의 문서를 표현하는 태그

`<script></script>` : 외부 스크립트 파일을 참조하는 태그

`<form></form>` : 웹 서버에 제출하기 위한 양식의 입력값을 받는 태그

`<label></label>` : 양식에 이름을 지정하는 태그

`<input>` : 입력값을 입력받을 필드를 선언하는 태그

`<button></button>` : 클릭 가능한 버튼을 생성하는 태그

`<textarea></textarea>` : 여러 줄의 문자열 값을 입력받는 태그

`<progress></progress>` : 작업의 진행률을 표시하는 태그

`<select></select>` : 드롭다운 목록을 생성하는 태그

`<option></option>` : 드롭다운 목록에 대한 드롭다운 항목을 생성하는 태그

`<fieldset></fieldset>` : 같은 목적의 양식을 그룹화하는 태그