😀 position 속성
: normal flow 기본 흐름에서 벗어나서 위치를 직접 정하는 방식
❤️ static
: 기본 값/ 원래 있어야할 위치에 있음
❤️ relative
: 특정 영역에 상대적으로 (top, bottom, left, right)
-> 원래 있던 위치를 기준으로 배치. 원래 있어야할 공간은 비워놓고 배치
-> green에 position을 relative로 하여, 원래 위치를 기준으로 top에서 30px 띄어진다.
-> margin은 다른 애들도 같이 움직임. position은 다른 요소들은 그대로.
-> 이렇게 음수값을 써주면, 20px만큼 위로 배치
-> 원래 위치를 기준으로 배치하기 때문에, 포지션만 바꾸고 위치를 지정하지 않으면 그 자리에 그대로 있다.
❤️ absolute
: 가장 가까운 position된 조상 요소를 기준으로 배치
-> 기존의 배치에서 완전 벗어나서 자리를 차지하지 않음
-> 크기 정해주지 않으면, 안에 있는 내용의 크기만큼 차지
--> 따라서 '무언가'를 기준으로 배치를 하려고 하려면, 그 무언가에는 'position:relatve' 지정해주고, 배치를 조정하려는 것에는 'position:absolute'와 그 크기를 지정해준다.
<어떤 요소가 완전히 겹치게>
-> 값이 모두 같은 경우, 한 줄로 'inset:값'와 같이 설정할 수 있다.
❤️ fixed
: 브라우저 화면을 기준으로 배치
-> scroll해도 같은 자리에 위치
-> 원래 있던 자리는 공백으로 남아있음
-> nav에서 많이 쓰임
-> 크기를 정해줘야 함 (그렇지 않으면 그 내용의 크기 만큼임): width나 top, bottom, left, right를 정해주면 됨
❤️ sticky
: 요소를 웹 브라우저에 달라 붙도록 (웹 브라우저를 기준으로 어디에서부터 붙어있게 할 건지 top 속성으로 정해줘야 함)
-> static 처럼 원래 위치에 있다가, scroll 하면서, 지정한 위치에 가면, 고정됨
-> 부모 요소에 소속되어 있음 (부모 요소가 화면 밖으로 사라지면, 같이 사라짐)
--> static, relative, sticky는 공백이 메워지지 않고, flexbox의 영향을 받음(flex-grow 적용됨)absolute, fixed는 개별적으로 동작하여 공백이 메워지고, flexbox의 영향을 받지 않음(flex-grow 적용 안됨)
❤️ z-index
: 숫자가 높을수록 더 앞에 보임 (앞, 뒤 순서 조절)
-> 숫자 같으면 아랫줄이게 있는 코드가 더 앞에 보임
-> 음수 값도 쓸 수 있음
-> 원하는 대로 동작하지 않을 때: '쌓임 맥락' 고려해보기 (부모 태그 안의 것들끼리)
😀 flexbox (display: flex)
: 박스 만들고 방향 정해서 요소 배치하는 것
-> 기본적인 방향은 가로!
- flex-direction: 정렬 방향 정할 때 (column, row, row-reverse, column-reverse)
-> row
-> column - justify-content, align-items: 정렬하기
- flex-wrap: 요소 넘칠 때
- gap: 간격 정하기
- flex-grow, flex-shrink, flex-basis: 크기 늘이거나 줄이기
❤️ 정렬 (justify-content,align-items)
- 기본 축 (main axis): justify-content
- 교차 축 (cross axis): align-items
-> display: flex의 기본은 row!!!
-> flex-direction이 column이면, 축이 위와 같다.
-> 교차축 방향으로는 꽉 채워서 배치
- justify-content: 기본 축 정렬 (center, flex-end, flex-start, space-around, space-between, space-evenly)
- align-items: 교차 축 정렬 (center, flex-end, flex-start, stretch-기본 값)
❤️ 요소가 넘칠 때 (flex-wrap)
- flex-wrap: wrap
-> 넘치는 부분 교차축 방향으로 넘어가서 배치
❤️ 간격 (gap)
-> margin을 쓰는 것보다 gap 쓰는 게 좋음
-> 가로 방향 세로 방향으로도 모두 적용됨
-> 세로, 가로 방향 모두 따로 지정해줄 수 있음
-> 축 상관없이 항상 첫 번째 거가 세로!!
❤️ 요소 꽉 채우기 (flex-grow, flex-shrink)
: 요소 크기 늘리거나 줄여서 빈공간 꽉 채움
-
flex-grow (꽉 채우고 싶을 때, 요소 늘리기)
: 숫자에 비례하여 원래 크기에 늘어남
-> 숫자가 클수록 더 많이 늘어남 (숫자에 비례)
-> 기본값 0 -
flex-shrink (꽉 채우고 싶을 때, 요소 줄이기)
: 숫자에 비례하여 원래 크기에서 줄어듦
-> 숫자 클수록 많이 줄어듦
-> 기본 값 1 (요소가 넘치면 크기 줄여줌)
- 대부분의 경우
-
빈공간 채울때 'flex-grow:1'
-
내가 원하는 크기 만큼으로 고정 'flex-shrink:0'
-
flex-basis: 시작 크기 지정하기
-
flex 속성으로 (flex-grow, flex-shrink, flex-basis) 한번에 쓸 수 있음
⭕ 정리
: flexbox와 관련된 것들을 학습하였다. 플랙스 박스를 만들기 위해서는 display: flex. 기본축 정렬은 justify-content(flex-end, flex-start, center, space-between), 교차축 정렬은 align-items(stretch, flex-end, flex-start) 속성을 이용한다. 요소가 넘칠 때는 flex-wrap: wrap 을 통해 교차 축방향으로 넘어감. gap 속성을 통해 세로, 가로 사이의 여백 공간의 크기를 지정해준다. flex-grow는 기본값이 0으로 숫자가 클수록 비례하여 많이 늘어남. flex-shrink는 기본값이 1로, 크기가 달라지면 그 요소의 크기도 줄어든다. 숫자가 클소록 많이 줄어든다. flex-basis는 그 기본값을 지정한다. 이를 통해 각 요소의 값을 같게해준다.
😀 grid (display: grid)
: 요소를 두 방향으로 나눔
-> flexbox는 한 방향으로 나눔
- grid line: 각 칸을 나누는 줄
- grid cell: 요소를 배치하는 네모 칸
-> 격자 나누기(grid-template-rows(columns)), 간격(gap), 크기 미리 정하기(grid auto-rows(columns)), 원하는 위치에 여러 칸에 배치(grid-row(column), span), 이름으로 배치(grid-area, grid-template-areas)
❤️ grid 나누기 (grid-template-columns ,rows)
- grid-template-columns
: 그리드의 열 크기 지정
- grid-template-rows
: 그리드의 행 크기 지정
-> 행과 열의 크기를 모두 지정한 결과이다. - grid-template 속성으로 한 번에 쓸 수 있음
-> rows 먼저, 그 다음 columns. '/'로 구분!
❤️ 유연한 크기와 유용한 함수들
-
비율을 나타내는 fr 단위
: width가 100%로 되어 있으면, 화면 커지면 여백 생기고, 화면 줄어들면 넘친다.
-> fr 크기 단위를 사용하자. (비율) -
minmax (최소, 최대)
: 브라우저의 크기에 따라 최댓값과 최솟값을 지정하여 유연한 크기 조정
-> minmax안에 fr은 최댓값에만 쓸 수 있음 -
크기가 같은 6개의 column 만들기 (repeat 함수)
-> 반복해서 쓰기 번거로움
: 함수 사용 -
셀의 최소 크기 너비 200px, 높이 200px이 되게 하고, 각 셀의 크기를 화면 너비에서 1:1:1이 되도록 유연하게 하기
❤️ 간격 넣기 (gap)
: flexbox와 사용 방법 완전 똑같다. (세로, 가로)
❤️ 크기 미리 정해두기 (grid-auto-rows(columns))
- grid-auto-rows(columns)
: grid-template에서 행이나 열 크기 명시적으로 정하지 않았을 경우, grid-auto에서 정의해준 값으로 자동으로 크기를 지정
❤️ 원하는 위치에 요소 배치하기 (grid-row, grid-column)
: grid line을 기준으로 위치 선정 (셀이 아님!!!) 1부터 시작!!
- 음수도 가능 (음수이면 마지막부터 시작)
- '/'를 통해 범위도 가능
- span을 통해서 몇 칸을 차지할 지 지정가능
❤️ 이름으로 배치하기 (grid-area)
: grid-area를 통해 이름 지정
-> grid를 생성한 부모 태그에서 grid-template-areas
-> 칸을 비워놓고 싶으면 '.'
⭕ 전체 정리 (말로도 설명해보기)
: 요소의 배치를 위한 position 속성과 화면의 레이아웃을 위한 display에 대해서 배웠다. position의 속성값으로는 원래의 위치를 기반으로, 그 곳에 빈 공간이 생기는 static(고정), relative(원래 위치 기준), sticky(웹 브라우저를 기준으로)가 있다. 원래의 위치에서 완전 벗어나버리는 absolute(가장 가까운 포지셔닝 된 것을 기준으로)와 fixed(브라우저 화면을 기준으로)가 있다. z-index는 화면의 앞 뒤와 관련해서 위치시켜주는 것이다.
그 다음으로 flexbox에 대해서 배웠다. display: flex라는 속성을 넣어준다. 기본 축의 정렬은 justify-content(flex-start, flex-end, center, space-between)/ 교차축은 align-items((flex-start, flex-end, center)라는 속성으로 값을 넣어준다. row, column 방향이 있는데, row가 기본이다. gap 속성을 통해 각 요소들의 간격을 정해준다. flex-wrap: wrap속성을 통해서, 플랙스박스를 벗어날 경우에, 다음 줄로 내려가서 배치가 되도록해준다. 요소를 꽉 채우거나 줄이기 위해서, 각 요소의 스타일로 flex-grow/flex-shrink를 넣어준다. 숫자가 클수록 많이 줄고 많이 늘어난다. 이 속성은 늘리고, 줄이고 싶은 각 요소에 넣어주면 된다. flex 속성을 통해서 grow, shrink, basis를 한 번에 지정 가능하다.
다음으로는 grid이다. grid는 칸을 만들어 요소들을 배치하고 싶을 때 사용한다. 요소들을 감싸는 상위요소에 grid-template속성을 사용해서, rows와 colums를 한 번에 정의할 수 있다. rows가 먼저라는 것. 그리고 플랙스박스와 마찬가지로 gap속성을 통해서 각 요소들의 세로, 가로 간격을 정해줄 수 있다. 원하는 위치에 각 요소를 넣기 위해서는 각 요소의 클래스 css에 grid-row(column)을 통해서 지정해줄 수 있다.그리고 이름으로 배치해주기 위해서는 부모 태그에 grid-template-areas를 하고 각 요소에 지정한 grid-area이름을 통해 배치해준다.
