인프런 커뮤니티 질문&답변
작성한 질문수
BackgroundImage컴포넌트에서 styled 함수 내부에서 인라인 스타일을 사용한 이유를 다시 한번 설명해주실 수 있을까요?
작성
·
167
답변 1
2
주현도
지식공유자
안녕하세요, inust33님!
설명이 너무나도 짧아 추가 설명 덧붙여드리겠습니다!
기본적으로 CSS에는 적용 우선 순위라는 것이 존재합니다.
예를 들어서 !important 속성이 같이 적용되어 있는 경우에는 해당 값이 최우선으로 적용되듯이 말이죠.
일반 CSS 코드와 HTML 요소에 직접적으로 선언하는 인라인 CSS 코드 중에서는 인라인 CSS 코드가 더 우선 순위가 높습니다.
기본적으로 GatsbyImage 컴포넌트에는 position: relative 속성이 인라인 CSS 형태로 적용되어 있습니다.
그래서 emotionjs 를 통해 해당 컴포넌트에 스타일을 적용하는 경우, position 값이 존재하면 인라인 CSS 형태로 적용된 position: relative의 우선 순위가 더 높아 무시되는 것입니다.
따라서 이를 해결하기 위해서는 적용 우선 순위가 더 높은 !important를 사용하는 것인데, 이는 권장되는 CSS 코드 컨벤션이 아니므로 강의와 같이 직접적으로 position: absolute 값을 인라인 CSS 형태로 적용한 것입니다!