한 눈에 끝내는 HTML5/CSS3
    • 01
      시작하기에 앞서
    • 강의의 방향
      프로그래밍이란?
      HTML이란?
      CSS란?
      HTML 맛보기
      CSS 맛보기
    • 02
      개발 환경 설정
    • 구름IDE
      Visual Studio Code
      Atom
      Brackets
      Sublime Text
    • 03
      HTML 기초
    • 강의 목표
      HTML의 기본 구성
      기본적인 HTML 문서 구조
      Head와 Body
      기본적인 레이아웃
      정리
    • 04
      제목, 내용 관련 태그
    • 강의 목표
      제목과 본문 태그
      나누기 위한 태그
      글자와 관련된 태그
      정리
    • 05
      링크 태그
    • 강의 목표
      링크 태그란
      링크 태그의 속성
      웹사이트의 경로와 주소
      정리
    • 06
      멀티미디어 관련 태그
    • 강의 목표
      이미지 태그
      오디오와 비디오 태그
      유튜브 영상 삽입
      정리
    • 07
      입력 양식 태그
    • 강의 목표
      입력 양식(form)
      form 태그
      input 태그
      select 태그
      textarea 태그
      button 태그
      정리
    • 08
      테이블과 리스트
    • 강의 목표
      표(Table)
      목록(List)
      목록 태그의 속성
      정리
    • 09
      CSS 기초
    • 강의 목표
      CSS의 의미와 구성 요소
      선택자(Selector)에 대하여
      CSS의 기본 단위
      CSS의 색상
      정리
    • 10
      선택자(Selector)
    • 강의 목표
      단순 선택자
      복합 선택자
      가상 클래스 선택자
      정리
    • 11
      Box 모델
    • 강의 목표
      박스(Box)모델
      content
      border
      padding과 margin
      정리
    • 12
      글자(Text) 관련 스타일
    • 강의 목표
      폰트 종류와 웹 폰트
      폰트의 크기와 형태
      텍스트 정렬
      정리
    • 13
      위치 정렬
    • 강의 목표
      block과 inline
      inline-block
      position
      float
      정리
    • 14
      위치 정렬 - flexbox
    • 강의 목표
      flexbox에 관하여
      flex container: 방향과 흐름
      flex container: 정렬1
      flex container: 정렬2
      flex container: 정렬3
      flex item
      정리
    • 15
      위치 정렬 - grid 1
    • 강의 목표
      grid layout 기본
      grid container: template
      grid container: gap
      grid container: auto
      grid container: grid
      grid container: align & justify
      정리
    • 16
      위치 정렬 - grid 2
    • 강의 목표
      grid item: row, column
      grid item: area
      grid item: self
      정리
    • 17
      상속과 우선순위
    • 강의 목표
      상속
      우선순위
      정리
    • 18
      종합 예제 - 회원가입 페이지 만들기
    • 강의 목표
      레이아웃 구성
      회원가입 폼 만들기1
      회원가입 폼 만들기2
      회원가입 폼 만들기3
      하단 메뉴 만들기
      강의를 마치며
    강의의 방향
    01 시작하기에 앞서
    강의의 방향
    default

    '한 눈에 끝내는 HTML5/CSS3'를 수강하시게 된 여러분 안녕하세요! 웹 개발을 시작하게 된 여러분을 환영합니다. '한 눈에 끝내는 HTML5/CSS3'는 다음과 같은 분들에게 추천드리는 강좌입니다.

    1. 프로그래밍을 해보지 않은 비전공자로 관련 지식이나 경험이 없으신 분
    2. 웹 서비스를 제작하기 위해 가장 처음에는 무엇을 해야 하는지 궁금하신 분

    HTML5/CSS3는 웹을 구성하는데 사용하는 언어입니다. 보통 여기에 JavaScript까지 묶어 웹 페이지를 만들 수 있는 가장 기초적인 구성이라 말합니다. 이 세 가지에 대해 학습한다면 단순한 기술을 습득하고 사용하는 것을 넘어, 웹 서비스 및 IT 기술의 역사까지 이해하시게 될 겁니다. 뿐만 아니라 우리 사회에서 아주 쉽게 찾아볼 수 있는 다양한 웹 서비스가 왜 이러한 구조를 가지고 있는지 궁금해하고 해법을 찾아내는 여러분을 발견할 수도 있습니다. 이러한 기술에 대한 고민과 이해는 자연스럽게 관련 직군에 대한 이해도도 증가시키기 때문에 여러 웹 서비스 기업에서 비전공자 혹은 비개발 직군에게도 개발 경험을 요구하는 경우가 점차 증가하고 있습니다.

    하지만 전공자에게도 개발은 쉽지 않습니다. 비전공자나 비개발 직군이라면 컴퓨터 과학에 대한 개념을 이해하기 어려운 경우가 많기에 더더욱 쉽지 않은 것이 맞습니다. 때문에 이 강좌는 초보자도 쉽게 접근할 수 있는 HTML5/CSS3를 먼저 다루며 해당 내용들을 좀 더 쉽게 이해할 수 있는 꼼꼼한 설명과 유용한 실습을 통해 코딩 감각을 익힐 수 있도록 제작되었습니다. 물론 이미 개발에 대해 잘 알고 익숙하신 분이 이 강의를 수강하시는 경우도 있을 겁니다. 개발 숙련도가 높으신 분이라면 용법에 대한 설명과 예시 코드만 조금 살펴 봐도 충분히 이해하실 수 있으니 편한 마음으로 읽어주시기 바랍니다. 이제 강의의 기본 방향을 알려드리겠습니다.

    • 기본 개념을 적용한 예시 코드를 바로 살펴보고 실습하며 학습할 수 있도록 구성했습니다.
    • HTML5과 CSS3에 대한 기본 개념과 그 사용법에 대해 적절한 비유와 예시로 설명했습니다.

    기본에 충실한 강의이기 때문에 평범한 글을 읽듯이 천천히 따라오시기 바라며, 혹시 이해되지 않거나 모르는 부분이 생기실 때 구름EDU Q&A 게시판 혹은 검색 포탈을 이용하시면 궁금증을 해결할 수 있을 겁니다. HTML5와 CSS3가 초보자도 금방 사용할 수 있을 만큼 쉬운 언어이니 겁내지 마세요! 이제 "한 눈에 끝내는 HTML5/CSS3"를 시작하겠습니다!

    질문하기