Inflearn Community Q&A
asked
슬라이드와 탭메뉴 관련 문의드립니다.
Written on
·
601
1
안녕하세요.
슬라이드 z-index와 탭메뉴 별도 구성시 탭문의 드립니다.
1. 슬라이드에 z-index 적용 전에는
슬라이드 이미지를 각각 눌렀을 때 링크된 각각의 이미지들이 선택이 되었었는데요.
navi가 보이질 않아서 z-index: -10으로 적용하고 나면
슬라이드 이미지를 각각 눌렀을 때 링크된 각각의 이미지들이 선택이 되질 않습니다.
어떻게 하면 각각 이미지들이 선택될 수 있는지 문의드립니다.
2. 별도 탭 메뉴 작성시
.btn a {
display: block;
}
을 적용하면 위 이미지처럼 border-bottom: none; 이 적용이 안되는 것 같습니다.
display: inline-block; 으로 하면 적용이 되는데요. 탭이 하나라서 block으로 적용을 해봤을 때는 되질 않았습니다.
왜 적용이 안되는 건지 모르겠습니다. ㅜㅜ
바쁘시더라도 답변 부탁드립니다.
감사합니다. ^^
Answer 3
1
영상에 있어도 못보는 경우가 많습니다. 괜찮습니다.
늦은 시간에 질문글 쓰셔도 저는 낮에 답변 드리니까 괜찮아요~
넵~ 건강 유의하시면서 열심히 하세요~^^
1
아.. 네 상세한 답변 감사드립니다.
1번, 2번 모두 해결되었습니다.
1번은 영상에 있는 내용인데.. 질문을 드렸네요. ㅠㅠ 지송해요..
그리고 제가 공부를 시작한 시점에는 시험일정이 없더라구요. 6월에 필기시험 봤습니다.
열심히 보다는... 요즘에 낮밤이 조금 바껴서 질문을 늦게 드렸습니다. ㅜㅜ
강사님도 무더운 여름 건강챙기시고 남은 하루도 편안한 시간 되세요!
감사합니다 ^^
1
안녕하세요. 순풍님~^^ 코딩웍스입니다.
1. 슬라이드 적용 후 이미지 선택 안되는 부분
슬라이드에 사용한 position:absolute 때문에 슬라이드가 navi 위로 올라와서 서브메뉴가 안보이는거거든요.
이걸 해결하기 위해서 슬라이드에 z-index를 마이너스로 주면 해결은 되지만 이미지가 보이지만 아래로 들아가서 선택지 않아요.
그러니까 슬라이드에 z-index를 마이너스로 주지 마시고 navi를 포함하고 있는 header에 position: relative를 주시고 z-index를 1이나 10을 줘서 올려주세요. 그러면 header 안에 포함된 navi와 서브메뉴도 슬라이드 보다 위로 올라옵니다.
그러면 navi가 가리지 않고 이미지지가 선택 안되는 현상도 해결할 수 있어요.
[섹션 8. 웹디자인 기능사 실기시험 최종본 실전 제작]에 보시면 9.[최종본 제작 유의사항] 상단 네비게이션의 서브메뉴가 슬라이드 아래로 숨는 문제 해결하기 영상이 있어요. 그걸 보시면 훨씬 자세히 이해하실 수 있습니다.^^
2. 별도 탭메뉴 작성시 .btn a가 tab 위로 올라가기
그런 현상이 생기는건 저도 처음봐서요. 그래서 최종본 다운로드 받아서 해보니까 진짜 그렇네요.
.btn a를 inline-block으로 하니까 문제 없는데 block으로 하니까 위로 올라오지 않네요.
제가 역량이 부족해서 이부분은 설명을 드리기는 지금은 어렵네요.ㅠㅠ
해결방법1 : 말씀하신데로 block을 쓰지 말고 inlin-block으로 해주세요.
해결방법2 : block으로 하셨으면 .btn a에 position: relative 주세요. z-index를 높여줄 필요는 없어요. position: relative 들어가면서 위로 올라왔으니까요.
참... 6월에 시험 보신줄 알았는데 아직 안보셨군요. 8월 말에 있는 3회차 실기시험 보시나 보네요. 또 궁금하신 점 있으시면 질문 주세요.
새벽에 질문글 올리셨던데 열심히 하시는건 좋은데 건강 생각하시면서 공부하세요~^^