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

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

💡 영상 컨텐츠가 아닌 교재(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, 프레임워크