HTML
1. 웹 표준 기술
HTML5(웹 페이지 구성) + CSS3(스타일 적용) + 자바스크립트(사용자 반응 처리 등등)
2. HTML5
- 큰 의미 : 웹 표준 기술 총칭
- 작은 의미 : 웹 문서의 문법
- 마크업 :
HTML5는 마크업 언어. 마크업 대상이 화면에 어떻게 보일지 나타내기 위해 사용하는 일련의 문자.
'마크업한다' = HTML로 페이지의 구조나 요소를 프로그래밍 하는 것.
3. 확장팩
- 한국어 언어팩
- Auto Close Tag
- Auto Rename Tag
- Prettier - Code Formatter
- Material Icon Theme
- Live Server
4. 요소(Element)
- 제목, 본문, 이미지 등 HTML 페이지에 존재하는 것
5. 태그(Tag)
- 요소를 만들 때 사용하는 기호
<h1>Hello HTML5</h1>HTML5 요소 - 시작 태그와 끝 태그를 별도로 입력하는 요소
<br></br>HTML5 요소 - 시작 태그와 끝 태그를 함께 입력하는 요소
6. 일부 태그는 태그 내부에 다른 태그를 넣을 수 있음
- 태그 내부에 다른 태그를 넣을 수 없는 태그도 있음.
<article>
<h1>Article Header</h1>
<p>Lorem ipsum dolor sit amet</p>
</article>
7. 태그에 추가 정보를 부여 할 때 사용
- 내부 문자를 가질 경우
<h1 title="header">Hello HTML5</h1>HTML5 태그의 데이터 표현 - h1 태그의 title 속성
내부 문자를 가지지 않을 경우
<img src="image.png"/>HTML5 태그의 데이터 표현 - img 태그의 src 속성
8. HTML5 페이지 기본 구조
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
</body> </html><!DOCTYPE html> 태그
- 웹 브라우저에 HTML5 문서임을 알려줌
- 문서의 첫 행에 표기
9. 주석
프로그램의 실행에 영향을 미치지 않고, 설명을 위한 목적으로 사용하는 코드
<!-- title 태그 -->
<!DOCTYPE html>
<html>
<head>
<!-- title 태그 -->
<title>TITLE</title>
</head>
<body>
<!-- h1 태그 -->
<h1>Hello HTML5</h1>
</body>
</html>
10. html 태그
- 모든 HTML 페이지의 루트(기본) 요소
- lang 속성 입력가능
11. head와 body 태그
<head 태그 내부에 넣을 수 있는 태그>
- body 태그: 사용자에게 실제로 보여지는 부분
- head 태그: body 태그에서 필요한 스타일시트와 자바스크립트를 제공하는데 사용
* meta : 웹 페이지에 추가 정보 전달
* title : 웹 페이지의 제목 지정
* script: 웹 페이지에 스크립트 추가
* link : 웹 페이지에 다른 파일 추가
* style : 웹페이지에 스타일시트 추가
* base : 웹 페이지의 기본 경로 지정
12. title 태그
- 브라우저에 표시하는 제목을 지정하는 태그
13. 글자 태그
- 가장 많은 비중을 차지하는 태그
14. 제목 글자 태그
- 제목 글자 태그
* 문서의 제목을 표현할 때 사용
* h : Heading을 의미
| 태그 이름 | 설명 |
| h1 | 첫 번째로 큰 제목 글자 태그 |
| h2 | 두 번째로 큰 제목 글자 태그 |
| h3 | 세 번째로 큰 제목 글자 태그 |
| h4 | 네 번째로 큰 제목 글자 태그 |
| h5 | 다섯 번째로 큰 제목 글자 태그 |
| h6 | 여섯 번째로 큰 제목 글자 태그 |
* 특수문자 종류
| 특수문자 | 출력문자 |
| | 공백 |
| < | < |
| > | > |
| & | & |
15. p 태그
- Paragraph를 의미하며 문단 하나를 생성
- 제목 다음에 오는 본문 입력시 사용
- 본문 태그 : p태그
16. br 태그
- 다른 글자 내부에 삽입 가능, 개행 태그
17. hr 태그
- 다른 글자 내부에 삽입 불가능하나 정상적으로 출력됨, 수평 줄 태그
18. 하이퍼텍스트
- 사용자의 선택에 따라 관련된 특정 정보로 이동할 수 있도록 조직된 문서
- a 태그 사용
19. a 태그
- Anchor 를 의미
- 다른 웹 페이지나 웹 페이지 내부의 특정 위치로 이동할 때 사용
- a : 하이퍼링크 태그
20. a 태그의 href 속성
- Hyper Reference를 의미
- 어떤 페이지로 이동할지 웹 브라우저에 알려줌
<a href="http://hanb.co.kr">한빛미디어</a>
- href 속성의 여러 경로
* 절대 경로 : 현재 웹 페이지의 위치와 상관없이 웹 페이지 또는 파일의 위치를 나타내는 경로
* 상대 경로 : 현재 웹 페이지의 위치에 따라 결정되는 웹 페이지 또는 파일의 경로
* 아이디 경로 : 현재 웹 페이지 내부에 있는 다른 태그의 id 속성
* 메일 경로 : 메일 주소
21. id 속성이 중복되면 먼저 나오는 태그로 이동됨
- 빈링크
* 웹 표준을 지키면서 이동하지 않는 a 태그를 만들 때는 href 속성에 "#"을 입력. 이를 빈 링크라고 부름.
22. 글자 모양 태그
- HTML5 에는 big 태그가 사라짐
| 태그 이름 | 설명 |
| b | 굵은 글자 태그 |
| i | 기울어진 글자 태그 |
| small | 작은 글자 태그 |
| sub | 아래 첨자 태그 |
| sup | 위 첨자 태그 |
| ins | 밑줄 글자 태그 |
| del | 가운데 줄이 그어진 글자(취소선) 태그 |
23. 글자 모양 태그의 특징
- 글자 모양 태그는 모두 단독으로 사용 가능
- 제목과 본문 글자 모양 태그 내부에 입력 가능
- 글자 모양 태그 내부에 다른 글자 모양 태그를 삽입 가능
- 글자 모양 태그 내부에 제목과 본문 글자 태그는 사용 불가능
24. 웹 표준을 위반한 글자 모양 태그 사용 예
<i>
<h1>웹 표준 위반</h1>
<p>웹 표준 위반</p>
</i>
25. 네비게이션 목록
- 웹 사이트의 다른 웹 페이지로 이동할 수 있는 버튼을 모아둔 것
* 글머리 기호 목록
| 태그 이름 | 설명 |
| ul(unorderd list) | 글머리 기호 목록 태그 |
| li(list item) | 목록 요소 |
* 순서 번호 목록
| 태그 이름 | 설명 |
| ol(orderd list) | 순서 번호 목록 태그 |
| li(list item) | 목록 요소 |
26. 테이블 태그
- 테이블 태그의 종류
| 태그 이름 | 설명 |
| table | 표(table) |
| thead | 표의 머리(table head) |
| tbody | 표의 본문(table body) |
| tfoot | 표의 꼬리(table foot) |
| tr | 표의 행(table row) |
| th | 표의 제목 요소(table header) |
| td | 표의 일반 요소(table data) |
- th와 td 태그에는 셀 병합 속성 입력 가능
* colspan rowspan 속성
| 태그 이름 | 설명 |
| colspan | 셀의 너비 지정 |
| rowspan | 셀의 높이 지정 |
27. 이미지 태그
- 이미지 태그
* img 태그
* 단독으로 사용
<img />
- img 태그의 속성
| 태그 이름 | 설명 |
| src | 이미지의 경로 지정 |
| alt | 이미지가 없을 때 나오는 글자 지정 |
| width | 이미지의 너비 지정 |
| height | 이미지의 높이 지정 |
- img 태그의 src 속성에는 웹에 존재하는 이미지의 경로 사용 가능
<img src="http://www.hanb.co.kr/img/gnb/logo_hanbitmedia.gif" />
- 의미 없는 이미지
* 의미 없는 이미지는 http://placehold.it 에서 생성가능.
* 이미지 경로에 'http://placehold.it/너비x높이' 형식으로 입력하면 다음과 같은 이미지를 얻을 수 있다.
<img src="http://placehold.it/300x150"/>
- 공간을 분할하는 이유
* CSS로 원하는 레이아웃을 구성할 수 있기 때문.
- div
* 대표적인 공간 분할 태그
* 공간을 블록형식으로 분할
- span
* 공간을 인라인 형식으로 분할
- 블록형식과 인라인형식은 일반 태그에도 적용
* h1과 p태그는 블록형식
* a와 i는 인라인 형식
- 블록형식과 인라인형식의 태그
| 블록 형식 태그 | 인라인 형식 태그 |
| div 태그 | span 태그 |
| h1-h6 태그 | a 태그 |
| p 태그 | input 태그 |
| 목록 태그 | 글자 형식 태그 |
| 테이블 태그 | |
| 입력 양식 태그 |
- 이미지 태그는 인라인-블록 형식
* 인라인처럼 배치되면서 블록의 속성(넓이, 높이, 여백)이 적용됨.
28. 시맨틱 태그
- 시맨틱의 의미
* 시맨틱(semantic) : "의미론적인"
- 시맨틱 웹
* 컴퓨터 프로그램이 코드를 읽고 의미를 인식할 수 있는 지능형 웹
- 플러그인을 사용하면 웹 모든 브라우저에서 사용 가능
- HTML5 시맨틱 태그
| 태그 이름 | 설명 |
| header | 헤더 |
| nav | 네비게이션 |
| aside | 사이드에 위치하는 공간 |
| section | 여러 중심 내용을 감싸는 공간 |
| article | 글자가 많이 들어가는 부분 |
| footer | 푸터 |
- 시맨틱 태그를 사용해 페이지를 구성하면 가독성 좋아짐
29. 입력양식개요
- form 태그
* 입력 양식 생성코드와 실행결과
* action 속성 : 주소, 전달 위치(데이터를 전달할 목적지)
* method 속성 : 값 전달 방법 지정, 전송 방식
- GET 방식과 POST 방식
* GET : 주소에 데이터를 직접 입력해 전달합니다.
* POST : 별도의 방법을 사용해 데이터를 해당 주소로 전달합니다.
- 입력 양식 태그
* form : 속성 - 안보임, 입력 양식의 시작과 끝 표시
* input :
** 속성 :
*** text : 글자 입력 양식 생성
*** button : 버튼 생성
*** checkbox : 체크 박스 생성
*** file : 파일 입력 양식 생성
*** hidden : 해당 내용 표시 안함
*** image : 이미지 형태 생성
*** password : 비밀번호 입력 양식 생성
*** radio : 라디오 버튼 생성
*** reset : 초기화 버튼 생성
*** submit : 제출 버튼 생성
* textarea :
** 속성 :
*** cols : 여러 행의 글자 입력 양식 생성, 너비, 한 줄에 나타날 글자 수
*** rows : 높이, 행의 수
* select : 선택 양식 생성
* optgroup : 옵션 그룹화
* option : 옵션생성
* fieldset : 입력양식의 그룹지정
* legend : 입력양식의 그룹지정
* label 태그
** label 태그의 for 속성에 input 태그의 id 속성을 입력하여 label 태그가 어떤 input 태그를 설명하는지 지정가능.
** label 태그를 더블 클릭하면 자동으로 input 태그에 초점이 맞춰짐.