IT전문교육 의 리더!

HOME>IT전문가>핵심 웹표준퍼블리셔>HTML [입문]

HTML [입문]

15회차 속성과정|전체 : 7시간 30분|회차당 평균 : 30분0초
140,00085,000
  • 이용기간 2개월|전문강사 : 채명수/이준호
Study Guides
웹문서 제작의 기본부터 시작하는 분들이 학습대상입니다. 드림위버나 기타 다른 편집 프로그램에 적응되어 있는 분들이라면 이 내용을 간과하기 쉽습니다. 하지만 웹표준 코딩을 하기 위해서는, 기본적으로 이 내용은 반드시 학습하실 것을 권장합니다.
 
  • 입문자용 신규
  • 0149분 전문가 특강 1누구나 할수있게! HTML 모든tag 활용실습

    책갈피 : [00:00] html 문서/[00:38] 소스코드 살펴보기/[00:59] 소스코드가 필요한 이유/[01:43] 문서 타입 선언/[01:54] 기본적 html 문서 생성/[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] body 에 배경색 지정/[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 태그

  • 0238분 전문가 특강 2누구나 할수있게! HTML 모든tag 활용실습

    책갈피 : [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 정의

  • 0342분 전문가 특강 3누구나 할수있게! HTML 모든tag 활용실습

    책갈피 : [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"

  • 0438분 전문가 특강 4누구나 할수있게! HTML 모든tag 활용실습

    책갈피 : [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 태그
  • 0523분 Html 태그 - 편집툴 및 웹문서에 대하여에디트플러스, 웹호스팅, 문서 실시간 반영

    책갈피 : [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] 프로젝트 저장하기

  • 0632분 Html 태그 - 웹문서, 기본 태그구성홈페이지 소스

    책갈피 : [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 태그

  • 0740분 Html 태그 - 주석, pre xmp blockquote, 글꼴, 이미지, 링크주석, 줄바꿈, face,상대 절대경로

    책갈피 : [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 태그

  • 0820분 Html 태그 - 링크 모든것, 책갈피, 원하는 사이즈 오픈및 옵션mailto, 책갈피, 팝업

    책갈피 : [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

  • 0920분 Html 태그 - 텍스트 움직임, 특수문자direction, 인코딩

    책갈피 : [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] 특수문자의 예

  • 1012분 Html 태그 - 목록 만들기OL, li, DL, UL 예시

    책갈피 : [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태그 -> 변형

  • 1131분 Html 태그 - 테이블의 모든것셀, 행, 표 태그 개념

    책갈피 : [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

  • 1229분 Html 태그 - 프레임의 모든것개념정리

    책갈피 : [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

  • 1331분 Html 태그 - iframe, include 모든것iframe, include

    책갈피 : [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 사용하기 편한곳

  • 1423분 Html 태그 - 폼, 버튼 구성요소 알기입력폼 속성, 데이터베이스

    책갈피 : [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 구성안내

  • 아무도 알려주지 않은 실전내용
  • 1522분 Html 태그 - 이미지 맵, 플래시, 동영상, 실무응용손쉽게 수정및 추가

    책갈피 : [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] 카테고리 별 디렉토리






본 강의 수강생들의 추가구매가 가장 많은 학과.