" ✓ HTML 기본 틀 "
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>여기는 타이틀 입니다</title>
</head>
<body>
<!-- 이곳에 내용이 입력됩니다 -->
</body>
</html>" ✓ HTML 필수 태그 "
<html>, <head>, <title>, <body>
" ✓ 메타데이터 "
- 데이터를 설명하는 데이터
- <head> 태그 안에 작성된다 단, <script> 태그는 <body> 내에도 작성 가능하다
- <meta> - 문자 인코딩 방식, 웹 페이지의 저작자 등을 표현
- <title> - 웹 페이지의 타이틀 지정
- <script> - javaScript 사용시 필요한 형식
- <style> - CSS를 내부에서 사용시 필요한 형식
- <link> - CSS 파일을 외부파일로 저장 후 연결시 사용, 형식 type, rel,href 를 따라야 한다
- <base> - 웹 페이지들의 기본 URL 지정, 메인 도메인이 같고 뒤의 서브 도메인만 다를 경우 base를 사용한다
" ✓ 메타데이터 태그 사용예시 "
<meta>
<head>
<meta charset="UTF-8">
<meta name="author" contect="FDEE">
</head>
<base>
<head>
<base href="https://fdee.tistory.com/">
</head><body>
<a href="category/인터넷프로그래밍">카테고리 - 인터넷프로그래밍</a>
</body>
<link>
<head>
<link type="text/css" rel="stylesheet" href="mystyle.css">
</head>" ✓ 블록 요소 "
- 한줄을 다 차지
- <div>
- <p>
- <h1>
- <ul>
- <table>
- <pre>
- <form>
" ✓ 인라인 요소 "
- 블록요소 내 개별적으로 적용
- <a>
- <img>
- <strong>
- <em>
- <br>
- <input>
- <span>
" ✓ HTML 태그 모음 "
- <br> - 다음줄
- <h> - 문단, <h1> : 글씨크기 max, <h6> : 글씨크기 min
- <p> - 문단
- <hr> - 수평선
- < - ' < '
- > - ' > '
- " - ' " '
- <pre> - 문단, 빈칸과 개행을 인식하여 그대로 보여준다
- <b> - 진하게
- <strong> - 진하게
- <i> - 이텔릭
- <em> - 이텔릭
- <b><i> - 진하게 이텔릭
- <del> - 삭제
- <ins> - 밑줄
- <sup> - 윗첨자
- <sub> - 아래첨자
- <mark> - 하이라이팅 (형광펜)
- <ul> - 순서없는 리스트
- <span> - 블록 속 특정문자 속성변경시 사용
- <img> - 이미지 삽입
- <ol> - 순서 있는 리스트, 중첩가능, type를 따로 지정할 수 있다 (라틴어 수)
- <ul> - 순서 없는 리스트, 중첩가능,
- <li> - 순서 있는, 없는 리스트의 내용
- <dl> - 정의 리스트
- <dt> - 정의리스트 - 제목
- <dd> - 정의리스트 - 내용
- <table> - 표
- <caption> - 표 제목
- <thead> - 표 - 1행
- <tbody> - 표 - 2행이상
- <tfoot> - 표 - 마지막 행
- <tr> - 표 - 각 행
- <th> - 표 - 강조행의 각 열
- <td> - 표 - 2행이상 - 각 행의 각 열
- <a> - 하이퍼링크, target으로 열리기 옵션조절
- <iframe> - 인라인 프레임, src로 또다른 html 열기
- <audio> - 오디오 삽입
- <video> - 비디오 삽입
- <input> - "text","password","button" 등 입력요소 태그
- <form> - <input>태그들을 감싸는 태그로 사용
- <button> - 버튼, <input type="button"> 동일하다
- <textarea> - 다중 텍스트 입력창
- <datalist> - 목록시스트 입력칸, <input type="text" list="대상"> 함께 사용
- <option> - <datalist> 태그 안에 사용되는 리스트 태그
" ✓ 주요태그 사용예시 "
<img> 이미지 넣기
<body>
<img src="이미지 URL" alt="이미지 대안글" width="100" height="100">
</body>
<ul> 순서없는 리스트 (ol도 사용법 동일)
<body>
<ul>
<li>내용1</li>
<li>내용2</li>
</ul>
</body>
<ol> 순서있는 리스트 : type 적용 , type="A" : A,B,C 로 적힌다
<body>
<ol type="I"|"II" start="value">
<li>내용1</li>
<li>내용2</li>
</ol>
</body>
<dl>, <dt>, <dd> 정의리스트
<body>
<dl>
<dt><strong>Chrome</strong></dt>
<dd>
구글에서 만든 것으로 좋은 디버거를 갖추고 있어
디버깅에 많이 사용
</dd>
</dl>
</body>
<table>, <caption>, <thead>, <tfoot>, <tbody>, <tr>, <th>, <td> 표 만들기
<body>
<table border="1">
<caption>학생 신체 검사 표</caption>
<thead>
<tr>
<th><strong>이름</strong></th>
<th><strong>키</strong></th>
<th><strong>체중</strong></th>
<th><strong>시력</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td>황기태</td>
<td>179</td>
<td>67</td>
<td>1.0</td>
</tr>
</tbody>
<tfoot>
<tr>
<th><strong>평균</strong></th>
<th><strong>179</strong></th>
<th><strong>67</strong></th>
<th><strong>1.0</strong></th>
</tr>
</tfoot>
</table>
</body>
<iframe> 인라인 프레임, srcdoc 사용시 src 속성은 무시된다
<body>
<iframe src="url" name="iframe1" width="200" height="200">
</body>
" ✓ <a> 하이퍼링크 "
- 하이퍼링크, href, target 속성이 있다
- href
- "http로 시작하는 url" - 일반적인 url
- "html 파일이름" - 상대위치로서 "name.html" 넣을 시 name.html이 연결
- "#아이디 이름" - 앵커, 해당 아이디 위치로 이동
- target 속성
- "_blank" - 새 윈도우
- "_self" - 현재 윈도우 (default 값)
- "_parent" - 부모 윈도우
- "_top" - 브라우저 안 윈도우
※ 만약 <iframe> 사용하여 <a> 클릭시 <iframe>에 보여줄 경우
- target 속성에 해당 frame의 name을 넣는다
- url, target, img 링크 예시
<body>
<a href="https://fdee.tistory.com" target="_blank">FDEE 블로그</a>
<a href="https://fdee.tistory.com" target="_blank">
<img src="이미지 url" alt="이미지">
</a>
</body>- 앵커 예시
<body>
<a href="#jump1">클릭 시 해당아이디로 위치</a>
<p>
내
용
채
우
기
</p>
<h1 id="jump1">점프 위치</h1>
</body>
" ✓ <video>, <audio> 비디오, 오디오 "
- 비디오 : MP4, WebM, Ogg 파일을 재생한다
- 오디오 : mp3 파일을 재생한다
- video 속성
- src : 비디오 or 오디오 파일 url
- width : 비디오 너비
- height : 비디오 높이
- controls : 컨트롤바 보이기
- autoplay : 자동재생
- loop : 반복재생
- 사용 예시
<body>
<video src="동영상.mp4" witdh="320" height="240" controls autoplay></video>
</body>>
" ✓ <input> 입력 태그 "
- <input type="해당되는 타입 명시"> 방식으로 사용
- id, 또는 name으로 대상을 접근하여 .value 값으로 내용 접근
- "text" - 한줄 텍스트 입력창
- "password" - 한줄 암호 입력창 (입력시 *로 표기)
- "button" - 버튼
- "submit" - 웹 서버로 데이터 전송 버튼
- "image" - 이미지 버튼
- "checkbox" - 다중선택가능 체크박스
- "radio" - 1개선택 체크박스
- "number" - 스핀버튼 (값 조절버튼)
- "range" - 슬라이드바
- "color" - 색상선택기능
- "email" - 이메일 형식으로 받는 텍스트 입력창
- "url" - url 형식으로 받는 텍스트 입력창
- "tel" - 전화번호 형식으로 받는 텍스트 입력창
- "search" - 검색키워드 형식으로 받는 텍스트 입력창
- "file" - 로컬 컴퓨터의 파일 선택창
✓ type="text", type="password" 텍스트, 패스워드
- <input type="text" 이곳에 요소들 나열 >
- name="myName" - 접근가능한 이름
- maxlength="10" - 최대입력수를 설정
- size="10" - 최대입력창 크기 (보이는 글자개수)
- value="입력해주세요" - 입력된 내용, javascript에서 내용접근시 사용
✓ type="button" 버튼
- <input type="button"> 또는
- <button type="button"> 동일하다
- <input type="button" 이곳에 요소들 나열 >
- name="myName" - 접근가능한 이름
- value="문자열" - 버튼 내용
✓ type="image" 이미지 버튼
- <input type="button" src="이미지 url" >
" ✓ <textarea> 여려줄 입력 태그 "
- <textarea 이곳에 요소들 나열 >
- cols="5" - 열 개수, 보이는 줄 개수
- rows="20" - 행 개수, 가로로 보이는 글자수
- name="myName" - 접근가능한 이름
- wrap="OFF" - 자동 줄바꿈 처리 지정 (OFF,HARD,SOFT)
" ✓ <datalist> 목록 리스트 태그 "
- <input type="text" list="myList"> 태그와 함께 사용된다
- <datalist id="myList"> 사용시에 <input>의 list와 <datalist>의 id 값이 일치해야만 한다
- <option value="내용"> 태그로 리스트를 만든다
<body>
<form>
<input type="text" list="myList">
<datalist id="myList">
<option value="첫번째 내용"></option>
<option value="두번째 내용"></option>
</datalist>
</form>
</body>
'인터넷프로그래밍' 카테고리의 다른 글
| 중간고사 핵심키워드 정리 (0) | 2020.10.14 |
|---|---|
| JavaScript 요약 (0) | 2020.10.05 |
| CSS 요약 (0) | 2020.10.05 |