-
카테고리
-
세부 분야
웹 개발
-
해결 여부
미해결
복습으로 혼자 해봤는데 slick을 입히면 project-photo가 안보입니다.
21.04.26 18:49 작성 조회수 307
1
강사님 안녕하세요!
home 섹션까지 전부 마치고 전체적으로 제 힘으로 다시 만들어보고 있는 중인데 아무리 삽질해도 안되는 부분이 생겨 질문드립니다...
project 섹션에서 html/css를 전부 구축하고 slick 효과를 넣는 과정에서 강사님처럼 slick을 입혔는데 .project-photo 영역이 전부 흰색으로 보이는 현상이 발생했습니다.
완성본이랑 비교해보는 중인데 일단 css를 완성본으로 덮어씌우면 slick 효과가 입혀지는 것으로 확인돼서 css에 문제가 있는 것 같다고 판단했습니다.
html은 완성본과 같은 상태이고 css는 복습과정에서 강사님 css 순서와 다르게 써내려가고 있는데 어디가 잘못된건지 도통 못찾겠습니다... ㅠㅠ 확인 한번만 부탁드립니다 ㅠㅠ
반응형 웹사이트 포트폴리오(Architecture Agency)
PC 레이아웃 섹션 상세 퍼블리싱(Project Section) - #06(Slick.js 이미지 슬라이더)
강의실 바로가기
답변을 작성해보세요.
0
코딩웍스(Coding Works)
지식공유자2021.05.01
슬릭 슬라이더 안보이는 문제 해결했는데요. 시간이 좀 걸린 이유가 제가 만든 코드랑 다르게 만드셔서 그래요.
JS 문제는 아니구요. CSS 문제에요.
제가 만든 강의 영상 코드는 .tab 밑에 .project-info 와 .project-photo에 아래 처럼 CSS가 되어 있거든요.
.tab > div {
height: 100%;
float: left;
}
.project-info {
width: 25%;
}
.project-photo {
width: 75%;
overflow: hidden;
}
작성하신 코드에는 너무 불필요한 속성이 많이 들어가 있어요. 특히 .project-photo img 라는 선택자는 필요가 없는데... 여기에 positon: absolute가 있어서 slick css에 있는 position 속성과 충돌이 나서 그런 것 같아요. 슬릭은 요소가 있으면 알아서 div로 묶어서 position 속성으로 제어하거든요.
일단 .project-photo img 선택자면 없어지면 문제해결되요. 곧 이 선택자에서 준 absolute가 문제가 되서 슬릭이 안보인거에요.
wodnjs306
질문자2021.05.03
진짜 길고 제멋대로라 파악하기 너무 힘드셨을 것 같은데 찾아주셔서 감사합니다 ㅠㅠㅠ
제이쿼리 라이브러리가 들어갈 곳에는 css 제어를 함부로 하면 안되는 것이군요!!
깨달음을 얻었어요 감사합니다 ㅠㅠ
0
코딩웍스(Coding Works)
지식공유자2021.04.27
제가 이번주에 강의를 시작해서 정신이 없어서 답변을 빨리 못드렸네요.
죄송합니다...ㅠㅠ
혹시 해결이 되셨나요? 해결 아직 못하셨으면 코드 올려주세요.
CSS만 가지고는 알 수 없구요. 풀코드가 있어야 해요.
html, css, js 풀 코드를 답글로 올려주세요.
wodnjs306
질문자2021.04.28
답변 2