HTML (Hyper Text Markup Language)
: 하이퍼텍스트를 가장 중요한 특징으로 하는 마크업이라는 형식을 가진 컴퓨터 프로그래밍 언어
HTML 구조
<!DOCTYPE html> //HTML5 언어로 작성되었다고 선언
<html>
<head>
<title>탭 이름</title>
<meta charset="UTF-8">
</head>
<body>
본문
</body>
</html>HTML 연대기 :
http://www.martinrinehart.com/frontend-engineering/engineers/html/html-tag-history.html
태그
<> : 시작태그
</> : 끝태그
기본
<h1>제목</h1>
<p> 단락 </p>
<p>이것은 <strong>강조strong>입니다.</p>
<a>링크 anchor의 약자</a>
<a target=_blink href="https://www..." title="링크설명">href, target는 속성</a>
<br> 줄바꿈, A forced line-break의 줄임말
/* ul,ol로 리스트를 그룹핑 */
<ul> unordered list : list 항목을 순서 구분없이 출력
<li>list</li>
<li>list</li>
</ul>
<ol> orderd list : list 항목을 숫자로 출력
<li>list</li>
<li>list</li>
</ol>
<img> 이미지 삽입
<img src="파일명.jpg" width="폭" height="높이" alt="대체제" title="도움말">
// alt(alternative text) : 이미지가 깨졌을때 사용한 대체제테이블
<table border='1'>
<thead> 테이블 제일 위
<tr> table row 행
<th> table head </th>
<th> 굵은 글씨 </th>
<th> 중앙정렬 </th>
</tr>
</thead>
<tr>
<td> table data </td>
<td> 왼쪽 정렬 </td>
<td rowspan="3"> table data </td>
</tr>
<tr>
<td> table data </td>
<td> table data </td>
</tr>
<tfoot> 테이블 제일 아래
<tr>
<td colspan="2"> table data </td>
</tr>
</tfoot>
</table>
//rowspan 세로칸 병합
//colspan(column span) 가로칸 병합
폼 form
: 사용자가 입력한 정보를 서버로 전송할때 사용
<form action="http://localhost/form..." method="post" autocomplete="on">
method="get" : 기본, url로 정보 전송 -> 정보 노출
method="post" : 데이터를 숨겨서 전송
autocomplete="on" : 모든 input 태그들 자동완성 (특정 태그만 off 하고 싶다면 해당 태그에 속성 추가)
<input type="text" name="id" value="값" autofocus required>
autofocus : 자동으로 커서 포커싱
placeholder : 입력창 안내
*유효성검증(form validation)* 보안적인 의미는 없음 사용자의 입력만 제한
required 필수 입력
pattern="정규표현식" ex)"[a-zA-z]" 알파벳 한개만 입력 가능
"[a-zA-z][a-zA-z]" 알파벳 두개만 입력 가능
"." 모든 문자 중 한개만 입력 가능
".+" 어떤 문자건 하나 이상 입력해야함
".+[0-9]" 어떤 문자건 하나 이상 와야하고 마지막은 숫자로 끝나야함
<input type="password" name="pwd" placeholder="입력하세요." pattern="[a-zA-z]">
<textarea cols="폭" rows="높이"> 내용을 입력하세요.</textarea>
<select name="선택" multiple> 선택, multiple은 다중선택 가능
<option value="1">선택지1</option>
<option value="2">선택지2</option>
<option value="3">선택지3</option>
</select>
<input type="radio" name="하나" value="1"> 체크박스 단일선택
<input type="radio" name="하나" value="2"> name이 같은 것들끼리 그룹핑
<input type="checkbox" name="check" value="1"> 체크박스 다중선택
<input type="checkbox" name="check" value="2" checked>
<input type="submit"> 기본 값="제출", 정보 전송
<input type="button" value="버튼"> 기본값없음, ui형태만
<input type="reset"> 기본 값="재설정", 사용자가 입력한 정보 초기화
<input type="hidden" name="hide" value="22"> 화면에 보이지 않지만 서버에 값을 전송할때 사용
<label for="id_txt"> 입력값 </label> "입력값"이라는 텍스트가 입력박스에 연결
<input id="id_txt" type="text" name="id" value="입력하세요">
<label> 클릭가능영역을 넓혀줌
입력값 <input type="password" name="pwd">
</label> for 속성없이 연결
</form>
<form action="http://localhost/..." method="post" enctype="multipart/form-data"> 파일전송 필요설정
<input type="file" name="profile">
<input type="submit">
</form>input types
<input type="text">
<input type="password">
<input type="radio">
<input type="checkbox">
<input type="submit">
<input type="button">
<input type="reset">
<input type="hidden">
<input type="file">
<input type="number" min="최소" max="최대"> 숫자만 입력
<input type="email"> @가 포함되도록 제어
<input type="color">
<input type="date"> 날짜 년-월-일
<input type="month"> 년-월
<input type="week"> -년 -번째 주
<input type="time"> -년 시간
<input type="search"> 검색창
<input type="tel">
<input type="url">
<input type="range" min="최소" max="최대"> 슬라이드로 범위 설정
meta 태그
: 웹 페이지 전체 또는 글의 본문을 설명하는 정보
<head>
<meta charset="UTF-8"> 웹 페이지를 UTF-8방식으로 읽으라고 지정
<meta name="description" content="html 기초">
<meta name="keywords" content="html,코딩,css,java,web">
<meta name="author" content="nickname">
<meta http-equiv="refresh" content="3"> 3초 간격으로 웹페이지를 새로고침
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 다른 장치 화면에 최적화
</head>semantic tag
** semantic 의미론적인
특별한 기능은 별로 없지만 의미를 부여해주는 태그
- header : 화면의 상단에 위치하는 전체적인 정보를 정의
네비게이션을 돕거나 소개를 나타내는 그룹을 표현 - footer : 화면의 하단에 위치하는 전체적인 정보를 정의
주로 저작권 정보나 서비스 제공자 정보등을 나타냅니다. - nav : 네비게이션 항목을 정의
다른 부분으로 이어주는 네비게이션 링크로 구성된 섹션을 표현 - article : 본문, 독립적인 컨텐츠
- aside : 해당 페이지와 관련없는 내용 ex)광고
- details : 화면에 표시되지 않는 추가정보
추가적인 정보를 나타내거나 사용자가 요청하는 정보 - figure : 삽화나 다이어그램과 같은 부가적인 요소, 주석을 다는 용도
- main : 가장 중심이 되는 컨텐츠
- mark : 참조나 하이라이트 표시를 필요로 하는 문자
- section : 구획, 그룹핑하기 위해 사용
- time : 시간
검색엔진 최적화
검색엔진이 컨텐츠를 잘 해석할 수 있도록, 사용자가 검색했을 때 상위에 노출될 수 있도록 하는 것
- 명확하고 독창적인 타이틀 사용
- meta 태그 활용
- url 구조 개선
- 콘텐츠 최적화 - 이미지, 제목 등
- 검색 로봇 제어 - robots.txt, sitemap
- 사이트 홍보와 분석 - 페이지 랭크
외부 문서 삽입 - iframe
웹페이지에 다른 웹페이지를 삽입하는 방법
<iframe src="http://www..." wideth=""... sandbox></iframe>
ex) 소스코드 복사해서 넣으면 외부 페이지를 삽입할 수 있음
-> 보안문제가 있음(신뢰할 수 없는 사이트의 삽입된 외부소스에서 악성코드가 실행될 수 있음)
*sandbox : ifame 안쪽 페이지의 자바스크립트를 차단함? 서버에 데이터 전송할 수 없음
비디오 삽입 - html5부터 가능
<video width="너비" controls> controls : 영상 컨트롤러 소환
<source src="파일명.확장자"> 브라우저마다 비디오 코덱 지원방식이 다름
<source src="파일명.확장자"> 같은 영상을 다른 확장자로 여러개 준비
</video>
[신기술 도입 여부 결정에 도움되는 사이트] : http://caniuse.com
열쩡열쩡! 💜