CSS 그리드 프로젝트 - 반응형 태양계 - 1부

CSS 그리드를 사용하여 순수한 HTML과 CSS로 이것을 만들 것입니다.

소개

CSS 그리드 사용을 시작하는 방법에 대해 쓰고 싶었지만, MDN 문서가 이미 해결했다면 망할 것입니다. 따라서 CSS 그리드를 시작하는 데 관심이 있고 시작해야 하는 경우 MDN Web Docs guide to CSS grids을 확인하십시오.

기본 사항이 잘 설명되어 있다는 것을 깨달은 후 CSS 그리드에서 빌드할 프로젝트를 찾고 있었고 원본 Space Jam 웹 페이지가 나에게 제공되었습니다(Credit Jessie Wu). Recreated here using CSS grids , CSS 그리드가 어떻게 반응하고 멋진지 보여주는 좋은 예입니다. 그 아이디어에서 저는 반응형 태양계를 만들기로 결정했습니다. 이 이미지를 참조용으로 사용



내 목표는 8개의 행성과 태양을 포함하는 2D 반응형 "이미지"를 만드는 것입니다. 각 몸체의 궤도 경로를 나타내는 선을 유지하고 싶습니다. 나는 각 행성의 이름을 포함하지 않을 것입니다. 이제 시작하겠습니다.

1 단계

빈 HTML 및 CSS 문서를 열고 태양계를 포함할 빈 기본 요소를 만듭니다.

body {
   padding: 0;
   margin: 0;
   box-sizing: border-box;
   display: grid;
   place-items: center;
   height: 100vh;
}
main {
   width: 90vw;
   height: 90vw;
   margin: 5vh 5vw;
   border: 1px solid #cccccc;
}

작업 중인 위치를 볼 수 있도록 밝은 테두리를 추가하고 화면 중앙에 배치했습니다.

해왕성 및 궤도

저는 외부 행성에서 안쪽으로 작업하기로 결정했습니다. 중앙에서 바깥쪽으로 작업하는 것도 가능할 것이라고 확신합니다. 이것이 제가 이 설계를 구축하기 위해 선택한 방법입니다. 첫 번째 행성인 Neptune을 나타내는 div를 추가합니다.

.neptune {
   height: 5vmin;
   width: 5vmin;
   border-radius: 50%;
   border: 2px solid #000000;
}

궤도가 없는 일종의 행성이 있습니다. 지금은 단지 원일 뿐입니다. 따라서 해왕성의 궤도가 될 두 번째 div를 추가하겠습니다.

   <main>
       <div class="neptune"></div>
       <div class="neptune-orbit"></div>
   </main>

.neptune-orbit {
   border-radius: 50%;
   border: 2px solid #000000;
}

테두리를 추가하고 테두리 반경을 50%로 하여 적어도 결국에는 원이 되도록 했습니다. 우리는 정말로 CSS 그리드의 힘을 사용할 필요가 있습니다.

해왕성의 그리드

목표는 완벽한 원을 만드는 것이므로 경계 반경을 50%로 유지하면서 전체 그리드를 채우도록 "neptune-orbit"요소에 지시하면 완벽한 원을 만들어야 합니다.

main {
   width: 90vw;
   height: 90vw;
   margin: 5vh 5vw;
   border: 1px solid #cccccc;
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-template-rows: 1fr 1fr;
}

.neptune {
   height: 5vmin;
   width: 5vmin;
   border-radius: 50%;
   border: 2px solid #000000;
   grid-row: 1/2;
   grid-column: 1/3;
}

.neptune-orbit {
   border-radius: 50%;
   border: 2px solid #000000;
   grid-row: 1/3;
   grid-column: 1/3;
}

"neptune"요소는 첫 번째 행과 두 열 모두에 위치합니다. 센터에 "정당화"하도록 지시하면 일치하는 궤도에 더 가까워야 합니다.

이제 우리는 매우 가깝습니다. 항목을 높이의 절반만큼 위로 밀어 올리면 시각적으로 궤도와 정렬되어야 합니다. 일반적으로 상대 위치 속성을 사용하여 항목의 위치를 ​​지정하지만 CSS 그리드에는 적용되지 않으므로 추악하지만 똑같이 효과적인 음수 여백을 사용합니다. 이 경우 마진 바닥을 사용하면 그리드 시스템 내에서 몇 가지 실제 문제가 발생합니다.

.neptune {
   height: 5vmin;
   width: 5vmin;
   border-radius: 50%;
   border: 2px solid #000000;
   grid-row: 1/2;
   grid-column: 1/3;
   justify-self: center;
   margin-top: -2.5vmin;
}

거의 완벽합니다. 궤도선이 우리 행성을 바로 통과하는 것을 보고 싶지 않습니다. 따라서 먼저 궤도를 생성하도록 HTML을 전환한 다음 해왕성에 배경색 #fffff를 추가합니다. 완벽한!

천왕성

먼저 각 행성에 사용할 CSS를 추상화하거나 자체 클래스로 생략하고 싶기 때문에 코드를 건조하게 유지합니다.

<div class="neptune-orbit"></div>
<div class="neptune planet"></div>

.planet {
   height: 5vmin;
   width: 5vmin;
   border-radius: 50%;
   border: 2px solid #000000;
   background: #ffffff;
}
.orbit {
   border-radius: 50%;
   border: 2px solid #000000;
}
.neptune {
   grid-row: 1/2;
   grid-column: 1/3;
   justify-self: center;
   margin-top: -2.5vmin;
}
.neptune-orbit {
   grid-row: 1/3;
   grid-column: 1/3;
}

이제 필요할 때 행성이나 궤도 등급을 추가할 수 있습니다.

그리드를 미리 생각해 보면 궤도에 대한 원을 만들기 위해 2열과 2행의 그리드가 필요하므로 현재 궤도 내에 다른 궤도를 추가하려면 두 개의 열과 두 개의 행을 더 추가해야 합니다. 그렇게 하세요.

grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;

그러나 이것은 이미 추악해지고 있으므로 향후 더 많은 행을 추가하는 것을 고려하여 리팩터링해 봅시다.

grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 1fr);

이제 그에 따라 Neptune의 그리드 할당을 조정하겠습니다.

.neptune {
   grid-row: 1/2;
   grid-column: 1/5;
}
.neptune-orbit {
   grid-row: 1/5;
   grid-column: 1/5;
}

거의 다 왔습니다. 이제 "uranus"에 CSS를 추가하여 적절한 공간에 위치하도록 합시다.

.uranus {
   grid-row: 2/3;
   grid-column: 1/5;
}
.uranus-orbit {
   grid-row: 2/4;
   grid-column: 2/4;
}

이제 두 개의 행성과 앞으로 나아갈 시스템이 있습니다.



이미 길어지고 있기 때문에 지금 2부로 보내겠습니다.