HTML
💡 HTML 이란
HyperText Markup Language 의 약자
- HyperText
사용자의 선택에 따라 원하는 페이지로 이동 - Markup Language
태그의 형식과 규칙을 정의한 언어
📜 HTML 기초 문법
HTML 문서 작성시 주의사항
1)대소문자를 구분하지 않는다.
<body>,<BODY>는 모두 같은 의미.
일반적으로 소문자로 표시
2)칸이상의 공백은 모두 1칸으로 취급
3)줄바꿈하기 위해서는 <br> 태그를 명시해야함📄 HTML 기본 형태
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
</body>
</html><!-- HTML 주석 -->
DOCTYPE : 현재 문서의 유형을 정의
<!DOCTYPE html>
<html lang="en">
<head>
<!--
meta : 웹브라우저와 관련된 정보 지정 -->
<meta charset="UTF-8">
<title>첫번쨰 페이지</title>
</head>📌 문자태그
굵은 글씨
<b>굵은 글씨1</b>
<br>
<strong>굵은 글씨2</strong>
<br>굵은 글씨1
굵은 글씨2
밑줄 표시
<ins>밑줄</ins>밑줄
취소선
<del>2,000원</del>2,000원
이탤릭체
<i>이탤릭체</i><br>
이제는 <em>반응형 웹</em>이 대세이다.이탤릭체
이제는 반응형 웹 이 대세이다.
글자 목록
<span>내용</span>내용
형광펜 효과 내기
<mark>텍스트</mark>텍스트
수평선
<hr size="1" width="100%">제목 표시하기
<h1>제목1</h1>
<h2>제목2</h2>
<h3>제목3</h3>
<h4>제목4</h4>
<h5 align="center">제목5</h5>
<h6 align="right">제목6</h6>제목1
제목2
제목3
제목4
제목5
제목6
텍스트 링크
<a href="https://www.naver.com" title="네이버 보기">네이버</a><!-- 현재 화면에서 이동 -->
<a href="https://www.daum.net" target="_blank">다음</a><!-- 새로운 탭에 페이지 표시 -->단락 만들기
<p align="center">가운데</p>
<p align="left">왼쪽</p>
<p align="right">오른쪽</p>가운데
왼쪽
오른쪽
블럭 단위로 묶을때
div 태그를 사용
<div align="center">가운데</div>
<div align="left">왼쪽</div>
<div align="right">오른쪽</div>가운데
왼쪽
오른쪽
📑 List 태그
<ul>
<li>유치원</li>
<li>초등학교</li>
<li>중학교</li>
<li>고등학교</li>
<li>대학교</li>
</ul>
<ul type="circle">
<li>자바</li>
<li>JSP</li>
<li>Servlet</li>
<li>HTML</lit>
</ul>
<ul type="square">
<li>월요일</li>
<li>화요일</li>
<li>수요일</li>
</ul>
- 유치원
- 초등학교
- 중학교
- 고등학교
- 대학교
- 자바
- JSP
- Servlet
- HTML
- 월요일
- 화요일
- 수요일
순서 있는 목록
<ol>
<li>서울</li>
<li>부산</li>
<li>대구</li>
<li>광주</li>
</ol>
<ol type="A">
<li>월요일</li>
<li>화요일</li>
<li>수요일</li>
</ol>
<ol type="a">
<li>월요일</li>
<li>화요일</li>
<li>수요일</li>
</ol>
<ol type="i">
<li>월요일</li>
<li>화요일</li>
<li>수요일</li>
</ol>- 서울
- 부산
- 대구
- 광주
- 월요일
- 화요일
- 수요일
- 월요일
- 화요일
- 수요일
- 월요일
- 화요일
- 수요일
항목을 역순으로 표시
<ol reversed="reversed">
<li>서울</li>
<li>부산</li>
<li>대구</li>
<li>광주</li>
</ol>- 서울
- 부산
- 대구
- 광주
dl, dtm dd태그 : 설명 목록 만들기
제목과 설명이 한 쌍인 설명 목록을 만듬<dl>
<dt>올레1코드</dt>
<dd>코드 : 시흥 초등학교 - 광치기 해변</dd>
<dd>거리 : 14.6km(4~5시간)</dd>
<dt>올레2코드</dt>
<dd>코스 : 광치기 해변 - 온평 포구</dd>
<dd>거리 : 14.5km(4~5시간)</dd>
</dl>📖 테이블 만들기
<table border="1">
<caption>가격표</caption>
<thead>
<tr>
<!-- th : 중앙 정렬, 글자를 굵게 표시 -->
<th>메뉴명</th>
<th>가격</th>
</tr>
</thead>
<tr>
<td>해물 스파게티</td>
<td>8,000원</td>
</tr>
<tr>
<td>해물 스파게티</td>
<td>9,000원</td>
</tr>
<tfoot>
<tr>
<td>종합</td>
<td>17,000원</td>
</tr>
</tfoot>
</table>| 메뉴명 | 가격 |
|---|---|
| 해물 스파게티 | 8,000원 |
| 해물 스파게티 | 9,000원 |
| 종합 | 17,000원 |
성장과 도전을 기록합니다