DreamCoding 엘리 - 프론트엔드 개발자 되기 입문편 (3)

Material Design Color Tool 컬러 지정해줄 주는 사이트

https://material.io/resources/color/#!/?view.left=0&view.right=0

 

 

Flexbox (css의 꽃)

박스안에서 자유롭게 배치할 수 있는것

 

 

Container에 지정되는 속성값

 

Item에 지정되는 속성값

 

Flex-grow : 윈도우 창에 맞춰서 커지고 줄어든다

Flex-shrink : 창에 따라 줄어들지

Align-self : 원하는 박스만 따로 배치하고싶을떄

 

 

 

Float

 

CSS Tricks for Flexbox:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

 

Flexboxfroggy // flexbox연습사이트

https://flexboxfroggy.com/

 

Vscode 설치 플러그인

00:00 - Introduction

04:46 - Material theme

05:00 - Material icon theme

05:20 - Prettier

06:56 - bracket pair colorizer

07:28 - Indent-rainbow

08:00 - Auto rename tag

09:00 - CSS PEEK

09:43 - HTML CSS SUPPORT

10:00 - LIVE SERVER

<https://www.youtube.com/watch?v=bS9yTI2fC0w&list=PLv2d7VI9OotQ1F92Jp9Ce7ovHEsuRQB3Y&index=10>

 

파일 따로 만들지말고 간단하게 css동작파일 확인

https://jsbin.com/?html,output

https://jsfiddle.net/

https://codesandbox.io/