TIL007_210326

keepcalmยท2021๋…„ 3์›” 26์ผ
0

TIL

๋ชฉ๋ก ๋ณด๊ธฐ
7/33
post-thumbnail

TIL

๐Ÿ‘๐Ÿผ ๊ฐ์ƒ

๐Ÿ“™ ์—ดํ’ˆํƒ€ 8hour
๐Ÿ‘๐Ÿผ ์ ๋‹นํ•˜๊ฒŒ ๊ณต๋ถ€
๐Ÿ‘Ž๐Ÿผ ์ ๋‹นํ•˜๊ฒŒ ๊ณต๋ถ€

๐Ÿš€ ๋ชฉํ‘œ

  • ๋…ธ๋งˆ๋“œ ์ฝ”๋” React ๋ณต์Šต (-3/27)
  • Udemy์—์„œ Javascript ๊ฐ•์ขŒ ์ˆ˜๊ฐ•ํ•˜๊ธฐ (134/682)
  • ๋งค์ผ ์ปค๋ฐ‹ ์—ฐ์† 30์ผ ๋‹ฌ์„ฑํ•˜๊ธฐ (6/30, 3.26 ์™„๋ฃŒ)
  • 3.24 ๋ฐœ๊ฒฌ ๋…ธ์…˜์œผ๋กœ ์˜ฎ๊ธฐ๊ธฐ
  • ๋‚ด์ผ๋ฐฐ์›€์นด๋“œ ์‹ ์ฒญ
  • 18์‹œ๊ฐ„ ๋„์ „ํ•ด๋ณด๊ธฐ
  • CSS ํŒŒํŠธ ์™„๋ฃŒ, ์œ„ํ‚ค๋กœ ๋ณต์Šตํ•ด๋ณด๊ธฐ

[๋งํฌ ๋ชฉ๋ก]

The Web Developer Bootcamp 2021
MDN CSS Reference
Google Fonts
๋“œ๋ฆผ์ฝ”๋”ฉ Flexbox (CSS์˜ ๊ฝƒ)
Material Design color tool
A complete guide to flexbox
ํ”Œ๋ž™์Šค๋ฐ•์Šค ์—ฐ์Šตํ•˜๊ธฐ: Flexbox Froggy
CSS Reset
BootStrap
Semantic UI

๐Ÿ“ฃ The Web Developer Bootcamp 2021: 9.97-12.120

css background

background-image: url("");
background-size: cover;
background-position: bottom;
(or)
background: coenter/40% no-repeat url(""), blue; -> background ์—ฌ๋Ÿฌ๊ฐœ ๊ฐ€์ง€๋Š” ๋ฒ•

google font

link -> html
font-family-> css

body { font-family: Monstserrat, sans-serif; }
main { width: 60%; margin: 0 auto; }
h1 { font-size: 3rem; margin-bottom: 0; }
h1 + h2 { margin-top: 10px; }
h1, h2, h3 { font-family: Roboto, sans-serif; font-weight: 100; }

Photo Blog CodeAlong

<span>Hello</span>
<span>World</span>
<!-- ์ด๋ ‡๊ฒŒ ํ•˜๋ฉด ์‚ฌ์ด์— ๊ณต๊ฐ„ ์ƒ๊น€-->

<span>Hello</span><span>World</span>
<!-- ์ด๋ ‡๊ฒŒ ํ•˜๋ฉด ์•ˆ ์ƒ๊น€, jam together-->

<img src=""><img src="">
<!-- ์ด๊ฒƒ๋„ ๋งˆ์ฐฌ๊ฐ€์ง€์ž„-->
<img src="">
<img src="">

-> ๊ทผ๋ฐ ์ด ๋ฌธ์ œ๊ฐ€ flexbox๋กœ ํ•ด๊ฒฐ์ด ๋จ

โญ๏ธ Responsive CSS, Flexbox

์ด๋ฒˆ ๋‚ด์šฉ์€ ๋ชจ๋‘ ์ค‘์š”ํ•จ

flexbox

์ฐธ๊ณ  ์‚ฌ์ดํŠธ: airbnb
ํ•œ ์ปจํ…Œ์ด๋„ˆ ์•ˆ์—์„œ ๊ณต๊ฐ„์„ ์–ด๋–ป๊ฒŒ ๋‚˜๋ˆŒ ๊ฒƒ์ธ๊ฐ€.
one-dimensional layout method for laying out items in rows or columns
recent addition to css, allows to distribute space dynamically across elements of and unknown size, hence the term "flex"

display: flex; ("์•ผ, ๋„ˆ๋„ค ์ด์ œ flexbox์•ผ")

flex-direction: row; (default)
flex-direction: row-reverse; (์ˆœ์„œ๋ฅผ ๋ฐ”๊พธ๊ณ  ์‹œ์ž‘์ ์ด ์™ผ์ชฝ์—์„œ ์˜ค๋ฅธ์ชฝ์œผ๋กœ ์ด๋™)
flex-direction: column; (main-axis goes from top to bottom)
flex-direction: column-reverse;

justify-content: flex-start; (default)
justify-content: flex-end; (์‹œ์ž‘์ ์ด ๋ฐ˜๋Œ€๋กœ ์ด๋™, ์ˆœ์„œ๋Š” ๋ฐ”๋€Œ์ง€ ์•Š์Œ)
justify-content: center;
justify-content: space-between; (0 1 1 1 1 0)
justify-content: space-around; (1 2 2 2 2 1)
justify-content: space-evenly; (2 2 2 2 2 2)

flex-wrap: wrap;
์›๋ž˜๋Š” container๊ฐ€ ์ž‘์œผ๋ฉด content๊ฐ€ shrink๋˜์ง€๋งŒ wrap์„ ์“ฐ๋ฉด new column์ด ์ƒ๊ธฐ๋ฉฐ ์•ˆ ๊ทธ๋Ÿฌ๊ฒŒ ๋จ
flex-wrap: wrap-reverse; (cross-axis๊ฐ€ ๋ฐ˜๋Œ€๋กœ)

align-items: flex-start; (default, align along the beginning of cross axis)
align-items: flex-end; (cross-axis ๋ฐ˜๋Œ€๋ถ€ํ„ฐ ์‹œ์ž‘)
align-items: center; (center horizantly and vertically)
align-items: baseline; (text์˜ baseline์— ๋งž์ถฐ align, text ํฌ๊ธฐ๋‚˜ element's height ๋‹ค๋ฅผ ๋•Œ ์œ ์šฉํ•  ์ˆ˜ ์žˆ์Œ)

aligh-content: space-between;
aligh-content: flex-start;

๋“œ๋ฆผ์ฝ”๋”ฉ Flexbox (CSS์˜ ๐ŸŒธ)

position float table ๋กœ๋Š” ์•ˆ ๋˜๋Š” ๊ฒƒ๋“ค์„ ๊ฐ€๋Šฅํ•˜๊ฒŒ ํ•ด์คŒ

float

์›๋ž˜๋Š” ํ…์ŠคํŠธ์™€ ์ด๋ฏธ์ง€ ๋ฐฐ์น˜์— ํ™œ์šฉ
float: left; ์ด๋ฏธ์ง€๊ฐ€ ์™ผ์ชฝ ๋ฐฐ์น˜, ํ…์ŠคํŠธ๊ฐ€ ์ด๋ฏธ์ง€ ๊ฐ์‹ธ๋ฉด์„œ ์˜ค๋ฅธ์ชฝ์— ๋ฐฐ์น˜ (right, center)

  1. flexbox๋Š” ์ปจํ…Œ์ด๋„ˆ(๋ฐ•์Šค)์— ์ ์šฉ๋˜๋Š” ์†์„ฑ๊ฐ’์ด ์กด์žฌ, ๊ทธ ์•ˆ์˜ ๊ฐ๊ฐ item์— ์ ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ์†์„ฑ๊ฐ’ ์กด์žฌ
  2. main axis ์™€ ๋ฐ˜๋Œ€์ธ cross axis ์กด์žฌ

contaier์—๋Š” display, flex-direction, flex-wrap, flex-flow, justify-content, aligh-items, align-content
item์—๋Š” order, flex-grow, flex-shirink, flex, align-self

๐Ÿ”ธ ๋น ๋ฅด๊ฒŒ ์—ฌ๋Ÿฌ ๋ฐ•์Šค ๋งŒ๋“ค ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•

*div.container>div.item.item${$}10 + tab

<div class="container">
  <div class="item itme1">1</div> *10
</div>

height: 100% (์ปจํ…Œ์ด๋„ˆ์˜ ๋ถ€๋ชจ์˜ ๋†’์ด(body)์— ๋งž์ถค)
height: 100vh (๋ถ€๋ชจ์— ์ƒ๊ด€์—†์ด ๋ณด์ด๋Š” view point์˜ 100ํผ์„ผํŠธ๋ฅผ ๋‹ค ์“ฐ๊ฒ ๋‹ค)

flex-row: row;
flex-wrap: nowrap; (default)
์ด ๋‘ ๊ฐœ๋ฅผ ํ•ฉ์ณ์„œ ์“ธ ์ˆ˜ ์žˆ๋‹ค
flex-flow: row nowrap;

justify-content : ์•„์ดํ…œ ์–ด๋–ป๊ฒŒ ๋ฐฐ์น˜ํ• ๊ฑด์ง€? (์ค‘์‹ฌ์ถ•)

flex-direction: ์ˆœ์„œ ๋ฐ”๋€œ, justify-content: ์ˆœ์„œ ์•ˆ ๋ฐ”๋€œ

align-items: ์•„์ดํ…œ ๋ฐฐ์น˜ (๋ฐ˜๋Œ€์ถ•)
align-content: (๋ฐ˜๋Œ€์ถ•)

.item1 { order:2; } ๋ฅผ ํ†ตํ•ด์„œ 1๋ฒˆ์งธ ์•„์ดํ…œ์„ ๋‘๋ฒˆ์งธ๋กœ ์ด๋™์‹œํ‚ฌ ์ˆ˜ ์žˆ๋‹ค -> ํ•˜์ง€๋งŒ ์•ˆ ์“ฐ์ž„

flex-grow: 0; (default)
flex-grow: 1; (์ „์ฒด๋ฅผ ๊ฝ‰ ์ฑ„์šฐ๋ ค๊ณ  ํ•˜๊ฒŒ ๋จ)
flex-shirink: 0; (default)
flex-shirink: 2; (์ค„์–ด๋“ค ๋•Œ ๋‘ ๋ฐฐ๋กœ ๋” ์ž‘๊ฒŒ ์ค„์–ด๋“ค๊ธฐ)
flex-basis: auto; (dafault)
flex-basis: 60%; (ํ•ญ์ƒ 60ํผ์„ผํŠธ ์ฐจ์ง€)

align-self: center; ์•„์ดํ…œ ๋ณ„๋กœ ์ •๋ ฌ, ํ•˜๋‚˜๋งŒ ๋‹ค๋ฅด๊ฒŒ ํ•˜๊ณ  ์‹ถ์„ ๋•Œ
align-self: fix-end;

flex-basis: the initial size that element should be added into our box as and it might be with it might be a height or width depending on the main axis direction.

flex-grow: controls the amount of available space an element should take up.
flex-shrink:
max-width, min-width๋กœ ๋” ์„ค์ •ํ•  ์ˆ˜ ์žˆ์Œ

div: nth-of-type(5) { flex-grow: 2; }

flex shorthand

flex: 1;

Responsive Design & Media Queries

์ข‹์€ ์ฐธ๊ณ  ์‚ฌ์ดํŠธ: stripe.com

@media (min-width: 800px) {h1 { color: purple; }}

building a responsive nav

Pricing panel project(Done)

Bootstrap

Bootstrap: Components, Grid System
bootstrap ์‚ฌ์šฉ์˜ˆ์‹œ: blackbox
bootstrap ์‚ฌ์šฉ์˜ˆ์‹œ: taskade

0๊ฐœ์˜ ๋Œ“๊ธ€