[CSS-in-js] Emotion styled components 관련 질문입니다.
const Wrapper = styled.div`
@media (max-width: 767px) {
width: 760px;
& > div {
width: 700px;
}
};
width: 1200px;
padding: 30px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
margin: 0 auto;
& > div {
width: 1000px;
}
`1) 위의 내용과 같이 CSS-in-js 코드 작성하고 화면 너비를 767px 이하로 조정하였음에도 Wrapper 자손 div 선택자들의 너비가 width: 700px로 조정되지 않습니다. 아래 그림과 같이 @mobile 밖의 코드인 1000px로 계속 강제적용이 되는것으로 보입니다. 왜 이런 것인지 알 수 있을까요?
2) 논외로 위의 코드와 같이 & > div 를 이용하여 자손 div 태그들에 너비를 정해준 후, 따로 const 이용하여 자손 div 중 하나를 상수 지정하여 너비를 설정해주면, Wrapper에서 &>div를 이용해서 지정한 너비로 또 계속 강제적용되는 것으로 보입니다. & > div가 가장 우선적인 설정인가요?
답변 부탁드리겠습니다ㅠ
Answer 1
0
안녕하세요 펩시제로라임향님
미디어 쿼리가 정의된 부분이 맨앞에 있기 때문에 뒤에 나오는 width:1000px 코드로 덮어 씌워 지고있습니다
따라서 미디어 쿼리를 마지막 부분에 위치시키면 해결됩니다
네 맞습니다 해당 스타일은 다른스타일 보다 우선 적용 됩니다
fetchBoardsOfMine, fetchBoardsCountOfMine 에러 문의드립니다
0
32
1
댓글 기능 구현 중 질문드립니다.
0
64
1
쿠폰코드 발급
0
127
2
example 서버 플레이그라운드, API 접속 모두 안됩니다.
0
85
2
문의드립니다!! ㅠㅠ
0
101
2
graphql 백엔드 서버가 포폴용 빼곤 접속이 안됩니다.
0
75
2
_app.js 작성 이후로 에러가 발생하네요
0
93
2
학습자료
0
68
2
학습자료가 안열립니다.
0
47
2
플레이 그라운드 퀴즈 문제 질문이 있습니다.
0
58
0
기존강의 구매자, 업데이트 끝인가요?
0
107
3
업데이트 버전 수강
0
87
2
완벽한 프론트엔드
0
135
2
나만의 쇼핑몰 샘플 페이지 접속 확인부탁드립니다.
0
80
1
graphql 접속이 안됩니다.
0
99
2
const, let 사용 질문 드립니다.
0
69
2
싸이월드 만들기 1탄 피드백 부탁드립니다.
0
121
2
회원가입 과제 피드백 부탁드립니다.
0
78
2
styled.span / styled.input "CSS 자동완성"
0
46
1
쿠폰 발급 관련
0
165
2
서버 502 error
0
246
2
쿠폰 다시 부탁드려도 될가여?
0
139
2
a태그 패딩했을때 왜 크기가 줄어들지 않고 늘어나나요
0
181
2
2분 44초 질문
0
127
3