12.16 Viewer.css background-color 질문

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

12.16) Diary 페이지 구현하기

작성

css를 적용하였는데도 감정 이미지의 background가 적용이 되지 않는데 잘못된 것이 있을까요??

.Viewer > section{
    width:100%;
    margin-bottom: 100px;

    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.Viewer > section > h4{
    font-size:22px;
    font-weight: bold;
}

.Viewer .emotion_img_wrapper{
    width:250px;
    height:250px;
    border-radius: 5px;
    
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;

    color: white;
    font-size: 25px;
}

.Viewer .emotion_img_wrapper_1{
    background-color: rgb(100,201,100);
}
.Viewer .emotion_img_wrapper_2{
    background-color: rgb(157,215,114);
}
.Viewer .emotion_img_wrapper_3{
    background-color: rgb(253,206,23);
}
.Viewer .emotion_img_wrapper_4{
    background-color: rgb(253,132,70);
}
.Viewer .emotion_img_wrapper_5{
    background-color: rgb(253,86,95);
}

javascript react node.js

답변 2

이정환 Winterlood

지식공유자

안녕하세요 진성원님 이정환입니다.

제공해주신 CSS 코드 만으로는 문제의 원인을 파악하기 어렵습니다. CSS 코드 자체에는 문제가 크게 없어보입니다 😅

질문 가이드 라인을 확인하시어 전체 프로젝트 코드를 깃허브 or 구글 드라이브 링크로 전달해주시면 직접 확인해보겠습니다.

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. 진성원님.

CSS가 제대로 적용되지 않는 문제는 코드의 구조나 특정 함수 호출에서 예상한 바와 달리 작동할 때 발생할 수 있습니다. 지금 말씀하신 상황에서는 CSS가 제대로 적용되지 않는 이유를 아래와 같이 점검해볼 수 있습니다.

점검 사항

선택자 우선순위 문제: 동일한 선택자로 여러 스타일이 정의됐거나, 다른 CSS 파일에서 동일한 요소에 다른 스타일을 지정한 경우 우선순위에 의해 덮어씌워질 수 있습니다. !important 를 사용하여 테스트해볼 수 있으나, 이는 최후의 수단으로 사용하시길 권장합니다.
구조 확인: HTML 구조에서 .emotion_img_wrapper_1 같은 클래스가 사용된 요소가 실제로 존재하는지 확인해 보세요. 클래스명이 정확히 맞지 않는다면 스타일이 적용되지 않을 수 있습니다.
Element 검사: 브라우저 개발자 도구(F12)에서 해당 요소를 검사하여 적용된 스타일이 있는지 확인하고, 스타일이 덮어씌워졌는지를 직접 확인하세요.

인프런 커뮤니티 질문&답변

12.16 Viewer.css background-color 질문

점검 사항

관련 질문 및 해결책