HTML [입문] - 총 7시간 30분 / 강의당평균 : 30분0초

HTML [입문]

전체 : 7시간 30분 / 강의당평균 : 30분0초

01  Chapter 1

49분

책갈피 : [00:00] html 문서 / [00:38] 소스코드 살펴보기 / [00:59] 소스코드가 필요한 이유 / [01:43] 문서 타입 선언 / [01:54] 기본적 / / tml 문서 생성 / [02:10] html4와 html5의 문서 타입 선언 / [03:45] html 태그 / [04:22] head 태그 / [05:02] title 삽입 / [05:25] body 태그 / [06:02] h1 태그 / [06:24] h1 ~ h6 제목글 / [07:18] 단락 / [08:20] 개별로 h1 태그 지정 / [09:46] p 태그 / [10:39] 대소문자 구분 여부 / [11:26] html 문서 생성 방법 / [11:33] 파일 이름과 파일 형식 / [12:21] 인코딩 방식 / [13:03] / 코딩 방식 확인 방법 / [13:19] 웹 호스팅 / [13:48] 도메인 주소 / [16:10] 웹 호스팅 받은 페이지 확인 / [16:46] 원격 파일 열기 / [18:29] 클라우드 서비스 / [19:36] index.html / [20:10] 문서 경로 확인하기 / [20:41] ftp에 업로드하는 방법1 / [24:19] ftp에 업로드하는 방법2 / [25:50] title 태그 / [26:20] 마우스 오버 시 풍선도움말 표시 / [27:06] 제목글에 풍선도움말 표시 / [27:24] / r 태그 / [28:00] a 태그 / [29:09] 새창 링크 (target="_blank") / [29:44] img 태그 (이미지 가져오기) / [30:40] 이미지 넓이, / 이 설정 / [31:40] alt (이미지 설명) / [32:04] hr 태그 / [33:24] pre 태그 / [34:06] body 태그 / [34:20] 스타일 시트 / [34:38] / ody / 그에 배경색 지정 / [35:12] 글꼴색 지정 / [35:44] 글꼴 사이즈 변경 / [36:41] 텍스트 정렬 / [37:48] p 태그에 스타일 시트 적 / / [38:07] b 태그 / [38:42] b 태그와 strong 태그 비교 / [39:18] i 태그 / [39:48] i 태그와 em 태그 비교 / [41:15] small 태그 / [41:58] mark 태그 / [42:36] del 태그 / [43:06] ins 태그 / [43:29] sub 태그 / [43:50] sup 태그 / [44:12] 인용부호 / [44:36] q 태 / / [45:19] blockquote 태그 / [45:42] abbr 태그 / [46:35] address 태그 / [47:11] cite 태그 / [48:02] bdo 태그

02  Chapter 2

38분

책갈피 : [00:00] 주석처리 / [00:13] 주석처리 방법1 / [00:58] 주석처리를 사용하는 경우 / [02:05] 이미지 주석처리 방법 / [02:42] 주석처리 방법2 (if 조건) / [04:08] 스타일 시트 정의 / [04:51] body 태그에 배경색 설정 / [04:57] h1 태그에 텍스트 색상 설정 / [05:09] p 태그에 텍스트 색상 설정 / [06:04] 결과 확인 / [06:19] 세미콜론 / [07:04] 색상 지정 방법 / [08:01] 링크 (link) / [09:04] 여러가지 스타일 시트 선언 / [09:32] 텍스트 가운데 정렬, 폰트 사이즈 설정 / [09:50] 결과 확인 / [10:03] 정렬 방식 변경 / [10:39] css 주석처리 / [11:25] table 태그 / [11:59] tr 태그, th 태그 / [12:39] td 태그 / [13:02] caption 태그 / [13:25] 목록 태그 / [13:45] 순서 없는 목록 (UL 태그) / [15:03] 순서 있는 목록 (OL 태그) / [15:32] 정의 목록 (DL, DD, DT 태그) / [16:46] 중첩 방법 / [18:06] div 태그 / [18:41] padding / [20:11] span 태그 / [21:34] 레이아웃 / [21:46] 레이아웃 정의 방법1 / [22:39] 레이아웃 정의 방법2 / [23:13] div 태그 / [23:59] 스타일 시트 정의 / [24:35] header 정의 / [25:45] text-align center (가운데 정렬) / [26:06] padding / [26:54] 높이를 지정하는 방법 / [27:39] nav 태그(좌측 메뉴) / [27:54] 아이디 값 설정 / [28:31] nav 정의 / [28:46] line-height / [29:19] 배경색 설정 / [31:03] float / [32:35] padding / [32:46] width 값 계산 방법 / [34:37] section 정의 / [36:48] footer 정의

03  Chapter 3

42분

책갈피 : [00:00] 반응형 웹 / [01:07] 소스 살펴보기 / [01:35] float 정렬 / [01:45] 내부여백, 외부여백 (margine, padding) / [01:51] border / [02:49] iframe / [03:28] border:none / [03:48] border:dotted / [04:14] 문서 선언 / [04:34] meta Keywords (키워드) / [05:34] meta description (페이지 설명) / [05:54] meta charset (문자셋) / [07:20] meta author (저자) / [07:53] entity 가 왜 중요한지 / [08:36]   (공백) / [09:32] &It; (<) / [10:16] > (>) / [10:34] & (&) / [11:20] 기타 entity / [12:35] ̃ (~) / [13:29] XHTML / [14:53] 잘못된 b, i 태그 / [15:35] 올바른 b, i 태그 / [16:20] 이미지 태그 마무리 / [17:23] 올바른 XHTML 표기법 / [17:45] 대소문자 구분 / [18:48] 빈요소 제거 / [19:42] form 태그 / [20:58] input type="text" / [21:31] input type="radio" / [22:11] input type="submit" / [23:20] action / [24:24] method="GET" / [25:34] fieldset / [26:16] select / [26:59] selected / [27:43] textarea / [28:04] rows, cols / [28:41] button type / [29:36] input type="password" / [30:17] value 값 지정 / [31:15] input type="checkbox" / [32:40] input type="number" / [34:11] input type="date" / [35:22] max, min 값 지정 / [36:05] input type="color" / [37:02] input type="range" / [37:37] input type="month" / [38:21] input type="week" / [38:59] input type="time" / [39:32] input type="datetime-local" / [40:02] input type="email" / [40:38] input type="search" / [41:07] input type="tel" / [41:23] input type="url"

04  Chapter 4

38분

책갈피 : [00:15] readonly (읽기전용) / [01:32] disabled (비활성화) / [02:03] size (문자의 크기) / [02:48] maxlength (최대 허용) / [03:37] novalidate (데이터 유효성 검사하지 않기) / [04:21] autofocus / [05:02] input type="image" / [05:49] input list / [06:59] input type="file" / [07:13] multiple / [07:42] placeholder (사라짐) / [08:52] required (필수 입력) / [09:26] input type="number" / [10:09] 링크 단축키 (Alt + o) / [10:48] accesskey / [11:07] 링크 정의 / [11:47] tabindex / [13:57] css / [15:27] font-family / [16:13] border solid / [17:02] margin / [17:43] 링크에 색상 지정하기 / [18:53] text-decoration:none / [19:50] text-decoration:underline / [20:14] 클릭했을때 동작 설정 / [21:40] 같은 페이지에서 링크걸기 / [23:49] e-mail 발송 링크 (mailto) / [24:37] 이미지 전체에 링크걸기 / [25:15] 이미지 좌표로 링크걸기 (usemap) / [26:13] 좌표로 지정된 링크 확인 / [27:09] area shape / [27:45] 좌표값 생성하기 / [29:03] 가로 테이블 / [29:54] colspan (테이블 나뉨) / [31:32] 세로 테이블 / [32:33] colspan (테이블 나뉨) / [35:10] list-style-type:square / [35:43] list-style-type:none / [36:02] ui, li / [36:32] ol type

Html 태그

05 Html 태그 - 편집툴 및 웹문서에 대하여

23분

책갈피 : [00:00] 웹표준 에 대한 이해 / [00:29] 웹표준코딩 / [00:49] Gecko 엔진, 웹킷엔진 / [01:24] W3C / [01:37] XHTML,html,CSS / [04:47] 실제접속자 에 대한 자료 / [05:04] 웹사이트 로그분석 / [05:46] Explorer 6 / [07:12] html / [07:44] xhtml / [08:15] 에디트플러스로 하는이유 / [08:26] EditPlus / [09:39] 에디트플러스 설정 / [10:00] 도구모음 편집 / [11:08] 웹호스팅 ftp / [11:14] FTP설정하기 / [13:11] 웹문서 제작후 호스팅에 저장 / [13:57] 기본 설정 / [14:33] 원격파일로 저장 / [16:40] 타이틀 수정 / [17:02] title 태그 / [17:53] 컨텐트타입 언어표기 / [18:59] 종류별 메타설명 / [19:01] 메타태그(Keywords,Author) / [19:28] 메타 키워드 불필요한 이유 / [20:43] 메타태그(Generator) / [22:26] 프로젝트 저장하기

06 Html 태그 - 웹문서, 기본 테그구성

32분

책갈피 : [00:26] EditPlus / [01:13] title 태그 / [01:29] body / [02:30] 손쉬운 에디터플러스 컨트롤 / [03:31] 새 문서 만들기 / [04:17] body 컬러 / [04:33] bgcolor / [05:02] 배경컬러 지정 / [06:08] 큰따음표로 태그를 마무리해 줍니다. / [06:25] body 텍스트 / [06:37] text / [07:30] css에서는 body삭제 / [07:44] css.css1.css2.css3 / [08:33] 알지오 홈페이지 소스를 봅니다. / [09:20] 찾기 / [10:05] html이란 / [10:17] css.css1.css2.css3 / [10:33] P 태그 / [11:38] P태그가 있을때와 없을때의 차이점 / [12:25] 01강을 02강으로 바꿔줍니다. / [13:27] 원격 파일로 저장 / [14:27] BR 태그 / [16:08] BR태그 확인 / [17:01] P 태그 정렬 / [17:06] align / [18:16] 웹문서 여백 / [18:52] leftmargin,topmargin / [19:47] 의미없는 웹문서 보안 / [20:55] 금지항복 설정 / [21:43] hr 및 옵션 주기 / [22:06] hr 태그의 정의 / [22:57] hr size / [23:56] width / [25:01] hr align / [25:47] hr noshade / [26:13] color / [27:16] h1~6 머리말 / [28:16] 저장해서 확인합니다. / [28:57] h1~h6 / [29:40] font 옵션 / [29:51] font-size / [30:43] hr size변경 / [31:35] b 태그

07 Html 태그 - 주석, pre xmp blockquote, 글꼴, 이미지, 링크

40분

책갈피 : [00:00] 강의 진행설명 / [01:41] 주석처리 / [02:15] pre 태그 / [02:53] 공백태그 / [03:12] pre 태그와 공백태그의 차이 / [03:20] pre 태그 마무리 / [04:20] 실행시켜 확인합니다. / [05:00] xmp 태그 / [05:19] p태그 / [05:36] br태그 / [06:28] xmp 태그는 그자체를 웹페이지에 표현합니다. / [07:24] blockquote 태그 / [08:20] 줄바꿈 / [09:04] 글꼴 / [09:18] face / [10:13] 웹에서주로 사용하는 폰트" / [10:39] 예비글꼴 / [12:39] b, strong 태그 / [13:44] b, strong 태그는 동일하게 사용됨 / [14:21] 에디트 컨트롤 / [14:39] font-size / [16:01] img 태그, 정렬및 옵션 / [16:04] img. src. title. border. width 와 height. align / [16:52] 등록정보 / [17:26] 소스보기 / [18:16] 상대경로와 절대 경로 / [18:46] 절대경로와 상대경로의 차이 / [20:14] 이미지 사이즈 정의 / [21:44] 실제 이미지 사이즈 / [22:09] alt / [23:51] border / [24:55] align / [25:53] p태그 / [27:08] middle / [27:55] 하이퍼 링크의 종류 / [28:23] a 태그 / [29:31] 링크된 페이지를 어떻게 오픈할지 지정 / [30:15] title태그와 alt / [31:19] 절대 및 상대경로 / [32:52] 실행시켜 확인합니다. / [34:15] 작성한 절대 및 상대경로 설명 / [36:00] 이미지 링크 및 도움말차이 / [37:00] 보더 값 0 / [38:42] alt / [38:49] title 태그

08 Html 태그 - 링크 모든것, 책갈피, 원하는 사이즈 오픈및 옵션

20분

책갈피 : [00:00] 권하지 않는 메일링크 안내 / [01:05] 메일보내기링크 / [01:36] a href="mailto :메일주소" / [02:13] outlook 2007 시작 / [03:34] 일반 파일링크 / [04:01] 웹프로젝트 이미지링크 / [05:04] 다운로드 페이지 / [06:23] 책갈피 링크 / [07:08] 찾기 / [07:36] a href="" 이곳을 찾아주세요 / [07:46] a name="" / [08:16] a href="#" / [09:20] 다른페이지 책갈피 찾기 / [09:53] 04파일에서 03파일로 복사 / [11:26] 원하는 사이즈열기 자바스크립 단점 / [11:48] 원하는 사이즈로 여는 방법 / [12:11] 나모로 새창열기 / [14:08] 단순한 소스 로 원하는 사이즈열기 / [14:57] #과 스크립 차이 / [15:23] popup name / [15:54] a href="#" -> a href="javascript" / [16:33] 팝업 네임 차이 / [16:37] onclick, javascript / [16:42] window.open / [17:35] 일반 설정들 / [18:06] toolbar / [18:55] scrollbar / [19:13] width, height

09 Html 태그 - 텍스트 움직임 효과, 특수 문자

20분

책갈피 : [00:00] 마퀴키본 / [00:16] table 태그 / [00:59] marquee 태그 / [02:14] 방향 지정 / [02:32] direction / [03:29] 흘러가는 종류 / [03:39] behavior / [04:28] slide / [05:04] alternate / [06:20] scrollamount 흘러가는 속도 / [07:57] 횟수정하기 / [08:01] loop / [09:41] 넓이,여백,컬러정하기 / [10:44] bgcolor / [11:48] 넓이와 높이를 정합니다. / [12:16] 이미지 적용 / [12:28] 상대경로. img / [12:47] br태그 / [13:39] direction(up/down) / [14:23] 특수문자 및 문자표 / [14:42] br태그 / [15:09] 특수문자 / [15:42] 문자표 / [16:18] 표현 못해줄때 문서 인코드 / [16:37] 손실될수 있는 문자 포함 / [17:06] 인코딩 / [17:50] 문자표 오류시 ANSI로 바꿔줍니다. / [18:15] 문자표와 특수문자 종합 / [18:50] 편집기를 쓰는 경우 / [19:05] 특수문자의 예

10 Html 태그 - 목록 만들기

12분

책갈피 : [00:00] OL태그 / [00:30] 웹표준에서의 테이블작업 / [00:54] ol태그 / [01:38] 순서있는 목록인 ol태그 / [01:47] li 태그 / [02:17] 막아주는 태그 / [02:47] 영문및 로마 정렬 / [02:59] type / [03:05] type = "a" / [03:41] OL type = "a" / [03:51] OL type = "A" / [04:12] type = "1" / [04:51] 로마소문자 적용 / [05:15] DL태그 / [05:45] UL태그 -> 주로사용됨 / [06:33] UL태그 -> 적용 예 / [07:04] 네이버 -> 나모 적용 예 / [07:52] 알지오 -> 나모 적용 예 / [09:21] 테이블의 오남용 / [09:46] 가로 메뉴 예시 / [10:22] BR태그 / [10:40] UL태그 -> 변형

11 Html 태그 - 테이블 의 모든것

31분

책갈피 : [00:00] 지금 시점의 쓰임 / [00:16] table / [00:47] 에디트 로 표 생성 / [01:27] border / [02:28] 셀, 행, 표 태그 개념 / [03:04] tr / [04:25] td / [05:16] 표, 셀 사이즈 정리 / [09:08] 셀 여백에 대한 정리 / [09:42] cellspacing, cellpadding / [10:46] 표, 셀 bg컬러 / [12:53] 표 밝고 어두운 테두리 / [13:02] bordercolorlight / [13:30] bordercolordark / [15:32] 표 퍼센트 실습 / [17:50] 셀 가로,세로 병합 / [18:40] colspan / [20:26] rowspan / [22:38] 표, 셀 정렬 / [25:40] 셀 수직정렬 필요 이유 / [27:42] valign / [29:13] th 및 타이틀 태그 / [30:51] caption

12 Html 태그 - 프레임 의 모든것

29분

책갈피 : [00:00] frameset / [00:07] 노프레임, 프레임 개념 / [00:30] noframe / [01:15] 프레임셋, 아이프레임 / [01:51] 프레임 만들기 / [02:03] 프레임 태그 / [02:21] 프레임 / [03:44] 프레임셋과 프레임 차이 / [04:03] 프레임셋 과 프레임 / [03:59] 소스보기 / [04:18] 세로 분할 / [04:49] url 지정하기 / [05:18] body / [05:47] 결과 확인 / [07:07] 수치값 변경 / [07:25] 구분선(frameborder) / [07:58] 수정금지(noresize) / [08:32] 스크롤(scrolling) / [09:48] 3등분 분할 / [10:28] 결과 확인 / [10:56] 가로 분할 / [11:24] 픽셀로 분할하기 / [12:44] 모든값(*) / [13:48] 종류별 분할 / [16:19] 결과 확인 / [17:00] 프레임셋 비추 / [17:16] 제로보드 / [17:44] 대상링크 / [21:45] 종류별 프레임 링크 개념정리 / [22:08] ul / [23:04] 상대경로와 절대경로 / [23:13] 페이지 확인 / [23:46] name / [24:44] 하이퍼링크 a href / [25:10] 결과 확인 / [25:43] target / [27:25] _top

13 Html 태그 - iframe, include 모든것

31분

책갈피 : [00:00] iframe 소개 / [00:40] iframe의 종류 / [01:42] src 로딩될 페이지 링크 / [02:27] 아이 프레임 / [03:21] table / [03:32] border / [04:40] iframe 을 배우는 단계 / [05:29] iframe 은 간격에 예민 / [05:46] iframe 두께 / [05:51] iframe border / [07:02] iframe 정렬 / [07:12] align / [08:27] iframe 사이즈 / [09:10] iframe 여백 테두리 / [10:01] hapace / [10:32] vspace / [11:26] marginwidth / [11:45] marginheight / [12:43] br태그 / [13:23] iframe 스크롤 / [14:31] iframe 이미지 / [14:41] src / [15:33] 상황에따라 auto / [16:24] iframe 링크타겟 / [16:50] target / [17:09] a태그 / [18:41] target=_blank / [19:14] iframe 내의 하이퍼링크 / [19:22] include 적용장점 / [20:57] include 적용순서 / [21:45] include를 하는 이유 / [22:00] 예제 / [23:39] 포털사이트 예제 / [24:30] include소스 / [24:43] include / [25:21] 저장 / [26:14] 실행시켜 확인해 봅니다. / [27:14] include의 예 / [28:37] include 적용경로 / [29:47] 디렉토리 / [30:01] include 사용하기 편한곳

14 Html 태그 - 폼, 버튼 구성요소 알기

23분

책갈피 : [00:00] 폼태그 역할안내 / [00:29] form 태그 / [00:58] 입력폼 속성안내 / [01:10] action 값 / [01:29] php, asp, cgi / [01:42] 데이터베이스 / [03:24] 원격 파일 열기 / [03:34] form 찾기 / [04:16] form의 마무리 / [05:43] method=post / [06:38] get / [07:33] 폼링크 버튼실습 / [07:37] target=_blank / [08:19] input 방식 / [08:28] input-type / [08:38] submit value / [08:53] 결과값 확인 / [09:45] post 개념정리 / [10:02] get 개념정리 / [12:43] 아이디 입력폼 / [12:50] input 내용안내, 입력값 / [12:54] input 이란? / [13:16] type=text / [13:21] name / [13:32] user_id / [14:12] size / [15:24] maxlength / [17:03] password / [17:53] 제로보드 로그인 폼확인 / [18:17] 소스 확인 / [19:08] form 태그 / [19:26] 제로보드 / [20:27] 로그인스킨 폼 / [20:58] 폼과 input 구성안내

아무도 알려주지 않은 실전내용

15 Html 태그 - 이미지 맵, 플래시, 동영상, 실무응용

22분

책갈피 : [00:39] 이미지맵 / [01:03] 이미지 가져오기 / [01:34] 웹페이지 그대로 저장하면 않됨 / [01:53] 드림위버나 나모에서 수정후, Edit Plus에 붙여넣기 저장 금지 / [02:42] 맵 소스넣기 / [02:45] img / [04:05] 맵 손쉽게 수정및 추가 / [05:05] 이미지 좌표 안내 / [05:15] 이미지 맵 종류에 따른 좌표값 구하기 / [05:40] 여러이지맵 번호 주의할점 / [07:28] 이미지맵 1에 대해 중복되어 적용안됨 / [08:19] 또 다른 이미지를 만들 때는 각기 다른번호를 지정 / [08:40] 맵점선 삭제 / [09:07] onfocus=this.blur() / [09:48] 플래시 점선 스크립 / [09:58] Flash / [11:04] script, flashwrite, transparent / [12:25] 자바스크립트 / [12:35] ucc 동영상 현명한 적용 / [15:38] 개인홈피, 물품판매의 경우 ucc 에 올린후 소스만적용 / [16:12] 도메인 호스팅 1~2위 업체에서 / [18:30] 카테고리 별 디렉토리

샘플확인 : 알지오 검색후 -> 강의검색란 -> HTML [입문]