점유된 셀이 아닌 그리드 선을 계산합니다.
레벨의 급수 목표를 읽은 다음 의도한 영역을 경계하는 선을 식별합니다. 그리드 배치는 경계와 트랙으로 설명됩니다. 줄 번호는 단순히 색칠된 셀의 번호가 아닙니다. CSS를 입력하기 전에 원하는 시작 및 끝 경계를 가리킵니다. 이러한 작은 차이를 통해 물이 이동한 후에야 규칙이 적용되는 영역을 발견하는 것보다 규칙이 적용할 영역을 예측하는 것이 더 쉬워집니다.
작업이 스팬을 사용할 때 해당 영역이 얼마나 많은 트랙을 커버해야 하는지 생각해 보세요. 두 게임 모두 CSS와 관련되어 있다는 이유만으로 이를 픽셀 거리로 직접 변환하거나 Flexbox 정렬 규칙을 재사용하지 마세요. 편집기에 하나의 변경 사항을 입력하고 물을 뿌린 영역을 관찰하고 레벨에서 지정한 당근이나 다른 대상과 비교하십시오. 현재 작업에 따라 성공 여부가 결정됩니다. 시각적으로 넓은 영역은 자동으로 의도된 솔루션이 아닙니다.
결과의 형태를 이용하여 룰 진단
물을 주는 지역이 잘못된 위치에서 시작되는 경우 선택한 시작 경계를 검사하세요. 올바르게 시작했지만 너무 이르거나 너무 늦게 끝나면 끝이나 범위를 검사하십시오. 잘못된 방향으로 변경되는 경우 사용한 행 또는 열 속성을 확인하세요. 기하학적 오류의 이름을 지정하면 다음 번에 정확하게 편집할 수 있으며 규칙의 여러 올바른 부분을 한 번에 바꾸는 것을 방지하는 데 도움이 됩니다.
시도가 성공한 후 대상을 포함하는 행과 규칙이 이를 선택한 방법을 설명하십시오. 해당 설명은 이후 수준에서 다른 그리드를 사용하거나 제약 조건을 결합할 수 있기 때문에 연결이 끊긴 답변 문자열보다 더 잘 전달됩니다. 이 센터는 실제 인터랙티브 CSS 정원과 레벨 안내를 지원합니다. 픽셀 기반 레이아웃 튜토리얼, 외부 인증 또는 모든 버전에 대해 테스트된 완전한 답안지를 약속하지 않습니다. 편집기 컨트롤을 위한 재생 페이지를 사용한 다음, 위치 지정 실수를 집중적으로 검토하고 싶을 때 여기로 돌아오세요.
예를 들어, 물이 하나의 트랙을 너무 많이 덮는 경우 원하는 끝 경계를 표시하고 입력한 값 또는 범위와 비교하십시오. 끝을 수정하는 동안 올바른 시작을 변경하지 않고 유지하십시오. 결과가 다른 행으로 이동하는 경우 열 규칙과 별도로 행 규칙을 검사합니다. 표적이 정확하게 덮였을 때, 경계와 궤도를 말로 설명하십시오. 연습은 CSS 배치를 보이는 그리드와 연결하는 것입니다. 이는 이전 답변 문자열이 더 이상 의도한 영역을 선택하지 않는 새로운 배열에 유용합니다.
Grid Garden 팁과 전략
다음 판에서 연습할 팁을 선택하세요. 이 목록은 게임을 변경하거나 게임 진행 상황을 저장하지 않습니다.
Grid Garden 관련 질문과 답변
Grid Garden는 어떤 주제를 가르치나요?
이 앱은 정원 배치 퍼즐을 통해 CSS 격자를 활용한 상호작용적인 연습 기회를 제공합니다.
내가 움직이는 캐릭터를 조종하는 건가요?
아니요. 주요 상호 작용은 그리드 배치를 변경하는 CSS 입력입니다.
원본 출처는 무엇입니까?
Thomas Park의 Grid Garden는 이 검토 버전에 사용된 MIT 라이선스 소스 코드와 CC BY 3.0 아트워크를 제공합니다.
시작선 2, 끝선 4라면 네 칸을 덮나요?
아닙니다. grid-column-start: 2와 grid-column-end: 4는 2번 선과 4번 선 사이, 즉 두 열 트랙을 선택합니다. 끝선은 경계이며 물을 주는 칸 하나가 더 생기는 것이 아닙니다. 선 사이 간격을 세거나 span 2를 사용하고, 행 위치까지 바꾸기 전에 강조된 영역을 확인하세요.