묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결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값도 변경해봤는데도 실행이 되지 않아서 문의 드립니다. 어떤 부분을 수정하면 제대로 동작할지 한번 봐주시면 정말 감사하겠습니다.
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
매개변수 문자열 없는 url 링크 구별 방법
안녕하세요 강의를 참고하며 현재 개인 프로젝트 웹 사이트를 제작하고 있는 수강생입니다. 다름이 아니라 제작하다가 일주일동안 정말 해결 안 되는 난제가 있어서 질문 드립니다.. 도와주세요 ㅠㅠ a 태그를 이용해서 해당 링크로 이동하는 부분을 작업하고 있는데 그 url이 매개변수 변화가 없어서 어떻게 작업을 해야 될 지 모르겠습니다. 해당 url은 https://www.g2b.go.kr:8092/sm/ma/mn/SMMAMnF.do 나라장터 종합쇼핑몰 링크인데요, 검색해보시면 확인하실 수 있겠지만 검색결과에 따라 url이 변화되지 않고 쭉 저 url 그대로입니다.. 저는 (예를들어) 간판이 검색 결과로 뜨는 url로 바로 이동할 수 있게 하고 싶은데 매개변수 변화가 없다보니 저 url 그대로 a 태그에 넣게 되니까 페이지 이동하면 간판 검색 결과 페이지가 아닌 나라장터 종합쇼핑몰 메인 화면이 나오더라고요.. 어떻게 해야 제가 원하는 값을 검색하여 결과가 나온 페이지로 나올 수 있게 url을 작업할 수 있을까요 url에 어떤 파라미터, 매개변수 코딩을 해야 되는지 알려주세요 ㅠㅠ + location.search해도 빈 문자열이 나옵니다. + 전체 커뮤니티에 올렸는데 타강의 수강생도 많은 만큼 바로 해결이 되지 않아 해당 강의 커뮤니티로 문의드려요 ㅠㅠ 강사님 도와주세요..!
-
미해결
매개변수 문자열 없는 url 링크 구별 방법
안녕하세요 현재 개인 프로젝트 웹 사이트를 제작하다가 일주일동안 정말 해결 안 되는 난제가 있어서 질문 드립니다.. 도와주세요 ㅠㅠ a 태그를 이용해서 해당 링크로 이동하는 부분을 작업하고 있는데 그 url이 매개변수 변화가 없어서 어떻게 작업을 해야 될 지 모르겠습니다. 해당 url은 https://www.g2b.go.kr:8092/sm/ma/mn/SMMAMnF.do 나라장터 종합쇼핑몰 링크인데요, 검색해보시면 확인하실 수 있겠지만 검색결과에 따라 url이 변화되지 않고 쭉 저 url 그대로입니다.. 저는 (예를들어) 간판이 검색 결과로 뜨는 url로 바로 이동할 수 있게 하고 싶은데 매개변수 변화가 없다보니 저 url 그대로 a 태그에 넣게 되니까 페이지 이동하면 간판 검색 결과 페이지가 아닌 나라장터 종합쇼핑몰 메인 화면이 나오더라고요.. 어떻게 해야 제가 원하는 값을 검색하여 결과가 나온 페이지로 나올 수 있게 url을 작업할 수 있을까요 url에 어떤 파라미터, 매개변수 코딩을 해야 되는지 알려주세요 ㅠㅠ + location.search해도 빈 문자열이 나옵니다.
