HTML
정의
- HTML
HyperText Markup Language의 약자 - HyperText
사용자의 선택에 따라 원하는 페이지로 이동 - Markup Language
태그의 형식과 규칙을 정의한 언어
태그의 구성 요소
1) 복합 태그
<태그명> 내용 </태그명>
<div>안녕</div>2) 속성을 가지는 태그
<태그명 속성명=값> 내용 </태그명>
<p align=”center”>안녕</p>3) 단독 태그
<태그명>
<img src=”blue.jpg”>태그 사용 규칙
1) <태그명></태그명>과 같이 여는 태그와 닫는 태그가 쌍으로 사용된다.
<div></div>2) 태그명과 속성명, 속성명과 속성명 사이는 한 칸씩 띄운다. 그 외 공백을 두어서는 안 된다.
<div align=”center”> </div>3) 속성명과 값은 = 부호를 사용하여 표시하고 값은 “”로 감싼다.
<img src=”blue.jpg”>4) 주석 사용 방법
<!-- HTML 주석 -->HTML 기본 구조
Basic
<!-- HTML 주석 -->
<!--
DOCTYPE : 현재 문서의 유형을 정의
-->
<!DOCTYPE html>
<!--
lang 속성은 웹 브라우저 동작에는 영향을 주지 않고 구글 같은 검색 엔진이 웹 페이지를
탐색할 때 해당 웹 페이지를 어떤 언어로 작성했는지 쉽게 알 수 있도록 도와줌.
-->
<html lang="ko">
<head>
<!--
meta : 웹 브라우저와 관련된 정보 지정
속성
charset : 문자셋 지정
-->
<meta charset="UTF-8">
<title>첫번째 페이지</title>
</head>
<body>
<!--
HTML : Hypertext Markup Language
웹 문서를 만들때 사용하는 태그 중심의 언어.
HTML 문서 작성시 주의사항
1) 대소문자를 구분하지 않는다.
<body>, <BODY>는 모두 같은 의미.
일반적으로 소문자로 표시
2) 2칸이상의 공백은 모두 1칸으로 취급
3) 줄바꿈하기 위해서는 <br> 태그를 명시해야 함
-->
Hello World!!
오늘은 화요일!!
<br>
내일은 수요일!!
</body>
</html>실행결과
Character
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>글자</title>
</head>
<body>
안녕하세요.
<br>
줄바꿈시 br 태그를 사용해야 함<br>
<!-- <b>, <strong> 태그 : 굵은 글씨 -->
<b>굵은 글씨1</b>
<br>
<strong>굵은 글씨2</strong>
<br>
<!-- <ins> 태그 : 밑줄 -->
<ins>밑줄</ins>
<br>
<!-- <del> 태그 : 취소선 -->
<del>2,000</del>
<br>
<!-- <i>, <em> 태그 : 이탤릭체 -->
이제는 <em>반응형 웹</em>이 <i>대세</i>이다.<br>
<br>
<!-- 태그는 중첩 가능 -->
<b>태그는 <ins>중첩</ins> 사용 가능</b>하다
<br>
<!-- <span> 태그 : 하나의 영역으로 묶기 -->
<span>내용 형식</span>
<br>
<!-- <mark> 태그 : 형광펜 효과 내기 -->
<mark>텍스트</mark>
<br>
<!-- 수평선 -->
<hr size="1" width="100%"><!-- 상대적인 수치 지정 -->
<hr size="1" width="500"><!-- 절대적인 수치 지정 -->
<!-- 제목 표시하기 -->
<h1>제목1</h1>
<h2>제목2</h2>
<h3>제목3</h3>
<h4 align="left">제목4</h4>
<h5 align="center">제목5</h5>
<h6 align="right">제목6</h6>
<!-- <p> 태그 : 단락 만들기 -->
<p align="center"><b>가운데</b></p>
<p align="left"><b>왼쪽</b></p>
<p align="right"><b>오른쪽</b></p>
<!-- <div> 태그 : 블럭 레벨 태그, 텍스트 (또는 이미지)를 블럭 단위로 묶을 때 -->
<div align="center">가운데</div>
<div align="left">왼쪽</div>
<div align="right">오른쪽</div>
</body>
</html>실행 결과
Text
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>텍스트</title>
</head>
<body>
<h3>abbr 태그 : 약자 표시, title 속성을 함께 사용할 수 있음</h3>
<abbr title="Internet of Things">IoT</abbr>란 각종 사물에 센서와
통신 기능을 내장해 인터넷에 연결하는 기술을 의미한다.
<h3>blockquote 태그 : 인용문 넣기, 인용한 문장은 다른 텍스트보다 안으로
들여 쓰여지므로 다른 텍스트와 구별됨, 블록 레벨 태그이기 때문에 줄바꿈 됨</h3>
<blockquote cite="https://www.naver.com">인용 내용</blockquote> 보통 내용
<h3>q 태그 : quote의 약자로 인라인 레벨 태그이기때문에 줄바꿈이 되지 않음</h3>
<q cite="https://www.naver.com">인용 내용</q> 보통 내용
<h3>cite 태그 : 웹문서나 포스트에서 참고 내용 표시</h3>
내가 경험한 가장 흥미진진한 일은 누군가를 만나는 일이다. - 영화 <cite>'비포선셋'</cite>
<h3>code 태그 : 컴퓨터 인식을 위한 소스 코드</h3>
<code>function savetheLocal(){}</code>
<h3>kbd 태그 : 키보드 입력이나 음성 명령 같은 사용자 입력 내용</h3>
웹 화면을 다시 불러오려면 <kbd>F5</kbd>키를 누릅니다.
<h3>small 태그 : 부가 정보처럼 작게 표시해도 되는 텍스트</h3>
<p>가격 : 13,000원<small>(부가세 별도)</small></p>
<h3>sup 태그 : 위 첨자</h3>
자동차<sup>하하</sup>
<h3>sub 태그 : 아래 첨자</h3>
자동차<sub>하하</sub>
</body>
</html>실행결과
Letter
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>문자 엔티티</title>
</head>
<body>
<h3>문자 엔티티</h3>
<!--
문자 엔티티
공백
< <
> >
& &
" "
© copyright 표시
™ trademark의 약자
-->
공백 처리 : 공백 사용시 공백으로 보여짐<br>
<하하><br>
자바 & JSP <br>
"즐거운 하루" <br>
© 한국상사 <br>
오메가™
<br><br>
<h3>pre 태그 사용하기</h3>
눈에 보이는대로 출력(태그 적용)<br>
<pre>
하하 가을
크크
<b>바다</b>
</pre>
</body>
</html>실행결과
Anchor
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>링크</title>
</head>
<body>
<h3>외부 페이지 링크</h3>
<a href="https://www.naver.com" title="네이버 보기">현재 화면에서 이동</a>
<br>
<a href="https://www.daum.net" target="_blank">새로운 탭에 페이지 표시</a>
<h3>같은 사이트 같은 경로의 페이지 링크</h3>
<a href="s01_basic.html">s01_basic.html</a>
<h3>같은 사이트 다른 경로의 페이지 링크</h3>
<a href="../ch02_HTMLForm/s01_form.html">../ch02_HTMLForm/s01_form.html</a>
<h3>페이지 내부에 특정 태그로 이동하기</h3>
<a href="#alpha">Alpha 부분</a>
<a href="#beta">Beta 부분</a>
<a href="#gamma">Gamma 부분</a>
<hr size="1" width="100%">
<h2 id="alpha">Alpha</h2>
<p>
오늘은 화요일, 내일은 수요일
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
모레는 목요일, 글피는 금요일
</p>
<h2 id="beta">Beta</h2>
<p>
여기는 서울, 저기는 부산
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
요기는 인천, 고기는 광주
</p>
<h2 id="gamma">Gamma</h2>
<p>
나는 SMITH, 너는 ANNIE
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
그는 PETER, 그녀는 SUNNY
</p>
</body>
</html>실행결과
Alpha 부분 클릭 후 하이퍼링크
Beta 부분 클릭 후 하이퍼링크
Gamma 부분 클릭 후 하이퍼링크
Lucky Things🍀