css에서 gridlayout을 처음 하는데 grid-column과 grid-row를 어떻게 해석해야 할지 모르겠습니다.
조회수 661회
html코드
<div class="grid">
<div>
<img src="./images/gallery_1.jpg" alt="image" title="image">
<div class = "shadow"><a href = "#">MORE</a></div>
</div>
<div>
<img src="./images/gallery_2.jpg" alt="image" title="image">
<div class = "shadow"><a href = "#">MORE</a></div>
</div>
<div>
<img src="./images/gallery_3.jpg" alt="image" title="image">
<div class = "shadow"><a href = "#">MORE</a></div>
</div>
<div>
<img src="./images/gallery_4.jpg" alt="image" title="image">
<div class = "shadow"><a href = "#">MORE</a></div>
</div>
<div>
<img src="./images/gallery_5.jpg" alt="image" title="image">
<div class = "shadow"><a href = "#">MORE</a></div>
</div>
<div>
<img src="./images/gallery_6.jpg" alt="image" title="image">
<div class = "shadow"><a href = "#">MORE</a></div>
</div>
<div>
<img src="./images/gallery_7.jpg" alt="image" title="image">
<div class = "shadow"><a href = "#">MORE</a></div>
</div>
<div>
<img src="./images/gallery_8.jpg" alt="image" title="image">
<div class = "shadow"><a href = "#">MORE</a></div>
</div>
<div>
<img src="./images/gallery_9.jpg" alt="image" title="image">
<div class = "shadow"><a href = "#">MORE</a></div>
</div>
</div>
css코드
.grid { width:1440px; height:1000px; margin:0 auto; display:grid; grid-template-columns: 20% 25% 25% 30%; grid-template-rows: 30% 20% 25% 25%; margin-top:10px;}
.grid > div { width:100%; height:100%; padding:5px; position:relative; }
.shadow { position:absolute; width:calc(100% - 10px); height:calc(100% - 10px); top:5px; left:5px; background:rgba(0,0,0,0.6); opacity:0; z-index:10; }
.shadow a { position:absolute; padding:10px 25px; color:#f2f4f8; border:1px solid #f2f4f8; font-size:1.2em; left:50%; top:50%; transform:translate(-50%, -50%); z-index:20; }
.shadow a:hover { color:#111; background:#f2f4f8; }
.grid > div:hover .shadow { opacity:1; }
.grid > div:nth-child(4) { grid-column:4; grid-row:1/3; }
.grid > div:nth-child(6) { grid-column:2/4; grid-row:2; }
.grid > div:nth-child(7) { grid-column:1/3; grid-row:3/5; }
.grid > div:nth-child(8) { grid-column:3/5; grid-row:3; }
.grid > div:nth-child(9) { grid-column:3/5; grid-row:4; }
html과 css코드는 위와 같고, css 밑의 다섯줄을 설명해주세요.
-
(•́ ✖ •̀)
알 수 없는 사용자
1 답변
-
저도 잘 모르는데 잘 된 문서들을 읽으면서 같이 공부해 보시죠.
- 유사 속성
어쩌구저쩌구:nth-child(숫자)
는어쩌구저쩌구
에 해당되는 동위의(=부모가 같은) 모든 개체들 중숫자
번째 개체를 특정합니다. 더 알아보기 grid-column
속성은 그리드 배치에서 몇 번째 열에 붙일 것이냐를 짧게 정의하기 위해grid-column-start / grid-column-end
형식으로 쓸 수 있고,grid-row
속성은 몇 번째 행에 붙일 것이냐를 정의하기 위해grid-row-start / grid-row-end
형식으로 사용할 수 있다고 합니다. 더 알아보기- 그리드 배치는 구분선을 기준으로 숫자를 붙인다고 합니다. 예컨대
2*2
의 그리드 배치는 田자 모양이 되는데 이 배치는 가로선3
개 세로선3
개를 사용하므로 컬럼 숫자는3
까지, row 숫자도3
까지 붙는다고 하네요. 더 알아보기
따라서 주어진 코드의 맨 마지막 줄만 해석해 보자면:
.grid
클래스가 붙은 개체 바로 밑의div
들 중9
번째 녀석은 (그리드 배치를 사용한다는 전제 하에) 셋째 열부터 넷째 열까지를 사용하고, 행은 넷째 행을 다 사용하도록 하세요.나머지는 직접 알아보실 수 있습니다. 시도해 보세요!
- 오오오오옹 감사합니다!!! 그리드 배치를 4*4로 했는데 왜 5가 나오는지 이상해서 질문 했는데 설명 들으니 이해가 되네요. 알 수 없는 사용자 2018.9.17 10:54
- 유사 속성
댓글 입력