46,200원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
질문이요!
반응형으로 만들땐 display:none 시키고 원래 사이즈에서는 display:flex;를 시키고 싶은데 제이쿼리로 슬라이드 토글을 이용 했더니 element.style로 display:none이 되서 전체 사이즈일때는 메뉴가 안보여요 ㅠㅠ 혹시 보이게 하는 방법이 있을 까요?ㅠㅠ
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
선생님 혹시 글씨효과 아래에서 위로 채우는 건 불가능할까요?
#gnb9 #menu3 li a::before { position: absolute; color: red; top: 0; left: 0; white-space: nowrap; content: attr(data-m2); height: 0%; transition: 0.3s; overflow: hidden; } #gnb9 #menu3 li a:hover::before { height: 100%; }. 이렇게 했는데 위에서 아래로 밖에 안되더라구요 그래도 top:0을 bottom으로 바꾸고 다시 시도해봤는데 안되네요 <section> <div id="gnb9"> <ul id="menu3"> <li><a href="#home" data-m2="회사소개">회사소개</a></li> <li><a href="#profile" data-m2="비전">비전</a></li> <li><a href="#vision" data-m2="포트폴리오">포트폴리오</a></li> <li><a href="#works1" data-m2="채용공고">채용공고</a></l> </ul> </div> <div class="pic"></div> </section>
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
포트폴리오에서 네비게이션 메뉴를 구현하려고 하는데요..!
선생님 안녕하세요!다름이 아니라 포트폴리오에서 네비 부분에서 메뉴에서 메뉴로 이동시(home, about, work,,)에 이번 수업에서 배운 텝메뉴를 응용해서 하려고 이런식으로 마크업을 하다가 <ul> <li>home</li> <li>work</li> <li>contact</li> </ul> 문득 생각해보니 생활코딩에서 페이지간 이동을 할 때 이런식으로 a태그로 마크업 하고 또 다른 html 파일을 만들어서 이동 했었던게 생각이 나서 <ul> <li><a href="home.html">home</a></li> <li><a href="work.html">work</a></li> <li><a>home</a></li> </ul> 메뉴와 메뉴 사이에 이동을 할때는 어떻게 해야하는지 약간 혼란이 오네요.. 어떻게 하면 좋을지 여쭤보고 싶습니다.. 답변주시면 감사하겠습니다..!
- 해결됨HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
안녕하세요.! 세로로 한번 해보고 싶어서 해봤는데 이렇게 하면 될까요?
먼저, 강의 잘 보고 있는 수강생입니다.! 감사합니다.! 처음 질문 남겨보는데, 1) 가로로 만들어보고 세로로 한 번 만들어보고 싶어서 해봤는데 이렇게 하면 될까요? 2) 그리고, 가로와 마찬가지로 세로에서 ①height: 100vh; width: 300%; / height: 100vh; width: 33.3333%; 도 ②height: 300%; width: 100vw; / height: 33.3333%; width: 100vw; 로 줘도 되는데 세로로 만들 경우 형식적으로는 ②으로 해줘야 하는 건가요? -> 둘 다, .tabs { height: 100vh; } 를 넣어주기만 하면 되더라구요.! .tab-inner { /* border: 1px solid red; */ } input[name=tabmenu] { display: none; } .tabs { position: relative; height: 100vh; overflow: hidden; } .items { height: 100vh; width: 300%; position: absolute; top: 0; left: 0; transition: 0.5s; } .items div { height: 100vh; width: 33.3333%; box-sizing: border-box; display: flex; justify-content: center; align-items: center; } .items div:nth-child(1) { background-color: dodgerblue; } .items div:nth-child(2) { background-color: purple; } .items div:nth-child(3) { background-color: rgb(255, 131, 30); } .items div h1 { font-size: 60px; color: #fff; } .btn { position: absolute; top: 50%; left: 20px; transform: translate(50%,-50%) } .btn label { display: block; width: 5px; height: 50px; background-color: #fff; margin-bottom: 10px; cursor: pointer; } input[id=tab1]:checked ~ .tabs .items { top: 0; } input[id=tab2]:checked ~ .tabs .items { top: -100%; } input[id=tab3]:checked ~ .tabs .items { top: -200%; } 그럼, 선생님께 질문을 살포시...남겨두고 다음 강의 계속 들으러 갈게요:) 화이팅!
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
선생님 왜 코드가 안먹을까요? ㅠㅠ 위아래로 떨어져야하는데 호버가 안먹습니다
<section id="ob2"> <div class="object2"> <div class="up"> <img src="img/ob2.jpg" alt="" /> <span>별 우는 하나에 가을로 이름을 멀듯이</span> </div> <div class="down"> <p> 애기 청춘이 풀이 흙으로 어머님, 거외다. 다 가슴속에 새워 슬퍼하는 까닭이요, 책상을 무덤 오는 봅니다. 하나에 별 파란 같이 그리워 무엇인지 별 버리었습니다 </p> <a href="#none">more</a> </div> </div> <section> /* ob2 */ #ob2 { display: flex; justify-content: space-around; } #ob2 .object2 { width: 20%; position: relative; cursor: pointer; text-align: center; } #ob2 .object2 .up { z-index: 2; border: 1px solid #555; width: 100%; height: auto; } #ob2 .object2 .up img { width: 100%; height: auto; } #ob2 .object2 .up span { display: block; font-size: 1.4rem; font-weight: bold; background-color: #fff; } #ob2 .object2 .up, #ob2 .object2 .down { position: absolute; width: 100%; transition: 0.5s; top: 0; } #ob2 .object2 .down { border: 1px solid #555; padding: 10px; height: 300px; } #ob2 .object2 .down p { font-size: 1.6rem; } #ob2 .object2 .down a { display: inline-block; background-color: #333; padding: 5px 10px; color: #fff; font-size: 1.6rem; } #ob2 .object2:hover .up { top: -50%; } #ob2 .object2:hover .down { top: 50%; }
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
선생님 질문이 있습니다.
선생님 가상클래스를 사용할 때 태그를 앞에 넣는거랑 가상클래스 뒤에 넣는거랑 무슨 차이인지 잘 모르겠습니다. EX) .class span:hover()와 .class :hover span() 제가 생각했을 때는 동일하게 span에 마우스를 올릴경우 바뀐다고 생각하는데 실제로 해보면 다르게 나타납니다. 이처럼 앞에 쓰냐 뒤에 쓰냐 차이를 설명해주시면 감사하겠습니다.
- 해결됨HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
$(window).scrollTop() > 50
선생님 안녕하세요. $(window).scrollTop() > 50 여기에서 50 이 정확히 어떤건가요??ㅠㅠ 50px인가요??
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
실전 퍼블리싱 03(더블 보더 레디우스 애니메이션)
실전 퍼블리싱 03(더블 보더 레디우스 애니메이션)을 진행하고 있습니다. 마우스를 올릴 때 원 색상이 변하는 부분에서 span(원)을 둘러싼 div 박스에 마우스를 대어야 색상이 변하고 span(원)에 마우스를 갖다대면 색상이 변하지 않습니다.. 어디가 문제인지 알 수 있을까요. <body> <div class="box"> <span></span> <span></span> <span></span> </div> body { background-color: #333; display: flex; justify-content: center; align-items: center; height: 100vh; } .box { position: relative; border: 2px solid red; width: 400px; height: 400px; } .box span { position: absolute; border: 1px solid white; /* inherit : 부모요소와 자식요소 크기를 동일하게(100%) */ width: inherit; height: inherit; /* border-radius를 '/'로 중첩해서 사용하면 다양한 도형을 나타낼 수 있다. */ border-radius: 40% 60% 65% 35% / 40% 45% 55% 60%; /* 마우스로 클릭시 효과가 */ transition: 0.5s; animation: ani 7s linear infinite; } .box:hover span { background-color: crimson; } .box span:nth-child(1) { } .box span:nth-child(2) { /* animation-direction : reverse = 역방향 */ animation-direction: reverse; animation-delay: 0.5s; } .box span:nth-child(3) { animation-delay: 0.8s; } @keyframes ani { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } } div { position: absolute; }
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
css자손선택자 vs 자식선택자, 부모요소 vs 자식요소
.box div 에 border, width, height는 자식요소와 자손 요소가 똑같이 들어갔는데 padding은 왜 한 요소에만 들어간건가요?? 여기도 padding은 자식요소에 들어갔는데 결과에는 배경이 #000인 자손요소에 들어간거 같아요
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
만들지 않은 요소가 보일때는 어떻게 해야할까요..?
안녕하세요 선생님! 강의 감사하게 잘 듣고 있습니다! 강의를 보면서 똑같이 따라하는데 이러한 보이기 버튼을 누를때마다 imageDownloaderSidebarContainer라는것이 계속 등장하여서 다시 코드를 새파일에 작성하여도 만들지 않은 요소가 스크린샷과 같이 나타나는데 이러한 현상이 왜 일어나는지 검색해보아도 모르겠습니다.. 답변 주시면 감사드리겠습니다~! <style> a { color: #000; text-decoration: none; border: 1px solid #444; padding: 2px 4px; } div { display: none; width: 200px; height: 200px; background-color: dodgerblue; margin-top: 20px; color: #fff; line-height: 200px; text-align: center; } </style> <body> <a href="#" class="show-btn">보이기</a> <a href="#" class="hide-btn">감추기</a> <div>box</div> <script src="./jquery/script/jquery-1.12.4.js"></script> <script> $('.show-btn').click(function(){ $('div').show(); }); $('.hide-btn').click(function() { $('div').hide(); }) </script>
- 해결됨HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
background 속성
background: #fff url(images/icon-email.png) no-repeat center left 10px; 여기서 10px 은 background 에서 어떤 속성에 값을 주는건가요??
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
첨부파일은 어디서 볼 수 있을까요?
어딘지 모르겠습니다 ㅠ
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
overflow:hidden
overflow:hidden 은 내용이 넘치면 잘라서 안보이는거 아닌가요?? 어떤 속성 덕에 자식요소에 float 사용 시 높이 값을 자식 요소에 맞게 제어되는지 잘 모르겠어요
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
선생님 안녕하세요 smooth scrolling 관련 질문입니다!
선생님 안녕하세요! 선생님 강의를 듣고 웹디자인 기능사 시험도 합격하고, 퍼블리싱 실전 강의를 통해 이래저래 꿀팁을 배우고있는 취준생입니다 늘 감사하게 생각하고있습니다 :) 다름이 아니라, smooth scrolling을 적용중인데, 제가 반응형으로 포트폴리오를 제작 중이라 pc버전 네비게이션에서는 smooth scrolling이 적용이 되고, mobile버전 네비게이션에서는 smooth scrolling이 적용이 안되면 좋겠습니다 mobile버전 네비게이션을 아코디언 형식으로 제작해놔서 서브 메뉴를 클릭하면 서브페이지로 이동하게끔 링크를 걸어두고싶은데, 서브메뉴가 열리기도 전에 smooth scrolling이 되서 서브페이지로 이동이 안되더라구요. 이럴땐 어떻게 해결을 해야할까요? 최종 질문은 smooth scrolling이 모바일에서는 작동이 안되고, pc버전에서만 작동이 되게끔 하고싶습니다
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
강의에 사용하시는 pdf자료는 어디에 있나요??
강의 초반부에 웹디자인 기능사 실기시험 퍼블리싱 이론pdf이라는 pdf로 설명하시던데 강의에 사용하시는 pdf자료는 어디에 있나요??
- 해결됨HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
새로고침했을때
선생님 안녕하세요. 페이지를 처음 열었을때, 새로고침 했을때 .text1 디자인이 들어가는 과정이 transition 때문에 보이는거 같은데 저게 자연스럽게 시작되게하려면 어떻게 해야 할까요??
- 해결됨HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
기초적인 질문드립니다
혹시 name 이라는 속성은 class 처럼 css에서 태그를 선택하기 위한 용도로 사용되는건가요?? 아무 태그에나 사용할 수 있는건가요?
- 해결됨HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
position:fixed / position:absolute
선생님 안녕하세요 position: fixed 와 position:absolute 차이점이 뭐에요? absolute 를 주면 스크롤이 생겨서 오른쪽으로 이동하면 right: -300px 준게 다 보이는데 fixed 를 주면 스크롤이 안생깁니다.
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
선생님.. 공부법 질문좀 드릴게요
이 예제들을 공부할때 강의듣고 혼자서 해보고 완성시키고 다음으로 넘어가는데 2~3일 뒤에 다시 해보면 잘안되고 그러는게 반복되거든요. 이걸 2~3일 뒤에 복습했을때 완벽히 다 할줄 알게 되면 다음으로 넘어가야 하나요? 아니면 일 단 강의 들은 예제를 한두번씩 반복하고 바로 다음 예제로 넘어가 야 하나요? 전자로 한다고치면 너무 공부가 오래 걸릴꺼같아 여쭤 봅니다.. 포트폴리오 작업물을 언제쯤 시작할수있을지..
- 해결됨HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
transform 속성
선생님 안녕하세요. hover 했을때 transform: translate(X축,Y축) 이렇게 하는거랑 바로 top이랑 left로 주는거랑 무슨 차이가 있는건가요?