56,100원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
x표시
안녕하세요! 선생님! 버튼을 클릭했을때, 닫기 버튼이 slidebar 바깥에 나오게 하기 위해, label에 position absolute 를 주시고, input[id=trigger]:checked + label {left:250px;} 로 주셨는데요! 저는 label에 따로 absolute를 주지않고, input[id=trigger]:checked + label {left:250px;} 값만 넣어도 잘 움직이더라구요~ label에 따로 absolute를 주신 이유가 궁금합니다!
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
checkbox, radio 버튼 - label 작동 안됨
save-forgot-login클래스의 checkbox를 작동시킬 때, label을 클릭하면 작동했다가 원래 상태로 돌아가게 되네요. 그리고 체크박스 이미지 부분은 클릭할 때 작동 자체가 안되네요.. (input 의 display:block을 해제하고 클릭해보면 제대로 작동됨) 이유가 뭔지 알고싶습니다. ( receive-email-login 클래스의 radio부분도 마찬가지로, 작동했다가 원래 상태로 바로 돌아갑니다 ㅠ) [ HTML ] <section> <form action="" class="login"> <button class="container"> <h1> Login Accounts </h1> <div class="user-login"> <!-- 이것이 로그인 뿐만 아니라, 이외에 등등 많이 사용될 수 있음. 따라서 재활용을 위해 class이름을 field로 저장해놓는 것 좋음 --> <span class="field"> User email <input type="email" class="email" placeholder="Type your email"> </span> <span class="field"> User Password <input type="password" class="password" placeholder="Type your password"> </span> </div> <div class="save-forgot-login"> <label for="save-email"><input type="checkbox" id="save-email" checked><em></em> Save your email </label> <a href="#none">forgot password? </a> </div> <div class="receive-email-login"> <span>Would you like to receive event emails?</span> <!-- checkbox가 아니라,radio임. --> <label><input type="radio" name="event" checked><em></em> Yes </label> <label><input type="radio" name="event"><em></em> No</label> </div> <input type="button" class="login-btn" value="LOGIN"> <div class="or-login"> Or Login using <div class="sns-login-icon"> <a href="#none"><i class="xi-google"></i></a> <a href="#none"><i class="xi-facebook"></i></a> <a href="#none"><i class="xi-naver"></i></a> <a href="#none"><i class="xi-kakaotalk"></i></a> </div> </div> <div class="signup-info"> <span>Have not account yet?</span> <a href="#none">SIGN UP</a> </div> </div> </form> </section> [ CSS ] /* font-family: 'Noto Sans KR', sans-serif */ /* Montserrat */ /* Fredoka */ /* Source Sans Pro */ @import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@300;400;500;600;700&family=Montserrat:wght@400;500&family=Noto+Sans+KR:wght@100;300;400;500&family=Source+Sans+Pro:wght@200;300;400&display=swap'); /* XEION CDN */ @import url('http://cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css'); /* Fontawesome 4.7 */ @import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); body{ margin:0; width: 100%; height: 100vh; color: #222; line-height: 1.5em; font-weight: 300; display: flex; justify-content: center; align-items: center; text-align: center; background: url("../[Final]-CSS 섹션 UI 디자인 - 커스텀 체크박스 로그인 폼/images/background.png") no-repeat center center; background-size: cover; } a{ text-decoration: none; color: #222; text-align: center; } *{ box-sizing: border-box; font-family: 'Noto Sans KR', sans-serif; } h1,h2,h3,h4,h5,h6{ margin:0; } /* input, button에 기본적으로 outline없애주기 */ input, button{ outline:none; } section{} /* container */ .container{ width: 420px; background-color: #fff; border-radius: 10px; padding:50px; font-size: 14px; border:none; box-shadow: 0 0 20px rgba(0, 0, 0, 0.155); } /* container heading */ .container h1{ font-size: 40px; } /* user-login */ .user-login{ text-align: left; margin-top:30px; } .user-login .field{ display: block; margin-top:20px; font-family: Fredoka; font-weight: 500; } input[type=email], input[type=password]{ display: block; border:none; margin-top:5px; width: 100%; padding:7px; border-bottom:1px solid #ccc; position: relative; padding-left:30px; } /* input 앞에 이미지 넣는 방법 */ input[type=email]{ background:url("../[Final]-CSS 섹션 UI 디자인 - 커스텀 체크박스 로그인 폼/images/icon-user.png") no-repeat center left 3px; } input[type=password]{ background:url("../[Final]-CSS 섹션 UI 디자인 - 커스텀 체크박스 로그인 폼/images/icon-password.png") no-repeat center left 3px; } input[type=email]::placeholder, input[type=password]::placeholder{ color: #aaa; transition: 0.35s; visibility: visible; } input[type=email]:focus::placeholder, input[type=password]:focus::placeholder{ opacity: 0; /* 완벽하게 하려면 visibility를 넣어주는 것이 좋지만, 꼭 넣어줄 필요는 없음. */ visibility: hidden; } /* save-forgot-login */ .save-forgot-login{ margin:30px 0; overflow: hidden; } .save-forgot-login label{ float: left; } .save-forgot-login input[id=save-email]{ display: none; } .save-forgot-login label{ cursor: pointer; } /* 인접해있는 em을 선택한다 (어디에 인접해있는 것인지를 명시할 필요 존재) */ .save-forgot-login input[id=save-email] + em{ background: url("../[Final]-CSS 섹션 UI 디자인 - 커스텀 체크박스 로그인 폼/images/icon-checkbox.png") no-repeat; display: inline-block; width: 18px; height: 18px; background-position: left center; vertical-align: middle; margin-top: -2px; margin-right: 5px; } .save-forgot-login input[id=save-email]:checked + em{ background-position: right center; } .save-forgot-login a{ float: right; } /* receive-email-login */ .receive-email-login{} .receive-email-login span{ display: block; margin-bottom: 10px; } /* .receive-email-login input[type=radio]{display: none;} */ .receive-email-login label{ margin:7px; } /* .rdo-yes em, .rdo-no em{ display: inline-block; width: 18px; height: 18px; background-position:left center; vertical-align: middle; margin-right: 5px; background-image: ("../[Final]-CSS 섹션 UI 디자인 - 커스텀 체크박스 로그인 폼/images/icon-radio.png"); } */ /* .rdo-yes.active em, .rdo-no.active em{ background-position: right center; } */ input[name=event]{ display: none; } input[name=event] + em{ background: url("../[Final]-CSS 섹션 UI 디자인 - 커스텀 체크박스 로그인 폼/images/icon-radio.png") no-repeat; background-position: left center; width: 18px; height: 18px; display: inline-block; margin-right: 5px; transform: translateY(3px); z-index: 1; } input[name=event]:checked + em{ background-position: right center; } /* login-btn */ .login-btn{ width: 270px; padding:10px; background: radial-gradient(circle 248px at center, #16d9e3 0%, #30c7ec 47%, #46aef7 100%); color: #fff; border-radius: 20px; margin: 20px; border:none; cursor: pointer; } /* or-login */ .or-login{ font-size: 14px; } .sns-login-icon{ padding-top:5px; padding-bottom: 10px; } .sns-login-icon a{ display: inline-block; width: 40px; height: 40px; border-radius: 50%; background-color: gray; margin:5px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.155); transition: 0.5s; } .sns-login-icon a:nth-child(1){ background-color: #dd4b39;} .sns-login-icon a:nth-child(2){ background-color: #3b5999;} .sns-login-icon a:nth-child(3){ background-color: #25D366;} .sns-login-icon a:nth-child(4){ background-color: #ffdc00;} .sns-login-icon a i{ font-size: 25px; line-height: 40px; color: #fff; } .sns-login-icon a:hover{ transform: rotateY(360deg); } /* signup-info */ .signup-info{} .signup-info span{ /* a태그에 display:block을 하면, 클릭 가능한 크기가 block만큼 나오게 됨*/ display: block; } .signup-info a{ font-weight: 500; } .signup-info a:hover{ text-decoration: underline; }
- 미해결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해도 빈 문자열이 나옵니다. + 전체 커뮤니티에 올렸는데 타강의 수강생도 많은 만큼 바로 해결이 되지 않아 해당 강의 커뮤니티로 문의드려요 ㅠㅠ 강사님 도와주세요..!
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
-webkit-text-stroke 밑줄표시
-webkit-text-stroke를 쓰면 글자끝마다 이상한 무늬가 추가됩니다. -webkit-text-stroke를 쓰면 밑줄표시로 쓰지말라는 표시가 나오는데 이제 더이상 안쓰는건가요?? html소스코드 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS호버이펙트 아웃라인 텍스트</title> <link rel="stylesheet" href="style.css"> </head> <body> <a class="btn" href="#none" data-text="Portfolio">Portfolio</a> </body> </html> css 소스코드 @import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500&display=swap'); body { font-family: 'Montserrat', sans-serif; background-color: #000; color: #fff; height: 100vh; margin: 0; display: flex; justify-content: center; align-items: center; } .btn{ color: transparent; text-decoration: none; font-size: 10em; font-weight: 600; -webkit-text-stroke: 1px red; }
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
faq 탭 콘텐츠 질문있습니다.
faq 탭 콘텐츠 질문있는데요 faq-title을 눌렀을때 자신을 닫는 코드는 어떻게 작성해야되나요? <script> $('.faq-title').click(function(){ $(this).addClass('active') $(this).siblings('.faq-title').removeClass('active') $(this).next().stop().slideDown() $(this).siblings('.faq-title').next().stop().slideUp() }) </script>
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
넷플릭스 싸이트 포트폴리오 싸이트로 해도 괜찮을까요?
넷플릭스 싸이트를 포트폴리오 싸이트로 만들고싶은데 제가 넷플릭스 싸이트로 레이아웃 부분이랑 더 추가해서 포트폴리오 싸이트로 써도 괜찮을까요?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
tv이미지안의 <video>태그 부분
넷플릭스 반응형 웹페이지 제작 중 질문드립니다. 실제 넷플릭스 공식홈페이지처럼 TV 이미지 안에 영상이 나오는 듯한 효과를 똑같이 구현하고 싶습니다. 넷플릭스 공식 홈페이지에서 개발자도구로(F12) 확인해서 코드를 따라했는데요, 웹페이지 기준으로는 오류없이 딱 맞게 나옵니다. 하지만, 반응형 도구로 보니 위치나 크기가 자꾸만 어긋나는 오류가 있습니다. 혹시 이부분은 어떻게 해야하는지 몰라서 코드부분 남기니 확인부탁드립니다.. (▼) 원하는 부분 : 반응형도구로 봐도 <video> 부분의 위치 및 크기가 딱 맞게 구현. 넷플릭스 url https://www.netflix.com/kr-en/ img { max-width: 100%; height: auto; border: 0; } .animation-card.watchOnDevice .our-story-card-img, .animation-card.watchOnTv .our-story-card-img { position: relative; z-index: 2; } .animation-card.watchOnTv .our-story-card-animation { width: 100%; height: 100%; max-width: 73%; max-height: 54%; position: absolute; top: 46%; left: 50%; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } .animation-card.watchOnDevice .our-story-card-video, .animation-card.watchOnTv .our-story-card-video { width: 100%; height: 100%; } (▽) 코드 및 오류 : 실제로 코드를 똑같이 퍼블리싱했을 때, 반응형도구로 비디오의 위치가 어긋나는 오류 감사합니다~
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
자바스크립트 getElementById, querySelector 구문 질문있습니다.
자바스크립트 선택자중에서 queryselector, getelementbyid 구문 궁금한게 있는데요 id 선택자는 getelementbyid 를 사용하고 queryselector 는 class 선택자를 사용하는건데 구글링해봐도 둘의 차이점을 정확히 어떤 차이인지는 잘 이해가 안가는데 id 선택자는 getelementbyid, queryselector 는 class 선택자로 무조건 사용하는건가요?
- 해결됨HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
다크모드의 dark 가상요소
CSS 섹션 UI 디자인- 개인프로필 카드 (다크모드)-05 수강중, 질문드립니다. $('.btn-mode').click(function(){ $('.profile').toggleClass('dark'); }) 라이트모드/다크모드.html을 복제하여 .profile.dark요소를 지우고, .profile 만 있는 상태인데요. 결국엔 'dark'라는 것은 html에 존재하지 않지만 가상의 요소를 선택하는 것인, '가상요소'인가요?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
저작권 관련 문의 입니다.
-HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)-[완강] -HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)-[수강 중] -중상급 퍼블리싱을 위한 CSS3의 모든 것-[구매완료] -반응형 웹사이트 포트폴리오(Architecture Agency)-[구매완료] -반응형 웹사이트 포트폴리오(App Official Landing Website)-[구매완료] -플렉스(Flex) 반응형 웹사이트 포트폴리오(The World's Best Cities)-[구매완료] 선생님 안녕하세요. 저는 선생님 강의를 총 6개 구매하여 순차적으로 수강하고 있는 백엔드 개발자 입니다. 많은 개발자들이 본인의 정리를 위해서, 또는 보여짐을 위해서 블로그나 깃허브를 통해서 공부한 것들을 정리하거나, 게시하는 활동들을 하고 있습니다. 한 챕터 혹은 한 강 듣고 나오는 결과물을 개인적 공간에 게시 하여도 되는지 궁금합니다. (강의정리가 아닌, 단순 결과물) 제가 궁금한 부분을 검색을 해 보았으나 찾기 힘들어 이렇게 질문을 드립니다. 예를 들자면, 강의를 들으면서 만들었던 이런 결과물을 게시하여도 되는지 입니다. 감사합니다. 좋은 하루 되세요. ^^
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
코딩문의
강사님, 유익하게 수업 잘 듣고있습니다! 다른게 아니라 코딩을 할 때 헤더 부분이나 본문에 들어가는 텍스트들을 사용자가 설정하여 바꾸어 설정하도록 만드는 페이지를 짜야하는데 이럴때는 어떤 코드를 이용하여 짜야할지 모르겠어서요 form태그는 아닌것같고 헤더부분은 li로 묶어서 그냥 p태그로 넣어놓으면 개발할때 변경가능하게 되는건지,,, 문의드립니다!
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
넷플릭스 싸이트 만들기 강의 질문있습니다.
안녕하세요~ 실전 반응형 웹사이트 넷플릭스 만들기 강의 질문있는데요 넷플릭스싸이트 콘텐츠중에 순수css로 만드는 어코디언 faq 클래스 코드중에 메뉴가 다시 닫히는 코드설명은 없는거 같아서 궁금해서 질문드립니다! 여기 코드부분입니다.
- 해결됨HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
스크린 마다 화면 크기 질문드려요
제가 포폴 준비하면서 질문을 너무 많이드리는거 같아서 죄송해요 ..ㅠㅠㅠ 지금 듀얼모니터로 작업하고 있는데 작업환경을 메인 창 크기 80% = 서브 창 크기 100% 이렇게 맞춰야지 비율이 얼추 맞더라구요 ㅠㅠ 포폴 제출했을때도 비율이 틀어질까봐 걱정인데.. 이게 환경설정 문제일까요..? 참고로 15인치 노트북으로 작업중이고, 서브는 포터블 모니터입니다 서브 창 크기 100%, 메인 창 크기 80% 메인 100%
- 해결됨HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
tab 메뉴 오류 질문 드립니다
전에 한번 질문드렸었는데 답변을 못받아서 다시 질문드립니다..! 제작했을 당시에는 탭 메뉴 연동이 문제가 없었는데 포폴 제작하려고 다시 확인해보니 안되더라구요 ㅠㅠ wow.js도 되다가 안되는거 같아요 ㅠㅠ 확인해주실 수 있으실까요 ㅠㅠ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HAY | INSPIRATION</title> <link rel="icon" href="img/hay-favicon.ico"> <!-- jQuery CDN --> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <!-- Slick Slider --> <link rel="stylesheet" href="js/slick/slick-theme.css"> <link rel="stylesheet" href="js/slick/slick.css"> <script src="js/slick/slick.min.js"></script> <!-- Parallax Scroll --> <script src="js/jquery.parallax-scroll.min.js"></script> <!-- Smooth Scrolling --> <script src="js/jquery.scrollTo.min.js"></script> <!-- XEICON --> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css"> <!-- Wow js --> <script src="js/wow.min.js"></script> <!-- Custom Js & Css --> <script src="custom.js"></script> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="responsive.css"> </head> <body> <div class="inspiration-container"> <!-- Header --> <header> <div class="header-inner"> <div class="logo"> <a href="index.html"><img src="img/logo-hay.png"></a> </div> <div class="gnb"> <ul class="menu"> <li> <a href="about.html" target="_parent"> <div class="menu-content"> <h2>About</h2> </div> </a> </li> <li> <a href="product.html" target="_parent"> <div class="menu-content"> <h2>Products</h2> </div> </a> </li> <li> <a href="inspiration.html" target="_parent"> <div class="menu-content"> <h2>Inspiration</h2> </div> </a> </li> <li> <a href="contact.html" target="_parent"> <div class="menu-content"> <h2>Contact</h2> </div> </a> </li> </ul> </div> <div class="trigger"> <span></span> <span></span> <span></span> </div> </div> </header> <!-- Section : inspiration-visual --> <section class="inspiration-visual bg-holder" data-width="1024" data-height="768"> <div class="inspiration-heading"> <h1>INSPIRATION</h1> </div> </section> <!-- Sub menu list --> <div class="sub-menu"> <ul class="sub-menu-item"> <li data-alt="tab1" class="active"><a href="#">sofa</a></li> <li data-alt="tab2"><a href="#">bathroom</a></li> <li data-alt="tab3"><a href="#">bedroom</a></li> </ul> </div> <!-- Section : inspiration-sofa-collection --> <section class="sofa-collection tabs active" id="tab1"> <div class="sofa-inner"> <!-- Heading --> <div class="sofa-heading utd wow"> <h2>THE HAY SOFA COLLECTION</h2> <hr class="bar"> </div> <!-- Quilton --> <div class="sofa-content"> <div class="sofa-left ltr wow"> <div class="sofa-big" onclick="location.href='#none'"> <img src="img/inspiration-sofa-01.png"> <div class="sofa-headline"> <h3>QUILTON 3 SEATER</h3> <p> Its numerous upholstery choices include mono, duo, or with a black contrasting platform, with the finely-detailed quilted upholstery encapsulating the softness and volume of the foam and wadding seats and creating exceptional comfort. Quilton takes sofa design to a new level of versatility that makes it suitable for a wide range of domestic and public spaces. <small class="inview"><ins>Quilton Duo Comb 19 Left</ins> / <ins>Slit High Table</ins></small> </p> <div class="coll-btn"> <a href="#none" class="find-dealer">FIND DEALER</a> </div> </div> </div> </div> <div class="sofa-right rtl wow"> <div class="sofa-items-up"> <div class="sofa-thum" onclick="location.href='#none'"> <div class="sofa-photo"> <img src="img/inspiration-sofa-11.png"> <span class="badge best">Best</span> </div> <p><ins>Quilton Duo Comb 19 Left</ins> / <ins>Slit High Table</ins></p> </div> <div class="sofa-thum" onclick="location.href='#none'"> <div class="sofa-photo"> <img src="img/inspiration-sofa-12.png"> </div> <p><ins>Quilton Ottoman</ins></p> </div> </div> <div class="sofa-items-down"> <div class="sofa-thum" onclick="location.href='#none'"> <div class="sofa-photo"> <img src="img/inspiration-sofa-04.png"> <span class="badge new">New</span> </div> <p><ins>Quilton Combination 21 Right</ins> / <ins>Kofi</ins></p> </div> <div class="sofa-thum" onclick="location.href='#none'"> <div class="sofa-photo"> <img src="img/inspiration-sofa-02.png"> </div> <p><ins>Quilton Contrast base Comb 23 Left</ins> / <ins>Kofi</ins></p> </div> </div> </div> </div> <div class="coll-btn utd wow"> <a href="#none" class="view-more">View more</a> </div> <div class="sofa-video"> <video class="video" width="800" controls> <source src="videos/hay-Mags-Soft-Low-3-Seater-Sofa.mp4" type=""> </video> </div> <div class="section-text utd wow"> <h4>QUILTON</h4> <p> Described by the designers as a ‘quilted landscape sofa system’, Quilton serves as a central platform for living, working, socializing and relaxing. Offering a wide assortment of different modules, Doshi Levien’s multi-functional sofa provides the flexibility of a modular system with generous dimensions and sculpted forms. Its numerous upholstery choices include mono, duo, or with a black contrasting platform, with the finely-detailed quilted upholstery encapsulating the softness and volume of the foam and wadding seats and creating exceptional comfort. Quilton takes sofa design to a new level of versatility that makes it suitable for a wide range of domestic and public spaces. </p> </div> <!-- MAGS --> <div class="sofa-content flex-order"> <div class="sofa-right ltr wow"> <div class="sofa-items-up"> <div class="sofa-thum" onclick="location.href='#none'"> <div class="sofa-photo"> <img src="img/inspiration-sofa-05.png"> <span class="badge new">new</span> </div> <p><ins>MAGS 3 SEATER COMBINATION 1</ins> / <ins>DLM</ins></p> </div> <div class="sofa-thum" onclick="location.href='#none'"> <div class="sofa-photo"> <img src="img/inspiration-sofa-06.png"> <span class="badge new">new</span> </div> <p style="font-size: 14px"><ins>MAGS 2,5 SEATER COMBINATION 3</ins></p> </div> </div> <div class="sofa-items-down"> <div class="sofa-thum" onclick="location.href='#none'"> <div class="sofa-photo"> <img src="img/inspiration-sofa-07.png"> </div> <p><ins>Mags 3 Seater comb 1</ins> / <ins>Pouf</ins></p> </div> <div class="sofa-thum" onclick="location.href='#none'"> <div class="sofa-photo"> <img src="img/inspiration-sofa-08.png"> <span class="badge best">best</span> </div> <p><ins>Mags Sofa 3 seater comb 4</ins> / <ins>AAL 83</ins></p> </div> </div> </div> <div class="sofa-left rtl wow"> <div class="sofa-big" onclick="location.href='#none'"> <img src="img/inspiration-sofa-14.png"> <div class="sofa-headline"> <h3>MAGS 3 SEATER COMBINATION 1</h3> <p> Designed with maximum comfort and minimum details, the Mags sofa combines strong aesthetics with timelessness to create a HAY classic. Keeping superior comfort and quality in mind, Mags is built using a solid construction with durable, high-density foam and interior padding for optimal longevity. The low frame has a distinctly lounge feel, which is reinforced by the deep seats and results in an open, welcoming space. <small class="inview"> <ins>MAGS SOFA</ins> / <ins>RAW RUG NO. 2</ins> / <ins>TULOU COFFEE TABLE</ins> / <ins>MOHAIR BLANKET</ins> / <ins>FIFTY-FIFTY FLOOR LAMP</ins> </small> </p> <div class="coll-btn"> <a href="#none" class="find-dealer">FIND DEALER</a> </div> </div> </div> </div> </div> <div class="coll-btn utd wow"> <a href="#none" class="view-more">View more</a> </div> <div class="section-text second utd wow"> <h4>MAGS</h4> <p> Designed with maximum comfort and minimum details, the Mags sofa ensures what lies beyond its strong aesthetic presence has an equally lasting impact. The wide range of functional modular units mean the sofa can be fully customised with chaise longue, corner modules or additional seats to suit any room or purpose, while the high quality upholstery options enables the sofa to find its own personality. </p> </div> </div> </section> <!-- Section : inspiration-bath-collection --> <section class="bath-collection tabs" id="tab2"> <div class="sofa-inner bath-inner"> <!-- Heading --> <div class="sofa-heading bath-heading utd wow"> <h2>BATHROOM INSPIRATION</h2> <hr class="bar"> </div> <!-- Bath-container--> <div class="sofa-video bath-video"> <video class="video" width="800" controls> <source src="videos/hay-Waffle-Bathrobe-Waffle-Slippers.mp4" type=""> </video> </div> <div class="section-text utd wow"> <p> These days, investing a little love and care in the domestic spaces we often neglect -- bathroom, we're looking at you! -- can make a world of difference. That's why we've created a range of fresh new products that are sure to brighten up that underappreciated space, from pretty and practical storage solutions like Basket, now available in new Spring colours, to the brilliant Chim Chim Scent Diffuser, which can make even the most modest of washrooms feel more like a spa. </p> </div> <div class="bath-content"> <div class="bath-items"> <div class="bath-top"> <div class="bath-thum utd wow" onclick="location.href='#none'"> <div class="bath-photo"> <img src="img/inspiration-bath-01.jpg"> <span class="badge best">Best</span> </div> <p><ins>Basket</ins></p> </div> <div class="bath-thum utd wow" data-wow-delay="0.25s" onclick="location.href='#none'"> <div class="bath-photo"> <img src="img/inspiration-bath-02.jpg"> </div> <p><ins>Waffle Bathrobe Sky Blue</ins></p> </div> </div> <div class="bath-down utd wow"> <div class="bath-thum" onclick="location.href='#none'"> <div class="bath-photo"> <img src="img/inspiration-bath-03.jpg"> <span class="badge new">New</span> </div> <p><ins>Chim Chim Scent Diffuser</ins></p> </div> <div class="bath-thum utd wow" data-wow-delay="0.25s" onclick="location.href='#none'"> <div class="bath-photo"> <img src="img/inspiration-bath-08.jpg"> </div> <p><ins>Colour Crate / Frotté Towel</ins></p> </div> <div class="bath-thum utd wow" data-wow-delay="0.5s" onclick="location.href='#none'"> <div class="bath-photo"> <img src="img/inspiration-bath-07.jpg"> </div> <p><ins>Waffle Slippers / Giant Waffle Bath Towel</ins></p> </div> </div> </div> </div> <div class="coll-btn utd wow"> <a href="#none" class="view-more">View more</a> </div> </div> </section> <!-- Section : inspiration-bed-collection --> <section class="bed-collection tabs" id="tab3"> <div class="sofa-inner bath-inner bed-inner"> <!-- Heading --> <div class="sofa-heading bath-heading bed-inner utd wow"> <h2>BEDROOM INSPIRATION</h2> <hr class="bar"> </div> <!-- bed-container--> <div class="bath-content bed-content"> <div class="bath-items bed-items"> <div class="bath-top bed-top utd"> <div class="bath-thum bed-thum utd wow" data-wow-delay="0.25s" onclick="location.href='#none'"> <div class="bed-photo"> <img src="img/inspiration-bed-05.jpg"> <span class="badge best">Best</span> </div> <p><ins>Bias Quilt / Slit Table / Turn On Lamp</ins></p> </div> <div class="bath-thum bed-thum utd wow" data-wow-delay="0.5s" onclick="location.href='#none'"> <div class="bed-photo"> <img src="img/inspiration-bed-04.jpg"> <span class="badge new">New</span> </div> <p><ins>Pao Steel Pendant / Ellipse Tray / Tray Table</ins></p> </div> </div> <div class="section-text utd wow"> <p> A peaceful, productive day starts in the bedroom, so it’s the perfect place to invest some attention and care.</p> <p> Whether you’re looking for an elegant bedspread like Kite, Bias, or Megadot, a cozy bathrope to warm up on cold mornings, or any kind of accessory – from storage to table lamps – HAY has a little bit of everything you might need to make your bedroom the sanctuary it should be. </p> </div> <div class="bath-down bed-down"> <div class="bath-thum bed-thum utd wow" onclick="location.href='#none'"> <div class="bed-photo"> <img src="img/inspiration-bed-07.jpg"> </div> <p><ins>Matin Table Lamp / Duo Bed Linen / Tray Table </ins></p> </div> <div class="bath-thum bed-thum utd wow" data-wow-delay="0.25s" onclick="location.href='#none'"> <div class="bed-photo"> <img src="img/inspiration-bed-09.jpg"> </div> <p><ins>Knit</ins></p> </div> <div class="bath-thum bed-thum utd wow" data-wow-delay="0.5s" onclick="location.href='#none'"> <div class="bed-photo"> <img src="img/inspiration-bed-10.jpg"> </div> <p><ins>Soft Coat Hanger</ins></p> </div> </div> <div class="bath-down bed-down"> <div class="bath-thum bed-thum utd wow" data-wow-delay="0.25s" onclick="location.href='#none'"> <div class="bed-photo"> <img src="img/inspiration-bed-08.jpg"> </div> <p><ins>Chim Chim Scent Diffuser / Tray Table</ins></p> </div> <div class="bath-thum bed-thum utd wow" data-wow-delay="0.5s" onclick="location.href='#none'"> <div class="bed-photo"> <img src="img/inspiration-bed-06.jpg"> </div> <p><ins>Outline Cushion / Crinkle Bedspread</ins></p> </div> </div> </div> </div> <div class="coll-btn utd wow"> <a href="#none" class="view-more">View more</a> </div> </div> </section> <!-- Footer --> <footer> <div class="footer-inner"> <div class="copyright"> <img src="img/logo-hay.png" alt=""> <span>Copyrightⓒ2021.HAY.All rights reserved.</span> </div> <div class="sns"> <a href="#none">facebook</a> <a href="#none">instagram</a> <a href="#none">linkedin</a> <a href="#none">mail</a> <a href="#none">pinterest</a> </div> <div class="contact-info"> <ul> <li>HAY ApS</li> <li>Havnen 1, 8700 Horsens, Denmark</li> <li>+45 4282 0282</li> </ul> </div> </div> </footer> <!-- Go to top --> <a class="btn-top" href="#"><i class="xi-arrow-up"></i></a> </div> </body></html> /* ######### INSPIRATION ########## */ .inspiration-container { position: relative; } /* Sub menu list */ .sub-menu { width: 100%; background-color: #f9f9f9; } .sub-menu-container {} .sub-menu-item { text-align: center; list-style: none; margin: 0; } .sub-menu-item li { font-size: 20px; display: inline-block; text-transform: uppercase; padding: 80px; } .sub-menu-item li a { color: #000; font-weight: 300; position: relative; padding-bottom: 8px; } .sub-menu-item li a:after { content: ''; position: absolute; display: block; width: 0; height: 2px; background: #000; bottom: 0; transition: 0.35s; left: 50%; transform: translateX(-50%); } .sub-menu-item li a:hover:after { width: 100%; } .sub-menu-item li.active a:after { width: 100%; } .tabs.active { display: block; } /* ######### INSPIRATION / Section : sofa-collection ########## */ .sofa-collection { display: none; background-color: #f9f9f9; } .sofa-inner { width: 90%; margin: auto; padding-top: 0; padding-bottom: 100px; } .sofa-heading { text-align: center; } .sofa-heading h2 { font-size: 60px; font-weight: bold; margin: 0; text-transform: uppercase; } .sofa-heading .bar { display: inline-block; height: 6px; background: #2a3052; margin: 30px 0; border: none; width: 50%; } .sofa-content { overflow: hidden; margin: 50px 0; } .sofa-content > div { float: left; width: 50%; } .sofa-left {} .sofa-big { width: 850px; height: 720px; position: relative; margin: auto; cursor: pointer; } .sofa-big:before { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0, 0, 0, 0.7); transition: 0.5s; } .sofa-big:hover:before { background-color: rgba(0, 0, 0, 0.35); } .sofa-big img { width: inherit; height: inherit; object-fit: cover; } .sofa-headline { position: absolute; width: 75%; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; text-align: center; } .sofa-headline h3 { font-size: 40px; font-weight: 500; } .sofa-headline p { line-height: 1.5em; } .inview { display: block; font-size: 14px; margin: 30px 0 40px; } .find-dealer { background: #000; color: #fff; font-size: 16px; padding: 8px 20px; border: 2px solid #fff; } .coll-btn .view-more { display: block; text-align: center; margin: auto; background: #2a3052; } .coll-btn .view-more:hover { background: #9b392e; } .sofa-right { padding-left: 50px; } .sofa-items-up { margin-bottom: 50px; } .sofa-thum { width: 500px; height: 300px; cursor: pointer; } .sofa-items-up > div, .sofa-items-down > div { display: inline-block; } .sofa-thum:hover img { transform: scale(1.1); } .sofa-thum:first-child { margin-right: 20px; } .sofa-thum:last-child { width: 250px; } .sofa-items-down .sofa-thum:first-child { width: 300px; } .sofa-items-down .sofa-thum:last-child { width: 450px; height: 300px; } .sofa-photo { display: inline-block; width: inherit; height: inherit; position: relative; overflow: hidden; } .sofa-photo img { display: block; width: inherit; height: inherit; transition: 0.5s; } .sofa-photo span {} .sofa-thum p { margin-top: 0; font-size: 16px; text-align: center; } .badge { position: absolute; color: #fff; top: 0; left: 0; font-size: 12px; padding: 0 5px; } .badge.best { background: #333; } .badge.new { background: #9b392e; } /* Video */ .sofa-video { margin-top: 200px; text-align: center; position: relative; } .sofa-video:before { content: ',,'; font-size: 400px; position: absolute; transform: rotate(180deg); top: 60px; left: 128px; color: rgba(132, 132, 132, 0.6); } .section-text { text-align: center; padding: 160px; margin-bottom: 80px; } .section-text h4 { font-size: 30px; font-weight: 500; } .section-text p { line-height: 1.7em; position: relative; } .section-text p:after { content: ',,'; font-size: 400px; position: absolute; top: 100px; right: -89px; color: rgba(132, 132, 132, 0.6); } .section-text.second p:before { content: ',,'; font-size: 400px; position: absolute; transform: rotate(180deg); top: 10px; left: -100px; color: rgba(132, 132, 132, 0.6); } /* ######### INSPIRATION / Section : bath-collection ########## */ .bath-collection { display: none; background-color: #f9f9f9; } .bath-video { margin-top: 100px; } .bath-video:before { display: none; } .bath-inner .section-text { margin-top: 80px; } .bath-inner .section-text p:before { content: ',,'; font-size: 400px; position: absolute; transform: rotate(180deg); top: 10px; left: -100px; color: rgba(132, 132, 132, 0.6); } .bath-content {} .bath-items { overflow: hidden; } .bath-items > div { text-align: center; } .bath-top {} .bath-down {} .bath-top > div, .bath-down > div { display: inline-block; } .bath-thum { padding: 20px; cursor: pointer; } .bath-thum:hover img { transform: scale(1.1); } .bath-photo { display: inline-block; width: 100%; height: 430px; position: relative; overflow: hidden; } .bath-photo img { display: block; width: inherit; height: inherit; transition: 0.5s; } .bath-inner .coll-btn { margin-top: 50px; } /* ######### INSPIRATION / Section : bed-collection ########## */ .bed-collection { display: none; background-color: #f9f9f9; } .bed-content { margin-top: 80px; } .bed-items {} .bed-items .section-text p:after { top: 0px; } .bed-items .section-text p:first-child { margin-bottom: 50px; } .bed-items .section-text p:first-child:before, .bed-items .section-text p:first-child:after { display: none; } .bed-photo { display: inline-block; width: 100%; height: 500px; position: relative; overflow: hidden; } .bed-photo img { display: block; width: inherit; height: inherit; transition: 0.5s; } $(function () { // Trigger $('.trigger').click(function () { $(this).toggleClass('active') $('.gnb').toggleClass('active') }) $('.menu a').click(function () { $('.gnb').removeClass('active') $('.trigger').removeClass('active') }) // Change CSS with Scroll $(window).scroll(function () { if ($(window).scrollTop() > 50) { $('header, .btn-top').addClass('active') } else { $('header, .btn-top').removeClass('active') } }) // Slick Slider - Home $('.slideshow').slick({ infinite: true, dots: false, autoplay: true, autoplaySpeed: 2000, fade: true, speed: 1000, pauseOnHover: false }) // TypeIt - Welcome $('#typing').typeIt({ strings: [""], speed: 120, autoStart: true, breakLines: false, }) // Parallax Scroll - visual $('.bg-holder').parallaxScroll({ friction: 0.2, direction: "vertical" }); // inspiration tab menu $('.sub-menu-item li').click(function(){ $(this).addClass('active') $(this).siblings().removeClass('active') var tab = $(this).attr('data-alt') $('.tabs').removeClass('active') $('#' + tab).addClass('active') }); // Wow Scroll Reveal Animation wow = new WOW({ boxClass: 'wow', // default offset: 150, // default mobile: true, // default }) wow.init(); // Smooth Scrolling - inspiration $('.sub-menu-item li').click(function(e){ $.scrollTo(this.hash || 500, 500) }) }); $(function () { // faq-accordion - contact $('.faq-desc').eq(0).show() $('.faq-title').click(function () { $(this).next().stop().slideDown() $(this).parent().siblings('.faq-item').children('.faq-desc').stop().slideUp() $(this).parent().addClass('active') $(this).parent().siblings('.faq-item').removeClass('active') }); });
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
a:after 가상 클래스 active 활성화/off 방법 중
안녕하세요, 선생님! 강의 잘 듣고 있습니다. a:after 가상 클래스 태그에서 active시킬 수 있는 방법을 두 가지로 알려주셨는데, 1. opacity와 pointer-events로 조정 2. visibility: visible/hidden 으로 조정 1번의 경우로 했을 시, 앵커 포인트까지 넣었을 때, a:after 가상 클래스가 오버레이와 맞춰서 나타나고 사라지는데, 2번의 경우로 했을 땐, 가상 클래스가 더 늦게 나타나고 사라집니다. 혹시 이 경우에는 어떻게 해야 맞춰서 active되고 remove되는지 알려주시면 감사하겠습니다! HTML <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>풀스크린 네비게이션 반응형 포트폴리오</title> <link rel="stylesheet" href="풀스크린_네비게이션_반응형_포트폴리오.css"> <script src="/script/jquery-3.4.1.min.js"></script> </head> <!-- 1. HTML 구조만들기(Welcome, Section, Toggle Trigger) 2. CSS 크기조정, 배치하기, 상세 디자인 3. HTML 구조만들기(All Section & Section Content) 4. CSS 크기조정, 배치하기, 상세 디자인 5. 앵커(Anchor) 만들기 6. 네비게이션 클릭 후 슬라이딩되면서 active 클래스 추가(gnb, toggle, body) --> <body> <div class="toggle"> <i class="xi-plus-thin"></i> </div> <div class="overlay"></div> <!-- <a></a>태그로 쓸 경우는 Home이나 Web portfolio의 a태그의 박스 크기 만큼 가버려서 안 예쁨. 글씨의 크기만큼만 가도록 효과를 주기 위한거니까 li같이 간단하게 묶어주면 됨--> <ul class="gnb"> <li><a href="#feature1">Home</a></li> <li><a href="#feature2">About</a></li> <li><a href="#feature3">Graphic Portfolio</a></li> <li><a href="#feature4">Web Portfolio</a></li> <li><a href="#feature5">Contact</a></li> <li><a href="#feature6">Epilogue</a></li> </ul> <div class="container"> <section class="welcome" id="feature1"> <img src="/images/bg-welcome.jpg" alt=""> </section> <div> CSS /* 구글 웹폰트 */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap'); /* Web Fonts : Playfair Display */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&display=swap'); /* font-family: 'Playfair Display', serif; */ /* XEICON */ @import url('http://cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css'); * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: 'Montserrat', sans-serif; color: #222; line-height: 1.6em; font-weight: 300; } a { color: #222; text-decoration: none; } /* Toggle Trigger */ .toggle { position: fixed; top: 20px; left: 20px; cursor: pointer; z-index: 10; } .toggle i { width: 40px; height: 40px; font-size: 30px; color: #fff; background-color: #000; text-align: center; line-height: 40px; border-radius: 50%; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); transition: .5s; } .toggle.active i { background-color: yellowgreen; transform: rotate(315deg); } /* Overlay */ .overlay { position: fixed; background-color: #000; width: 40px; height: 40px; border-radius: 50%; top: 20px; left: 20px; transition: .5s; opacity: 0; z-index: 5; } .overlay.active { transform: scale(130); opacity: 1; } .gnb { position: fixed; list-style: none; top: 50%; left: 50%; transform: translate(-50%, -50%); /* pointer-events: none; */ /* opacity: 0; */ visibility: hidden; z-index: 7; transition: .5s } .gnb.active { /* opacity: 1; */ /* pointer-events: all; */ visibility: visible; } .gnb a { color: #fff; font-family: 'Playfair Display', sans-serif; font-size: 3.5em; line-height: 1.5em; position: relative; padding-right: 10px; margin: 0; padding: 0; } .gnb a:after { content: ''; position: absolute; height: 20px; width: 0; background-color: yellowgreen; left: 0; bottom: 7px; z-index: -1; transition: .5s; } .gnb a:hover:after { width: 100%; } /* Section : Welcome */ section.welcome { /* border: 5px solid red; */ /* basic width:100%라더라도 object-fit: cover;하려면 width: 100%; 명시해줘야 함 */ width: 100%; height: 100vh; } jQuery <script> $('.toggle').click(function () { $('.toggle, .overlay, .gnb').toggleClass('active') }) $('.gnb a').click(function () { $('.toggle, .overlay, .gnb').removeClass('active') }) </script>
- 해결됨HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
모달창 안에 모달창 질문 드립니다!
■ 질문 남기실 때 꼭! 참고해주세요.- 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다. close 버튼이 겹쳐 두번째 X를 누르면 첫번째 모달창 까지 닫혀버립니다..ㅠㅠ 이럴경우 제이쿼리로 실행해야하나요?ㅠㅠㅠ
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
a:before 부분 언더라인 없애는 법
■ 질문 남기실 때 꼭! 참고해주세요.- 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다. html <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>CSS 섹션 UI 디자인 - 폰트어썸 UI</title> <link rel="stylesheet" href="CSS섹션UI디자인_폰트어썸UI.css"> </head> <body> <div class="frame"> <h1>Icons. Easy. Done</h1> <p> Get vector icons and social logos on your website with Font Awesome, the web's most popular icon set and toolkit. </p> <div class="btns"> <a href="#none" class="btn download"><i class="fa fa-download" aria-hidden="true"></i>Download Free</a> <a href="#none" class="btn checkout"><i class="fa fa-trophy" aria-hidden="true"></i>Checkout Pro</a> </div> <div class="links"> <span>Version5.0.8</span> <a href="#none">946 Free Icons</a> <a href="#none">1,535 Pro Icons</a> <a href="#none">Old 4.7.0 Docs</a> </div> </div> </body> </html> CSS /* 구글 웹폰트 */ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500&display=swap'); /* Fontawesome 4.7 */ @import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); body { margin: 0; font-family: 'Noto Sans KR', sans-serif; color: #333; font-size: 18px; line-height: 1.6em; background-color: #f8f8f8; } a { text-decoration: none; color: #333; } /* Font Icon UI Design */ .frame { width: 600px; text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .frame h1 { font-size: 48px; } .frame p { font-size: 20px; color: #aaa; margin-bottom: 30px; } .btns { margin-bottom: 30px; } .btn { border: 1px solid #ccc; padding: 12px; margin: 3px; border-radius: 5px; background-color: #fff; box-shadow: 0 3px 0 #ddd; width: 220px; display: inline-block; font-size: 20px; } .btn.download {} .btn.checkout { background-color: dodgerblue; color: #fff; } .links { font-size: 14px; } .links span { color: #bbb; } .links a { color: dodgerblue; } .links a:before { content: '·'; color: #ccc; margin: 5px; text-decoration: none; } .links a:hover { text-decoration: underline; } 선생님 .links a:before에 링크가 같이 잡히는데 저 부분은 글씨 부분만 text-decoration: underline;되도록 하려면 어떻게 해야할까요? before부분에 text-decoration: none; 줬는데도 같이 잡혀서 여쭤봅니다.
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
프로토타입?! 이먼지 모르겠습니다
시즌1부터 쭉 다듣고 열심히 공부중인 학생입니다 웹사이트 프로토타입(Web Site Prototype) 제작 지금 이부분을 보고있는데 프로토 타입이라는게 먼지모르겠네요 ㅠㅠ 프로토타입으로 웹사이트 제작한다하면 다른타입이 있기때문에 프로토타입이라는 말로 정의를 한 것 같은데 또 다른타입은 어떤것이 있는지 또 그것과 프로토타입은 어떻게다른지 너무궁금합니다
- 해결됨HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
선생님 brackets 오류 질문드립니다 ㅠㅠ
■ 질문 남기실 때 꼭! 참고해주세요.- 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다. 얼마전부터 블라켓츠 실행할때마다 이런 오류창이 뜨는데 혹시 해결방법 아실까요 쌤 ㅠㅠㅠ 테마도 다크모드로 안바뀝니다..ㅠㅠ
- 해결됨HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
안녕하세요? 선생님~!!! hexagon 이렇게 만들면 어떻겠습니까?
안녕하십니까? 선생님 강의로 매우 도움받고 있는 수강생입니다. 제가 hexagon 을 만들어보니 다음과 같이 수정하면 더 멋진 호버이펙트가 나올것같아 글 올립니다. hexagon 호버 이펙트 될 때 bottom 부분에 마우스 갖다놓으면 떨림현상이 매우 심하게 있습니다. 사이트 이용자들은 '이게 뭔가? 생각할것같아서 떨지않게 하고싶었습니다. 이에 다음과 같이 .shape 에 translateY로 이동시키고 .hexagon:hover:before 도 .hexagon:before 가 이동한 만큼만 좌표를 주면 퍼블리셔도 작업 시 더욱 편할 것이라 생각됩니다. 감사합니다. .hexagon:hover .shape{ transform: translateY(-60px); } .hexagon:before { content: ''; position: absolute; width: 100%; height: 60px; background: radial-gradient(rgba(0, 0, 0, 0.3), transparent, transparent); bottom: -70px; transition: 0.5s; } .hexagon:hover:before { opacity: 0.6; transform: scale(0.8); bottom: -70px; } /* CSS 파일 전체 */ @import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:300,400,500,700,900&display=swap'); * { box-sizing: border-box; } body { font-family: 'Noto Sans KR', sans-serif; font-weight: 300; color:#333; margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh; } a { text-decoration: none; color: #333; } h1,h2,h3,h4,h5 { font-weight: 500; margin-top: 0; } .frame { display: flex; gap:40px; } .hexagon { width: 400px; height: 450px; position: relative; } .shape { border: 3px solid orange; clip-path: polygon(49% 0, 100% 24%, 100% 74%, 48% 100%, 0 73%, 0 23%); width: inherit; height: inherit; position: absolute; transition: 0.3s; overflow: hidden; } .shape img { width: inherit; height: inherit; object-fit: cover; object-position: right; } .hexagon .caption { position: absolute; width: inherit; height: inherit; color: #fff; display: flex; justify-content: center; align-items: center; text-align: center; transform: translateY(20px); transition: 0.3s; opacity: 0; } .hexagon:hover .caption { transform: translateY(0); opacity: 1; } .caption h2 { font-size: 2em; } .hexagon:nth-child(1) .caption { background: linear-gradient(to top, crimson, transparent); } .hexagon:nth-child(2) .caption { background: linear-gradient(to top, royalblue, transparent); } .hexagon:nth-child(3) .caption { background: linear-gradient(to top, yellowgreen, transparent); } .hexagon:hover .shape{ transform: translateY(-60px); } .hexagon:before { content: ''; position: absolute; width: 100%; height: 60px; background: radial-gradient(rgba(0, 0, 0, 0.3), transparent, transparent); bottom: -70px; transition: 0.5s; } .hexagon:hover:before { opacity: 0.6; transform: scale(0.8); bottom: -70px; } - 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다.