46,200원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
float 속성 상속 관련 궁금합니다!
float 속성이 상속 될 때에, 바로 아래 선택자 하나에만 상속되나요? 아니면 그 아래 모든 선택자들에게 상속되나요??그리고 clear 속성 예제 과정 중, clear div 가 다른 div들 뒤에 가려졌는데, 왜 text는 밖에 나와있는건가요?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
라디오버튼과 체크박스를 커스텀 체크박스로 스타일링 관련 질문 드립니다.
■ 질문 남기실 때 꼭! 참고해주세요.HTML을 <label> <input type="checkbox" checked >HTML </label> 이렇게 바꾸면 체크박스용 보더는 나타나는데 폰트 어썸 아이콘이 나타나지 않습니다.폰트어썸 아이콘을 나타나게 하려면 어떻게 해야 하나요? <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>커스텀 체크박스 스타일링(2)</title> <link rel="stylesheet" href="style.css"> </head> <body> <form> <label> <input type="checkbox" checked >HTML </label> <label for="chk2">CSS <input type="checkbox" id="chk2"> </label> <label for="chk3">jQuery <input type="checkbox" id="chk3"> </label> <label for="chk4">UIKit <input type="checkbox" id="chk4" disabled> </label> </form> </body> </html>/* Google Web Fonts CDN */ @import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:300,400,500,700,900&display=swap'); /* Fontawesome 4.7 */ @import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); body { font-family: 'Noto Sans KR', sans-serif; line-height: 1.5em; margin: 0; font-weight: 300; display: flex; justify-content: center; align-items: center; height: 100vh; } a { text-decoration: none; } form input[type=checkbox] { display: none; } form label { display: block; border: 1px solid green; cursor: pointer; } form label:before { content: '\f00c'; font-family: fontawesome; display: inline-block; width: 14px; height: 14px; line-height: 14px; font-size: 13px; color: transparent; border: 1px solid #333; border-radius: 3px; text-align: center; vertical-align: middle; margin-right: 5px; transition: 0.2s; } form input[type=checkbox]:checked + label:before { background-color: crimson; color: #fff; border-color: transparent; } form input[type=checkbox]:not(:disabled) + label:active:before { transform: scale(0); }
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
input type 체크할때 btn label 이 색깔이 안바뀝니다
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="/style.css"> </head> <body> <div class="tab-inner"> <input type="radio" name="tabmenu" id="tab1" checked> <input type="radio" name="tabmenu" id="tab2"> <input type="radio" name="tabmenu" id="tab3"> <div class="tabs"> <div class="items"> <div> <h1>Content 01</h1> </div> <div> <h1>Content 02</h1> </div> <div> <h1>Content 03</h1> </div> </div> <div class="btn"> <label for="tab1"></label> <label for="tab2"></label> <label for="tab3"></label> </div> </div> </div> </body> </html> body { line-height: 1.5em; margin: 0; color: #222; } .tab-inner {} input[name=tabmenu] { display: none; } .tabs { overflow: hidden; position: relative; height: 100vh; } .items { height: 100vh; width: 300%; transition: 0.5s; position: absolute; top: 0; left: 0; } .items div { height: 100vh; float: left; width: 33.33333%; box-sizing: border-box; display: flex; justify-content: center; align-items: center; } .items div:nth-child(1){ background-color: teal; } .items div:nth-child(2){ background-color: dodgerblue; } .items div:nth-child(3){ background-color: yellowgreen; } .items div h1 { font-size: 80px; font-weight: normal; } .btn { position: absolute; bottom: 20px; width: 100%; text-align: center; } .btn label { display: inline-block; height: 16px; width: 16px; border-radius: 20px; background-color: #c4c4c4; cursor: pointer; } input[id=tab1]:checked ~ .tabs .items { left: 0; } input[id=tab2]:checked ~ .tabs .items { left: -100%; } input[id=tab3]:checked ~ .tabs .items { left: -200%; } input[id=tab1]:checked ~ .btn label[for=tab1], input[id=tab2]:checked ~ .btn label[for=tab2], input[id=tab3]:checked ~ .btn label[for=tab3] { background-color: #fff; }
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
가상클래스 여백생김 문제
■ 질문 남기실 때 꼭! 참고해주세요.안녕하세요!가상클래스로 텍스트 컬러 채워지는 부분에서 컬러 텍스트 주위에 원래 텍스트 흰색이 테두리처럼 보이는데, 해결할 방법이 없을까요? 크기를 변경해도 같습니다 ㅠ 혹시나해서 다른 폰트로 바꿔봤는데 같은 css인 top:0, left:0 이어도 아래처럼 간격이 보이더라구요ㅠ 자세히 보면 가상클래스로 만든 텍스트가 크기 자체가 살짝 작은데요, 그래서 테두리가 보이는 것 같습니다. 가상클래스의 특성일까요?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
자바스크립트로 구현했습니다.
const $stars = document.querySelector(".stars"); const $fas = document.querySelectorAll(".fa"); const $print = document.querySelector(".print") $stars.addEventListener('click',(e)=>{ $fas.forEach(fa=>fa.classList.remove('active')) e.target.classList.add('active'); const index = [...$fas].findIndex(fa=> [...fa.classList].includes('active')); for(i=0; i<index;i++){ $fas[i].classList.add('active'); } const $img =document.createElement("img"); switch(index){ case 0 : $img.src=`images/star-lv${index+1}.png`; $print.textContent='별루에요'; $print.appendChild($img); console.dir($img); break; case 1 : $img.src=`images/star-lv${index+1}.png`; $print.textContent='보통'; $print.appendChild($img); break; case 2 : $img.src=`images/star-lv${index+1}.png`; $print.textContent='맘에 들어에요'; $print.appendChild($img); console.dir($print); break; case 3 : $img.src=`images/star-lv${index+1}.png`; $print.textContent='최고'; $print.appendChild($img); break; case 4 : $img.src=`images/star-lv${index+1}.png`; $print.textContent='싼다.'; $print.appendChild($img); break; case 5 : $print.textContent=''; $print.removeCh } })
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
마우스 올리면 배경이미지 변경하기 with jQuery 11:07분 질문 드립니다.
■ 질문 남기실 때 꼭! 참고해주세요.- 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다. .navi li a::before{ position: absolute; content: attr(data-text); top: 0; left: 0; width: 0; overflow: hidden; color: yellowgreen; transition: 0.5s; }이 부분에서 width: 0; 으로만 주면 왜 color 가 안없어지고 overflow: hidden; 까지 해야 color가 줄어드는지 잘 이해가 되지 않습니다.
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
확장선택자와 함께 가상클래스 checked 실전 퍼블리싱 02(애니메이션 사이드메뉴 만들기) 6:50초 질문 드립니다.
■ 질문 남기실 때 꼭! 참고해주세요.- 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다.html <div class="container"> <input type="checkbox" id="trigger"> <label for="trigger"> <span></span> <span></span> <span></span> </label> <div class="sidebar"></div> </div>cssbody { height: 100vh; /* display: flex; justify-content: center; align-items: center; */ color: #fff; margin:0; padding:0; } a { color: #222; text-decoration: none; } .container {} input[id=trigger] { display: none; } label[for=trigger] { /* border: 1px solid red; */ width: 40px; height: 30px; display: block; position: absolute; cursor: pointer; right: 10px; top:50%; transform: translateY(-50%); transition: 0.3s; } label[for=trigger] span { position: absolute; height: 2px; background-color: #000; width: 100%; transition: 0.3s; } label[for=trigger] span:nth-child(1){ top:0; } label[for=trigger] span:nth-child(2){ top:50%; } label[for=trigger] span:nth-child(3){ top:100%; } input[id=trigger]:checked + label[for=trigger] span:nth-child(1){ top:50%; transform: rotate(45deg); } input[id=trigger]:checked + label[for=trigger] span:nth-child(2){ opacity: 0; } input[id=trigger]:checked + label[for=trigger] span:nth-child(3){ top:50%; transform: rotate(-45deg); } .sidebar { width: 300px; height: 100vh; background-color: #000; position: absolute; right: -300px; transition: 0.3s; } input[id=trigger]:checked ~ .sidebar { right: 0; } input[id=trigger]:checked + label[for=trigger] { right: 310px; }혼자 다시 연습하다 6:50초 경에 나온 사이드바 부분의 position을 fiexd 가 아닌 absolute 로 한 뒤 right: -300px 로 가렸더니 숨겨지는게 아니라 가로스크롤이 생기면서 옆을 볼 수 있게 되는데, 애초에 부모의 값이 따로 없고 100% 라 그런거라면 왜 fiexd는 가려지는데 absolute 는 옆에 공간이 따로 생겨서 사이드바가 생기는 걸까요?그리고 높이는 둘다 똑같이 100vh 인데 왜 세로 스크롤도 생기는걸까요??? 그리고 또 하나 궁금한게 이전에 햄버거 버튼을 만들때 label에 position : relative; 를 주고 span에 position : absolute; 를 줘서 배치를 했는데, 사이드바 생성시 햄버거 버튼의 위치 조정을 위해 label을 absolute로 변경 하게 되면 부모자식 관계였던 lable과 span이 모두 absolute 속성을 가지게 되는데 이런 건 전혀 문제될게 없는걸까요???
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
가상클래스 before after 가상클래스 활용한 실전 퍼블리싱 04(content attr을 활용한 텍스트 네비게이션) 13:00 대 질문 드립니다.
■ 질문 남기실 때 꼭! 참고해주세요.- 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다.13분대 쯤에 이해가 되지 않는 부분이 있어 질문 드립니다. .gnb a 에 relative를 주고, .gnb a span 에 absolute를 주면 a와 span의 넓이 높이 값이 같으니까 기본으로 딱 left: 0 top: 0 에 붙잖아요.왜 span에 text-align을 주는게 아니라 a 에 text-align을 줘서 span이 함께 정렬되어 삐져나가게 하고 다시 position을 left:0;, top:0; 으로 맞춰주는 걸까요????
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
'기본형 드롭다운 네비게이션'이 zip 화일 안에 없습니다.
04.에 '기본형 드롭다운 네비게이션' 이 나와야 하는데없습니다. 확인 부탁 드립니다.
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
position과 input 입력 가능여부의 관계에 대해 질문드리고 싶습니다
■ 질문 남기실 때 꼭! 참고해주세요.- 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다.선생님 안녕하세요혹시 교안의 코드가 아닌 코드를 질문드려도 괜찮으실까요?Daily UI #007 | Settings (codepen.io)다른 사이트의 코드를 활용해보는 중인데, 이해가 어려운 부분이 있어서 가르쳐주시면 감사하겠습니다질문을 받아주시면 정말 감사하겠습니다소스코드는 맨 아래에 있습니다 1번째로 드리고 싶은 질문입니다왜 보라색 표시를 한 input text 코드에 입력이 안되는지그리고 position absolute를 해제해야만 input text가 입력이 되는지 그 이유가 너무 궁금해서 질문드리게 되었습니다 2번째로 드리고 싶은 질문입니다탭 버튼으로 다른 창으로 이동을 할 때,방금 전에 position:absolute 를 해제하니, 입력양식들이 아래로 밀려 내려갔습니다.혹시 position:absolute를 유지해도 input text 가 입력되게 하는 방법 또는position:absolute를 해제해도 원래 위치를 유지시키는 방법을 가르쳐주시면 정말 감사하겠습니다아래는 소스코드입니다<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <link rel="stylesheet" href="./style.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css"> <style> @import url("https://fonts.googleapis.com/css?family=Nunito:400,900|Montserrat|Roboto"); body { background: linear-gradient(to right, #3fb6a8, #7ed386); } .container { background: #ffffff; width: 540px; height: 420px; margin: 0 auto; position: relative; margin-top: 10%; box-shadow: 2px 5px 20px rgba(119, 119, 119, 0.5); } .logo { float: right; margin-right: 12px; margin-top: 12px; font-family: "Nunito Sans", sans-serif; color: #3dbb3d; font-weight: 900; font-size: 1.5em; letter-spacing: 1px; } .CTA { width: 80px; height: 40px; right: -20px; bottom: 0; margin-bottom: 90px; position: absolute; z-index: 1; background: #7ed386; font-size: 1em; transform: rotate(-90deg); transition: all 0.5s ease-in-out; cursor: pointer; } .CTA h1 { color: #ffffff; margin-top: 10px; margin-left: 9px; } .CTA:hover { background: #3fb6a8; transform: scale(1.1); } .leftbox { float: left; top: -5%; left: 5%; position: absolute; width: 15%; height: 110%; background: #7ed386; box-shadow: 3px 3px 10px rgba(119, 119, 119, 0.5); } nav a { list-style: none; padding: 35px; color: #ffffff; font-size: 1.1em; display: block; transition: all 0.3s ease-in-out; } nav a:hover { color: #3fb6a8; transform: scale(1.2); cursor: pointer; } nav a:first-child { margin-top: 7px; } .active { color: #3fb6a8; } .rightbox { float: right; width: 65%; height: 100%; } .profile, .payment, .subscription, .privacy, .settings { transition: opacity 0.5s ease-in; position: absolute; width: 70%; } h1 { font-family: "Montserrat", sans-serif; color: #7ed386; font-size: 1em; margin-top: 20px; margin-bottom: 20px; } h2 { color: #777777; font-family: "Roboto", sans-serif; width: 80%; text-transform: uppercase; font-size: 8px; letter-spacing: 1px; margin-left: 2px; } td { font-family: "Montserrat", sans-serif; color: #777777; font-size: 1em; margin-top: 40px; margin-bottom: 35px; } /* td { color: #777777; font-family: "Roboto", sans-serif; width: 80%; text-transform: uppercase; font-size: 8px; letter-spacing: 1px; margin-left: 2px; } */ input { border-width: 1px; border-style: solid; border-image: linear-gradient(to right, #3fb6a8, rgba(126, 211, 134, 0.5)) 1 0%; border-top: 0; width: 80%; font-family: "Montserrat", sans-serif; font-size: 0.7em; padding: 7px 0; color: #070707; } p { border-width: 1px; border-style: solid; border-image: linear-gradient(to right, #3fb6a8, rgba(126, 211, 134, 0.5)) 1 0%; border-top: 0; width: 80%; font-family: "Montserrat", sans-serif; font-size: 0.7em; padding: 7px 0; color: #070707; } span { font-size: 0.5em; color: #777777; } .btn { float: right; font-family: "Roboto", sans-serif; text-transform: uppercase; font-size: 10px; border: none; color: #3fb6a8; } .btn:hover { text-decoration: underline; font-weight: 900; } /* input { border: 1px solid #dddddd; font-family: "Roboto", sans-serif; padding: 2px; margin: 0; } */ .privacy h2 { margin-top: 25px; } .settings h2 { margin-top: 25px; } .noshow { opacity: 0; } footer { position: absolute; width: 20%; bottom: 0; right: -20px; text-align: right; font-size: 0.8em; text-transform: uppercase; letter-spacing: 2px; font-family: "Roboto", sans-serif; } footer p { border: none; padding: 0; } footer a { color: #ffffff; text-decoration: none; } footer a:hover { color: #7d7d7d; } </style> <body> <div class="container"> <div id="logo"><h1 class="logo">hulu</h1> <div class="CTA"> <h1>Get $10</h1> </div> </div> <div class="leftbox"> <nav> <a id="profile" class="active"><i class="fa fa-user"></i></a> <a id="payment"><i class="fa fa-credit-card"></i></a> <a id="subscription"><i class="fa fa-tv"></i></a> <a id="privacy"><i class="fa fa-tasks"></i></a> <a id="settings"><i class="fa fa-cog"></i></a> </nav> </div> <div class="rightbox"> <div class="profile"> <h1>Payment Info</h1> <table> <tr> <td width="30%" align="center">이름</td> <td width="50%"><input type="text" id="name" name="name" placeholder="이름" style="padding-left: 10px; z-index:90"></td> </tr> <tr> <td align="center">이메일</td> <td><input type="text" id="email" placeholder="이메일" style="padding-left: 10px;"></td> </tr> </table> </div> <!-- <div class="payment noshow"> <h1>Payment Info</h1> <h2>Payment Method</h2> <p>Mastercard •••• •••• •••• 0000 <button class="btn">update</button></p> <h2>Billing Address</h2> <p>1234 Example Ave | Seattle, WA <button class="btn">change</button></p> <h2>Zipcode</h2> <p>999000</p> <h2>Billing History</h2> <p>2018<button class="btn">view</button></p> <h2>Redeem Gift Subscription </h2> <p><input type="text" placeholder="Enter Gift Code"></input> <button class="btn">Redeem</button></p> </div> --> <div class="subscription noshow"> <h1>Your Subscription</h1> <h2>Payment Date</h2> <p>05-15-2018 <button class="btn">pay now</button></p> <h2>Your Next Charge</h2> <p>$8.48<span> includes tax</span></p> <h2>Hulu Base Plan</h2> <p>Limited Commercials <button class="btn">change plan</button></p> <h2>Add-ons</h2> <p>None <button class="btn">manage</button></p> <h2>Monthly Recurring Total </h2> <p>$7.99/month</p> </div> <!-- <div class="privacy noshow"> <h1>Privacy Settings</h1> <h2>Manage Email Notifications<button class="btn">manage</button></h2> <p></p> <h2>Manage Privacy Settings<button class="btn">manage</button></h2> <p></p> <h2>View Terms of Use <button class="btn">view</button></h2> <p></p> <h2>Personalize Ad Experience <button class="btn">update</button></h2> <p></p> <h2>Protect Your Account <button class="btn">protect</button></h2> <p></p> </div> --> <div class="settings noshow"> <h1>Account Settings</h1> <h2>Sync Watchlist to My Stuff<button class="btn">sync</button></h2> <p></p> <h2>Hold Your Subscription<button class="btn">hold</button></h2> <p></p> <h2>Cancel Your Subscription <button class="btn">cancel</button></h2> <p></p> <h2>Your Devices <button class="btn">Manage Devices</button></h2> <p></p> <h2>Referrals <button class="btn">get $10</button></h2> <p></p> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <script type="text/javascript"> /*active button class onclick*/ $('nav a').click(function(e) { e.preventDefault(); $('nav a').removeClass('active'); $(this).addClass('active'); if(this.id === !'payment'){ $('.payment').addClass('noshow'); } else if(this.id === 'payment') { $('.payment').removeClass('noshow'); $('.rightbox').children().not('.payment').addClass('noshow'); } else if (this.id === 'profile') { $('.profile').removeClass('noshow'); $('.rightbox').children().not('.profile').addClass('noshow'); } else if(this.id === 'subscription') { $('.subscription').removeClass('noshow'); $('.rightbox').children().not('.subscription').addClass('noshow'); } else if(this.id === 'privacy') { $('.privacy').removeClass('noshow'); $('.rightbox').children().not('.privacy').addClass('noshow'); } else if(this.id === 'settings') { $('.settings').removeClass('noshow'); $('.rightbox').children().not('.settings').addClass('noshow'); } }); </script> </body> </html> 읽어주셔서 감사합니다
- 해결됨HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
제이쿼리 - '$' is not defined. - W117 - Details 오류
'$' is not defined. - W117 - Details올바르게 입력한것 같은데 오류가 발생합니다. 어떻게 해결해야 할까요?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
flex-grow에 flex 축 관련해서 질문 드립니다.
flex가 기본 row 값일 때 container 안에 item1에 flex-grow 값을 1로 주면 화면이 늘어나면서 가로 사이즈가 늘어나는 걸 알 수 있는데flex-direction을 column으로 변경 후에 똑같이 flex-grow 값을 주면 왜 세로로 늘어나지 않고 그냥 기존 넓이와 높이 값만 유지한 채 스크롤이 생기는지 위에 row값처럼 늘어나게 할 수 없는지 궁금합니다.<!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>Document</title></head><body><div class="content"><div class="flexbox"><div class="item1">content1</div><div class="item2">content2</div><div class="item3">content3</div><div class="item4">content</div></div></div></body></html> CSS/* flex-direction 기본 값 row 일 때 */.flexbox {display:flex;flex-wrap:no-wrap;gap:1em;}.item1,.item2,.item3,.item4{width:100px;height:100px;background:red;}.item1 {flex-grow:1} /* flex-direction 이 column 일 때 */ .flexbox {display:flex;flex-direction:column;flex-wrap:no-wrap;gap:1em;} .item1,.item2,.item3,.item4{width:100px;height:100px;background:red;}.item1 {flex-grow:1}
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
확장선택자와 함께 가상클래스 checked 실전 퍼블리싱 06(탭 콘텐츠 - Slide)
이미지가 tab inner로 안들어가고 가로로만 배치가 되는데 무엇이 문제인지 모르겠습니다.. <!DOCTYPE html> <html lang="Ko"> <head> <meta charset="UTF-8"> <title>slider</title> <link rel="stylesheet" href="style_slide.css"> </head> <body> <div class="tab-inner"> <input type="radio" name="tabmenu" id="tab1" checked> <input type="radio" name="tabmenu" id="tab2"> <input type="radio" name="tabmenu" id="tab3"> </div> <div class="slide"> <div class="slide-inner"> <a href="#none1"><img src="images/slide-01.jpg"></a> <a href="#none2"><img src="images/slide-02.jpg"></a> <a href="#none3"><img src="images/slide-03.jpg"></a> </div> </div> <div class="btn"> <label for="tab1"></label> <label for="tab2"></label> <label for="tab3"></label> </div> </body> </html> css 입니다~ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap'); body { font-family: 'Noto Sans KR', san-serif; line-height: 1.5em; font-weight: 300; color: #222; display: flex; justify-content: center; align-items: center; height: 100vh; } .tab-inner { border: 1px solid red; width: 300px; height: 350px; } input[name="tabmenu"] { /* display: none; */ } .slide { position: relative; width: 300px; height: 300px; } .slide-inner { width: 900px; font-size: 0; position: absolute; top: 0; left: 0; } .btn { text-align: center; margin-top: 10px; } .btn label { display: inline-block; width: 20px; height: 20px; border-radius: 50%; background-color: lightgray; cursor: pointer; }
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
안녕하세요 slider 질문드립니다.
제가 현재 모바일웹에서 구현중인 섹션인데요 선생님상단 코드처럼 했는데 안되다가 하단 코드로 바꾸었더니 갑자기 slider 기능이 잘 되는데요..input[type=radio] 순서때문에 그런 건가요?? 이걸로 몇시간동안 끙끙댔는데 혹시나 싶어서 순서를 바꿔보니까 갑자기 되길래이게 명확히 왜 그런가 알고 싶어서 질문 드립니다.
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
:target 가상클래스 HTML+CSS 탭 메뉴 콘텐츠
■ 질문 남기실 때 꼭! 참고해주세요.강의 23분 쯤부터 나오는 탭 내용 노출 부분 혹시 첫 번째 탭이 아니라 랜덤으로 노출하려면 어떤 작업이 필요한지 알 수 있을까요?만약 코드가 너무 길어진다면, 간단한게 구글링으로 검색할만한 키워드를 알려주시면 감사하겠습니다. 제 지식으로는 찾아보았지만 원하는 결과를 못얻어서요.. 감사합니다.
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
position 질문
<div class="tab-inner"> <input type="radio" name="tabmenu" id="tab1" checked> <input type="radio" name="tabmenu" id="tab2"> <input type="radio" name="tabmenu" id="tab3"> <div class="tabs"> <div class="items"> <div> <h1>Slide Content 01</h1> </div> <div> <h1>Slide Content 02</h1> </div> <div> <h1>Slide Content 03</h1> </div> </div> </div> <div class="btn"> <label for="tab1"></label> <label for="tab2"></label> <label for="tab3"></label> </div> </div>body { font-family: 'Raleway', sans-serif; line-height: 1.5em; margin: 0; font-weight: 300; color: #222; } a { text-decoration: none; color: #222; } .tab-inner {} input[name=tabmenu] { display: none; } .tabs { overflow: hidden; position: relative; height: 100vh; } .items { height: 100vh; width: 300%; transition: 0.5s; position: absolute; top: 0; left: 0; } .items div { height: 100vh; float: left; width: 33.33333%; box-sizing: border-box; display: flex; justify-content: center; align-items: center; } .items div:nth-child(1) { background-color: teal; } .items div:nth-child(2) { background-color: dodgerblue; } .items div:nth-child(3) { background-color: yellowgreen; } .items div h1 { font-size: 80px; font-weight: normal; color: #fff; } .btn { position: absolute; bottom: 20px; /*left: 50%; transform: translateX(-50%);*/ width: 100%; text-align: center; } .btn label { display: inline-block; height: 5px; width: 50px; background-color: #fff; cursor: pointer; } input[id=tab1]:checked ~ .tabs .items { left: 0; } input[id=tab2]:checked ~ .tabs .items { left: -100%; } input[id=tab3]:checked ~ .tabs .items { left: -200%; } input[id=tab1]:checked ~ .btn label[for=tab1], input[id=tab2]:checked ~ .btn label[for=tab2], input[id=tab3]:checked ~ .btn label[for=tab3] { background-color: #000; }강의에서 10분7초쯤 .btn에 position: absolute를 주었는데 이거에 대한 position:relative를 따로 주지 않았는데, 어디를 기준으로 .btn의 position: absolute라고 봐야 하나요? html구조상 부모요소인 .tab-inner인가요? 아니면 .tabs의 position:relative로 봐야하나요? position:relative와 position: absolute가 매칭이 안되고 따로 position: absolute를 줄 경우가 너무 햇갈려요
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
탭 콘텐츠 opacity 응용 문의드립니다!
안녕하세요 선생님!복습하는 중에 갑자기 헷갈리는 부분이 있어 질문드립니다!sales부분을 디자인하기 위해서.text1~3에 디자인을 주었는데position속성 포함 이 공통된 디자인을 heading에 넣으면 안되는 이유가 궁금합니다!실제로 넣어보니까 디자인한 부분이 브라우저에 아예 뜨지 않더라구요..!
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
position 속성 관련 질문
선생님 안녕하세요!현재 <flexbox 활용한 갤러리 이미지 어코디언 네비게이션> 강의를 들었는데요.css부분에서 .content를 처음에 li 아래에 존재하게 하기위해bottom값을 주었는데요.height: 250px라고 했을때 bottom값을 -250px를 준다면 이는 top: 100%인것과 같은것 아닌걸까요?처음에 top:100%로 해보았는데 그러면 아래로 내려가기는 하지만나중에 hover했을때 올라오지 않아서 top:100%으로 주면 안되는 이유가 어떤건지 여쭤봅니다!
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
인접선택자 선택할때요
ㄱ++<body> <div class="container"> <input type="checkbox" id="trigger"> <label for="trigger"> <span></span> <span></span> <span></span> </label> </div> </body>강의 내용에선 input[id=trigger]:checked + label[for=trigger] span:nth-child(1) { transform: rotate(45deg); top: 50%;이렇게 하셨는데 label[for=trigger]:checked + span:nth-child(1) { transform: rotate(45deg); top: 50%;}이렇게 하면 안되는 이유가 뭘까요..?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
position 질문
선생님 안녕하세요. 햄버거 메뉴 만들 때label에 position: relativelabel span 에 position: absolute 이렇게 포지션값을 주었는데,사이드바 만들면서 label의 position: relative 를 absolute로 바꿔주게 되는데그럼 label span 의 position: absolute 의 relative는 무엇이 되는 건가요?? label의 포지션을 앱솔루트로 바꿨는데도, label span에는 영향이 없는 이유가 궁금합니다label[for=trigger] { /* border: 1px solid red; */ width: 30px; height: 20px; display: block; position: absolute; cursor: pointer; right: 10px; top: 50%; transform: translateY(-50%); transition: 0.5s; } label[for=trigger] span { position: absolute; height: 2px; background-color: #000; width: 100%; left: 0; transition: 0.3s; } /* sidebar */ .sidebar { background-color: #000; width: 300px; height: 100vh; position: fixed; right: -300px; transition: 0.5s; }