선생님 질문 있습니다
미해결
SCSS(SASS)+GRID+FLEX 실전 포트폴리오 퍼블리싱
안녕하세요! 강의 정말 유익하게 잘 듣고 있습니다. 다름이 아니라 제가 강의 내용을 바탕으로 조금 수정해보면서 만들고 있는데 a태그가 선택이 되질 않아 여쭙고 싶어서 문의 드립니다. html <! DOCTYPE html > < html lang =" ko "> < head > < meta charset =" UTF-8 "> < meta name =" viewport " content =" width=device-width, initial-scale=1.0 "> < title > 본문 </ title > <!-- Custom CSS --> < link rel =" stylesheet " href =" style.css "> <!-- jQuery CDN --> < script src =" https://code.jquery.com/jquery-3.5.1.min.js "></ script > <!-- Featherlight.js --> < script src =" script/featherlight/featherlight.js "></ script > < link rel =" stylesheet " href =" script/featherlight/featherlight.css "> <!-- fontawesome --> < script src =" https://kit.fontawesome.com/c21d7630fc.js " crossorigin =" anonymous "></ script > </ head > < body class =" indexbody "> < section class =" indexmain "> < div > < h1 > < span > LATEST </ span > RECIPES </ h1 > </ div > < div class =" items "> < div > < a href =" portfolio/portfolio-01.html " data-featherlight =" iframe ">< img src =" images/test1.jpg "></ a > < i class =" xi-plus-thin "></ i > < span > 난이도 '하' </ span > < p > 라면 </ p > </ div > < div > < a href =" portfolio/portfolio-01.html "> < img src =" images/test2.jpg "> </ a > < i class =" xi-plus-thin "></ i > </ div > < div > < a th:href =" @{/} "> < img src =" images/test3.jpg "> </ a > < i class =" xi-plus-thin "></ i > < span > 난이도 '중' </ span > < p > 파스타 </ p > </ div > < div > < a th:href =" @{/} "> < img src =" images/test3.jpg "> </ a > < i class =" xi-plus-thin "></ i > < span > 난이도 '하' </ span > < p > 치킨 </ p > </ div > </ div > < br > < br > < div > < div classs =" seemoreline "> < p class =" seemore "> see more < i class =" fa-solid fa-angles-right "></ i ></ p > </ div > </ div > < br > < br > < div > < h1 > < span > QUICK </ span > 30-MINUTE MEALS </ h1 > </ div > < div class =" items "> < div > < a th:href =" @{/} "> < img src =" images/test7.jpg "> </ a > < i class =" xi-plus-thin "></ i > < span > 0 </ span > </ div > < div > < a th:href =" @{/} "> < img src =" images/test8.jpg "> </ a > < i class =" xi-plus-thin "></ i > < span > 06 </ span > </ div > < div > < a th:href =" @{/} "> < img src =" images/test9.jpg "> </ a > < i class =" xi-plus-thin "></ i > < span > 07 </ span > </ div > < div > < a th:href =" @{/} "> < img src =" images/test3.jpg "> </ a > < i class =" xi-plus-thin "></ i > < span > 난이도 '중' </ span > < p > 08 </ p > </ div > </ div > </ section > </ body > </ html > scss //variables $font-base : 10px ; $color-base :#fff; //Mixin //기본 서식 상태 @mixin default { font-family : ' Montserrat Alternates ' , sans-serif ; margin : 0 ; color : #222; line-height : 1.6em ; background-color : #f8f8f8; } @mixin heading { font-family : ' Montserrat Alternates ' , sans-serif ; text-align : center ; font-weight : normal ; position : relative ; padding-bottom : 30px ; & : before { content : '' ; position : absolute ; width : 100px ; height : 4px ; background-color : crimson ; bottom : 0 ; left : 50% ; transform : translateX ( -50% ); } span { color : crimson ; } } /* Google Web Font */ @import url ( ' https://fonts.googleapis.com/css2?family=Montserrat+Alternates:ital@1&family=Nanum+Gothic&display=swap ' ); @font-face { font-family : ' SuncheonB ' ; src : url ( ' https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2202-2@1.0/SuncheonB.woff ' ) format ( ' woff ' ); font-weight : normal ; font-style : normal ; } /* XEION CDN */ @import url ( ' http://cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css ' ); . indexbody { @include default ; height : 100vh ; display : grid ; justify-content : center ; margin : 200px 20% ; } // indexmain section . indexmain { margin : 15px ; display : flex ; flex-direction : column ; h1 { @include heading ; font-size : $font-base *4 ; } . items { display : grid ; grid-template-columns : repeat ( 4 , 1fr ); column-gap : 40px ; row-gap : 40px ; div { border-radius : 6px ; overflow : hidden ; box-shadow : 0 0 9px rgba ( 54 , 53 , 53 , 0.3 ); position : relative ; a { img { width : 100% ; display : block ; } } i { position : absolute ; top : 50% ; left : 50% ; transform : translate ( -50% , -50% ) scale ( 0.2 ); opacity : 0 ; font-size : 40px ; color : $color-base ; } span { position : absolute ; bottom : -40px ; width : 100% ; text-align : center ; padding : 10px ; color : $color-base ; font-weight : bold ; font-size : 30px ; font-family : ' Nanum Gothic ' , sans-serif ; color : rgb ( 255 , 255 , 255 ); } p { font-family : ' SuncheonB ' ; font-size : 20px ; text-align : center ; } span , i , & : before { transition : 0.2s ; // all = default값 pointer-events : all ; } & : before { content : '' ; position : absolute ; top : 0 ; left : 0 ; width : 100% ; height : 100% ; background-color : rgba ( 0 , 0 , 0 , 0.418 ); opacity : 0 ; } & : hover : before { opacity : 1 ; } // .items div:hover 선택자 & : hover i { transform : translate ( -50% , -50% ) scale ( 1 ); opacity : 1 ; } & : hover span { bottom : 70px ; } } } . seemore { border : 1px solid #000; height : 35px ; width : 120px ; text-align : center ; padding-top : 10px ; margin-left : 45% ; } . seemore : hover { color : white ; background-color : crimson ; border : 1px solid crimson ; } } /*tablet*/ @media ( min-width : 768px ) and ( max-width : 1366px ) { . indexbody { height : auto ; } . indexmain { h1 { font-size : $font-base *4 ; } . items { grid-template-columns : repeat ( 2 , 1fr ); } . seemore { margin-left : 39% ; } } } /*mobile*/ @media ( max-width : 768px ) { . indexbody { height : auto ; } . indexmain { h1 { font-size : $font-base *4 ; } . items { grid-template-columns : repeat ( 1 , 1fr ); } . seemore { margin-left : 34% ; } } } /* featherlight Custom CSS */ . featherlight . featherlight-content { margin-left : 0 !important ; margin-right : 0 !important ; max-height : 100% !important ; width : 100% ; height : 100% ; } . featherlight . featherlight-inner { width : 100% ; height : 100% ; } . featherlight . featherlight-close-icon { top : 90% !important ; left : 30px !important ; line-height : 50px !important ; width : 50px !important ; font-size : 28px ; background-color : crimson !important ; color : #fff !important ; border-radius : 50% ; } 이런식으로 강의 내용에서 items에 p랑 span만 추가로 더 넣어준 상태로 만들고 featherlight를 추가 했는데 계속 실행이 되지 않았습니다. 제 생각에는 썸네일에 마우스를 올리면 커서가 바뀌지 않아 a태그가 선택되지 않는 상태인거 같습니다. 그래서 z-index도 추가해보고 postion값도 변경해봤는데도 실행이 되지 않아서 문의 드립니다. 어떤 부분을 수정하면 제대로 동작할지 한번 봐주시면 정말 감사하겠습니다.
- a태그
- featherlight
- flex
- HTML/CSS
- sass