1. HTML 코드 기초 문법
1) HTML은 태그(<>~</>)를 사용하여 콘텐츠를 표시한다.
2) 태그는 콘텐츠를 감싸는 역할을 하며, 콘텐츠에 성격과 의미를 부여한다.
3) 태그에는 속성을 통해 부가적인 기능을 정의할 수 있다.
4) 주석은 사람에게는 보이지만, 컴퓨터에는 보이지 않는 코드이다.
2. HTML 문서 기본 구조
1) HTML 코드를 작성할 때는 기본 문서 구조를 마련한 다음 작성한다.
2) 들여쓰기를 통해 태그 간의 포함 관계를 나타낸다. 이는 가독성에 도움이 된다. 그러나 문법적으로 필수 사항은 아니다.
3) <'head> 태그에는 문서의 정보가, <'body> 태그에는 표시할 내용이 포함된다.
4) 태그의 콘텐츠로 또 다른 태그가 포함될 수 있다.
3. 텍스트 태그 사용 방법과 특징
1) p 태그는 문단을 표시하는 태그이다.
2) h1~h6 태그는 헤드라인을 표시하는 태그이며, 숫자가 작을수록 크다.
3) 수편선 hr은 주제 변경이나 내용 구분 시에 사용하는 태그이다.
4) HTML은 텍스트의 줄바꿈, 공백 등을 엔터와 스페이스로 처리하지 않는다.
5) 스페이스는 한 번만 허용된다(연달아 입력할 경우 한 번 외엔 무시).
6) 태그 br은 줄바꿈을, 문자조합 &'nbsp는 공백을 나타낸다.
4. 태그의 구분과 인라인 텍스트 요소
1) HTML 문서의 요소는 블록 레벨 요소와 인라인 요소로 구분할 수 있다.
2) 블록 레벨 요소는 너비(공간)를 모두 차지하여 블록을 형성한다.
3) 인라인 요소는 콘텐츠를 표시하기 위해 공간만 차지한다.
5. 이미지 표시하기
1) 이미지를 표시할 때는 닫는 태그가 없어도 되는 img 태그를 사용한다.
2) src 속성은 이미지의 url을 입력받는 속성이다.
3) alt 속성은 대체 텍스트를 입력받는다. 이미지 유실 상황에 대응할 수 있다.
4) width와 height는 각각 이미지의 너비와 높이를 입력받는 속성이다.
6. 컨테이너 그리고 전역 속성
1) 콘텐츠나 레이아웃에 영향을 주지 않는 태그 요소를 컨테이너라 한다.
2) 컨테이너는 영역을 묶어서 관리하고자 할 때 사용한다.
3) 모든 태그에 공통적으로 지정 가능한 속성을 전역 속성이라 한다.
4) id와 class는 태그명이 같은 요소들을 식별하기 위해 사용하는 속성들이다.
5) id는 태그당 하나씩만 지정해야 하나, class는 다중 지정 및 중복 가능하다.
6) 특정 태그에만 지정 가능한 속성들도 물론 존재한다.
7. 링크 만들기
1) a 태그는 페이지를 다른 위치로 이동시킬 수 있는 링크를 만든다.
2) href 속성에는 링크가 참조하는(이동하고자 하는) url을 입력한다.
3) target 속성에는 새 페이지가 열릴 대상(탭)을 지정할 수 있다.
4) href 속성을 통해 전화 걸기, 이메일 보내기 등을 지정할 수도 있다.
8. 목록 표시하기
1) 목록은 연관 있는 항목들을 나열한 것이다.
2) 목록 요소는 '순서 없는 목록'과 '순서 있는 목록'으로 구분할 수 있다.
3) 목록 안에 들어가는 항목 요소를 표시할 때는 li 태그를 사용한다.
4) ol, ul, li 태그는 보두 블록 레벨 요소를 표시하는 태그이다.
9. 입력 요소 만들기
1) input 태그는 입력 요소를 만드는 태그이다.
2) input 태그는 type 속성을 통해 형태와 입력 값 유형을 결정한다.
3) type 값에 따른 사용 방법이 다양하다.
(웹페이지 내에서의 역할, 추가 속성 등)
4) name 속성으로 input 요소를 구별할 수 있다.
10. select 그리고 textarea
1) select는 선택 메뉴를 나타내는 태그이다.
2) select의 각 선택지는 option 태그를 통패 표시한다.
3) 각각의 option에는 value를 지정하여 추후 처리를 준비한다. (자바 스크립트를 통한 입력 값 처리에 value가 사용될 수 있다)
4) textarea는 여러 줄의 일반 텍스트를 입력하는 요소를 나타낸다.
11. 폼(form) 태그
1) form은 사용자가 입력 요소에 입력한 데이터를 서버로 전송해준다.
2) 서버란 데이터를 제공하는 호스트이다.
3) 클라이언트랑 데이터를 제공받아 이용하는 고객(사용자)이다.
4) form은 입력 요소(input, select, textarea 등)를 감사고, 데이터를 제출(submit)한다.
5) form의 action은 서버 측 주소를 지정하는 속성이다.
6) form의 method는 데이터 전송 방식을 지정하는 속성이다.
13. 메타 태그 (meta)
1) 매타 태그는 HTML 문서의 메타데이터(정보)를 표시하는 태그다.
2) 검색엔진 최적화에 기여하며, 검색 결과에도 영향을 끼친다.
3) charset는 문자 인코딩에 대한 요약 정보를 기입하는 속성이다.
4) http-equiv는 콘텐츠 속성의 정보/값에 대한 HTTP 헤더를 제공한다.
5) name 속성은 문서의 다양한 정보를 제공할 수 있는 메타데이터의 이름이다.
6) content는 메타데이터의 구체적인 내용을 기입하는 속성이다.
14. 뷰포트 (viewport)
1) 뷰포트는 현재 화면에 보여지고 있는 영역을 의미한다.
2) 웹 문서는 기본적으로 PC 화면에 맞춰 설계 되었기 때문에, 다른 기기에서 배율 조정이 일어난다.
3) 배율 조정 현상에 대응하기 위해 개발자는 메타 태그를 사용해 뷰포트 관련 설정을 추가할 수 있다.
