BackgroundImage컴포넌트에서 styled 함수 내부에서 인라인 스타일을 사용한 이유를 다시 한번 설명해주실 수 있을까요?
186
작성한 질문수 16
GatsbyImgProps로 정의한 props들과 position:absolute를 인라인으로 넘겨주는 이유를 다시 설명해주실 수 있을까요?
기본적으로 설정된 인라인 스타일이 !important속성이 없으면 적용 순위에서 밀린다는건, 항상 컴포넌트 스타일이 우선시 된다는건가요?
의미를 잘 이해를 못하겠습니다...
답변 1
2
안녕하세요, inust33님!
설명이 너무나도 짧아 추가 설명 덧붙여드리겠습니다!
기본적으로 CSS에는 적용 우선 순위라는 것이 존재합니다.
예를 들어서 !important 속성이 같이 적용되어 있는 경우에는 해당 값이 최우선으로 적용되듯이 말이죠.
일반 CSS 코드와 HTML 요소에 직접적으로 선언하는 인라인 CSS 코드 중에서는 인라인 CSS 코드가 더 우선 순위가 높습니다.
기본적으로 GatsbyImage 컴포넌트에는 position: relative 속성이 인라인 CSS 형태로 적용되어 있습니다.
그래서 emotionjs 를 통해 해당 컴포넌트에 스타일을 적용하는 경우, position 값이 존재하면 인라인 CSS 형태로 적용된 position: relative의 우선 순위가 더 높아 무시되는 것입니다.
따라서 이를 해결하기 위해서는 적용 우선 순위가 더 높은 !important를 사용하는 것인데, 이는 권장되는 CSS 코드 컨벤션이 아니므로 강의와 같이 직접적으로 position: absolute 값을 인라인 CSS 형태로 적용한 것입니다!
쿼리오류 Field "thumbnail" must not have a selection...
1
872
1
타입스크립트를 설정할 때 jsxPragma 옵션을 뺀 이유는 무엇인가요?
1
605
1
마지막 배포 부분 질문드립니다!
1
623
1
'[username]/[username].github.io' -> 'username/reponame'
0
344
0
IntersectionObserver deploy( gatsby build) 시 오류(자답)
1
399
1
PostHead.tsx BackgroundImage 동작오류(자답)
1
296
0
19강 인피니티 스크롤 IntersectionObserver 코드 위치 수정이 필요합니다.
1
411
1
썸네일 이미지 제작 및 학습 방법 관련 문의
1
446
1
배포 후 포스트 업로드 방법
1
386
1
배포 질문이요!
1
528
1
gatsby develop 오류
1
940
1
깃허브 레퍼지토리 질문드려요
1
344
1
특정 게시글을 클릭하여 상세 페이지로 넘어가는 과정과 SPA에 관한 질문
1
285
1
Unhandled Runtime Error 가 뜹니다
0
506
2
sign in with GitHub 클릭 시
1
394
3
동작 반복 시 오류
1
351
2
const BackgroundImage 질문
1
212
1
오타 문의
1
305
2
Props로 받아 포스트 데이터 출력하기가 안됩니다.
1
203
1
index.tsx allMarkdownRemark 에러..
0
595
2
스네이크 케이스로 변수명을 짓는 이유
1
251
1
'Tagged Template Literal 방식을 통해 정의한 CSS 적용 방법'에서 발생하는 문제
3
353
2
상단 이미지를 썸네일 사용하지않고 다른 이미지를 쓰고싶습니다
1
284
1
여기까지 했는데 runtime 에러가 발생합니다
2
286
1