2. 1일차
학습 목차
▸1일차
▸웹에서의 HTML은 무엇인가?
▸HTML을 작성하기 위한 실습환경 구축 !
▸HTML은 어떻게 이루어져 있는가?
▸HTML의 기본적인 태그를 알아보자!
▸내가 원하는 그림을 붙여보자!
▸다른 페이지로 이동하려면?
▸궁금한 것이 있다면?
3. 1일차
학습 목차
▸2일차
▸Text를 다루는 태그 친구들
▸자네 “주석”을 아나?
▸브금(BGM)이 나오는 낭만 페이지
▸간단한 엘범을 만들어보자!
▸고급진(?) 엘범으로 업그레이드! (with table)
▸테이블을 활용하여 나만의 자료 리스트를 만들어보자!
▸궁금한 것이 있다면?
4. 1일차
학습 목차
▸3일차
▸나를 소개하는 페이지 만들어보기 (Part 1/3)
▸밋밋한 페이지에 옷을 입혀보자(with CSS)
▸나를 소개하는 페이지 만들어보기 (Part 2/3)
▸Javascript… 그대는? (전편)
▸궁금한 것이 있다면?
8. 1일차
설문조사
▸나는 간단한 프로그래밍을 해본 경험이 있다
▸1. 해본 적 있다. 2. 해본 적은 없는데 찾아본 적은 있다.
3. 경험X
▸나의 프로그래밍에 대한 관심도는?
▸1. 매우 많이 2. 어느정도 3. 보통 4. 아직은 흥미 없…
▸프로그래밍 분야에 관심이 있다면 원하는 분야는?
▸1. 게임 2. 웹 3. 모바일 4. 기타(작은 툴)
10. 1일차
▸수업 내용이 이해가 안되는 부분이 있다면 바로 질문 ㄱㄱ
▸내용이 어렵다고 생각이 된다면 언제든 난이도 조절 가능!
▸발표 자료 슬라이드는 아래의 사이트에서 확인 가능
▸https://www.slideshare.net/MunHwaHong
▸발표 학습 자료의 소스코드는 아래의 사이트에서 확인 가능
▸https://github.com/elfinlas/StudyHtml4Snut
11. 1일차
웹에서의 HTML은 무엇인가?
▸우리가 흔히 보는 웹사이트는 웹 문서로 정의
▸연구와 학술적인 자료를 공유하기 위해 처음 사용된 인터넷의
배경에 맞춰, 모든 인터넷 자료들은 문서 형태로 제공
▸자료를 문서 형태로 만들기 위한 문법이 바로 HTML 언어
▸HTML은 웹 문서를 서식화 하기 위한 문법
▸간단한 예시!
▸hello.html hello_before.html
13. 1일차
HTML을 작성하기 위한 실습환경 구축!
▸HTML을 작성하고 확인하기 위해서는 크게 두 가지 준비물이 필요
▸HTML을 확인하기 위한 브라우저
▸HTML 작성 에디터
▸작성 에디터 종류
▸윈도우 에디터... (https://www.w3schools.com/html/html_editors.asp)
▸서브라임 (http://www.sublimetext.com/3)
▸브라우저
▸가급적 크롬을 사용하자...
▸실습 브라우저 결과의 기준은 크롬으로 진행
▸https://www.google.co.kr/chrome/browser/desktop/index.html
14. 1일차
▸브라우저란?
▸웹 서버에서 쌍방향 통신을 하여 결과물인 HTML 문서나
파일 등을 연동하고 출력하는 응용 소프트웨어
▸대표적인 브라우저 : 익스플로러, 크롬, 사파리, 오페라, 파
이어폭스
▸결과물은 브라우저마다 틀리게 표현될 수 있다.
▸참고사항
▸https://namu.wiki/w/웹%20브라우저
15. 1일차
HTML은 어떻게 이루어져 있는가?
▸HTML의 구조는 basic_form.html 에서 확인
▸<!DOCTYPE html> ????
▸HTML의 문서 종류를 알려주는 선언문
▸DOCTYPE은 대소문을 가리지 않는다 -> 즉 <!doctype html> 가능요
▸지금은 HTML 버전 5 시대
▸예전에는....
▸<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
▸이렇게 복잡했었...
▸더 자세한 내용은 아래 사이트 참고
▸http://kcmschool.com/97
▸http://roydest.tistory.com/entry/DOCTYPE-HTML-버전-선언
16. 1일차
▸HTML은 태그(Tag)로 구성
▸태그는 <…> </…> 항상 쌍방으로 구성
▸태그의 끝을 알릴 때는 슬래쉬 문자(/)가 붙는다.
▸가끔 단방향 (<…>) 으로만 사용하는 태그 존재
▸HTML의 구조는 크게 3가지로 구성
▸<html> </html>
▸<head> </head>
▸<body> </body>
17. 1일차
▸<html>
▸문서의 시작과 끝을 알려주는 태그
▸html의 모든 내용은 이 태그 안에서 작성
▸<head>
▸문서의 기타 정보를 처리하는 태그
▸대표적으로는 <title> 태그가 있다.
▸인코딩 선언과 같은 메타 데이터를 다루는 태그도 들어간다. (
<meta> )
▸<body>
▸실질적으로 문서의 내용이 들어가는 태그
18. 1일차
HTML의 기본적인 태그를 알아보자!
▸수 많은 태그들이 html에 존재
▸주로 많이 사용하는(주류) 태그를 알아보는 시간
▸<h> 태그
▸h_exam_01.html
▸<p> 태그
▸p_exam_01.html
▸<pre> 태그
▸작성된 html 을 있는 그대로 표현하는 태그
▸pre_exam_01.html
19. 1일차
내가 원하는 그림을 붙여보자
▸HTML페이지에서 이미지를 붙여보기 위해서는?
▸img_01.html
▸이미지를 표시하는 태그 <img>
▸주로 사용하는 옵션
▸src (필수)
▸width, height, alt
20. 1일차
다른 페이지로 이동을 하려면?
▸이동(링크)를 하는 방법은?
▸<a href=“some url”>…</a>
▸href에 이동을 원하는 주소를 적음
▸a_exam_01.html
▸<a href="www.naver.com">이곳을 클릭하면 네이버로~</a>
선언 시 현재 페이지에서 네이버 사이트로 이동
▸target 옵션 중에 _blank를 사용할 경우 새 창으로 연다.
21. 1일차
▸약간의 응용편!
▸페이지 내에서 다른 페이지로 이동해보자!
▸a_exam_02.hmtl
▸태그 안에 id라는 속성을 사용
▸id와 비슷한 속성으로는 class라는 친구가 존재
하지만 이 친구는 id와 함께 나중에 알아볼 예정
24. 1일차
수업 외 질문사항
▸너무 개인적인 질문은...ㅈㅅ
▸프로그래밍 질문은 환영 ^^
▸개발자에 대하여..또는 다른 개발 언어(특히 java)에 대해서...
▸문의를 하고 싶다면...
▸이메일 문의 : elfinlas@gmail.com
▸Line 문의 : elfinlas
