CSS 문법과 자주 나오는 Q&A
📋 문법
1. Grid
Flex는 1차원이고,
Grid는 가로와 세로를 가진 2차원이다.
사용하는 방법은 이렇다.
.container {
display: grid;
}그리드의 형태 정의
- grid-template-rows
- grid-template-columns
grid-template-columns: 1fr 1fr 1fr;
//균일하게 1:1:1의 비율로 나누겠다는 뜻
grid-template-columns: repeat(3, 1fr);
grid-template-columns: 200px 1fr;
grid-template-columns: 100px 200px auto;이런 식으로도 사용할 수 있다.
minmax 함수
최솟값과 최댓값을 지정할 수 있는 함수.
예를 들어 minmax(100px, auto)의 의미는
최소한 100px, 최대는 auto로 하겠다는 뜻이다.
auto-fill, auto-fit
auto-fill과 auto-fit은 column의 개수를 정하지 않고 최대한 셀을 채우는 방식이다.
min-content, max-content
max-content는 div 안에 있는 것이 차지하는 만큼만 가로길이를 가진다는 뜻이다. 안에는 글자가 될수도 있고, 이미지가 될 수도 있다.
여기서 content1에만 max-content를 부여했다.
min-content는 최소한 작은 길이로 가로 길이를 가진다.
content2 글자가 차지하는 길이만큼 길이를 가지게 된다.
minmax에 min-content와 max-content를 같이 쓰면 반응형 웹 디자인을 만들 수 있다.
grid-column
grid-column-start와 grid-column-end 속성을 한번에 쓰는 축약형이다.
#water {
grid-column: 4 / 6;
}4번째 세로줄과 6번째 세로줄을 의미한다.
grid-column-start
시작 번호를 의미한다.
#water {
grid-column-start: 3;
}값에 음수를 넣어줘도 작동한다. 단지 기준이 달라질 뿐이다.
#water {
grid-column-start: 1;
grid-column-end: -2;
}grid-area
grid-area은 "/" 로 구분지어 grid-row-start, grid-column-start, grid-row-end, grid-column-end를 한번에 입력할 수 있다.
order
보여지는 순서를 정한다.
order: 0; 이 기본값이며
order: -1; 을 이용하여 뒤에 있는 아이템을 앞으로 끌어올 수 있다.
🙋 Q&A
vw, vh를 사용했을 때 스크롤바 없애는 법
https://www.python2.net/questions-993449.htm
🎸 기타
행은 가로줄이고 열은 세로줄이다.
여기서 두번째 열은 노란색이다.
