드림엘리 : 프론트엔드 입문 - 5. CSS(2)

CSS

CSS 꽃 : Flex box

• 참고 사이트 : https://css-tricks.com/snippets/css/a-guide-to-flexbox/
• box와 item들을 행 또는 열로 자유자재로 배치시켜줄 수 있는 유연한 것이다.
• 박스가 커졌을 때 각각의 item들이 어떤식으로 커지면서 박스의 공간을 메꾸어야 할지, 박스가 작아졌을 때 item들이 어떻게 작아져서 유연하게 박스 안에서 배치되어야 되는지를 자유롭게 정의할 수 있고 쉽게 가능하게 해준다.
• 웹사이트 레이아웃을 쉽게 제어할 수 있게 된다.

container level

: 박스에 적용되는 속성들, container를 꾸며주는 속성들

• display
  • flex
• flex-direction
• flex-wrap
• flex-flow : flex-direction flex-wrap의 단축 속성
• justify-content : 중심축에서 아이템들 어떻게 배치하는 지 정함
  • flex-start/center/end : 아이템 순서를 유지하되 배치를 왼쪽 가운데 오른쪽(flex-) 지정해서 배치 가능
  • space-around : 박스 별 spacing 넣어줌
  • space-evenly : 박스 사이에 똑같은 간격 넣어줌
  • space-between : 시작 박스(왼쪽/위쪽)과 끝박스(오른쪽/아래쪽)은 화면에 맞게 배치하고 중간 박스들에 똑같은 간격 넣어줌
• align-items : 중심축과 반대되는 축에서 어떻게 배치하는 지 정함
  • baseline: 텍스트 위치가 균등하게 보여질 수 있도록 baseline에 맞춰서배치
• align-content :jutify-content와 비슷하지만 중심축이 아닌 반대축 기준으로 배치
  • space-between : 시작 박스(왼쪽/위쪽)과 끝박스(오른쪽/아래쪽)은 화면에 맞게 배치하고 중간 박스들에 똑같은 간격 넣어줌
  • justify-content에서 쓰이는 속성 값 사용 가능

item level

• container 박스 안에 각각의 item들에 적용되는 속성들, item들 각각 꾸며주는 속성
• order : item들의 order 바꿀 때 사용, 하지만 잘 사용되지는 않음
• flex-grow : 중요함, container를 꽉 채우려고 지정된 item들의 너비가 늘어남
  • 숫자 : 다른 아이템에 비해 배로 커짐
• flex-shrink : container가 작아졌을 때 어떻게 행동하느냐를 지정
  • 숫자 : 다른 아이템에 비해 배로 작아짐
• flex-basis : item들이 공간을 얼마나 차지해야 하는지 세부적으로 명시할 수 있게 도와주는 속성
  • auto : flex-grow나 flex-shrink에 맞춰서 아이템들이 변형됨
  • 숫자% : container의 너비에 따라서 다른 아이템들에 비해 숫자% 만큼 container를 차지함
• align-self : item 별로 item들 정렬 가능
  • center : 적용된 item 하나만 중심 정렬 가능

main axis

: 중심축(아이템이 정렬되는 방향)

• justify-content : 중심축에서 아이템들 어떻게 배치하는 지 정함

cross axis

: 중심축과 반대되는 축(중심이 x축이면 이축은 y축), 반대축

• 중심축 방향(수평/수직)이 달라지면 이 축도 방향이 달라짐
• align-items : 중심축과 반대되는 축에서 어떻게 배치하는 지 정함

flex-box 연습 게임 사이트

• 개구리를 연꽃잎에 옮기는 게임
• https://flexboxfroggy.com/#ko

---

변수 할당

:root {
  변수: 값;
  --text-color: 색상코드;
  --background-color: 색상코드;
  --accent-color: 색상코드;
}

• 그리고서 css 값 적을 때 var(변수이름)로 적으면 root에 있는 변수 값만 바꾸면 그 변수로 할당된 모든 css 값이 바뀜

---

팁

• % 단위 : 부모 기준 단위 / vh 단위 : 부모와 상관없이 뷰포트 기준 단위