SCSS(SASS) FLEX GRID 핵심이론(PDF) 교재 및 활용예제 대시보드

초급자를 위해 준비한
[웹 개발, 웹 퍼블리싱] 강의입니다.

SCSS(SASS) FLEX GRID 핵심이론(PDF)과 활용 예제는 SCSS(SASS), FLEX, GRID 사용에 관한 핵심 이론을 알기 쉽게 핵심만 정리한 PDF 교재입니다. 중상급 퍼블리싱 실력을 목표로 하는 분들에게 SCSS(SASS), FLEX, GRID에 대한 이해도와 활용 능력은 필수입니다. 그리고 퍼블리싱 취업과 이직에 큰 경쟁력이 될 거로 생각합니다. SCSS(SASS) FLEX GRID 핵심이론(PDF) 뿐만 아니라 이론 활용 예제 완성본(html, scss, css)가 별도로 첨부되어 있어서 이론 학습 후 이론을 활용한 응용 예제를 만들어 볼 수 있습니다.

한 단계 뛰어오르는 웹 퍼블리싱! 
코딩웍스와 함께 핵심을 정리해 보세요.

💡 영상 컨텐츠가 아닌 교재(PDF) 다운로드 컨텐츠입니다.

• SCSS(SASS) 핵심이론(PDF)과 활용 예제
• FLEX 핵심이론(PDF)과 활용 예제
• GRID 핵심이론(PDF)과 활용 예제
• 중상급 퍼블리싱 실력을 위한 핵심 이론서 PDF 교재와 예제파일 다운로드 컨텐츠
• 출력해서 책으로 보셔도 손색이 없는 고화질 PDF 교재

💡 SCSS(SASS) FLEX GRID 핵심이론(PDF) 강의 컨텐츠 구성

• SCSS(SASS) 핵심이론 (변수, 중첩, @minxin, 조건문) - 67페이지
• FLEX 핵심이론 (부모요소 자식요소 사용 속성) - 36페이지
• GRID 핵심이론 (정렬, 그리드 템플릿, repeat, minmax) - 66페이지
• GRID 활용 실전예제 (Holly Grail 레이아웃, 미디어쿼리) - 19페이지
• SCSS+FLEX+GRID 활용 예제 html 파일 - 233개
• 다운로드 파일 총 용량 27메가

💡 SCSS(SASS) FLEX GRID 핵심이론(PDF) 교재의 장점

• PDF로 핵심만 만들어져 있기 때문에 종이책 보다 훨씬 효율적인 학습이 가능합니다.
• 시중 교재에서 SCSS(SASS), FLEX, GRID 이론을 다루는 책이 거의 없습니다.
• 코딩웍스가 모든 강의 소스를 직접 제작해서 만들었기 때문에 이해하기 쉽게 설명되었습니다.

📚 SCSS(SASS) 핵심이론 교재(PDF) 수업내용

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

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

Chapter 02) SCSS 핵심이론

• 비주얼 스튜디오 코드에서 SCSS 시작하기
• 선택자 중첩(Nesting)이란 & 주석(Comments)
• 중첩(Nesting) - 부모 선택자 참조(&)
• 중복 선택자(Duplicate Siblings Selector)
• 중첩(Nesting) - 부모 요소 참조 특수 선택자
• 중첩(Nesting) - 중첩 벗어나기 @at-root
• 중첩(Nesting) - CSS 속성 단축형으로 사용하기
• 변수(Variables) 사용하기
• 외부파일 SCSS로 가져오기(@Import)
• SCSS에서 연산(Operations) 사용하기 - 산술 연산자, 비교 연산자, 논리 연산자
• 그룹 재사용 선언 @mixin
• 선언된 @mixin을 사용 @include, @mixin에 매개변수, 인수
• 선택자의 스타일을 가져오는 @extend
• 플레이스 홀더 선택자 %
• @mixin과 @include 사용할 때 코드 중복을 줄이는 콘텐츠 블록 @content
• 조건문 if
• 다중 조건문 @if, @else if, @else
• 반복문 @for
• 반복문 @each
• 데이터 타입(Data Types)

Chapter 03) SCSS 이론 활용 예제

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

⚡ SCSS(SASS) 교재 학습 전 [필독 사항] 

📚 FLEX 핵심이론 교재(PDF) 수업내용

Chapter 01) 부모요소에 쓰는 속성

• display: flex
• justify-content
• align-items
• flex-direction
• flex-wrap
• align-content

Chapter 02) 자식요소에 쓰는 속성

• flex-grow
• flex-shrink
• flex-basis
• flex
• order 
• align-self
• 자식요소 사용하는 마진(margin) 속성

Chapter 03) Flex 적용 예제

• 레이아웃(1) : 수직중앙 수평중앙 중첩해서 사용하기
• 레이아웃(2) - 부모자식으로 중첩된 div를 가로 배치하기
• 레이아웃(3) – 상단 네비게이션 만들기
• 레이아웃(4) – 시멘틱 태그 반응형 레이아웃

📚 GRID 핵심이론 교재(PDF) 수업내용

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

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

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

• justify-self / align-self
• [필독] 그리드 속성을 위한 필수 개념(line Number)
• grid-column-start / grid-column-end / grid-column
• grid-row-start / grid-row-end / grid-rowgrid-column + grid-row
• grid-area
• z-index
• grid-row
• order

Chapter 03) GRID 핵심 이론 – 부모요소 속성 + 자식요소 속성

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

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

• repeat(개수, 크기)
• minmax(최소값, 최대값)
• min-content 자동으로 최소 너비 조절
• repeat, minmax, min-content 중복 활용
• auto-fill, auto-fit을 사용하지 않은 경우
• auto-fill을 사용한 경우
• auto-fill과 auto-fit의 차이
• grid-auto-flow

💬 PDF 교재 학습 전 필독사항

👨🏼‍🏫 지식공유자 소개

코딩웍스(Coding Works)

■ [현재] 프리랜서 프론트엔드 퍼블리셔
■ [현재] HTML+CSS+JQUERY 퍼블리싱 유튜브 채널 '코딩웍스' 운영
■ 그린 컴퓨터 아카데미 웹 퍼블리싱 강사
■ 더조은 컴퓨터 아카데미 웹 퍼블리싱 강사
■ 이젠 컴퓨터 아카데미 웹 퍼블리싱 강사
■ 프론트엔드 퍼블리셔, 프론트엔드 퍼블리싱 전문강사
■ UI/UX 웹 디자인 포트폴리오 강의
■ 웹디자인 기능사 실기 자격증반 강의
■ 이지앤에듀프론트엔드 UI/UX 디자인 및 퍼블리싱
🌏 코딩웍스 퍼블리싱 유튜브 채널 - https://www.youtube.com/codingworks
🌏 코딩웍스 인프런 블로그 - https://www.inflearn.com/users/@codingworks/blogs

scss, sass, flex, grid, html, css, html/css,  website, 웹 퍼블리셔, 퍼블리셔 취업, 웹사이트, 코딩, coding, jquery, javascript, 제이쿼리, 자바스크립트, 레이아웃, 인터렉티브웹, interactive web, web design, 웹디자인, 포트폴리오,  퍼블리싱, 반응형 웹, 웹디자인기능사 실기시험, bootstrap, 부트스트랩, css frameworks, 프레임워크

이런 분들께 추천드려요!