중고급 과정
CSS Frameworks, GRID, SCSS(SASS), JAVASCRIPT

CSS Frameworks(UIKit) 핵심이론 및 활용예제

  1. Bootstrap으로 대표되는 CSS Frameworks 이해하기
  2. UIKit 설치 및 사용법
  3. UIKit 주요 컴포넌트 사용법

    - Accordion
    - Filter
    - Lightbox
    - Modal
    - Notification
    - Parallax
    - Scrollspy
    - Slider
    - Slideshow
    - Totop
    - Video

GRID 핵심이론 및 실전 활용 예제

Part 1. GRID 핵심 이론

  1. [Chapter 01] GRID 핵심 이론 – 부모요소에 쓰는 속성(1)

    - [필독] 그리드(Grid) 가로, 세로, 템플릿 이해
    - [필독] Grid 정렬 속성에 대한 이해
    - display: grid / display: inline-grid
    - grid-template-column
    - grid-template-row
    - grid-column-gap / grid-row-gap / grid-gap
    - justify-items
    - align-items
    - justify-content
    - align-content

  2. [Chapter 02] GRID 핵심 이론 – 자식요소(Grid Item)에 쓰는 속성

    - justify-self
    - align-self
    - grid-column-start / grid-column-end / grid-column
    - grid-row-start / grid-row-end / grid-row
    - grid-column + grid-row
    - grid-area
    - z-index
    - grid-row
    - order

  3. [Chapter 03] GRID 핵심 이론 – 부모요소 속성 + 자식요소 속성

    - grid-template-areas 와 grid-area
    - grid-template-areas 와 grid-area 와 grid-row
    - grid-template-areas 와 grid-area
    - grid-template-areas 와 grid-area
    - 부모요소에 .item 9개 배치하기 #01 – 배치 일괄 적용
    - 부모요소에 .item 9개 배치하기 #02 – 배치 일괄 적용
    - 부모요소에 .item 9개 배치하기 #03 – 배치 일괄 적용
    - 부모요소에 .ite m 9개 배치하기 #04 – 배치 개별 적용
    - 부모요소에 .item 9개 배치하기 #05 – 배치 개별 적용
    - grid-template-column, grid-template-areas, grid-area

Part 2. GRID 활용 예제 및 실전 예제

  1. [Chapter 04] GRID 핵심 이론 – 부모요소에 쓰는 속성(2)

    - [필독] Grid 레이아웃 제작 순서와 요령
    - [필독] 반응형 레이아웃 제작을 위한 미디어 쿼리 사용법

  2. Grid 활용 예제

    - Holly Grail 레이아웃 제작(1) / Holly Grail 레이아웃 제작(2)
    - Holly Grail 레이아웃 grid-area 활용 제작(1)
    - Holly Grail 레이아웃 grid-area 활용 제작(2)
    - Holly Grail 레이아웃 제작 최종본(1)
    - Holly Grail 레이아웃 제작 최종본(2)
    - Holly Grail 레이아웃 반응형 레이아웃 제작
    - 반응형 이미지 갤러리(1)
    - PC 버전 풀스크린 웹페이지 레이아웃
    - 반응형 풀스크린 웹페이지 레이아웃 - 반응형 블로그 포스트 이미지 갤러리 (다양한 레이아웃으로 변화주기)
    - 반응형 베스트 & 신상품 카드 UI 리스트 (PC 레이아웃 / Mobile & Tablet 레이아웃)
    - Holly Grail 레이아웃 제작(1)
    - Holly Grail 레이아웃 제작(2)
    - Holly Grail 레이아웃 grid-area 활용 제작(1)
    - Holly Grail 레이아웃 grid-area 활용 제작(2)
    - Holly Grail 레이아웃 제작 최종본(1)
    - Holly Grail 레이아웃 제작 최종본(2)
    - Holly Grail 레이아웃 반응형 레이아웃 제작
    - 반응형 이미지 갤러리(1)
    - PC 버전 풀스크린 웹페이지 레이아웃 / 반응형 풀스크린 웹페이지 레이아웃
    - 반응형 블로그 포스트 이미지 갤러리 (PC 레이아웃 / Mobile & Tablet 레이아웃 / 다양한 레이아웃으로 변화주기)
    - 반응형 베스트 & 신상품 카드 UI 리스트 (PC 레이아웃 / Mobile & Tablet 레이아웃)

SCSS(SASS) 핵심이론 및 활용

[Chapter 01] SCSS(SASS) 소개 및 세팅하기

  1. SCSS(SASS)를 사용하는 이유와 SASS와 SCSS의 차이점
  2. 컴파일(Compile)과 CSS 전처리기(Preprocessor)란?
  3. SCSS 라이브 HTML 프리뷰 세팅 with 비주얼 스튜디오 코드
  4. 비주얼 스튜디오 코드에서 Live Sass Complier 사용법
  5. VS Code의 Live Sass Compiler에서 map 파일이 생성 하지 않기
  6. VS Code의 Live Sass Compiler에서 Vendor Prefixes 하지 않기
  7. Live Sass Compiler에서 4가지 방식으로 CSS 포맷 설정하기
  8. Live Sass Compiler에서 컴파일 된 CSS 빈 줄 없애기

[Chapter 02] SCSS 핵심이론

  1. 비주얼 스튜디오 코드에서 SCSS 시작하기
  2. 선택자 중첩(Nesting)이란 & 주석(Comments)
  3. 중첩(Nesting) - 부모 선택자 참조(&)
  4. 중복 선택자(Duplicate Siblings Selector)
  5. 중첩(Nesting) - 부모 요소 참조 특수 선택자
  6. 중첩(Nesting) - 중첩 벗어나기 @at-root
  7. 중첩(Nesting) - CSS 속성 단축형
  8. 변수(Variables) 사용하기
  9. CSS에서 변수 선언하고 사용하기
  10. 외부파일 SCSS로 가져오기(@Import)
  11. SCSS에서 연산(Operations) 사용하기 - 산술 연산자, 비교 연산자, 논리 연산자
  12. 그룹 재사용 선언 @mixin
  13. 선언된 @mixin을 사용 @include
  14. @mixin에 매개변수, 인수
  15. 선택자의 스타일을 가져오는 @extend
  16. 플레이스홀더 선택자 %
  17. @content 컨텐츠블록
  18. 조건문 if
  19. 다중 조건문 @if, @else if, @else
  20. 반복문 @for / 반복문 @each / 데이터 타입(Data Types)
  21. SCSS 내장 함수(Built-in Functions) – map-get과 배열을 활용한 변수

[Chapter 03] SCSS 이론 활용 예제

  1. 조건문 @if 를 활용해 모바일에서 패딩 조절하기
  2. 조건문 @if 를 활용해 가상클래스 after에 문자열 출력
  3. 주요 CSS 선택자, 주요 가상클래스를 활용하기
  4. @import로 reset.scss 연결하기
  5. @mixin을 중첩 활용해서 텍스트 서식 설정하기
  6. @mixin 배열(Array)에 인수 사용하고 @include로 인수 반환하기
  7. 자주 사용하는 이펙트를 @mixin 만들고 @include로 재사용
  8. 특정 선택자 CSS 속성 가져오는 @extend를 활용해 CSS 디자인 재사용
  9. 플레이스 홀드(%) 선택자로 CSS 선택자를 연결선택자로 정리하기
  10. @mixin에 매개변수를 활용해서 다양한 Border Radius 만들기
  11. 선택자 중첩(Nesting) 키워드 &를 사용해 html 레이아웃 구조 만들기

[Chapter 04] SCSS 실전 포트폴리오 퍼블리싱

  1. SCSS 가상클래스 before & after로 살아있는 하트 만들기
  2. SCSS 로그인 폼 디자인(속성선택자, 구글 폰트 아이콘)
  3. SCSS 커스텀 체크박스 로그인폼(:is 가상클래스)
  4. SCSS, Flex & Grid 실전 퍼블리싱 제작 - 반응형 블로그 포스트 이미지 갤러리
  5. SCSS, Flex & Grid 실전 퍼블리싱 제작 – 풀스크린 포트폴리오 반응형 레이아웃

JAVASCRIPT 기본 다지기

  1. 제이쿼리 vs 자바스크립트의 차이, 바닐라 자바스크립트란?
  2. 자바스크립트 – 자료형, 변수, 산술연산자, 논리연산자
  3. 자바스크립트 – 조건문, 반복문, 배열
  4. 자바스크립트 – 함수, 이벤트
  5. 자바스크립트 - 문서객체모델(DOM)

퍼블리싱 포트폴리오 제작

  1. GRID+SCSS 실전 퍼블리싱 예제 제작(10개)
  2. GRID 반응형 웹사이트 제작(1개)