HTML
HTML(HyperText Markup Lauguage)
- 기본 기능 : 웹 브라우저에 보여 줄 내용에 마크업하고 문서끼리 링크하는 것
TIP) HTML 기본구조 자동으로 만들기 : ! 입력한 후 Tab 누르면 자동으로 기본구조 입력된다.
- 블록(Block) 요소 : y축 정렬 형태로 출력(줄바꿈 현상 나타남), 공간 만들 수 있고, 상하 배치 작업 가능, width와 height 사용 가능, margin과 padding 등 사용 가능
- 인라인(Inline) 요소 : x축 정렬 형태로 출력(한 줄에 출력), 공간 만들 수 없고, 상하 배치 작업 불가능, width와 height 사용 불가, margin과 padding 등 사용 불가
Block 요소를 갖는 대표적인 태그로는 <h>, <p>가 있고, inline 요소를 갖는 태그로는 <a>가 있다.
- 태그*숫자 -> 숫자 갯수 만큼 태그 생성됨 ex) li*3
<!DOCTYPE html>
- 현재 문서가 HTML5 언어로 작성한 웹 문서라는 의미
<html></html>
- 웹 문서의 시작과 끝을 나타내는 태그
<html lang="ko"> : lang 속성으로 문서에서 사용할 언어를 지정 가능, ko는 korea의 줄임말
<head></head>
- 웹 브라우저가 웹 문서를 해석하는데 필요한 정보를 입력하는 부분, 실제 화면에서는 거의 안보임
<meta charset="UTF-8"> : 한글 인코딩을 의미
<meta name="keyword" content="html의 구조"> : 웹 문서의 키워드
<meta name="description" content="html의 구조를 알아봅시다"> : 웹 문서의 설명
<meta name="author" content="RedStone"> : 웹 문서의 소유자나 제작자
<title>웹 문서 제목</title> : 웹 브라우저 제목 표시줄에 표시됨, 즐겨찾기 지정할 때의 이름
<body></body>
- 실제로 웹 브라우저 화면에 나타나는 내용
<hn>제목</hn> : 웹 문서의 제목을 나타냄, n은 1~6의 숫자가 들어갈 수 있으며 크기별로 표시 가능
<p>내용</p> : 텍스트 내용을 입력, </p>를 함으로써 단락이 끝남 (단락 바뀌므로 단락끼리 간격 차이 있음)
<br> : 줄 바꿈 태그 (단락이 바뀌지 않으므로 줄 간격 적음)
<blockquote>인용문</blockquote> : 다른 텍스트보다 약간 들여쓰기
<strong>굵게 강조할 텍스트</strong> : 중요한 내용을 강조
<b>굵게 표시할 텍스트</b> : 굵게 표시
<em>이탤릭체로 강조할 텍스트</em> : 특정 부분 강조
<i>이탤릭체로 표시할 텍스트</i> : 마음 속 생각이나 용어, 관용구 등에 사용
<sup>내용</sup> : 위 첨자 표시
<sub>내용</sub> : 아래 첨자 표시
<s>내용</s> : 취소선 표시
<u>내용</u> : 밑줄 표시
<small>내용</small> : 부가정보처럼 작게 표시
<hr> : 이야기 장면 전환, 구획 내 주제 변경 등, 문단 레벨 요소에서 주제의 분리 등을 표시
순서 있는 목록 만들기
<ol>
<li>항목1</li>
<li>항목2</li>
</ol>
목록은 숫자가 기본적으로 적용, <ol type="~"> 로 변경 가능
종류는 type="1", type="a", type="A", type="i", type="I" 가 있음
순서 없는 목록 만들기
<ul>
<li>항목1</li>
</ul>
설명 목록 만들기
<dl>
<dt>이름</dt>
<dd>값</dd>
</dl>
표 만들기
<table>~</table> : 표 만들기 태그, 여기 안에 표 관련 태그 작성하기
<caption>표 제목</caption> : 표의 위쪽 중앙에 제목 표시
<tr> : 행 만들기
<td>1행1열</td> : 행 안의 셀 만들기
<td>1행2열</td>
<th>1행3열</th> : 내용 진하게 표시
</tr>
<thead> 태그 : 표의 구조에서 제목 부분
<tbody> 태그 : 표의 구조에서 본문 부분
<tfoot> 태그 : 표의 구조에서 요약 부분 (표의 구조는 웹 브라우저 화면에서는 보이지 않음)
<td rowspan="합칠 셀의 갯수">내용</td> : 행 합치기 (th도 가능)
<td colspan="합칠 셀의 갯수">내용</td> : 열 합치기 (th도 가능)
특정 열에 스타일 속성 지정하기
<colgroup> : colgroup은 caption 태그 바로 다음에 사용해야 함, 즉 표의 내용이 시작 전에 알림
<col style="background-color:#eee;"> : 첫번째 열 배경색 지정
<col> : 스타일 없어도 열의 갯수는 맞춰야함
<col style="width:150px;"> : 세번째 열 넓이 지정
</colgroup>
- 각 셀마다 너비나 높이 다르게 하고 싶으면 각자의 td, th에서 width나 height 설정하기
이미지 삽입하기
<img src="이미지 파일 경로" alt="대체용 텍스트">
- 경로는 웹 문서 파일의 위치를 기준으로 정해짐
- 따라서 웹 문서 파일과 같은 경로에 있으면 이미지 파일 이름만 적으면 됨
- 사이트에서 사용하는 이미지 파일 쉽게 관리하기 위해서는 이미지만 담은 폴더에 따로 저장하는 것이 좋음
- 이미지 파일 형식은 gif, jpg, jpeg, png 가능
width="숫자px" 또는 width="숫자%"로 이미지 크기 조절 가능
heigh도 설정 가능하나 둘 중 하나만 하면 나머지는 자동으로 비율 계산됨
ex <img src="images/top.jpg" width="100%">
오디오 및 비디오 삽입하기
<object data="파일" width="너비" height="높이"></object> : 오디오, 비디오, 자바, PDF 등 파일 삽입할 때 사용
<embed src="파일 경로" width="너비" height="높이"> : <audio><video><object>지원안하는 브라우저에서 사용
<audio src="오디오 파일 경로"></audio>
<video src="비디오 파일 경로"></video>
- <audio> 및 <video> 태그 속성
| 종류 | 설명 |
| controls | 화면에 컨트롤바 표시 |
| autoplay | 자동으로 실행 |
| loop | 반복 재생 |
| muted | 소리 제거 |
| width, height | 비디오의 경우, 너비 및 높이 지정 |
ex 오디오 파일을 배경음악처럼 사용하려면, autoplay에 loop 사용하고 controls 빼면 된다.
하이퍼링크 삽입하기
<a href="링크 주소">텍스트 또는 이미지</a>
- 텍스트 사용시 텍스트 링크가 되고, 이미지 사용시 이미지 링크가 됨
- 이미지 넣을때는 <img src="파일 경로"> 하면 됨
- 연결된 문서를 새 탭에서 열리게 하려면 target="_blank" 추가하면 됨
ex <a href="../09/order.html" target="_blank">주문서 작성하기</a>
폼 삽입하기
<form 속성="속성값">여러 폼 요소</form> : 기본 태그
- <form> 태그의 속성
| 종류 | 설명 |
| method | 사용자가 입력한 내용을 서버쪽 프로그램으로 어떻게 넘겨줄 것인지 지정 - get : 주소 표시줄에 입력한 내용이 그대로 드러남 - post : 길이 제한 없고 드러나지 않음 |
| name | 폼의 이름 지정 |
| action | 폼 태그 안의 내용을 처리해 줄 서버 프로그램 지정 |
| target | action 속성에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에서 열도록 지정 |
| autocomplate | 예전 입력 내용을 자동으로 표시, 기본 속성값은 "on" |
| input | 사용자가 내용을 입력할 필드를 삽입 |
ex <form action="register.php">여러 폼 요소</form>
<fieldset><legend>그룹 이름</legend></fieldset> : 폼 요소를 그룹으로 묶기
<label>라벨명<input type="속성값"></label> : 폼 요소에 라벨명 붙이기
ex
<li>
<label>이 름</label>
<input type="text">
</li>
/* label과 input을 분리시켜서 작성하면 라벨과 입력 폼 사이 거리가 떨어지게 만들 수 있다.
그래도 사이 공간이 적으면 <style>에서 라벨에 float: left; 주기 */
- <input> 태그의 type 속성값
| 종류 | 설명 |
| text | 한 줄짜리 텍스트 입력할 수 있는 텍스트 박스 - size : 필드 길이 지정(넘으면 화면에 안보임) - maxlength : 최대 문자 수 지정 |
| password | 비밀번호 입력 필드 - size : 필드 길이 지정(넘으면 화면에 안보임) - maxlength : 최대 문자 수 지정 |
| search | 검색할 때 입력하는 필드 화면에서 볼 때는 text와 동일하지만 웹 브라우저에서 검색을 위한 텍스트 필드로 인식 이 필드에 검색어 입력하면 오른쪽에 X가 표시되어 지우기 가능 |
| url | URL 주소 입력 필드 |
| 이메일 주소 입력 필드 | |
| tel | 전화번호 입력 필드 |
| checkbox | 주어진 여러 항목에서 2개 이상 선택할 수 있는 체크 박스 - value : 서버에게 알려줄 때 넘겨줄 값 지정(필수 항목) - checked : 기본으로 선택해놓고 싶은 항목에 사용 |
| radio | 주어진 여러 항목에서 1개만 선택할 수 있는 라디오 버튼 - value : 서버에게 알려줄 때 넘겨줄 값 지정(필수 항목) - checked : 기본으로 선택해놓고 싶은 항목에 사용 ex <input type="radio" name="체크박스" id="1"> <label id="1">메일 수신</label> <input type="radio" name="체크박스" id="2"> <label id="2">메일 수신 안 함</label> /* name은 체크박스 전체를 의미, 같은 값 써야 같은 체크박스 됨 id는 각 체크사항을 구분지어줌 */ |
| number | 숫자 조절 스핀 박스 - min : 최솟값 지정, 기본값은 0 - max : 최댓값 지정, 기본값은 100 - step : 숫자 간격 지정, 기본값은 1 - value : 필드에 표시할 초깃값 |
| range | 숫자 조절 슬라이드 막대 - min : 최솟값 지정, 기본값은 0 - max : 최댓값 지정, 기본값은 100 - step : 숫자 간격 지정, 기본값은 1 - value : 필드에 표시할 초깃값 |
| date | 사용자 지역 기준 날짜(연, 월, 일) 날짜와 시간 속성도 min, max, step, value 사용 가능 |
| month | 사용자 지역 기준 날짜(연, 월) |
| week | 사용자 지역 기준 날짜(연, 주) |
| time | 사용자 지역 기준 시간(시, 분, 초) |
| datetime | 국제 표준시로 설정된 날짜와 시간 |
| datetime-local | 사용자 지역 기준 날짜와 시간 |
| submit | 전송 버튼 - value : 버튼에 표시할 내용 |
| reset | 리셋 버튼 - value : 버튼에 표시할 내용 |
| image | submit 버튼 대신 사용할 이미지 넣기 ex <input type="image" src="경로" alt="대체 텍스트"> |
| button | 일반 버튼 - value : 버튼에 표시할 내용 |
| file | 파일 첨부 버튼 |
| hidden | 사용자에게 보이지 않지만 서버로 넘겨주는 값이 있는 필드 ex <input type="hidden" name="이름" value="서버로 넘길 값"> |
- <input> 태그의 속성
| 종류 | 설명 |
| autofocus | 자동으로 입력커서 갖다 놓기 ex <input type="text" autofocus required> |
| placeholder | 입력란에 힌트 표시 ex <input type="tel" placeholder="숫자만 입력해주세요"> |
| readonly | 읽기 전용 필드 |
| required | 필수 입력 필드를 지정 |
<textarea>내용</textarea> : 여러 줄을 입력하는 영역
- <textarea> 태그의 속성
| 종류 | 설명 |
| cols | 텍스트 영역의 가로 너비를 문자 단위로 지정 ex <textarea cols="40" rows="4" placeholder="남길 말을 적어주세요"></textarea> |
| rows | 텍스트 영역의 세로 길이를 줄 단위로 지정 |
<select> : 여러 옵션 중에서 선택하게 하는 드롭다운 목록(<datalist> 태그와 유사)
<option value="값1">내용1</option>
<option value="값2">내용2</option>
</select>
- <option> 태그 속성
| 종류 | 설명 |
| value | 해당 항목 선택 시 서버로 넘겨줄 값 지정 |
| selected | 기본적으로 선택해서 보여 줄 항목 지정 |
<button> : 버튼 생성
- <button> 태그 속성
| 종류 | 설명 |
| submit | 폼을 서버로 전송, <input type="submit">과 같은 기능 |
| reset | 폼에 입력한 내용 초기화, <input type="reset">과 같은 기능 |
| button | 자체 기능 없음, <input type="button">과 같은 기능 |
ex <button type="submit">주문하기</button>
시맨틱 태그
<header> 태그 : 헤더 영역을 의미, 웹사이트의 머리글을 담는 공간
<nav> 태그 : 메뉴 버튼을 담는 공간, <ul>, <li>, <a>와 함께 사용
<main> 태그 : 웹 문서에서 핵심이 되는 내용을 입력, 웹 문서에서 한 번만 사용 가능, <main role="main">을 꼭 써야 한다. <article> 태그를 가질 수도 있다.
<article> 태그 : 문서의 주요 이미지나 텍스트 등 정보를 담고 구역을 설정하는 태그, 태그 내에 구역을 대표하는 <hn>태그가 존재해야 한다.
<section> 태그 : 웹 문서에서 콘텐츠 영역을 의미, 몇 개의 콘텐츠를 묶는 용도로 사용
<aside> 태그 : 본문 내용 외에 왼쪽이나 오른쪽, 아래에 사이드 바 생성
<footer> 태그 : 웹 문서에서 맨 아래쪽에 있는 푸터 영역 생성, 사이트 정보나 저작권 정보, 연락처 등 입력
<div> 태그 : 여러 소스를 묶음, <div id="header">나 <div class="detail">처럼 id나 class 속성을 사용해서 문서 구조 만들 때 사용, 임의의 공간을 만들 때 사용