Coding Note

grid-template-columns와 grid-template-rows는 CSS 그리드 레이아웃에서 행과 열을 정의하는 속성입니다. 이 속성들을 통해 컨테이너 내에 요소들이 어떻게 배치될지를 결정할 수 있습니다.기본 개념grid-template-columns: 그리드의 열(column) 너비를 설정합니다.grid-template-rows: 그리드의 행(row) 높이를 설정합니다.각 속성에 값을 반복하거나, 비율을 지정하거나, 최소값과 최대값을 조정할 수 있습니다.기본 문법.container { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 100px 200px 100px;}위 예제는:3개의 열을 1f..

@media는 미디어 쿼리(Media Query)를 정의하기 위해 사용되는 CSS 규칙으로, 화면 크기나 디바이스 종류에 따라 스타일을 다르게 적용할 수 있게 합니다. 주로 반응형 웹 디자인을 구현할 때 유용합니다.기본 문법@media (조건) { /* 조건이 참일 때 적용될 CSS 스타일 */ 요소 { 속성: 값; }}사용 예시1. 화면 크기에 따라 스타일 적용하기아래 예제는 화면의 너비가 600px 이하일 때, .container의 background-color를 lightblue로 설정합니다..container { background-color: white;}@media (max-width: 600px) { .container { backgroun..