LeeGwonSeon / CSSLayoutMC

CSSLayoutMC

프로젝트 목차

1. 이것을 시작한 이유

CSS Layout에 대한 기초지식을 공부하고 웹 화면 제작에 도전하기 위함.

2. 사용언어 및 기술

CSS Layout, SCSS, Grid, Flexbox

3. 배울 내용

@@ -1,76 +1,76 @@

SCSS Masterclass

(S)CSS Layout Masterclass: Flexbox & Grid

Flexbox:

• flex-direction
• order
• justify-content
• align-items
• align-self
• flex-wrap
• align-content
• flex-grow
• flex-shrink
• flex-basis

Grid:

• grid-template-columns
• grid-template-rows
• column-gap
• row-gap
• gap
• grid-template-areas
• grid-column-start
• grid-column-end
• grid-row-start
• grid-row-end
• grid-column
• grid-row
• grid-template
• justify-items
• align-items
• place-items
• justify-content
• align-content
• place-content
• justify-self
• align-self
• place-self
• grid-auto-rows
• grid-auto-flow
• grid-auto-columns

Keywords & Functions:

• repeat
• fr
• minmax
• auto-fit
• auto-fill
• min-content
• max-content

SCSS:

• Variables
• Nesting
• Mixins
• Extend
• Responsive Mixins

To Clone:

• https://besthorrorscenes.com/
• https://paint-box.com/
• http://10x19.co/
• http://www.z-o-o.fr/
• https://schwartzmedia.com.au/
• https://tolv.dk/
• https://rodicdavidson.co.uk/
• https://beige.de/
• http://donicaida.com/
• https://canalstreet.market/
• https://wonhundred.com/
• https://wonhundred.com/

4. 공부에 필요한 환경설정 및 설치할 준비물

• visual studio code
• Google Chrome browser
• node.js