CSS grid?
세로 열과 가로 행을 기준으로 정렬하는 레이아웃
2차원(열과 행)레이아웃 시스템을 제공하며, 복잡한 웹 디자인 레이아웃을 구현하는데 매우 유용하다.
레이아웃의 정의
- grid-template-rows: 그리드의 행의 크기와 개수를 정의한다. 각 행의 크기는 공백으로 구분된 값을 지정하여 설정한다.
- grid-template-columns: 그리드의 열의 크기와 개수를 정의한다각 열의 크기는 공백으로 구분된 값을 지정하여 설정한다
- repeat 함수: grid-template-columns나 grid-template-rows와 함께 사용하여 반복되는 크기를 간단하게 설정할 수 있다. 예를 들어, grid-template-columns: repeat(3, 1fr);는 세 개의 동일한 너비의 열을 만든다.
- gap: 그리드 셀 사이의 간격을 설정합니다. row-gap는 행 사이의 간격을, column-gap은 열 사이의 간격을 설정한다. gap은 두 값을 모두 설정한다. (예: gap: 10px 15px;)
- 아이템의 형태를 정의: 그리드 아이템의 시작과 끝을 결정한다. 이를 통해 아이템이 그리드의 어디에 위치하고, 얼마나 많은 그리드 셀을 차지할지를 결정할 수 있다.
- grid-column-start: 그리드 아이템(Item)의 행 시작 위치 지정
- grid-column-end:그리드 아이템의 행 끝 위치 지정
- grid-row-start:그리드 아이템의 열 시작 위치 지정
- grid-row-end:그리드 아이템의 열 끝 위치 지정
- 예를 들어, 'grid-row-start: 1; grid-row-end: 3;'은 아이템이 첫 번째 행에서 시작하여 세 번째 행까지 차지하도록 만든다.
CSS Grid를 사용하면 레이아웃을 보다 세밀하게 제어하고, 복잡한 디자인을 보다 쉽게 구현할 수 있다. 그러나 이러한 세부 설정이 필요하지 않은 간단한 레이아웃에는 Flexbox를 사용하는 것이 더 효율적일 수 있다.
예
<div id="grid">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
</div>#grid {
display: grid;
grid-template-rows: 50px 20px; /* 1행 크기 50px, 2행 크기 20px */
grid-template-columns: 30px 60px; /* 1열 크기 30px, 2열 크기 60px */
}
#grid div {
background-color: red;
}
#grid {
display: grid;
grid-template-rows: 50px 20px;
grid-template-columns: 30px 60px;
gap: 10px;
}
#grid div {
background-color: red;
}
위는 그리드에 gap 10px을 입력해보았다.상하좌우 전부 들어갔다.
그렇다면 한쪽에만 gap을 주고 싶으면 어떻게 해야할까?
grid에서는 gap을 row와 column순으로 입력할 수 있다.
아래의 css는 row는 0px의 gap을 주고, column에는 10px의 gap을 준다.
#grid {
display: grid;
grid-template-rows: 50px 20px;
grid-template-columns: 30px 60px;
gap: 0 10px; /*row column 갭*/
}
#grid div {
background-color: red;
}
#grid {
display: grid;
grid-template-rows: 50px 20px;
grid-template-columns: 30px 60px;
gap: 10px;
}
#grid div {
background-color: red;
}
#grid div:first-child {
background-color: yellow;
grid-row-start: 1;
grid-row-end: 3;
}<div id="grid">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
</div>grid div:first-child: 'grid'라는 아이디를 가진 요소 내부의 첫 번째 ＜div＞ 요소의 배경색을 노란색으로 지정했다. grid-row-start: 1;와 grid-row-end: 3;를 통해 이 ＜div＞ 요소가 그리드의 첫 번째 행에서 시작해서 세 번째 행까지 차지하도록 지정했다. 즉, 이 ＜div＞ 요소는 첫 번째와 두 번째 행을 합쳐서 하나의 더 큰 행을 형성하게 된다.
grid-row-end:3; 이지만, 두번째 행까지만 합쳐지는 이유는, 이 값은 그리드'선'의 번호를 지정하는 것이기 때문이다. (그리드 셀 사이의 분리선을 의미한다.)
따라서, 'grid-row-start: 1;'와 'grid-row-end: 3;' 설정은 해당 요소가 1번 선부터 시작해서 3번 선까지 차지하도록 만든다. 즉, 첫 번째와 두 번째 행을 합쳐서 하나의 큰 행을 형성하게 되는 것이다.
＜div＞A＜/div＞는 첫 번째 열에서 첫 번째 행과 두 번째 행을 모두 차지하므로, 면적은 너비 30px과 높이 (50px + 20px)인 70px을 곱한 값인 2100px²가 된다.
각 요소에 대해 설명하면,
＜div＞A＜/div＞ : 첫 번째 행, 첫 번째 열에 위치하며 두 번째 행까지 차지한다.
＜div＞B＜/div＞ : 첫 번째 행, 두 번째 열에 위치한다.
＜div＞C＜/div＞ : 두 번째 행, 두 번째 열에 위치한다.
＜div＞D＜/div＞ : 위에서 아래로, 왼쪽에서 오른쪽으로 차례대로 모든 셀이 차지되었으므로, 추가 행이 생성되고 이 행의 첫 번째 열에 위치하게 된다.
따라서 ＜div＞D＜/div＞는 새로 생성된 세 번째 행의 첫 번째 열을 차지하게 되며, 이 행의 높이는 암시적으로 생성된 행이므로 grid-auto-rows 속성의 값(기본값은 auto)에 따라 결정되며, 열의 너비는 첫 번째 열 너비인 30px를 가진다. 그러므로 ＜div＞D＜/div＞가 차지하는 면적은 그리드 셀의 높이(해당 셀에 배치된 내용에 따라 결정)와 30px 너비를 곱한 값이 된다.
CSS transition
웹 요소의 속성을 한 상태에서 다른 상태로 애니메이션 효과를 주는 데 사용된다. 주로 CSS 속성 값의 변화를 일정 기간에 걸쳐 일어나게 하는 데 사용된다. 이를 통해 사용자 인터페이스를 보다 부드럽고 직관적으로 만드는데 도움을 준다.
- transition-property: 이 속성은 전환 효과를 적용할 CSS 속성을 지정한다. 예를 들어, background-color를 지정하면 배경색의 변화에 애니메이션 효과가 적용된다.
- transition-duration: 이 속성은 전환 효과의 지속 시간을 지정합니다. 일반적으로 초(s) 또는 밀리초(ms) 단위로 설정한다.
- transition-timing-function: 이 속성은 전환 효과의 속도 곡선을 지정한다. 이 곡선은 전환 효과가 진행되는 동안의 속도 변화를 제어한다. 예를 들어, linear 값은 전환 효과가 일정한 속도로 진행되게 하고, ease-in 값은 전환 효과가 천천히 시작된다.
- transition-delay: 이 속성은 전환 효과가 시작하기 전의 대기 시간을 지정한다. 이 역시 초(s) 또는 밀리초(ms) 단위로 설정한다.
예시 코드는 아래와 같이 만들 수 있다.
div {
transition-property: background-color;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}위 설정은 ＜div＞ 요소의 background-color 속성 값의 변화를 2초 동안 일정한 속도(linear)로 애니메이션하고, 애니메이션 시작 전에 1초 동안 대기(delay)하게 한다. 이러한 설정들은 사용자가 상호작용하는 요소의 변화를 더욱 직관적으로 이해하게 도와준다.
