묻고 답해요
130만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결GSAP의 ScrollTrigger를 활용한 포트폴리오 제작
강의 첨부 파일은 어떻게 받나요??
제 메일은 rkddus3177@naver.com 입니다
-
미해결GSAP의 ScrollTrigger를 활용한 포트폴리오 제작
궁금한게 있습니다~!
안녕하세요~!ScrollTrigger 실무 활용_visual영역 제작하기 강의를 보던중 궁금한게 생겨서 여쭤봅니다! 8분 25초쯤보면 html,css 작업까지만 했을때 img_1의 높이만큼 스크롤이 생겼는데,10분 47초에 scrollTrigger를 적용해주니까 높이값이 많이 늘어나있던데혹시 왜 늘어나는지 알수있을까요??스크롤트리거를 사용하려면 스크롤이 되어야하는건 알겠지만 따로 높이값을 지정하지 않았는데 어떤것을 기준으로 늘어난건지 궁금해서 여쭤봅니다!
-
미해결플렉스(Flex) 반응형 웹사이트 포트폴리오(The World's Best Cities)
가로스크롤
■ 질문 남기실 때 꼭! 참고해주세요.- 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다. 선생님 안녕하세요pc, 모바일 반응형은 대응이 됐는데,웹사이트 창을 1250px정도로만 줄여도가로스크롤이 발생을 해서요ㅠㅠ 혹시 이런 경우에는,div와 이미지 크기를 80%같은 수치로 줄여야하는건지?아니면 overflow로 대응을 해야하는건지?궁금합니다. 혹시 몰라서 제가 임의로img에max-width:100%height:auto로 해놨는데 이미지가 안넘어가고 가로스크롤이 발생해서요ㅠㅠ답변주시면 감사합니다. 다른 질문들을 확인해보니,@media (min-width: 768px) and (max-width: 1024px)이런식으로 대응하라고 하셨는데폰트사이즈와 이미지를 줄여야하는건가요?ㅠㅠㅠ아니면 flex구조를 컬럼으로 바꿔야할까요?
-
미해결반응형 웹사이트 포트폴리오(Architecture Agency)
섹션 17 하드코딩으로 이미지맵 만들기 부분 연습파일이 없어요..
하드코딩으로 이미지맵(image map) 만들기코딩웍스 유튜트 채널에 있는 [이미지맵(image map) 만들기]에 상세히 강좌가 있습니다.실무에서 꼭! 사용하게 되니까 한번쯤 만들어보세요.하드코딩으로 이미지맵(image map) 만들기 강좌보기https://youtu.be/21WRDP06O4s※ 연습파일 다운로드는 유튜브 영상의 [더보기]를 누르시면 다운로드 링크가 있습니다.====================================이렇게 되어 있는데 유튜브 링크 내에다운로드 링크가 없고,인프런 강의 18섹션 다운로드 부분에도 이미지맵 관련 파일은 안보이네요연습파일을 얻을 수 있을까요?
-
미해결Tailwind CSS로 만드는 멋진 웹 UI 스타일링
섹션1 Animation에서 실습에 활용되는 svg 파일이 images 폴더 안에 안 들어 있습니다.
섹션1 Animation에서 실습에 활용되는 svg 파일이 images 폴더 안에 안 들어 있습니다. 확인 부탁드려요
-
미해결반응형 웹사이트 포트폴리오(Architecture Agency)
line-hieght를 em 단위로 쓰는 것에 대하여 질문 드립니다
jump up 이론 파트 em단위와 rem 단위 이해하기 부분 강의를 듣는 중입니다. em 단위가 부모요소에 대해 상대적으로 지정하는 단위이고line-height에 주로 쓰인다고 하셨는데그렇다면 주로 p의 폰트사이즈는 주로 p를 감싸고 있는 부모요소에 지정하고줄간격은 p 그 자체에 지정하는 것인가요?
-
미해결Tailwind CSS로 만드는 멋진 웹 UI 스타일링
저도 윗 분과 마찬가지로 폴더구성이 다릅니다.
(사진)
-
해결됨HTML5 CSS3 기초 & 반응형 웹 템플릿 만들기!
css background-image 적용이 안 돼요
index.html파일에서 style태그로 작성하면 돌고래 사진이 잘 나오는데 style.css에서 작성하면 백그라운드 컬러만 적용되고 사진이 표시되지 않습니다. 왜 이런가요??
-
미해결반응형 웹사이트 포트폴리오(Architecture Agency)
슬릭 슬라이더 dots 보이게 하는 방법 질문 드립니다
오른쪽 사진 밑에 슬릭 dots 보이게 하고 싶은데 어떻게하면 될까요?같은 질문과 답변을 보았지만 해결이 안되어서 다시 질문드려요~위에 history는 dots 보이는데밑에 project photo 부분은 dots가 안보여요 히스토리에서 했던 것 처럼.history-slider .slick-arrow{ display: none !important; } .history-slider .slick-dots li button:before{ color: #fff; font-size: 40px; } .history-slider .slick-dots li { margin: 0; }이런 것 해줘야하나요? 강의 중 섹션 9 - PC 레이아웃 섹션 상세 퍼블리싱(Project Section) - #06(Slick.js 이미지 슬라이더) 마지막 파트입니다
-
미해결반응형 웹사이트 포트폴리오(Architecture Agency)
이거 h2 가 안나오고 스크롤도 안되는데 왜이래요?
이런 화면만 나오는데요? css 연결 잘했는데 안돼요
-
미해결반응형 웹사이트 포트폴리오(App Official Landing Website)
.news-thum .date 위치가 안맞아요
<section class="news" id="news"> <div class="news-inner"> <div class="headline-share"> <h1>스타트메이트 최신 소식</h1> </div> <div class="news-content"> <div class="news-left"> <div class="news-big"> <img src="images/news-thum-big.jpg"> <div class="news-headline"> <h2>Merry Christmas 2020</h2> <p> 스타트업 CEO 여러분~ 지금은 사회적으로 힘든 시기를 보내고 있지만 우리는 이겨낼수 있습니다.<br> 스타트업메이트가 여러분을 응원합니다. <small class="date">Dec 24, 2020</small> </p> <a href="#none" class="btn-view">자세히 보기</a> </div> </div> </div> <div class="news-right"> <div class="news-items"> <div class="news-thum"> <div class="news-photo"> <img src="images/news-thum-small-01.jpg"> <span class="badge hot">hot issue</span> </div> <p> 스타트업 메이트 드디어 사무실이 확장 이전했습니다. <small class="date">Dec 11, 2020</small> </p> </div> <div class="news-thum"> <div class="news-photo"> <img src="images/news-thum-small-02.jpg"> <span class="badge new">new issue</span> </div> <p> 예상 고객의 요구사항 분석을 미리 알아보는 오프라인 CEO 프로젝트 <small class="date">Oct 21, 2020</small> </p> </div> </div> <div class="news-items"> <div class="news-thum"> <div class="news-photo"> <img src="images/news-thum-small-03.jpg"> <span class="badge hot">hot issue</span> </div> <p> 스타트업을 위한 앱 개발 유료서비스 플랫폼 서비스 오픈 <small class="date">Nov 12, 2020</small> </p> </div> <div class="news-thum"> <div class="news-photo"> <img src="images/news-thum-small-04.jpg"> <span class="badge new">new issue</span> </div> <p> 스타트업 CEO를 위한 사업 기획서 작성과 아이디어 도출 방법 <small class="date">Oct 16, 2020 </small> </p> </div> </div> </div> </div> <a href="#none" class="btn-readmore">read more news</a> </div> </section> //css .news { background-color: #f9f9f9; } .news-inner { width: 1300px; margin: auto; } .news-content { overflow: hidden; width: 95%; } .news-content > div { float: left; width: 50%; } .news-big { position: relative; width: 550px; height: 550px; margin: auto; } .news-big::before { content: ''; position: absolute; background-color: rgba(0, 0, 0, 0.6); width: 100%; height: 100%; top: 0; left: 0; transition: 0.3s; } .news-big:hover::before { background-color: rgba(0, 0, 0, 0.4); } .news-big img { width: inherit; height: inherit; object-fit: cover; } .news-headline { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; text-align: center; width: 90%; } .date { display: block; margin-top: 20px; font-size: 14px; } .btn-view { background-color: #000; padding: 5px 10px; border-radius: 5px; color: #fff; } .news-items { margin-bottom: 20px; } .news-items > div { display: inline-block; } .news-thum { width: 280px; } .news-thum:first-child { margin-right: 30px; } .news-thum:hover .news-photo img { transform: scale(1.1); } .news-thum p { margin-top: 0; } .news-photo { position: relative; display: inline-block; overflow: hidden; } .news-photo img { display: block; transition: 0.3s; } .badge { position: absolute; bottom: 0; left: 0; color: #fff; font-size: 14px; padding: 0 10px; } .badge.new { background-color: red; } .badge.hot { background-color: #000; } .news-thum .date { float: right; } .btn-readmore { background-color: #69acfe; color: #fff; width: 180px; text-align: center; padding: 5px; border-radius: 20px; text-transform: uppercase; font-weight: bold; font-size: 16px; display: block; margin: auto; margin-top: 30px; }제목 길이에 따라 date 위치가 바뀌는데 어떻게 수정해야 같은 위치로 놓을 수 있나요?
-
미해결Tailwind CSS로 만드는 멋진 웹 UI 스타일링
첨부파일 누락확인
[다운로드]+Tailwind+CSS(v3.4.1)+이론+및+실전+예제+완성본.zip 파일을 다운로드 받았는데, 강의내용과 폴더안의 파일이 다른것같습니다. 확인부탁드립니다.
-
미해결구글 애드센스 수익형 워드프레스 블로그 만들기
sticky 추가 css 코드 누락
올려주신 드라이브 파일에서 sticky 관련 파일은 찾을 수가 없는데 누락된건가요? 제가 못찾은거라면 어느부분에 작성되어 있는 지 알 수 있을까요? +추가) 밑줄 없애는 css 코드도 따로 없는것 같은데 확인 부탁드립니다..!
-
미해결구글 애드센스 수익형 워드프레스 블로그 만들기
파일
강의에 대한 질문은 인프런 질문하기나 1:1 카카오톡 플러스 친구에서 문의하셔도 가능합니다.(카카오톡 플러스친구 주소 http://pf.kakao.com/_ckMyxj/chat) 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요 글 가져오기 파일.xml은 어디서 다운 받을 수 있나요? 이런 파일들도 하나하나 다 요청해야지 받을 수 있는건가요?
-
해결됨순수하게 html/css/js만을 활용한 반응형 웹 제작 [실전편]
수업 소스 다운로드 어디서 받을수 있나요?
영상 수업 소스 다운로드는 어디서 받을수 있나요?영상 수업 동일하게 코딩해도 오류가 나거나 정상적으로 출력되지 않아..
-
미해결GSAP의 ScrollTrigger를 활용한 포트폴리오 제작
강의 너무 잘 듣고있습니다. 섹션6번에서 질문이 있습니다.
안녕하세요. 좋은 강의 감사합니다.센셕6번에서 스크롤트리거를 하셨잖아요. title를 fixed로 시키셨습니다..fromTo('.worklist' ,{margin:'0 auto'} ,{margin:'100vh auto 0', duration:'1',ease: "power3.out"},0)그런다 다시 올리면 버버벅 거리는 현상은 어쩔수 없는 현상일까요?margin-top가 올라가면 다시 0으로 돌아가면서 버벅거리는 현상같은데, 어쩔수 없는 현상인지 여쭤봅니다.혹시몰라 사진 첨부드려요~회신 주시면 너무 감사드릴겠습니다.항상 좋은 강의 많이 부탁드립니다.~
-
미해결GSAP의 ScrollTrigger를 활용한 포트폴리오 제작
강의 자료
안녕하세요.강의 잘 보고있습니다.강의에 사용된 이미지등 자료들은 어디서 받을 수 있을까요?
-
해결됨반응형 웹사이트 포트폴리오(Architecture Agency)
모바일 버전에서 메뉴 클릭 후 그 위치로 이동할 때 상단 영역
메인 페이지 모바일로 변경하는 부분까지 수강 잘 마쳤습니다.자세히 잘 설명해주셔서 감사해요.그런데 모바일 버전에서 메뉴로 해당 위치로 이동했을 때, 상단 영역 때문에 화면 윗부분이 잘려보이는 부분은 어떻게 해결해야 할까요?조금 윗부분으로 이동하는 방법이 없을까요?(혹시 제가 아직 못본 뒷부분 강의에 나와있다면 다 보지 않고 질문드려 죄송합니다!)
-
미해결GSAP의 ScrollTrigger를 활용한 포트폴리오 제작
header영역 스크룰방향이벤트 제작 강의 에서
header active가 실행하지 않습니다 오타가 있나 아무리 봐도 똑같이 코딩된 거 같은데 .. 왜그럴까요???
-
미해결반응형 웹사이트 포트폴리오(Architecture Agency)
PC에서 모바일화면으로 전환되면 GNB 메뉴가 OPEN되어있는 상태 (소스)4
@media (max-width:768px) { /* html { scroll-behavior: smooth; } */ /* Entire Layout */ .cd-section { height: auto; } .cd-section > div { height: auto; } .content { position: static; width: 100%; height: 100%; } /* Header */ header { transition: 0.5s; z-index: 100; } header.active { background-color: #fff; border-bottom: 1px solid #eee; } .menu { display: block; } .slogan { display: none; } .gnb { background-color: #fff; position: fixed; top: 0; right: -270px; width: 250px; height: 100vh; box-shadow: -5px 0 10px rgba(0, 0, 0, 0.1); transition: 0.5s; } .gnb.active { right:0; } .menu { margin-top: 60px; line-height: 40px; } .menu a { display: block; text-align: right; padding-right: 20px; color: #000; font-size: 20px; } /* Trigger */ .trigger { display: block; width: 24px; height: 14px; position: absolute; top: 20px; right: 20px; } .trigger span { position: absolute; height: 1px; width: 100%; background-color: #000; transition: 0.5s; } .trigger span:nth-child(1) { top: 0; } .trigger span:nth-child(2) { top: 50%; width: 80%; } .trigger span:nth-child(3) { top: 100%; } .trigger.active span:nth-child(1) { top: 50%; transform: rotate(45deg); } .trigger.active span:nth-child(2) { top: 50%; width: 80%; opacity: 0; } .trigger.active span:nth-child(3) { top: 50%; transform: rotate(-45deg); } /* go to top */ .gototop { position: fixed; bottom: 20px; left: 20px; border: 1px solid #fff; display: block; width: 40px; height: 40px; border-radius: 50%; text-align: center; line-height: 50px; transform: translateY(0px); opacity: 0; } .gototop.active { opacity: 1; } .btn-hiring { right: 20px; bottom: 20px; } .cd-vertical-nav { display: none; } /* Show Hide Section */ /* #home, #about, #project, #plan, #awards, #location, #contact { display: none; } */ /* ############# section : Home ############# */ .home-inner { height: 100vh; } .welcome-text { transform: translate(-50%, -50%) scale(0.7); width: 100%; /* border: 2px solid red; */ } .home-heading { left: 20px; } .home-heading span { font-size: 50px; } }