CSS 레이아웃

position

• block
  위-아래

• inline
  평소 글쓰는 방향
  크기를 주고싶으면 inline-block 사용

• position의 속성

  • static: 기본 값, 원래 있어야 할 위치에 배치 (top, right, bottom, left 등 위치 속성은 무시된다)
    

  • relative: 원래위치 기준
    (position relative; top: 30px; 이렇게 하면 원래 있어야 할 위치에서 top: 30px만큼 이동한다)
    (margin과 다른 점은 margin을 쓰면 relative를 썼을 때 겹치는 것은 겹치지 않고 같이 이동한다 / relative를 사용하면 다른 것들은 움직이지 않고 원래 위치에 있는다)

  • absolute: 가장 가까운 조상을 기준으로 left right top bottom 을 이용해 주어진 위치로 움직임
    (단 가장 가까운 조상 태그는 relative, absolute, fixed 속성 중 하나여야 하며 만약 조상태그들이 해당 속성을 가지고있지 않다면 body태그 기준으로 움직임 왜냐하면 body태그는 relative를 기본 속성으로 가지고 있기 때문이다.
    absolute포지션에서 크기를 지정해주지 않으면 기본적으로 안에 있는 내용만큼의 크기를 갖는다(width: 100%; 또는 left, right 둘 다 설정)
    inset: 10; 이렇게 하면 모든 방향으로 10px이라는 뜻이다

  • fixed: absolute와 비슷하지만 스크롤로 내려도 그 위치에 고정, 무조건 브라우저 창 기준
    (width: 100%; height: 120px; position: fixex; top: 0; left: 0;)
    이렇게 네비게이션바에 보통 사용한다
    width로 너비를 정해주거나 left와 right를 설정하지 않으면 내용의 크기로 크기가 정해진다
    네비게이션바와 내용이 겹치면 겹치는 내용을 main태그로 묶어주고 margin-top에 네비게이션바의 height만큼 주면 된다
    글의 흐름에서 완전히 빠져서, 요소의 원래 자리는 차지하지 않는다.

  • sticky: relative와 비슷하지만 스크롤로 내리면 fixed처럼 그 위치에 고정
    (position: sticky; top0;) 위에서부터 0이 되었을때 실행
    부모요소 안에 갇혀있다 / 부모요소가 화면 밖으로 사라지면 같이 사라진다
    윈도우 기준으로 relative가 부모에 없으면 fixed처럼 끝까지
    부모에 relative가 있으면 부모범위까지 반응
    요소의 원래 자리를 차지한다.

  • z-index(앞 뒤의 순서)
    z-index없이는 코드가 밑에 있을 수록 화면에는 앞쪽에 위치한다
    (z-index: 1; 숫자가 높을 수록 앞에 보인다 / 음수값도 가능하다)
    z-index가 원하는 대로 동작하지 않을 때는 쌓임 맥락이 만들어졌을 확률이 높다

flex box

flex를 사용하기 위한 출발점은 부모에게 display값을 flex로 주는 것

• 배치할 방향
  display: flex;를 하면 요소들이 가로방향(왼-오)으로 정렬된다
  flex-dirextion: column;을 하면 세로방향(위-아래)으로 정렬된다
  row-reverse와 colunm-reverse도 있다

• 정렬하기(display: flex라면 justify-content는 가로방향 align-items는 세로방향이고 flex-direction: column이라면 justify-content는 세로방향 align-items는 가로방향이다)
  
  justify-content: center, flex-end, flex-start, space-around, space-between
  align-items: center, flex-end, flex-start, stretch

• 요소가 넘칠 때
  요소가 많아서 container보다 넘칠 때
  flex-wrap: wrap; 넘치는 것을 다음 줄로 넘겨준다

• 요소들 사이의 간격
  margin보다는 gap을 사용하면 편하다

  • margin
    (.box:not(:last-child) {margin-right: 30px;})
  • gap
    gap을 이용하면 넘쳐서 다음줄로 넘어가는 요소들에게도 적용 가능하다
    gap은 기본축 교차축 상관없이 무조건 세로 가로 순서이다(margin과 같음)
    (gap: 30px;)

• 요소 꽉 채우기

  • flex-grow (요소를 늘림 / 기본 값은 0)
    요소를 늘려서 빈 공간을 채우는 속성
    flex-grow: 1;과 flex-grow: 2;의 크기 차이는 2배이다
  • flex-shrink (요소를 줄임 / 기본 값은 1 / 숫자가 클 수록 많이 줄어든다)
    컨테이너 크기보다 박스의 크기가 더 크다면 박스의 크기를 줄여서 맞춰준다
    flex-shrink: 0;을 하면 줄어들지 않는다
  • flex-basis (기본 값은 auto)
    크기를 정확하게 정하고 싶을때 사용
    width나 height를 정해줄 수 있다

  relative와 sticky는 플렉스 박스의 영향을 받지만
  absolute와 fixed는 플렉스 박스의 영향을 받지 않는다

Grid

• Grid 나누기
  display: grid; 그리드 만들어주는 것
  grid-template-columns: 100px 300px 100px; 첫번째 100 두번째 300 세번째 100
  grid-template-rows: 200px 200px 100px;

• 유연한 크기와 유용한 함수
  컨테이너의 크기가 변하면 그리드의 크기는 고정이기 때문에
  컨테이너가 작을 때는 안에 있는 요소가 튀어나오고
  컨테이너가 클 때는 공간이 남는다
  
  grid-template를 사용할 때 px대신 fr을 쓴다면 비율로 정해진다(1fr 1fr 1fr)
  minmax(200px, 300px) 최소 크기 200 최대 크기 300
  최대값에는 fr이 사용 가능하다
  
  grid-template: 1fr 1fr 1fr 1fr 1fr 1fr;
  ---> repeat(6, 1fr)

• 간격
  gap: 16px 32px;

• 크기 미리 정하기
  알아서 row의 크기 정하는 방법
  grid-template-columns: repeat(3, 1fr)
  grid-auto-rows: 200px;(row의 크기를 정하지 않았을 때 사용)
  grid-auto-rows: 50px 100px 200px;(번갈아가며 사용)

• 원하는 위치에 요소 배치(grid 라인의 번호)
  grid-row: 3; grid-column: 2; 이렇게 위치 이동 가능
  grid-row: 3 / 5; 3번째줄-5번째줄까지 채워진다
  grid-row: 3 / span 2; 3번째줄부터 2칸

• 원하는 위치에 요소 배치(이름으로 배치)
  각 요소에 grid-area: 이름;
  container에 grid-template-areas: "이름 이름" "이름 이름";(row 2개 column 2개)
  비워둘 칸은 이름에 . 쓰면 된다