inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

▶ grid 속성

섹션 2 - 강력한 CSS의 "grid 속성" 강의에 오타가 있는 것 같습니다.

해결된 질문

316

joka

작성한 질문수 15

0

섹션 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)
ㅁ ㅁ ㅁ ㅁ
[ㅁ ㅁ ㅁ]ㅁ

 

제가 잘못 입력된 부분이 있는지 혹은 강의 내용의 값이 오타였던 건지 알고싶습니다.

react node.js seo graphql next.js

답변 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