-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
BackgroundImage컴포넌트에서 styled 함수 내부에서 인라인 스타일을 사용한 이유를 다시 한번 설명해주실 수 있을까요?
21.12.19 22:25 작성 조회수 130
1
GatsbyImgProps로 정의한 props들과 position:absolute를 인라인으로 넘겨주는 이유를 다시 설명해주실 수 있을까요?
기본적으로 설정된 인라인 스타일이 !important속성이 없으면 적용 순위에서 밀린다는건, 항상 컴포넌트 스타일이 우선시 된다는건가요?
의미를 잘 이해를 못하겠습니다...
답변을 작성해보세요.
2
주현도
지식공유자2021.12.30
안녕하세요, inust33님!
설명이 너무나도 짧아 추가 설명 덧붙여드리겠습니다!
기본적으로 CSS에는 적용 우선 순위라는 것이 존재합니다.
예를 들어서 !important 속성이 같이 적용되어 있는 경우에는 해당 값이 최우선으로 적용되듯이 말이죠.
일반 CSS 코드와 HTML 요소에 직접적으로 선언하는 인라인 CSS 코드 중에서는 인라인 CSS 코드가 더 우선 순위가 높습니다.
기본적으로 GatsbyImage 컴포넌트에는 position: relative 속성이 인라인 CSS 형태로 적용되어 있습니다.
그래서 emotionjs 를 통해 해당 컴포넌트에 스타일을 적용하는 경우, position 값이 존재하면 인라인 CSS 형태로 적용된 position: relative의 우선 순위가 더 높아 무시되는 것입니다.
따라서 이를 해결하기 위해서는 적용 우선 순위가 더 높은 !important를 사용하는 것인데, 이는 권장되는 CSS 코드 컨벤션이 아니므로 강의와 같이 직접적으로 position: absolute 값을 인라인 CSS 형태로 적용한 것입니다!
답변 1