실전 HTML5 & CSS3 동영상 강좌

by

아래는 SEOUL G-캠프에서 제작한 “실전 HTML & CSS 동영상 강좌”의 강의 목록입니다.
이 강좌는 총 30회에 걸쳐서 HTML과 CSS의 활용방법에 대하여 상세하게 강의하고 있습니다. HTML5 & CSS3 강의 동영상을 시청할 수 있는 주소는 아래의 링크를 클릭해 주세요.

실전 HTML5 & CSS3 동영상 강좌

HTML5 & CSS3 동영상 강좌
 

제1강 Web과 html

  • Web이란?
  • HTML이란?
  • CSS란?

제2강 HTML 기본-I

  • 태그란?
  • HTML 버전과 편집툴
  • HTML 태그 개요
  • h1, p, br, a, b, i, sup, ins, del 태그

제3강 HTML 기본-II

  • 리스트 태그  ul, li, ol & dl, dt, dd
  • 표를 나타내는 태그 ® table, tr, td
  • 이미지를 출력하는 태그 → <p><img src=”Navi.png” alt=”나비”></p>
  • 사운드를 출력하는 태그 → <audio> src=”music.mp3″ controls=”controls” autoplay=”autoplay” loop=”loop”></audio>
  • 주간 히트송 예제

제4장 HTML 기본 – III

  • 동영상을 출력하는 태그 → <video src=”video.mp4″ type=”video/mp4″ controls=”controls”></ video>
  • 폼 태그
  • 레이아웃 구성 태그 – div, span

제5장 HTML 기본 -IV

  • div를 이용한 레이아웃
  • 시멘틱을 이용한 레이아웃 → header, nav, section, footer 

제6장 CSS 기본-I

  • 선택자란?
  • tag 선택자
  • * 선택자
  • 전체와 특정 선택자의 혼합

제7장 CSS 기본-II

  • id(#)와 class(.)
  • tag, id, class 혼합
  • 속성 선택자
  • 후손 및 자손 선택자
  • 동위 선택자 (~, +)

제8장 CSS 기본-III

  • 반응 선택자 → li:hover { color:blue; }
  • 상태 선택자 → input:focus { border:2px solid #ff0000; padding:10px; }
  • 구조 선택자 → ul li:first-child, ul li:nth-child(2n+1) { backgroud-color:yellow; }
  • 전체적인 레이아웃 설정

제9장 CSS 기본-IV

  • 문자 선택자 → #history2::first-letter, #history1::first-line { font-weight:bold; font-size:2em, color:#2160d1; }
  • 링크 선택자 → content a::after { content: ‘-‘ attr(href); }
  • 부정 선택자 → #content li:not(.fa) { background-color : #ffd800; }

제10장 CSS 속성-I

  • CSS3 단위 → px, em, %
  • url() → background-image:url(‘http://www.sba.seoul.kr’);
  • display 속성 → block, inline, inline-block
  • visibility 속성 → display:none, visibility:hidden
  • opacity 속성

제11강 CSS 속성-II

  • margin 및 padding 속성 → padding 10px을 주면, 백그라운드 이미지는 (블럭영역 + 10px)에 채워진다.
  • box-sizing 속성 → box-sizing:border-box, box-sizing:content-box
  • border 속성 → border-width, border-style, border-color, border-radius
  • background-image 속성 → background-size, background-repeat, background-attachment:fixed 

제12강 CSS 속성-III

  • font-family, font-size 속성
  • font-style, font-weight, line-height 속성
  • text-align, text-decoration 속성
  • position 속성 → static, fixed, absolute, relative → 기본은 static이고, fixed는 화면이 움직이더라도 위치가 고정된다.

제13강 CSS 속성-IV

  • float 속성 → left, right
  • gradient 속성 → Ultimate CSS Gradient Generator 사이트 이용

제14강 웹페이지 실전-I

  • 다양한 웹사이트의 레이아웃
  • http://www.yahoo.com의 전체적인 레이아웃

제15강 웹페이지 실전-II

  • 일반적인 쇼핑몰 레이아웃

제16강 웹페이지 실전-III

  • 웹폰트 → GoogleFonts 사이트 이용

제17강 스마트폰 레이아웃-I

  • viewport → width, height, initial-scale, user-scalable, minimum-scale, maximum-scale
  • header 제작
  • 네비 제작 → Toggle로 나왔다가 사라지는 메뉴 제작

제18강 스마트폰 레이아웃-II

  • 본문 제작
  • footer 제작

제19강 스마트폰 레이아웃-III

  • 스마트폰 레이아웃

제20강 태블릿 레이아웃-I

  • 헤더 제작
  • 네비(메뉴) 제작