HTML
= 웹 문서를 만드는 언어
약자= H,T HyperText 연결 텍스트(링크)
M Markup 표시(텍스트, 이미지, 영상 등)
L Language 언어
HTML 작성
| 쌍태그 | 열린태그, 닫힌태그 한 쌍으로 사용. 대부분의 태그. |
| ex. | html, head, body, p 등 |
| 홀태그 | 열린태그 하나만 사용 |
| ex. | br, img, hr 등 |
| 주석 | 코드 처리에 영향을 주지 않는 개발자의 설명이나 메모 |
| rule | <!-- 주석내용 --> |
| ex. | <!doctype html> <!-- 현재 문서가 html로 작성한 웹 문서라는 뜻 --> |
| 대소문자 구분 | html 에서는 대소문자 구별 없음. 강조를 위해 사용 |
예제:
(아래 코드를 txt 로 치고 .html 로 저장후 브라우저에서 열기)
<!doctype html> <!-- 현재 문서가 html로 작성한 웹 문서라는 뜻 --> , 작성자를 나타낸다. ex <!—KSH 2021.06.08 à
<html lang="ko"> <!-- 웹 문서(시작) , 한국어 지정 -->
<head> <!-- 웹 브라우저에 알려줄 정보(시작) -->
<meta charset="UTF-8"> <!-- 인코딩 UTF-8(for 한글) 지정 -->
<title>테스트</title> <!-- 제목 표시줄에 표시 됨 -->
</head> <!-- 웹 브라우저에 알려줄 정보(끝) -->
<body> <!-- 내용(시작) -->
<h1>제목</h1>
<hr>
<div>
<p>html</p>
<p>css</p>
<p>javascript</p>
</div>
</body> <!-- 내용(끝) -->
</html> <!-- 웹 문서(끝) -->
HTML 작성 도구
학습에 아래 도구를 사용하겠습니다. (웹 기반 html 연습 편집기)
url :
시맨틱 태그
= 문서의 구조와 의미를 브라우저, 개발자, 검색엔진에 설명하는 태그. 출력기능 X. 컨테이너 역할.
| <header> | 머리글, 로고, nav태그, 주로 위쪽 삽입 |
| <nav> | 네비게이션. 메뉴. 내부 링크모음. |
| <article> | 본문의 주 내용이 들어가는 공간. |
| <section> | article 을 그룹핑. |
| <aside> | 본문 외 내용. 광고, 링크 등. |
| <main> | 문서의 주 컨텐츠영역을 지정합니다. |
| <footer> | 문서 바닥글. 회사소개, 약관 등. |
예제:
<!doctype html> <!-- 현재 문서가 html로 작성한 웹 문서라는 뜻 -->
<html lang="ko"> <!-- 웹 문서(시작) , 한국어 지정 -->
<head> <!-- 웹 브라우저에 알려줄 정보(시작) -->
<meta charset="UTF-8"> <!-- 인코딩 UTF-8(for 한글) 지정 -->
<title>테스트</title> <!-- 제목 표시줄에 표시 됨 -->
</head> <!-- 웹 브라우저에 알려줄 정보(끝) -->
<body> <!-- 내용(시작) -->
<header> <!-- 시맨틱 태그(이하 '시' 로 표기) -->
<h1>제목</h1>
<hr>
<nav>
<a href="#">메뉴1</a>
<a href="#">메뉴2</a>
</nav>
<hr>
</header> <!-- 시 -->
<main> <!-- 시 -->
<section id="s1"> <!-- 시 -->
<h2>html</h2>
</section> <!-- 시 -->
<section id="s2"> <!-- 시 -->
<h2>css</h2>
<article> <!-- 시 -->
<p>
css란? ...
</p>
</article> <!-- 시 -->
</section> <!-- 시 -->
<section id="s3"> <!-- 시 -->
<h2>javascript</h2>
</section> <!-- 시 -->
</main> <!-- 시 -->
<aside>배너광고</aside> <!-- 시 -->
<footer>copyright</footer> <!-- 시 -->
</body> <!-- 내용(끝) -->
</html> <!-- 웹 문서(끝) -->
텍스트 태그
| hn | 제목. h1 ~ h6 까지 사용. 숫자가 커질수록 글자 크기 작아짐. |
| p | 텍스트 단락. 내용이 길면 브라우저 창 너비에 맞게 자동으로 줄 바뀜. |
| br | 줄 바꿈. |
| blockquote | 내용 인용. 다른 내용보다 들여쓰고 단락으로 표시. |
| strong | 굵게 표시 |
| b | 굵게 표시 |
| em | 기울게 표시. |
| i | 기울게 표시. |
| ins | 내용을 편집할 때 추가한 내용을 표시. |
| del | 내용을 편집할 때 삭제한 내용을 표시. |
| sup | 위 첨자. |
| sub | 아래 첨자. |
예제:
<h1>고양이</h1>
<h2>고양이</h2>
<h3>고양이</h3>
<h4>고양이</h4>
<h5>고양이</h5>
<h6>고양이</h6>
<p>개와 고양이는
사이가 안좋다</p>
테스트<br>
br테스트
<blockquote>논문 xxxx 인용</blockquote>
<b>굵게</b> <strong>굵게</strong>
<i>기울게</i> <em>기울게</em>
<ins>추가</ins> <del>삭제</del>
2<sup>10</sup> A<sub>7</sub>
목록 태그
| ol | 순서 있는 목록. |
| ul | 순서 없는 목록. |
| li | ol, ul 의 각 항목 |
| dl | 설명 목록의 시작과 끝. |
| dt | 설명 목록의 제목. |
| dd | 설명 목록의 설명. |
예제:
<ol><b>과목(순서있는목록)</b>
<li>html</li>
<li>css</li>
<li>js</li>
</ol>
<ul><i>동물(순서없는목록)</i>
<li>개</li>
<li>고양이</li>
<li>토끼</li>
</ul>
<dl>
<dt>설명 제목</dt>
<dd>설명 내용</dd>
</dl>
표 태그
| table | 표 |
| caption | 표의 제목 |
| tr | 표의 행 |
| td | 표의 셀 |
| th | 제목 셀 (강조) |
| thead | 표 구조 - 제목 |
| tbody | 표 구조 - 본문 |
| tfoot | 표 구조 - 요약, 정리 부분 |
예제:
<table border=5>
<caption>표제목caption</caption>
<tr>
<th></th>
<th>열제목2</th>
<th>열제목3</th>
</tr>
<tr>
<th>행제목1</th>
<td>1행 1열</td>
<td>1행 2열</td>
</tr>
<tr>
<th>행제목2</th>
<td>2행 1열</td>
<td>2행 2열</td>
</tr>
</table>
예제:
<table border=5>
<caption>표제목caption</caption>
<thead>
<tr>
<th>no.</th>
<th>종류</th>
<th>색</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>고양이</td>
<td>검정</td>
</tr>
<tr>
<th>2</th>
<td>개</td>
<td>흰색</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">애완동물</td>
</tr>
</tfoot>
</table>
표 태그 2
| rowspan | 아래 셀을 값 만큼 합침 |
| colspan | 우측 셀을 값 만큼 합침 |
예제-html:
<table>
<tr>
<td colspan=2>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td colspan=2>a</td>
</tr>
<tr>
<td rowspan=2>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
</tr>
</table>
예제-css:
table {
border: 1px solid black;
}
tr, td {
border: 1px solid red;
padding: 10px;
}
이미지 태그
| img | 속성: src = 이미지 주소 , alt = 대체 텍스트 입력. |
| ex. | <img src="cat.png" alt="고양이"> |
| ex. | DQWtb6YWtKwmbHlzcdRJ02qE_GcGAT96HIBL57Yu5F 6btkzrH7i9zwgb0ufsZaZUMvZWDzB60XywN3a _G31plCNgWbcjMwAoM6z2lTg" alt="고양이"> |
멀티미디어 태그
| embed | audio, video, object 태그도 지원하지 않을 경우 멀티미디어 파일을 삽입 |
| ex. | /2017/11/file_example_MP3_700KB.mp3"> |
| audio | 오디오 파일 삽입 |
| ex. | /file_example_MP3_700KB.mp3" controls autoplay loop></audio> |
| video | 비디오 파일 삽입 |
| ex. | /2020/05/sample-mp4-file.mp4" controls autoplay></video> |
하이퍼링크 태그
| a | 링크(내부링크 또는 외부링크) |
| rule. | <a href="링크할 주소">텍스트 또는 이미지</a> |
| rule. | <a href="링크할 주소" target="_blank">텍스트 또는 이미지</a> |
| ex. | <a href="http://daum.net" target="_blank">다음</a> |
폼에서 사용하는 태그
| form | 폼의 시작과 끝을 만듭니다. | |
| 속성 | method="get" | 서버로 데이터 넘기는 방식 설정. 데이터길이 256~4096 byte. 내용이 주소창에 드러남(보안 취약) |
| 속성 | method="post" | 서버로 데이터 넘기는 방식 설정. 데이터크기 제한 없음. 내용이 드러나지 않음. |
| 속성 | name | 이름 지정. 구분값. |
| 속성 | action="파일명" | 폼 내용을 처리할 서버 프로그램을 지정합니다. |
| 속성 | target | action 속성으로 지정한 서버 파일을 다른창에서 열게함. 전화면이 그대로 남음. |
| fieldset | 폼 요소를 그룹으로 묶습니다. | |
| legend | 필드셋에 제목을 붙입니다. | |
| input | 사용자가 내용을 입력할 필드를 삽입합니다 |
|
| select , option | 드롭다운 목록을 삽입합니다 | |
| textarea | 텍스트를 여러 줄 입력할 수 있는 텍스트 영역을 삽입합니다 |
|
| datalist | 데이터 목록을 삽입합니다. datalist는 option 목록에 없는 값도, 사용자의 입력을 받을 수 있습니다. |
<input> 태그의 유형(type)
| text | 한 줄짜리 텍스트 입력 상자 | |
| password | 비밀번호 | |
| search | 검색 | |
| url | url 주소 입력 필드 | |
| 이메일 | ||
| tel | 전화번호 | |
| checkbox | 체크박스(0~n개 선택 가능) | |
| 속성 | checked | 선택됨 |
| 속성 | name | 서버에 넘길 변수명을 지정 |
| 속성 | value | 서버에 넘길 값을 지정 |
| radio | 라디오(1개만 선택할 때 사용) | |
| 속성 | checked | 선택됨 |
| 속성 | name | 서버에 넘길 변수명을 지정 |
| 속성 | value | 서버에 넘길 값을 지정 |
| number | 숫자를 조절할 수 있는 스핀 박스 | |
| range | 숫자를 조절할 수 있는 슬라이드 막대 | |
| date | 연,월,일 | |
| month | 연,월 | |
| week | 연,주 | |
| time | 시,분,초,분할 초 | |
| datetime-local | 연,월,일,시,분,초,분할 초 (사용자가 있는 지역 기준) |
|
| button | 버튼 | |
| file | 파일 첨부 | |
| hidden | 사용자에게는 보이지 않지만 서버로 넘겨주는 값이 있는 필드 |
|
| reset | 리셋 버튼. 폼 내용들이 전부 지워짐. | |
| submit | 전송 버튼. 폼 태그의 action에 지정한 서버 프로그램으로 값들을 전송함. |
|
| image | submit 버튼 대신 사용할 이미지 |
<input> 태그의 속성
| autofocus | 웹 문서가 열리면 이 입력 필드로 입력 커서를 이동함 |
| placeholder | 힌트 표시 |
| readonly | 입력 필드를 읽기 전용으로 지정 |
| required | 필수 입력 필드로 지정 |
| max | 숫자 입력 필드에서 최대값 지정 |
| min | 숫자 입력 필드에서 최소값 지정 |
| step | 숫자 입력 필드에서 증감할 간격을 지정 |
| maxlength | 텍스트 관련 필드에서 입력할 수 있는 최대 길이 지정 |
| minlength | 텍스트 관련 필드에서 입력할 수 있는 최소 길이 지정 |
| size | 텍스트 관련 필드에서 화면에 표시할 크기를 지정 |
| list | 연결할 데이터 목록을 지정 |
| autocomplete | 자동 완성 기능. autocomplete="on" 이 기본값이며 중요정보라서 사용하지 않을 경우 autocomplete="off" 로 설정. |
예제:
<form action="a.jsp" method=get target="_blank">
<fieldset>
<legend>input</legend>
<input type="text" placeholder=아이디 required minlength=4 maxlength=8>
<input type=password placeholder=암호 required>
<input type=search placeholder=검색 autocomplete="on">
<input type=url placeholder=url(입력불가) readonly size=10>
<input type=email placeholder=email>
<input type=tel placeholder=tel>
<input type=checkbox name=hobby value="독서" checked>독서
<input type=checkbox name=hobby value="게임">게임
<input type=radio name=color value=red>red
<input type=radio name=color value=blue checked>blue
<input type=number value=5 min=3 max=6>
<input type=range value=5 min=0 max=6>
<input type=date>
<input type=month>
<input type=week>
<input type=time>
<input type=datetime-local>
<input type=button value=버튼>
<input type=file>
<input type=hidden>
<input type=reset value="모두 지우기">
<input type=submit>
</fieldset>
<fieldset>
<legend>드롭다운 목록</legend>
<select id="test_select">
<option>1</option>
<option>2</option>
<option selected>3</option>
</select>
</fieldset>
<fieldset>
<legend>데이터 리스트</legend>
<input type="text" list="data_list_1">
<datalist id="data_list_1">
<option value="a" />
<option value="ab" />
<option value="abc" />
</datalist>
</fieldset>
</form>
'구트아카데미 > 1. HTML' 카테고리의 다른 글
| [HTML] 기초 2 (0) | 2021.06.09 |
|---|