-
2021.10.14 프론트엔드 공부공부공부 2021. 10. 14. 22:45
1. 기획과 구상을 꼼곰하게 구상하는 습관을 들이자
2. CSS, html, 바닐라자바스크립트를 잘다루는 것이 중요하다 (리액트를 잘 다룰 수 있음)
flex box : 박스와 아이템을 자유자재로 배치할 수 있음
1. container에 적용할 수 있는 속성 값이 있고, 또 그 내부의 아이템에 적용할 수 있는 속성값이 있음
2. 중심축(main axis), 반대축(cross axis)이 있음
-> 아이템이 정렬된 방향에 따라 main이 달라짐
cf) float은 이미지와 텍스트를 어떻게 배치할지 고려하기 위해 생겼음
div.container>div.item.item${$}*10
container div안에 10개의 item을 만들고 그 아이템에 각각 번호를 매긴다. 그렇게 10개를 만들어 준다.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <div class="container"> <div class="item item1">1</div> <div class="item item2">2</div> <div class="item item3">3</div> <div class="item item4">4</div> <div class="item item5">5</div> <div class="item item6">6</div> <div class="item item7">7</div> <div class="item item8">8</div> <div class="item item9">9</div> <div class="item item10">10</div> </div> </body> </html>css에서 container에 background 색을 주고 height을 100%로 준다??? 안먹혀
=> container의 부모(body)에 100%를 맞추겠다는 의미임
=> 그렇다고 body 태그에 100%를 넣는다?? 그래도 안먹힘 >> body의 부모인 html이 100%가 아니기 때문이지
그래서 body, html에 둘다 적용해야 하는데 이건 너무 번거로우므로 아예 container에 100vh를 주는 것임
ui에 적용할 색깔??? color tool을 활용해 볼 것
=> https://material.io/resources/color/#!/?view.left=0&view.right=0&primary.color=757575
Color Tool - Material Design
Create and share color palettes for your UI, and measure the accessibility of any color combination.
material.io
<Container에 적용하는 애들>
가로 방향 => flex-direction: row;
세로 방향 => flex-direction: column;
flex-wrap => 기본 값은 nowrap : 화면이 줄어들면 그에 맞퉈서 아이템들도 찌부됨
wrap => 화면이 좁아지면 그 중 아이템들이 다음 줄로 밀려나도록 한다
flex-flow : column nowrap;
=> border에 css 속성값을 한줄에 여러개 줬듯이 flex도 그런게 있음
justify-content (중심축에 적용) : flex-start; (왼 -> 오 그냥 이동만!!)
: center (중앙으로)
: space-around (각 아이템을 동일한 간격으로 떼주는데 양끝은 자기 간격만 있어서 상대적으로 좁고 중앙에 있는 애들은 더 넓음)
: space-evenly (아이템들 주위를 동일한 간격으로 떼준다. 양 끝도!)
: space-between (양 끝은 아예 붙여주고 중앙을 동일한 간격으로 만들어준다)
=> flex-direction: row-reverse; (얘는 넘버링도 아예 반대로 되는 애)
align-items (반대축에 적용) : baseline; /* 텍스트가 균등하게 보이도록 만들어줘 */
align-content : justify-content랑 비슷한 기능이지만 반대측에 효과를 보이는 애
(새로운 것들은 지속적으로 배우고, 각 브라우저에 적용할 수 있는지는 can i use에서 확인해 볼 것)
: space-between 양측은 붙어있고 동일한 간격으로!
<Items에 적용하는 애들>
flex-grow : container를 꽉 채우려고 늘어나게 되는 애 (기본 값은 0)
> 기본적으로는 바뀌려고 하지않아
-> 예를들어 1, 2, 3이 있으면 1은 2로 주고 나머지는 1로 줄 때, 1은 나머지 애들의 2배가 된다.
flex-shrink : 반대로 container가 줄어드는 경우를 말함
-> 1에게 2로 주고 나머지는 1로 주면 나머지에 비해 1은 2배 더 작아진다.
flex-basis : 아이템들이 공간을 얼마나 더 차지해야 하는지 좀 더 세부적으로 알아볼 수 있는 애들임 (기본값은 auto % )
align-self : 아이템 별로 정렬할 수 있음 (container를 벗어날 수 있음)
연습 게임~~!!
'공부공부' 카테고리의 다른 글
2021.11.12 (0) 2021.11.13 2021.10.20 (0) 2021.10.20 2021.10.18 (0) 2021.10.18 2021.10.15 (0) 2021.10.16 2021.10.12 (0) 2021.10.12