HTML에서는 대소문자를 구별하지않으나, 소문자로 작성하기를 권장함

  1. 메타요소

    <meta 속성="속성값">

1.1 <meta charset="UTF=8">
인코딩 정보. 국내에서는 euc-kr도 사용하나, utf=8 이 광범위적

1.2 <meta name="description" content="주로 웹페이지 소개내용">
검색엔진에서 확인되는 페이지에 대해 소개하는 내용. 160자 이내 권장

1.3 <meta name="keywords" content="키워드1,키워드2,키워드3....">
검색엔진에서 노출되기 위한 키워드 작성. 20개 미만 권장 (스팸처리됨)

1.4 <meta name="robots" content="noindex, nofollow">
기본적으로는 노출되나, 이렇게 적을시 검색엔진에 노출되지 않음.

1.5 <meta name="viewport" content="width=device-width"> ...
viewport를 설정시 모바일 기기에서도 페이지 너비/배율을 설정할수있다.
위의 태그는 장치너비로 설정하는 코드이다.
1.5.1 <content="height=device-height"> :너비를 장치높이로 설정
1.5.2 <content="width-device-width, initial-scale=1.0">
초기 화면 배율설정 (zoom레벨설정) / 1.0=100% 와 같다
1.5.3 minimum-scale=1.0, maximum-scale=2.0 등 최소/최대 배율설정
1.5.4 <content="user-scalable=no"> :크기 조절하기를 원치않을때
참고페이지 : https://aboooks.tistory.com/352

1.6 <meta http-equiv="x-ua-compatible" content="ie=edge">
가장 최신 모드를 표시하는 방법 (확인필)

  1. 블록(block level elements) / 인라인 (inline elements)

2.1 블록요소
<h1~h6>, <p>, <div>

2.2 인라인요소
<a>, <img>, <strong>, <u>, <span>, <iframe>

2.3 인라인요소는 블록요소를 포함할 수 없다

  1. 주석처리 방법

3.1 HTML

<!--내용입력-->

3.2 CSS
/내용입력/

3.3 JS
// 한줄일경우에는 이렇게 작성
/한줄 이상일경우에는 이렇게 작성/

  1. 테이블

4.1 <th>내용</th>
table head. "표의 제목" /기본값은 굵은 글씨체,중앙 정렬

4.2 <tr>내용</tr>
table row. "가로줄"/기본값은 보통 글씨체, 왼쪽 정렬

4.3 <td>내용<td>
table data. "셀" /기본값은 보통 글씨체, 왼쪽 정렬

4.4 예시
<table border="1">
<tr>
<td>번호</td>
<td>이름</td>
</tr>
</table>

4.5 함께 사용하는 속성
4.5.1 <td colspan="2"> : 가로줄을 합치는 갯수를 지정
4.5.2 <td rowspan="3"> : 세로줄을 합치는 갯수를 지정

4.6 HTML5 테이블에서 지원되지 않는 속성
align, bgcolor, border, cellpadding, cellspacing, frame, rules, summary, width ... -> css를 통해 지정할것

  1. 기초적인 태그

5.1 <br> 줄바꿈 / <p></p> 문단바꿈

5.2 <pre> 입력한 그대로 출력되는것. 코드등 표시할때 유용
<code> 코드 입력할때 좋다. code를 pre로 묶어서도 사용

5.3   공백기능(스페이스 느낌)

5.4 <h1></h1>~<h6></h6> 제목표시 1이 가장 크고 6으로 내려갈수록 작음

5.5 <b></b>,<strong></strong> 글자를 굵게 지정

5.6 <em></em> 특정 텍스트를 강조할때 사용

5.7 <i></i> 이탤릭체로 표시할때 사용

5.8 <cite></cite> 인용할때 사용함
//<em><i><cite> 전부 기울임꼴로 나옴

5.9 <q></q> / <blockquote></blockquote> 인용문의 인라인,블록버젼

  1. <a>, 절대경로와 상대경로

6.1 절대경로
<a href="http://blog.naver.com...">링크타기</a>

6.2 상대경로
<a href="hi.html"> //같은폴더에서 가져올때
<a href="hello/hi.html"> //하위 폴더에서 가져올때
//상위 폴더에서 가져올때

6.3 그 외 경로
전화 연결하기 </a>
<a href="#top"> 맨위로가기 </a> (div에 id값을 줘서 가도된다)

6.4 스크립트의 경우
<a href="javascript:alert('hi');">

6.5 target 속성
<a href="http://blog.naver.com" target="_blank">
_blank //연결 문서를 새창에서 연다
frame name //지정된 프레임 안에 연다
_parent // 부모창에서 연다 (없을시 기본값)
_top //가장 상위창에서 연다 (부모가 없을시 기본값)

  1. iframe 태그 외

7.1 <iframe src="url">대체내용</iframe>
html 웹 문서안에 또 다른 웹문서/동영상등을 넣을 수 있다
정렬등 속성을 위해서 css를 사용하자 (HTML5의 경우)
text-align,border,overflow,margin 등

7.2 iframe을 지원하지않는경우 <object>를 쓸수있으나 권장되지않음.

7.3 <embed src="abc.swf"> 주로 영화,음악등을 삽입할때 사용
ex)<embed src="rain.wav" type="audio/wav" autoplay="true" controller="false" loop="true" width="400" height="100">

7.4 audio 태그로 음악파일 삽입
7.4.1 mp3(type="audio/mpeg")
ogg(type="audio/ogg")
wav(type="audio/wav") 세파일 형식을 지원중.
7.4.2 autoplay, controls, loop, muted, src 사용

7.5 video 태그로 비디오나 영화 삽입
7.5.1 mp4, ogg, webm 형식 지원

  1. 리스트 만들기

8.1 <li></li>를 사용후 부모태그로 감싼다
<ol>내용</ol> //순서가 있는 목록을 만들때 쓴다
<ul>내용</ul> //순서가 필요없는 목록을 만든다
<dl>내용</dl> //사전처럼 용어를 설명하는 목록을 만든다
8.1.2 <ol type="1"> 1,a,A,ⅰ,Ⅰ, 로 시작. 기본값은 1
8.1.3 <ol start="5"> 시작값. 이 경우에는 5,6,7 순으로 매겨짐

8.2 <dl> <dt> <dd> 사전,정의를 쓰는 태그
예시 <dl>
<dt>다람쥐</dt>
<dd>다람쥐는 설치류로 다람쥐과에 속한다</dd>
</dl>
8.2.1 <dd>를 사용시 자동으로 들여쓰기 된다.
8.2.2 dd{text-indent: 20px;}등 text-indent,margin-left,padding-letf값으로 조절

  1. <form></form> 태그.
    9.1 폼태그안에 html 태그를 넣을수있으나, 또다른 form태그는안된다
    9.2 예시
    <form action="url or data" method="post">
    ID: <input type="text" id="id"><br>
    PASSWORD: <input type="text" id="psword"><br>
    <input type="submit" value="send">
    </form>
    9.3 form태그와 함께 사용할수있는 속성. *속성(속성값)
    <form action="url" method="post" enctype="multipart/form-data">
    action,method(get/post),name(text),target(_blank외...)
    accept-charset(charset_set),enctype(content type)
    autocomplete(on/off),novalidate(novalidate)
    -action 속성값인 url로 넘겨주는 역할인데 여기서 method를
    get방식으로하냐 post방식으로 하냐에 따라 달라진다 :)

  1. <input> 태그
    10.1 사용자가 데이터를 입력할수있는 입력 영역을 지정하는 태그
    ex) <input type="radio" name="knid" value="rose">rose
    10.1.1 <label></label> or <label for="name">
    10.2 type 속성에서는 ....
    =text 한줄의 텍스트 입력값을 만든다
    =password 문자를 별표처리하여 숨겨서 표시하는 텍스트 입력값
    =checkbox 체크박스를 만든다

    checked=checked //페이지 로드시 미리 요소가 선택되어있게함

    =radio 라디오 버튼을 만든다
    =button 누름 버튼을 만든다
    =submit 전송 버튼을 만든다

    formaction=url //양식전송될때 입력제어장치를 처리할 파일주소
    formenctype //서버에 전송될때 데이터의 부호화 방식
    formmethod=get/post //action url에 대한 자료 보낼때 HTTP방법
    formtarget=_blank등 //창이 열릴곳

    =reset 재설정 버튼을 만든다
    =file 파일 선택 창을 만든다

    accept=media.type(jpg..) // 서버가 받아들일 파일의 종류

    =hidden 사용자에게 보이지않는 숨김창을 만든다
    =image 이미지로된 전송버튼을 만든다.

    src=url // 사용할 이미지의 주소를 쓴다
    alt=text //이미지의 대체 텍스트
    formaction=url //양식전송될때 입력제어장치를 처리할 파일주소
    formenctype //서버에 전송될때 데이터의 부호화 방식
    formmethod=get/post //action url에 대한 자료 보낼때 HTTP방법
    formtarget=_blank등 //창이 열릴곳 
    height/width=pixel //높이 및 너비

    =color 색상선택창을 만든다
    =date 날짜 입력 창을 만든다 (년,월,일)
    =datetime 날짜 시간 창을 만든다 (년,월,일,시,분,초,초의분할)표준
    =datetime-local 날짜 시간창을 만들지만, 표준시간 없음
    =email 이메일 주소창을 만든다
    =month 달과 년 창을 만든다. 표준시간 없음
    =number 숫자 입력을 위한 창을 만든다

    min,max,step,value 사용

    =range 정확한 값이 중요치않는 숫자를 입력하는 창을 만든다.

     (슬라이더 창과 비슷하게 생김.. 바 움직이는거)

    =search 검색 창을 만든다
    =tel 전화번호 입력창ㅇ르 만든다
    =time 시간입력창을 만든다. 표준시간 없음
    =url 주소 입력창을 만든다
    =week 주와 년 입력창을 만든다. 표준시간 없음

10.3 name, value 속성에서는.... 그 요소의 이름,값을 지정한다

10.4 size=number //input 요소의 너비
max/min=number/date //input 요소의 최대,최소값
step=number //입력영역의 요구되는 숫자 간격
multiple=multiple //사용자가 하나이상의 값을 입력할수있음
pattern=regexp // input요소값이 체크될 보통 표현
placeholder=text //input요소의 예상된 값을 설명하는 짧은힌트
required=required //입력 영역이 양식전송전에 채워져야함
maxlength= number //input요소에서 허락된 문자열의 최대숫자
disabled=disabled // input요소 비활성 상태
readonly=readonly //입력영역이 읽기만 가능하게 지정
autocomplete=on/off //input 요소 자동완성 여부 지정
autofocus=autofocus // input 요소가 자동으로 포커스됨
form=form_id //input 요소가 속한 하나 이상의 form을 지정
list=datalist_id //input요소를 위한 미리 지정된 옵션을 담은 datalist 요소를 참조
formnovalidate=formnovalidate //양식요소가 전송될때 유효화되지 않아야하는지 지정

10.5 textarea 태그
여러줄의 텍스트를 입력하는 창을 만든다 <textarea></textarea>
10.5.1 함께사용할수있는 속성
disabled,readonly,autofocus,form,maxlength,placeholder,required
wrap(줄바꿈hard/줄바꿈되지않음soft),cols,rows,

  1. button 태그
    <button type=" "> 내용 </button>
    input type="button"과 비슷하나, 버튼요소에 텍스트나 이미지를 넣을수있다. 항상 type속성을 지정해야하고, form양식에서 버튼을 만들때는 이 태그보다는 <input type="button">을넣는것이 좋다
    또한 양식을 전송할때 input type="submit"일시 자동으로 전송되나, button요소로 양식을 전송하기위해서는 자바스크립트가 추가로 필요함.

    11.1 button type="....함께 사용할수있는 속성
    type=button/reset/submit // 누름/초기값/전송버튼
    name=name //버튼 이름
    value=text.. //버튼의 기본값 지정
    <button disabled> //버튼 비활성화
    <button autofocus> //버튼이 자동으로 포커스됨
    form=form id //버튼이 속한 form의 id
    formtarget=_blank,_self,_parent,_top //창이 열릴곳
    **type="submit" 일때...
    formaction=url //데이터를 전송할곳
    formenctype= ???
    formmethod=get/post //데이터에 url을 덧붙여전송/body안에 양식데이터를 첨부함. 데이터는 url에 보이지않음
    중요한문서는 그래서 post로 보내야한다!
    <button formnovalidate>데이터가 전송해서 유효화되지않음

  1. select 태그
    드롭다운 목록을 만들때 사용하는 태그. form양식에서 사용할수있음
    <select>내용</select> . 선택항목은 <option>요소로 지정

    12.1 사용할수있는 속성
    name=이름 //목록이름. 전송or자바스크립트에서 요소참조를 위해 사용
    size=숫자 //드롭다운목록에서 보이는 옵션 갯수. 기본값1/multiple일경우 기본값4. 속성값이 1보다크지만 옵션전체갯수보다 작으면 스크롤바가 생긴다
    disabled=disabled //비활성화됨
    <select multiple> //몇가지 옵션이 한번에 선택할수있음.
    <auto focus> //자동으로 포커스됨
    <select required> // 전송전에 선택이 필수임을 지정.지원이...
    <select form="form id"> //select영역이 속한 form의 id
    12.2 예시

    <select name="music" size="3" form="music" multiple>
    <option value="zazz">재즈</option>
    <option value="pop">팝송</option>
    <option value="hiphop">힙합</option>
    <option value="kpop">케이팝</option>
    </select>
    <form actioc="url" method="get" id="music">