Thumbnail
크리에이티브 웹 퍼블리싱
SCSS(SASS) FLEX GRID 핵심이론(PDF) 교재 및 활용예제
49명이 수강하고 있어요.

22,000원

지식공유자 : 코딩웍스(Coding Works)
총 12개 수업˙총 1시간 15분
12개월 동안 무제한 수강
수료증 발급 강의
입문 초급 대상 중급이상
폴더에 추가 46 공유
초급자를 위해 준비한
[웹 퍼블리싱, 웹 개발] 강의입니다.

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

✍️
이런 걸
배워요!
SCSS(SASS) 필수 핵심이론
FLEX 필수 핵심이론
GRID 필수 핵심이론
CSS(SASS) FLEX GRID 핵심이론(PDF) 이론을 활용한 예제 완성본

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

SCSS(SASS) + FLEX + GRID?

중상급 이상의 퍼블리싱 능력을 갖추기 위해서는 
반드시 SASS + FLEX + GRID를 잘 알고 있어야 합니다.

💡 영상 컨텐츠가 아닌 교재(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 이론을 다루는 책이 거의 없습니다.
  • 코딩웍스가 모든 강의 소스를 직접 제작해서 만들었기 때문에 이해하기 쉽게 설명되었습니다.

 

 

⚡ 효과적인 학습을 위해 꼭! 코딩웍스 퍼블리싱 유튜브를 참고해주세요.


코딩웍스 퍼블리싱 유튜브 채널에서 이론 영상 강의와 병행하시기 바랍니다. 물론 모든 이론 영상이 유튜브 채널에 있는건 아니지만 중요한 이론 영상은 거의 다 있습니다. 영상이 많으니까 영상을 찾는 방법은 아래 예시처럼 검색하시는게 좋습니다.

코딩웍스 퍼블리싱 유튜브 채널 : https://www.youtube.com/codingworks

 



📚 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) 교재 학습 전 [필독 사항] 

다음 내용을 꼭 확인해주세요!

1) 본 SCSS(SASS) 강의 PDF 교재는 Ruby 등 명령어 방식으로 된 수업 내용이 아닙니다.
2) 모든 설정과 실습은 VS Code와 Live Sass Compiler 익스텐션을 이용합니다. Ruby 설치 및 설정, 명령어에 관한 내용은 전혀 없습니다. 
3) 함수(function)와 내장함수(built-in function) 내용은 다루지 않습니다.


📚 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-row grid-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 교재 학습 전 필독사항

Q. 영상 컨텐츠는 SCSS 사용법 설치 영상만 있나요?

본 강의는 전차책(PDF) 컨텐츠입니다. Visual Studio Code에서 Live Sass Compiler를 설치하는 내용 SCSS 핵심이론 파트에 자세히 나와 있지만 아무래도 생소한 부분이라 영상으로 도움을 드리고자 이 부분은 영상으로 제작되었습니다. Visual Studio Code에서 Live Sass Compiler를 설치하지 못하면 다음 내용을 전혀 이어갈 수 없기 때문에 책과 영상으로 꼭 세팅을 하실 수 있도록 하는 목적입니다.

Q. Flex 핵심이론 교재와 Grid 핵심이론 교재는 다른 강의에 포함되어 있지 않나요?

네. Flex 핵심이론 교재와 Grid 핵심이론 교재는 해당 강의 수강생에게 제공됩니다. 이번 SCSS(SASS) FLEX GRID 핵심이론(PDF)은 영상보다는 핵심 이론 교재만으로 학습하시는 분들을 위해 만들어진 강의입니다. Flex 강의와 Grid 강의를 수강하신 분들은 해당 교재가 포함되어 있으니 중복해서 SCSS(SASS) FLEX GRID 핵심이론(PDF) 강의를 수강하실 때 꼭! 참고해주세요.

[필독] 블라켓(Brackets) 확장기능관리자 서비스 불가

블라켓(Brackets) 확장기능관리자 서비스 불가해졌습니다. 일시적인 것인지 영구적인 것인지 모르겠지만 현재로서는 영구적인 서비스 불가라고 생각됩니다. 좋은 텍스트 에디터였는데 Adobe 서비스가 중단되면서 여러가지로 사용중 문제도 생고 지금은 확장기능관리자 서비스 불가해졌습니다. 다른 익스텐션은 몰라도 에밋(Emmet)을 설치할 수 없습니다.

저도 오랬동안 애정하면서 사용했던 텍스트 에디터인데 아쉽지만 이제 비주얼 스튜디오 코드(Visual Studio Code)를 쓸 수 밖에 없네요. 

강의에 있는 블라켓츠 사용법 영상은 보지 마시고 비주얼 스튜디오 코드(Visual Studio Code)를 사용법을 충분히 학습하시고 학습 영상을 보시기 바랍니다. 만약 강의에 비주얼 스튜디오 코드(Visual Studio Code) 사용법이 커리큘럼에 없다면 아래에 코딩웍스 퍼블리싱 유튜브 채널 비주얼 스튜디오 코드(Visual Studio Code) 사용법 영상을 보시기 바랍니다.


  1. 비주얼 스튜디오 코드 사용법 및 환경설정 : https://youtu.be/ovbAh681j8o
  2. 비주얼 스튜디오 코드에서 에밋(Emmet) 사용법 : https://youtu.be/u1tFhCB9krY
  3. 비주얼 스튜디오 코드 필수 Extension 설치 및 사용법 : https://youtu.be/0j--ATQP2Qw
  4. 비주얼 스튜디오 코드에서 CSS 수정할 때 위로 올라가는 Full Reload 방지 : https://youtu.be/NWOxSd4ZuUk

👨🏼‍🏫 지식공유자 소개

코딩웍스(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, 웹디자인, 포트폴리오,  퍼블리싱, 반응형웹, 웹디자인기능사 실기시험

지식공유자가 알려주는
강의 수강 꿀팁!
🎓
이런 분들께
추천드려요!
SCSS(SASS) FLEX GRID 핵심이론 학습이 필요한 분
중상급 퍼블리싱을 목표로 하는 분
📚
선수 지식,
필요한가요?
HTML+CSS 퍼블리싱 기본기

안녕하세요
코딩웍스(Coding Works) 입니다.
코딩웍스(Coding Works)의 썸네일

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

 

🌏코딩웍스 퍼블리셔 취업 레벨업 코스(개인 포트폴리오 제작) : http://www.codingworks.net

🌏코딩웍스 퍼블리싱 유튜브 채널 - https://www.youtube.com/codingworks

🌏코딩웍스 인프런 퍼블리싱 블로그 - https://www.inflearn.com/users/@codingworks/blogs

커리큘럼 총 12 개 ˙ 1시간 15분의 수업
이 강의는 영상, 수업 노트, 첨부 파일이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. SCSS(SASS) FLEX GRID 핵심이론(PDF)과 활용 예제
섹션 2. [다운로드] 수강생 학습 자료 다운로드
[다운로드] SCSS(SASS) 핵심이론 교재(PDF)
[다운로드] FLEX 핵심이론 교재(PDF)
[다운로드] GRID 핵심이론 교재(PDF)-Part 1(핵심이론)
[다운로드] GRID 핵심이론 교재(PDF)-Part 2(활용 실전예제)
[완성본 이론 활용 예제 01] SCSS
[완성본 이론 활용 예제 02] FLEX
[완성본 이론 활용 예제 03] GRID
강의 게시일 : 2021년 09월 10일 (마지막 업데이트일 : 2021년 09월 10일)
수강평
수강생분들이 직접 작성하신 수강평입니다. 수강평을 작성 시 300잎이 적립됩니다.

22,000원

폴더에 추가 46 공유
지식공유자 : 코딩웍스(Coding Works)
총 12개 수업˙총 1시간 15분
12개월 동안 무제한 수강
수료증 발급 강의
입문 초급 대상 중급이상
연관 로드맵
이 강의가 포함된 잘 짜여진 로드맵을 따라 학습해 보세요!
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의를
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스