HTML 기초 CSS3 + 부트스트랩

강좌구성
(25강) 전체 : 10시간 57분|평균 : 26분16초

수강기간
2개월

전문강사
알지오 R&D [IT]

HTML 기초 CSS3 + 부트스트랩 인강 평생교육원 교육 안내
HTML 태그기초 와 CSS3 부터 시작하는 분들이 완료후 부트스트랩 까지 이용하실수 있는 학습입니다. HTML 태그, CSS3 의 편집기 인 드림위버나 기타 다른 편집 프로그램에 적응되어 있는 분들이라면 이 내용을 간과하기 쉽습니다. 하지만 HTML 태그 CSS3 코딩을 하기 위해서는, 기본적으로 이 내용은 반드시 HTML 태그 부터 CSS3 와 부트스트랩 까지 학습하실 것을 권장합니다.

01.23분 HTML 기초 에 대해서 알아봅니다. Part 1
HTML 문서 와 P, H1 등 기본 태그의 적용과 소스 보는법부터

책갈피[00:00] HTML 기초/[05:41] 브라우저 이식/[10:45] br태그/[14:47] 제목글/[19:55] 내용 확인
02.24분 HTML 기초 에 대해서 알아봅니다. Part 2
상대 절대경로 완전이해, 종류별 링크 옵션, 책갈피, 주석

책갈피[00:00] 경로설정/[08:24] 하이퍼링크/[12:05] 책갈피/[18:46] 예시/[21:06] 상대 링크
03.28분 HTML 기초 에 대해서 알아봅니다. Part 3
테이블과 인풋의 모든것, 목록 및 숫자정렬

책갈피[00:00] table 태그/[05:55] border 설정/[10:22] input 설정/[13:46] button과 submit/[19:41] form 정의/[23:16] ul 목록
04.24분 HTML 기초 에 대해서 알아봅니다. Part 4
검색 엔진이 파악하는 엘리먼트, CSS3 와 동시에 학습합니다.

책갈피[00:00] 2차 메뉴/[05:20] abbr 태그/[11:32] pre 태그/[17:45] 색상 변경/[21:55] font size 변경
05.23분 HTML 기초 에 대해서 알아봅니다. Part 5
CSS3의 개별 엘리먼트 요소들, CSS 를 직접지정하는 것과 전체지정

책갈피[00:00] 정렬/[05:35] 텍스트 두께/[09:59] big 태그/[14:48] bdo 태그/[19:42] 폰트 변경
06.22분 HTML 기초 에 대해서 알아봅니다. Part 6
CSS 지정알아보기 stylesheet 직접 및 간접 으로 종류별 지정, id와 class값

책갈피[00:00] 제목글/[06:07] CSS 파일/[12:18] 요소 읽기/[15:44] font family/[19:20] id값과 class값
07.22분 HTML 기초 CSS3 레이아웃 구조 Part1
CSS DIV 와 P 의차이, 다중요소 반영

책갈피[00:20] div/[06:13] margin/[11:08] 직접 반영/[15:33] margin-bottom/[20:20] padding
08.24분 HTML 기초 CSS3 레이아웃 구조 Part2
레이아웃 의 기본부터 배워봅니다.

책갈피[00:43] div 레이아웃/[05:33] line-height/[09:48] nav 태그/[16:19] 정렬/[20:15] width값
09.23분 HTML 기초 CSS3 레이아웃 구조 Part3
검색엔진이 좋아할 메타태그 만들기

책갈피[00:00] 홈페이지 넓이/[04:54] 로고 위치 변경/[11:22] solid 값/[15:03] 여백 관련/[20:21] meta 태그
10.23분 HTML 기초 CSS3 인풋과 기본문자
브라우져가 알수있는 문자, 폼속성 이해와 종류별 인풋 실습

책갈피[00:00] &percnt/[03:19] form/[06:53] fieldset/[10:52] textarea 태그/[15:31] input 태그/[19:48] 컬러값
11.25분 HTML 기초 CSS3 HTML5의 또다은 엘리먼트
또 다른 인풋들, 테이블 CSS 처리 및 스타일 시트의 상속관계 명확히 알기

책갈피[00:34] readonly/[05:16] input list/[10:49] 밑줄 제거/[15:33] 가운데정렬/[20:35] width 변경
12.23분 실제 사용할 홈페이지 레이아웃
ul의 모든것 메인에 필요한 기본 레이아웃 만들기

책갈피[00:31] ul 정의/[06:33] 내부 여백/[11:01] 색상 변경/[15:36] 적용된 내용 확인/[20:02] 밑줄 제거
도메인 과 웹호스팅 이해
13.18분 도메인 선택 및 업체선정과 연결이해

책갈피[00:00] 도메인과 웹호스팅/[02:29] URL/[03:29] 프로토콜/[05:50] DNS/[09:05] 도메인의 종류/[10:47] 도메인 취득방법/[11:38] 도메인 확인, 신청방법/[12:49] 네임서버 설정/[16:05] ping 도메인 -t/[17:09] 단축 URL
14.20분 웹호스팅 상품별 차이 완벽이해

책갈피[00:00] 웹호스팅/[00:25] 서비스 사양 살펴보기/[01:11] 윈도우, 리눅스 비교/[05:38] 서버환경 선택/[08:06] 프로그램 자동설치/[09:22] OS별 지원사항 확인/[11:39] html, css/[12:05] 하드디스크 Raid 구성/[12:40] SSH 쉘/[13:17] FTP, SFTP/[13:46] phpmyadmin/[14:56] 저장공간과 트래픽/[16:33] 권장사항/[17:18] 웹, 스트리밍, cdn/[19:41] cdn 호스팅이 필요한 경우
15.13분 웹호스팅 신청하면서 연결도메인 및 여러종류 쉽게 알기

책갈피[00:00] 서버 종류, 사이즈/[01:40] 서버 스팩/[03:36] 서비스 선택기준/[05:27] 도메인 추가연결, 서브 도메인/[07:35] 프로그램 자동설치, UTF-8/[08:33] 서버환경 선택/[09:26] 도메인 선택/[10:23] 도메인 직접 입력/[10:51] 도메인 입력의 이해/[12:39] 웹호스팅 접속
16.15분 접속하는 방법 및 utf, euc 전문노하우, URL 다시 확인

책갈피[00:00] 웹호스팅 접속방법/[01:28] FTP 설정방법/[04:03] 원격 디렉토리/[05:07] 파일 업로드, 다운로드/[05:30] 사이트 관리자 설정/[07:39] 원격 파일 열기/[07:48] 파일명 작성시 주의사항과 이유/[09:32] 오류사항 확인과 해결방법/[11:16] 올바른 파일명 작성과 업로드 확인/[13:06] 호스트 파일의 우선순위
부트스트랩4
17.34분 최종 레이아웃, bootstrap4 chapter-1
레이아웃의 최종, 부트스트랩 설치와 cdn 반응형웹과 css요소 실습

책갈피[00:00] 웹호스팅 접속방법/[01:28] FTP 설정방법/[04:03] 원격 디렉토리/[05:07] 파일 업로드, 다운로드/[05:30] 사이트 관리자 설정/[07:39] 원격 파일 열기/[07:48] 파일명 작성시 주의사항과 이유/[09:32] 오류사항 확인과 해결방법/[11:16] 올바른 파일명 작성과 업로드 확인/[13:06] 호스트 파일의 우선순위
18.30분 bootstrap4 chapter-2
실무적인 내용으로 자세하고 완벽하게 실습하기

책갈피[00:19] media query 이해하기/[04:48] container-fluid와 container 차이점/[05:28] 그리드 시스템/[09:58] 그리드 시스템의 수평과 수직/[13:24] flex 정의/[16:59] 그리드 시스템 설명 /[25:28] 텍스트 정의하기
19.35분 bootstrap4 chapter-3
실무적인 내용으로 자세하고 완벽하게 실습하기

책갈피[00:02] small tag 이용하기/[05:05] 인용문 만들기/[08:54] 목록 만들기/[16:26] media tag 만들기/[19:58] media-body 정의하기/[25:46] ul, li 세팅하기/[28:18] 텍스트 컬러와 링크
20.35분 bootstrap chapter-4
실무적인 내용으로 자세하고 완벽하게 실습하기

책갈피[00:02] 테이블/[05:01] 테이블 백그라운드 설정/[12:56] 테이블 색상 및 효과 넣기/[22:38] 테이블 크기 조정/[31:50] 이미지 조정하기
21.34분 bootstrap chapter-5
실무적인 내용으로 자세하고 완벽하게 실습하기

책갈피[00:02] 이미지 위치 조정하기/[04:12] 반응형 이미지/[09:16] jumbotron/[15:36] 메세지 만들기/[24:07] 원하는 위치에 메세지 만들기/[29:00] 버튼 만들기
22.35분 bootstrap chapter-6
실무적인 내용으로 자세하고 완벽하게 실습하기

책갈피[00:10] 버튼에 링크 만들기/[08:40] 버튼에 효과 주기/[15:43] 버튼 그룹 만들기/[21:26] 버튼에 그룹다운 설정하기/[26:13] element.style/[31:41] badge
23.34분 bootstrap chapter-7
실무적인 내용으로 자세하고 완벽하게 실습하기

책갈피[03:47] 웹 메뉴/[06:33] 진행바/[10:51] style 반영/[16:28] 넓이 조절/[18:07] 페이지/[25:22] active/[29:59] padding
24.37분 bootstrap chapter-8
실무적인 내용으로 자세하고 완벽하게 실습하기

책갈피[01:37] css 변환/[06:53] list-group/[09:53] column-reverse/[15:43] action/[20:26] secondary/[26:11] text-white/[28:00] card/[33:31] card-body
25.33분 bootstrap chapter-9
실무적인 내용으로 자세하고 완벽하게 실습하기

책갈피[00:47] card-img-overlay/[03:43] p tag/[08:30] drop down/[12:24] disable/[16:00] dropdown-menu-right/[22:09] 버튼의 그룹화/[26:08] target 호출/[31:25] show