Position
글의 흐름에서 벗어나서 요소를 자유롭게 배치할 때 쓰는 속성
top,bottom,left,right 속성으로 위치를 정할 수 있다.
값이 모두 똑같은 경우 inset 속성을 쓴다.
static
position 속성의 기본 값
원래 있어야 할 위치에 배치
일반적인 글의 흐름을 따른다.
relative
상대적인, 원래 있어야 할 위치를 기준으로 움직임
margin이랑 다른 점 : 마진은 다른 애들도 같이 이동 relative는 원래있던 공간은 비워져있고 본인만 이동
absolute
가장 가까운 포지셔닝이 된 조상 요소를 기준으로 위치를 잡는 것
포지셔닝이 된 : static이 아닌 position 속성을 지정했다는 뜻
기존의 배치에서 벗어나서 새로 배치된다. (요소의 원래 자리는 차지하지 않음)
크기를 정해주지 않으면 안에 있는 내용만큼 크기가 정해진다.
fixed
브라우저를 기준으로 자리 배치
기존 배치와는 상관이 없음
네비게이션 바 같은 것에서 사용 (겹치지 않도록 마진 사용해줘야 함)
sticky
원래 위치에서 공간 차지, 웹 브라우저의 상단에 닿으면 fixed 포지션처럼 변경
지정한 위치로 가기전까지는 static처럼 보임
부모요소 안에 갇혀있음
부모요소가 화면 밖으로 사라지면 사라짐
left:0;, right:0;이런 속성은 sticky에서 필요없는 속성이다.
z-index
앞뒤의 순서를 정하는 것
따로 정하지 않으면 코드에서 밑에 있을수록 화면에서는 앞으로 보임
쌓임 맥락
z-index를 묶어서 생각하는 범위
z-index가 원하는 대로 동작하지 않는 경우, 대부분 쌓임 맥락이 만들어졌기 때문이다.
해결하기 위한 방법은 해당 요소를 쌓임 맥락 밖으로 옮기는 방법이 있다.
Flexbox
일차원으로 요소를 배치하는 방식 (가로,세로 / 중앙정렬, 양끝 배치 / 요소 크기 늘리거나 줄이기 가능)
배치할 방향(flex-direction), 정렬하기(justify-content, align-items), 요소가 넘칠 때(flex-wrap), 요소 간격(gap), 크기 늘이거나 줄이기(flex-grow, flex-shrink, flex-basis)
배치 방향
flexbox 만들기
display: flex기본 값은 요소들이 왼쪽에서 오른쪽으로 배치(flexbox의 기본 방향이 가로이기 때문)
밑에 있는 것 처럼 flex-direction을 쓰려면 display: flex를 해줘야 한다.
flex-direction: column;-> 세로로 배치
flex-direction: column-reverse;
flex-direction: column-reverse;반대로 배치 가능!
정렬
기본 축 : 요소가 배치되는 방향
교차 축 : 기본 축에 수직인 방향
기본 축 방향에서 정렬을 하려면
justify-content : center;교차축 방향에서 정렬하려면
align-items : center;속성
space-between : 사이 간격이 같다.(?)
align-items: flex-end; : 밑에서부터 배열
요소가 넘칠때
요소가 넘치는 상황에서 줄 바꿈을 하고 싶을 때
flex-wrap:wrap;이렇게 하면 교차축 방향으로 넘어가서 배치된다.
간격
flexbox 안에서도 마진을 사용할 수 있다.
선택자를 활용하면 여러개에 쉽게 적용할 수 있다.
gap:30px 60px /*세로 가로 순서 (교차축과는 상관 없음)*/->세로 방향으로도 간격 둘 수 있음
숫자 하나만 쓰면 모든 방향의 간격 지정 가능
마진과는 다르게 테두리 부분에는 여백이 안 생긴다.
요소 꽉 채우기
flexbox에는 시작 크기와 최종 크기가 있기 때문에 요소들의 크기가 유연하게 늘어나거나 줄어든다.
flex-grow: 1;숫자에 비례해서 늘어난다.
얼마나 늘릴지 정하기
flex-shrink: 0;/*줄어들지 않음*/값이 클수록 더 많이 줄어듦
얼마나 줄일지 정하기
flex 속성
flex 속성은 순서대로 flex-grow,flex-shrink, flex-basis 값을 한 번에 쓸 수 있는 속성이다.
아래 세 코드는 모두 같은 역할을 하는 코드이다.
width 속성을 써도 되지만, 플렉스박스에서는 flex-basis를 쓰는 게 좋다.
width 속성으로 시작 크기를 지정하기
flex-grow: 1;
flex-shrink: 0;
width: 100px;flex-basis 속성으로 시작 크기를 지정하기
flex-grow: 1;
flex-shrink: 0;
flex-basis: 100px;flex 속성으로 짧게 쓰기
flex: 1 0 100px;늘어나거나 줄어들지 않는다고 설정할 때 flex-grow:0과 flex-shrink: 0을 추가해 주면 된다.
flexbox와 포지셔닝
relative, sticky는 요소의 원래 자리를 차지하기 때문에 플렉스박스의 영향을 받고 absolute와 fixed는 요소의 원래 자리에서 빠져버리기 때문에 글의 흐름에서 빠지는 것과 마찬가지로 플렉스박스와 상관없이 배치된다.
Grid
2차원으로 배치 가능
- 격자 나누기(grid-template-rows(columns))
- 간격(gap)
- 크기 미리 정하기(grid-auto-rows(columns))
- 원하는 위치에 여러 칸에 걸쳐서 배치(grid-row(column), span)
- 이름으로 배치(grid-area, grid-template-areas)
display: grid;grid-template-rows: 100px 300px 100px;
grid-template-columns: 200px 300px 200px;grid-template: 100px 300px 100px / 200px 300px 200px;이렇게 합쳐서 표현 가능 row 먼저 쓰고 / column 쓰기
크기를 유연하게 지정하는 방법
fr : 비율대로 나누기
grid-template: minmax(100px,200px) 300px 100px / 1fr 2fr 1fr;->1:2:1의 비율로 나눠짐
->minmax(a,b) 최소 크기 a, 최대 크기 b
minmax에 fr도 쓸 수가 있다! 하지만 최소 값에는 못 쓰고 최대값에만 사용 가능!
반복되는 값 한 번에 쓰기
repeat(6,1fr)->1fr을 6번 반복하라
간격 넣기
gap 사용
flexbox에서의 사용법이랑 똑같음
크기 미리 정해두기
grid-auto-rows(columns) : 100px 200px 300px;grid-template에서 크기를 명시적으로 정하지 않았을 때 grid-auto-rows에 있는 값으로 크기 정해줌 여러 값이 있으면 반복되면서 나옴
원하는 위치에 요소 배치하기
그리드 라인 번호
컬럼 라인은 왼쪽에서부터 오른쪽으로 1,2,3, ... 번호를 붙이고, 로우 라인은 위에서부터 아래로 1,2,3, ... 숫자를 붙인다.
배치하기
- 시작라인과 끝 라인을 슬래시로 구분해서 적어준다.
- 음수 값의 라인 넘버를 섞어서 써도 된다.
span이라는 키워드를 통해 시작하는 라인 번호와 차지할 크기를 적어 줄 수 있다.
grid-column: 2/4;
grid-column: 2/span 2;
grid-row:1/-1;이름으로 배치하기
각 요소에 이름을 붙이고
.red{
grid-area:r;
}
.green{
grid-area:g;
}
.blue{
grid-area:b;
}grid-template-areas:
"r g"
"r b";
}/*결과 :빨,초/빨,파*/
grid-template-areas:
". g"
"r b";
}/*결과 :빈칸,초/빨,파*/