초급 과정
HTML+CSS 기본기 완성하기

HTML 핵심이론 및 활용

  1. HTML 기본구조/서식 다루기

    - 텍스트에디터 사용법 및 활용(NotePad++, EditPlus, Brackets, Visual Studio Code)
    - 웹 제작 관련 참고 용어 정리 - HTML 기본 문서 구조 만들기
    - 텍스트 서식 꾸미기(주요서식/기타서식)
    - 더미텍스트(Dummy Text) 한글입숨

  2. 멀티미디어 다루기/링크 다루기/목록 다루기

    - 이미지 파일 형식 이해하기 : PNG ,GIF,JPEG ,SVG
    - 이미지 HTML에서 불러오기 : img 사용법
    - 임시 이미지 사용법 http://placehold.it
    - a 태그로 이미지를 감싸는 이미지에 링크 만들기
    - 순서 있는 목록을 만드는 태그(ol)
    - 순서 없는 목록을 만드는 태그(ul)
    - 목록 중첩하기(ul 안에 ul 넣기)
    - HTML5 피규어(figure) 태그
    - 하이퍼링크(Hyperlink)와 앵커(Anchor) 만들기
    - 이미지 맵(Image Map)
    - YouTube 동영상 다운로드
    - HTML5와 멀티미디어(오디오,비디오 재생하기)

  3. 표만들기, 폼태그, 시맨틱태그

    - 표 만들기(1~3)
    - 폼 관련 태그들(1~2)
    - HTML5 시맨틱 태그로 만드는 레이아웃(1~2)

CSS 핵심이론 및 활용

  1. CSS 텍스트 서식 스타일 꾸미기

    - 필독사항 / CSS 기본 문법 / CSS 링크 방법 / CSS 선택자 / CSS 적용 우선 순위
    - CSS 텍스트 관련 스타일 / 구글 웹 폰트 활용하기 / CSS 목록 스타일 / 폰트어썸 사용법 / XEIcon 사용법

  2. CSS 배경 색상, 배경 이미지 꾸미기

    - CSS 배경 색상 및 이미지 제어하기 / CSS 배경 그라디언트 만들기
    - 레이아웃 스타일 (인라인요소 vs 블록요소)
    - 레이아웃 스타일 (display 속성 : inline, block, inline-block)
    - 박스모델(Box Model) / CSS 테이블 스타일

  3. CSS 포지션 레이아웃 만들기

    - CSS 포지션 (엘리먼트 수평 정렬하기 : float, clear)
    - CSS 포지션 (position 속성 / 자식요소를 부모요소 밖으로 위치시키기)
    - CSS 포지션 (엘리먼트 보이고 감추기 : z-index, visibility, opacity, display)

  4. 비주얼 스튜디오 코드 필수 익스텐션 사용법

퍼블리싱 결과물

  1. 실전 퍼블리싱 예제 제작(10개)
  2. 클론 코딩 전체 웹사이트 제작(1개)