HTML(HyperText Markup Language)
: 하이퍼텍스트를 가장 중요한 특징으로 하는 마크업이라는 형식을 가진 컴퓨터 프로그래밍 언어.
: 사람과 웹브라우저 사이의 언어.
: <태그>로 이루어짐.
: .html ; 확장자
- 기본문법
<h1></h1>~<h6><h6>태그
: header1
: 글씨 크고 굵게, 자동 줄바꿈.
- 하이퍼텍스트와 속성
<a></a>태그
: anchor의 약자.
: <a href="주소"></a>
: <a href="주소" target="_blank"></a> ; 새로운 탭에서 링크 열기. 순서 상관 없음.
: <a href="주소" title="내용"></a> ; 커서를 갖다대면 미리보기가 뜸.
: GML - SGML - SCMLguid - HTML(a태그 추가)
- 태그의 중첩과 목록(<body>문서 본문</body>)
<li></li>, <ul></ul>, <ol></ol>태그
: 목록.
: <li> ; list
: <ol> ; ordered list
: <ul> ; unordered list
: <ul><li>text</li></ul> ; grouping
: <ol><li>text</li></ol> ; 숫자가 붙은 grouping
- 문서의 구조(<head>본문 아니지만 부가적으로 꾸며줌</head>)
: <title></title>태그 ; 브라우저의 제목.
: <meta charset="utf-8"> ; 글씨 깨질 때.
<html>
<head>
부가적인 것.
</head>
<body>
문서 본문
</body>
</html>
- DOCTYPE(Document type declaration)
<!DOCTYPE html>
- 단락
<p></p>태그
- 이미지
<img>태그
: <img src="주소">
: <img src="주소" alt="사진이 보이지 않을 때 대신 나오는 텍스트">
- 표 : 기본
<table border="선 두깨">
<tr> ; row(행)
<td></td>
</tr>
</table>
- 표 : 구조
<table>
<thead>
<tr>
<th>제목</th>
</tr>
</thead>
<tbody>
<tr>
<td>내용</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>자동으로 맨 아래로 이동</td>
</tr>
</tfoot>
</table>
- 표 : 병합
<td rowspan="2">내용1</td>
<td>내용2</td>
: 2개의 행 병합
<td colspan="2">내용1</td><td>내용2</td>
: 2개의 열 병합
- form : 기본
<form action="제출한 정보가 갈 주소">
<input type="text" name="content"> : name=입력값&name=입력값/name 안쓰면 정보가 제출되지 않음
<input type="password" name="pwd"> : 자동으로 비밀번호 처리 됨
<input type="submit"> : 제출
</form>
- form : 문자입력
<form action="">
<input type="text" name="이름" value="기본값">
<textarea 크기변경가능>문자입력 상자/기본값</textarea>
<input type="submit">
</form>
- form : dropdown list
<form action="">
<h1>선택폼</h1>
<select name="이름1">
<option value="값1">선택지1</option>
<option value="값2">선택지2</option>
<option value="값3">선택지3</option>
</select>
<h1>다중선택폼</h1>
<select name="이름2" multiple> : 사용자가 Ctrl누르면 다중선택 가능
<option value="값1">선택지1</option>
<option value="값2">선택지2</option>
<option value="값3">선택지3</option>
</select>
</form>
- form : radio, checkbox
radio(단일선택)
<input type="radio" name="이름">
<input type="radio" name="이름">
<input type="radio" name="이름">
: 이름이 같아야 그중에서 선택 가능
checkbox(다중선택)
<input type="checkbox" name="이름" checked> : 기본값
<input type="checkbox" name="이름">
<input type="checkbox" name="이름">
- form : button
button
<input type="button" name="id" onclick="이벤트">
<input type="reset"> : 재설정
- form : hidden
<input type="hidden" name="이름" value="숨기고싶은값, 작성하지 않아도 기본적으로 전송되는 값">
- form : label
<label for="아이디">정보이름</label>:
<input id="아이디" type="text" name="id">
: 정보이름 : [입력폼 ]
: 아이디가 같으면 입력폼에 이름표를 달아줄 수 있음
<label for="아이디">정보이름 :
<input id="아이디" type="text" name="id">
</label>
- form : method
<form action="" method="정보전달방식"> : get(기본), post
<input type="text" name="이름">
<input type="submit">
</form>
- form : 파일 업로드
<form action="제출할 곳 주소" enctype="multipart/form-data">
<input type="file" name="이름">
<input type="submit">
</form>
- font
<font size="사이즈" color="색깔">글씨</font>
- meta
<head>
<meta charset="utf-8">
</head>
- 검색엔진 최적화
<head>
<link rel="canonical" href="보여주고 싶은 화면 주소">: 이 화면에 들어가면 자동으로 보여주고 싶은 화면 주소로 간다
</head>
- HTML5의 새로운 제출양식
<form action="">
<input type="number" min="10" max="15" name="숫자만요"> : 폼에 쓸 내용을 제한할 수 있음 숫자만요!
<input type="date" name="date1">
<input type="month" name="month1">
<input type="week" name="week1">
<input type="time" name="time1">
<input type="tel" name="tel1">
<input type="url" name="url1">
<input type="email" name="email1"> : 타입에 따라 입력하기 쉬운 입력폼이 됨, 조건에 맞지 않는 건 입력 안됨
<input type="submit">
</form>
- HTML5 form의 새로운 속성들
<form action="" autocomplete="on"> : 입력폼에 입력할 때 자동완성
<input type="text" name="content" placeholder="입력폼에 미리 쓸 수 있는 안내문구" autfocus> : 자동으로 입력폼으로 커서가 감
<input type="password" name="pwd" autocomplete="off"> : 다른건 자동완성 얘만 자동완성X
<input type="submit">
</form>
- HTML5 form 입력값 체크
<form action="">
<input type="text" name="content" required> : 반드시 입력
<input type="text" name="content2" required pattern="정규표현식">
<input type="password" name="pwd">
<input type="submit">
</form>