섹션 2 - 강력한 CSS의 "grid 속성" 강의에 오타가 있는 것 같습니다.
섹션 2 - 강력한 CSS의 "grid 속성" 강의에서 15분 30초쯤에 보이는 grid 레이아웃이 그림 예시와 적용된 속성값이 다른 것 같습니다.
grid-item에게 grid-column: 1 / 3; grid-row: 2 / 3; 속성을 주고 실행했을 경우 아래의 레이아웃으로 나눠지고
ex)
HTML
<div class="container">
<div class="item item1">box</div>
<div class="item">box</div>
// ...
</div>CSS
.container {
box-sizing: border-box;
border: 2px solid pink;
display: grid;
grid-template-columns: 200px repeat(3, 1fr);
grid-template-rows: 1fr 2fr;
}
.item {
font-size: 1.3em;
font-weight: 500;
border: 2px solid powderblue;
}
.item1 {
grid-column: 1 / 3;
grid-row: 2 / 3;
}result)
ㅁ ㅁ ㅁ ㅁ
[ㅁ ㅁ]ㅁ ㅁ
강의에서 보여지는 레이아웃처럼 만드려면 grid-column: 1 / 4; grid-row: 2 / 3; 처럼 입력해 주어야 아래처럼 적용이 되었습니다.
ex)
CSS
/* ... */
.item1 {
grid-column: 1 / 4; /* 3 -> 4 */
grid-row: 2 / 3;
}result)
ㅁ ㅁ ㅁ ㅁ
[ㅁ ㅁ ㅁ]ㅁ
제가 잘못 입력된 부분이 있는지 혹은 강의 내용의 값이 오타였던 건지 알고싶습니다.
답변 1
0
안녕하세요! joka님!
영상에서 15분 29초의 그림에 오타가 있네요!
Notion 학습자료 grid 레이아웃 섹션에 제대로된 그림이 나와있으며, 이를 바탕으로 복습해 주세요!
(숫자가 3이 아닌 4가 맞으며, 제대로 이해하고 계십니다!)
공유해 주셔서 감사합니다!^^
fetchBoardsOfMine, fetchBoardsCountOfMine 에러 문의드립니다
0
36
1
댓글 기능 구현 중 질문드립니다.
0
66
1
쿠폰코드 발급
0
132
2
example 서버 플레이그라운드, API 접속 모두 안됩니다.
0
86
2
문의드립니다!! ㅠㅠ
0
101
2
graphql 백엔드 서버가 포폴용 빼곤 접속이 안됩니다.
0
76
2
_app.js 작성 이후로 에러가 발생하네요
0
93
2
학습자료
0
70
2
학습자료가 안열립니다.
0
49
2
플레이 그라운드 퀴즈 문제 질문이 있습니다.
0
59
0
기존강의 구매자, 업데이트 끝인가요?
0
109
3
업데이트 버전 수강
0
88
2
완벽한 프론트엔드
0
136
2
나만의 쇼핑몰 샘플 페이지 접속 확인부탁드립니다.
0
83
1
graphql 접속이 안됩니다.
0
100
2
const, let 사용 질문 드립니다.
0
70
2
싸이월드 만들기 1탄 피드백 부탁드립니다.
0
122
2
회원가입 과제 피드백 부탁드립니다.
0
80
2
styled.span / styled.input "CSS 자동완성"
0
47
1
쿠폰 발급 관련
0
166
2
서버 502 error
0
247
2
쿠폰 다시 부탁드려도 될가여?
0
140
2
a태그 패딩했을때 왜 크기가 줄어들지 않고 늘어나나요
0
184
2
2분 44초 질문
0
131
3





