description
Mash-up 디자이너를 위한 웹 프론트엔드 기초 스터디 자료입니다.

Mash-Up 웹 개발 기초 스터디

소개

• 웹 개발 기초 스터디 자료입니다.

참여자

• 김찬연
• 이동준
• 강주영
• 고은이
• 이윤희
• 김범준

일정

1회차

• 실습 환경 구성하기
  • 텍스트 에디터: Visual Studio Code
  • 웹 브라우저: Chrome, Firefox
  • 버전 관리 시스템: Git
• 웹
  • 웹의 동작 원리
  • 웹의 발전
  • 프론트엔드와 백엔드
• 웹 표준과 웹 접근성
  • 웹 표준
  • 웹 접근성
• HTML5 개요
  • HTML이란
  • 새로운 표준, HTML5
  • HTML5 기본
  • HTML 문서의 기본 구조
  • 시맨틱 웹

2회차

• HTML5 기초
  • 마크업 요소
  • 기본적인 마크업 작성 규칙
    • 종료 태그의 처리
    • 대소문자의 사용
    • 빈 요소
    • 속성(Attribute)과 값(Value)
    • 태그의 올바른 중첩 사용
    • 콘텐츠 모델
• HTML5 실습
  • 문서(정보)의 구조 파악하기
  • 아웃라인 알고리즘
  • 문법 검사 서비스 이용하기: W3C HTML Validator Service
  • Github 페이지 호스팅하기

3회차

• HTML5 심화
  • 폼 요소 다루기
• HTML5 실습
  • 문서(정보)의 구조 파악하기
• CSS3 개요
  • CSS란?
  • CSS를 HTML에 적용하는 방법
  • 관심사의 분리
• CSS3 기초
  • CSS 기본 문법 - 선택자와 선언부
  • 웹 브라우저별 접두사
  • 상대 단위와 절대 단위
  • 선택자
  • 기본 속성
  • Box Model
  • Cascading Rules

4회차

• CSS3 기초
  • 기본 속성
  • 정렬 관련 속성
  • Reset CSS, Normalize CSS
• CSS3 심화
  • 인라인 요소와 블록 요소
  • 레이아웃 관련 속성
    • display: float
    • display: flex
    • display: grid
    • position

5회차

• CSS3 실습
  • 레이아웃 관련 속성 사용하기
  • Chrome 개발자 도구 활용하기
• CSS3 기초
  • 기본 속성
  • 폰트 적용하
• CSS3 심화
  • 레이아웃 관련 속성
    • display: float
    • display: flex
    • display: grid
    • position

6회차

• CSS3 실습
• CSS3 기초
  • 기본 속성
  • 애니메이션 관련 속성
• CSS3 심화
  • 폼 요소 스타일 지정하기
  • 반응형 웹을 구축하기 위한 미디어 쿼리

7회차

• CSS3 기초
• CSS3 심화
  • 고해상도 디스플레이 대응하기
• CSS UI 라이브러리 대응하기

8회차

• 자바스크립트

9회차

• 자바스크립트

10회차

• 자바스크립트