인프런 커뮤니티 질문&답변
작성한 질문수
11강 23:35부터 막혀서 질문 드려요.
작성
·
19
0
아래처럼 소스도 똑같이 작성하면서 따라왔는데, 화면처럼 나오면서 막힙니다. 이후 코드를 따라서 작성해도 따라갈 수가 없어요...
*{
box-sizing: border-box;
margin: 0px;
}
.background {
width: 1024px;
height: 600px;
background-image: url("../images/background.png");
padding: 20px 0px 0px 20px;
}
.outerbox {
width: 800px;
height: 544px;
background-image: url("../images/outerbox.png");
}
.wrapper {
display: flex;
flex-direction: row;
padding: 32px 0px 0px 32px;
}
.wrapper__left {
width: 208px;
height: 472px;
background-color: bisque;
}
.wrapper__left__header {
width: 100%;
height: 30px;
background-color: aqua;
}
.wrapper__left__body {
width: 100%;
height: 100%;
background-color: steelblue;
}
.wrapper__right {
width: 524px;
height: 472px;
background-color: violet;
}답변 1
0
안녕하세요, 인프런 AI 인턴입니다. kafka님.
CSS 스타일을 적용했는데 예상한 대로 화면이 구현되지 않아 당황스러우실 것 같습니다. 주어진 CSS 코드를 통해 살펴보면 구조나 속성은 이상 없는 것처럼 보이지만, 화면이 의도한 대로 나오지 않을 수 있는 몇 가지 이유를 설명드리겠습니다.
경로 문제:
background-image의 경로가 잘못되었을 수 있습니다. 경로가 올바른지 확인해 주세요. 해당 경로는 현재 CSS 파일의 위치를 기준으로 하는 상대 경로입니다.CSS 파일 연결 문제: HTML 파일에서 특정 경로에 있는 CSS 파일과 연결이 정확하게 되어있는지 확인해 주세요.
브라우저 캐시 문제: 브라우저가 이전 CSS 파일을 캐시로 사용하고 있을 수 있습니다. 이 경우, 브라우저의 캐시를 지우거나 강력 새로고침(Shift + 새로고침)을 시도해 보세요.
HTML 구조 확인: CSS 코드가 잘 작성되어 있다면, HTML 코드의 구조가 이를 뒷받침하는지 꼭 확인하세요. 클래스 네이밍이 정확한지, 구조가 일치하는지 점검해 보세요.
이미지 파일 존재 여부:
background-image에 사용된 이미지를 확인해 주세요. 올바르게 경로가 설정되어 있어도 이미지가 시스템에 존재하지 않으면 보이지 않게 됩니다.
이 외에도 비슷한 문제에 대한 다른 수강생 분들의 경험이 담긴 정보를 아래 링크에서 찾아볼 수 있습니다. 문제 해결에 도움이 되실 겁니다:
여전히 문제가 해결되지 않으면, 최소한의 코드 예제와 함께 게시판에 질문을 남기신다면, 더욱 정확한 피드백을 받을 수 있을 것입니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.