css 질문
412
작성한 질문수 6
안녕하세요! 소플님 실습을 하는 중인데 그림에 해당 부분의 간격이 안생기는데 저 css는 어디 컴포넌트에서 주신걸까요? 소스를 한참 비교해봤는데 모르겠어서 문의 드립니다!!
답변 1
0
안녕하세요, 소플입니다.
아마도 하단에 margin을 주는 CSS 속성이 빠져있는 것 같습니다.
아래 코드에서 & > * 를 사용하는 부분이 빠져있는지 확인해보시기 바랍니다.
const Container = styled.div`
width: 100%;
max-width: 720px;
& > * {
:not(:last-child) {
margin-bottom: 16px;
}
}
`;그리고 해당 CSS 속성에 대한 자세한 내용은 아래 답변을 참고하시면 도움이 되실겁니다!
https://www.inflearn.com/questions/548062/comment/190852
감사합니다.
이 3개의 페이지에서 해당 css적는것 아닌가요?0
그러면 개발자 도구에서 해당 부분을 열어서 CSS 속성을 한 번 확인해보시겠어요?
해당 화면을 캡처해서 첨부해주시면 답변을 드리는데 더 도움이 될 것 같습니다~
문제가 되는 부분들 캡쳐했는데 이렇게 보여드리면 될까요..,?
이렇게 적었습니다!!0
일단 코드만 봐서는 원인을 잘 모르겠네요~
혹시 소스코드를 GitHub에 공개적으로 올려두고 작업하고 계실까요?
만약 그러면 저장소 주소를 알려주시면 좋을 것 같습니다!
소플님 해당코드를 해석하면 저렇게 되는것같은데 화면상에서는 왜 코드대로 작동이 안되는건지,,,, 모르겠습니다..ㅠㅠ0
확인해보니 styled-components 버전이 6점대로 올라가면서 기존에 지원되던 문법을 지원하지 않는 것으로 바뀐 것 같습니다.
아래와 같이 &만 사용하는 형태로 수정해서 사용하시면 되고,
해당 부분과 관련해서는 별도로 실습코드에 업데이트 해놓도록 하겠습니다!
const Container = styled.div`
width: 100%;
max-width: 720px;
& {
:not(:last-child) {
margin-bottom: 16px;
}
}
`;https://styled-components.com/docs/basics#pseudoelements-pseudoselectors-and-nesting
감사합니다.
강의가 삭제되었다고 합니다
0
111
1
이거 왜 존재하지 않는다고 뜨는건가요
0
138
1
존재하지 않는 수업이라고 떠요
0
184
1
안드로이드 에뮬레이터 오류
0
101
1
교재 구입해서 강의 들으려고 하는데 커리큘럼이 없어졌어요.
0
130
1
prevIsConfiromed 질문
1
144
2
chapter14 잘이해가 되지않습니다..
1
136
2
2025년 3월 리액트버전
1
205
2
npm 설치 오류
1
178
1
chapter_07 콘솔로그 질문드려요~!
1
129
2
안녕하세요 미니블로그 실습 질문드립니다.
1
179
3
에러가 떠요
1
220
3
Chapter6 질문 드립니다
1
210
2
실습 코드 있을까요?
1
208
2
상태가 업데이트될때 컴포넌트 최상단의 console.log 코드가 두번 실행되는 이유가 궁금합니다.
1
234
2
npx create-react-app my-app 명령어 입력이 잘못된 것 같습니다
0
310
3
이름과 코멘트 줄바꿈이 안 됩니다.
0
142
1
버튼이 안 뜹니다
0
305
2
npx create-react-app my-app
1
472
2
jsx 코드 작성해보기에서 index.js 수정 후 에러 뜹니다.
1
377
3
Chapter_05 터미널, 리액트 에러
0
194
2
npx create-react-app my-app 명령어 반응없음
1
434
3
import 코드 에러
1
215
1
백틱
1
122
1