24-01-19 HTML 프로그램 첫 교육 내용
꿀팁.
필수 코드 화면 시작시 html:5 입력후 엔터 치면은 기본적 메뉴얼 코드들이 나옴
컨트롤 + 쉬프트 + 엔터 : 한칸뛰움
컨트롤 + 쉬프트 + c : 주석
1.메모장을 이용한 HTML 작성
[1] 메모장에 HTML의 기본 구문을 입력한다.
<!DOCTYPE html> //문서에대한 버전을 알려주는역활
<html> //시작태그
<head> //제목태그 [자식태그]
<title>메모장을 이용한 작성</title> //제목
</head>
<body> //내용
<p>HTML 기본 구문</p>
</body>
</html> //종료태그
2. 메모장을 이용한 HTML 작성
* [파일] → [다른 이름으로 저장] 선택 후 파일 이름 작성
* 내용.html’ 확장자를 붙여서 저장 (예시: code.html)
3.저장된 HTML 파일을 더블클릭하여 실행.
* 마우스 오른쪽 버튼을 누르고 [페이지 소스 보기] 메뉴를 선택하면
* 현재 페이지의 HTML 소스를 볼 수 있다.
-------------------------------------------------------------------------------------------------------------------------------
2. <!DOCTYPE> 선언
문서 형식 선언 (Document Type Definition)
HTML의 종류와 버전을 지정하고 브라우저에 알리는 역할로 문서 최 상단에 위치해야 하며 <html>태그를 정의하기 전 먼저 선언되어야 함
[1] 속성
* 요소에 대한 추가적인 정보 제공
* 속성은 시작 태그에 name=“value” 형태로 정의한다.
[2] HTML 주석 및 주의 사항
* HTML 코드를 설명하는 글로 개발 시 많은 도움을 줌
* 브라우저에 표시되지 않음
[1] HTML 문서 작성시 주의 사항
1. HTML 문서는 대소문자를 가리지 않으므로 Head, HEAD, HeaD, head 등
어떠한 형태로 써도 무방하나 되도록 보기 편하고 수정이 용이하도록 소문자로 통일해서 쓰는 것이 좋음
2. 시작 태그와 종료 태그를 먼저 쓰고 그 안에 내용을 넣는다.
3. HTML 문서를 정의할 때 들여쓰기(indent)에 주의한다.
수업은 총 7주
8주 3일
(10일 중급 프로젝트
첫수업 세팅 방법
[1] visual studio code 다운로드
[2] 모드 다운 2개는 필수로
Ecipse KeyMap = 이클립스 단축키 사용
Live Server = 웹이랑 바로 연동할수있는 프로그램
[3].
24-01-20 현재 진행 상태
NewFolder(두번쨰꺼) -> 240119 입력후 New File(첫번쨰꺼) 클릭후 아래 항목처럼 생성
[4]
Live Server 사용방법
(1).밑에 클릭을 하면은 현재사용하고 있는 코드랑 웹이랑 연동이되서 입력한 코드를 저장하면 출력이 바로된다.
(2). 2번쨰 사진처럼 화면은 나오면은 성공
[5] Tip
화면 우클릭 후 Open With Live Server를 클릭하면 편하게 연동된 화면을 볼수있다.
