묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결반응형 웹사이트 포트폴리오(Architecture Agency)
트리거메뉴 제이쿼리
모바일에서 트리거메뉴 클릭시 제이쿼리(아이콘X로 변경 슬라이더메뉴 나오기)가 적용되지 않는데 왜 이럴까요 ㅠ 클레스네임부분에서 틀린게 없습니다
-
미해결플렉스(Flex) 반응형 웹사이트 포트폴리오(The World's Best Cities)
상위 태그 영역 무시 하는 방법
<div className="할아버지"> <div className="아버지"> <div className="본인"></div> </div> </div>;분명 이 강의 어디에서 배웠는데 기억이 안나서 질문을 올립니다.classname="본인"이 아버지의 영역을 무시하고할아버지의 영역을 기준으로 본인의 영역을 설정하는 방법이 있었는데요 기억이 안나네요분명 아버지 class에 어떤 css 속성을 설정을 해주면 아버지의 영역을 무시할 수 있었던 것으로 기억을 하는데 도움 부탁드립니다!
-
미해결GSAP의 ScrollTrigger를 활용한 포트폴리오 제작
제이쿼리 플로그인을 쓰나요?
강의듣고 자바스크립트로 코드 변경해보고싶은데... 질문글에 있는글을 보니 제이쿼리뿐아니라 제이쿼리를 사용한 플로그인을 사용한다고 되어있던데 제이쿼리를 사용한 플로그인을 사용하나요?...제이쿼리를 사용한 플로그인은 따로 자바스크립트로 교체가 안되는건가요?
-
미해결GSAP의 ScrollTrigger를 활용한 포트폴리오 제작
이 코드를 모르겠어요
이 코드를 처음 보는데 이게 왜 여기에 넣어지는지 모르겠어요.content: attr(data-char);*혹시 이 선생님 수업 영상 중에 기초가 될 수 있는 강의가 있을까요. 처음 보는 코드가 많이 보여서 공부를 해보고 싶습니다.
-
미해결반응형 웹사이트 포트폴리오(Architecture Agency)
custom.js 의 click 부분
custom.js에서 $(function(){ $('.trigger').click(function(){ $(this).toggeClass('active') $('.gnb').toggeClass('active') }) $('section, .menu a').click(function(){ $('.gnb').removeClass('active')}) $('.menu a').click(function(e) { e.preventDefault(); $.scrollTo(0, 900); }); }) 제이쿼리스크롤을 index.html에 링크 건 후에 custom.js의 click 부분들에 줄이 그어졌습니다."선언이 여기에 사용되지 않음으로 표시되었습니다" 라고 뜨는데 어떻게 해결해야 할까요?
-
미해결반응형 웹사이트 포트폴리오(Architecture Agency)
브라켓 자동 줄바꿈
자동으로 위로 줄이 올라가는데 어떻게 해결해야 하나요?..
-
미해결GSAP의 ScrollTrigger를 활용한 포트폴리오 제작
섹션10에 자료파일이 안보여요.
섹션10 스크롤에 반응하는 이미지와 텍스트 애니메이션 제작에 자료파일이 안보여요.
-
미해결[웹 퍼블리싱 실습] 반응형 사이트 만들기
sftp 연결시 encoding error
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사r한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. sftp 연결하는데encoding error 뜨는데 해결방법이 무엇인가요?remote_encoding 부분과remote_path 설저 다 햇는데도 안되네용
-
미해결반응형 웹사이트 포트폴리오(App Official Landing Website)
제이쿼리 탭메뉴 클릭 질문
개인 포트폴리오 웹 사이트 작업 중에 질문이 있습니다.기초반 중급반 고급반 버튼 각자 클릭하면 색깔이 바뀌면서 아래에 4개의 사진들이 바뀌는 형태로 하고 싶은데 잘되지 않습니다. html <div class="online-inner"> <section class="online"> <div class="online-title"> <h2> 온라인 강의 미리보기 <i class="fa fa-line-chart" aria-hidden="true"></i> </h2> </div> <div class="online-content"> <div class="online-btn"> <a class="active" href="#none">기초반</a> <a href="#none">중급반</a> <a href="#none">고급반</a> </div> <div class="online-tabs"> <div class="online-tab1"> <div class="online-tab-inner"> <a href="#none"><img src="images/tab1-img-01.jpg"></a> <a href="#none"><img src="images/tab1-img-02.jpg"></a> <a href="#none"><img src="images/tab1-img-03.jpg"></a> <a href="#none"><img src="images/tab1-img-04.jpg"></a> </div> </div> <div class="online-tab2"> <div class="online-tab-inner"> <a href="#none"><img src="images/tab2-img-01.jpg"></a> <a href="#none"><img src="images/tab2-img-02.jpg"></a> <a href="#none"><img src="images/tab2-img-03.jpg"></a> <a href="#none"><img src="images/tab2-img-04.jpg"></a> </div> </div> <div class="online-tab3"> <div class="online-tab-inner"> <a href="#none"><img src="images/tab3-img-01.jpg"></a> <a href="#none"><img src="images/tab3-img-02.jpg"></a> <a href="#none"><img src="images/tab3-img-03.jpg"></a> <a href="#none"><img src="images/tab3-img-04.jpg"></a> </div> </div> </div> </div> </section> </div> CSS.online-inner { background-color: #5f98e7; } .online { width: 1300px; margin: auto; padding: 50px 0; } .online-title { text-align: center; } .online-title h2 { font-size: 35px; font-weight: 600; color: #fefefe; } .online-content {} .online-btn { text-align: center; } .online-btn a { display: inline-block; padding: 10px 18px; margin-right: 30px; border: 1px solid #295aa0; border-radius: 30px; background-color: #fff; } .online-btn .active { background-color: #132f55; color: #fff; } .online-tabs {} .online-tab-inner { padding-top: 50px; text-align: center; } .online-tab-inner a { margin-right: 20px; } .online-tab-inner a img { width: 280px; } .online-tab1 {} .online-tab2 { display: none; } .online-tab3 { display: none; } $('.online-btn button:nth-child(1)').click(function(){ $('.online-tab1').show() $('.online-tab2').hide() $('.online-tab3').hide() $(this).addClass('active') $(this).siblings().removeClass('active') }) $('.online-btn button:nth-child(2)').click(function(){ $('.online-tab2').show() $('.online-tab1').hide() $('.online-tab3').hide() $(this).addClass('active') $(this).siblings().removeClass('active') }) $('.online-btn button:nth-child(3)').click(function(){ $('.online-tab3').show() $('.online-tab1').hide() $('.online-tab2').hide() $(this).addClass('active') $(this).siblings().removeClass('active') })마지막 jquery입니다. 웹디자인기능사 시험처럼 탭메뉴 2개일때는 됐는데 3개로 형태바꾸니까 잘되지 않습니다.
-
미해결실전! 웹사이트제작! Step By Step! _Basic (한화캐미컬_반응형웹)
태그 사용 관련 질문 있습니다.
안녕하세요, 좋은 강의 제공 해주셔서 감사드립니다.section.about 영역 마크업 강의 수강 중 궁금한게 있어 질문 드립니다.img 태그를 감싸실 때 p 태그를 사용 하셨는데 따로 이유가 있을까요? UI상 리스트에서 하나의 문단으로써 자리하기에 그런것일까요?<li> <a href="#"> <p class="img"> <img src="img/about_1.jpg" alt="회사소개" /> </p> <div class="text"> <h3>회사소개</h3> <p>삶의 가치를 높이는 기술기업, 한화 케미칼</p> <p class="more">more</p> </div> </a> </li>
-
해결됨반응형 웹사이트 포트폴리오(Architecture Agency)
마우스 휠 감도 문제 / 스크롤시 화면 다다음으로 넘어감
스크롤했을때 한 페이지씩 넘어가다가도가끔씩 2개의 페이지가 샤샥하고 한번에 넘어갈때가 있는데마우스 휠감도 조절해봐도 안되네요 ㅠ방법이 있을까요?
-
미해결실전! 웹사이트제작! Step by Step! ('크루알라모드'_반응형웹 제작)
수업자료를 다운받으면 오류가 납니다,,ㅠㅠ
수업자료 다운받으면 이렇게 뜨면서 압축해제도 되지않습니다,, gygy0604@naver.com 으로 자료파일 보내주시면 감사드리겠습니다.
-
미해결GSAP의 ScrollTrigger를 활용한 포트폴리오 제작
짤려서 나오는 이유를 모르겠어요
JS 코드$(function(){ $(".con03 .list").simplyScroll({ speed : 4, pauseOnHover : false, pauseOnTouch : false }) })CSS 코드그리고 그림이 글자 위로 보여요.simply-scroll .simply-scroll-clip { overflow: hidden; transform: rotate(5deg) translate(50%, 400px) scale(1.1); opacity: 0; } .simply-scroll .simply-scroll-clip .simply-scroll-list li { float: left; width: 400px; filter: brightness(50%); } .simply-scroll .simply-scroll-clip .simply-scroll-list li img { width: 100%; } .con03.motion .simply-scroll .simply-scroll-clip { transform: rotate(5deg) translate(0%, 400px) scale(1.1); opacity: 1; transition: 1.2s; transition-delay: 0.3s; }
-
해결됨XD UI 디자인 + Clone Coding 인터렉티브 반응형웹 포트폴리오!
강의와는 상관없는대요. 정말 여러번 시도해보고 궁금해서여쭤봅니다.
jquery 일때 아래코드로 잘나옴$(function(){ $(window).on('load scroll', function(){ const header = $('.header'); header.addClass('load'); //로드되자마자 나와야된다. }) }) 나름 바닐라자바스크립트로 변환해보려고 하는대 상단 네비가 안나오네요 모가문제일까요 ㅠㅠwindow.onload = function(){ const element = document.getElementsByClassName('header'); element.classList.add('load'); }
-
해결됨XD UI 디자인 + Clone Coding 인터렉티브 반응형웹 포트폴리오!
강사님 수업 잘듣고있습니다.
혹시 스크립트부분을 제이쿼리 대신 바닐라자바스크립트로 대체된 문서나 강의를 추가해주실순 없을까요 ^^; 아무래도 리액트도 공부하다보니, ㅎㅎ
-
해결됨플렉스(Flex) 반응형 웹사이트 포트폴리오(The World's Best Cities)
반응형 적응형 구분
안녕하세요 선생님!플렉스 강의 너무 잘 듣고 있습니다.최근 플렉스 강의를 중반부 이상듣고 다른 사이트들 브라우저 검사로 스타일시트 염탐? 하고 있는데 궁금한점이 생겨서 문의드립니다.인프런 메인화면의 경우 브라우저 가로 사이즈를 줄이면 반응형으로 컨텐츠 영역이 크기에 맞게 줄어드는데크몽, 당근마켓 메인화면의 경우 브라우저 가로 사이즈를 줄이면컨텐츠 1200px 영역 양옆 마진만 줄어들면서 모바일 태블릿 영역까지 가면 가로스크롤이 길게 생기는데요...요런 사이트들은 브라우저 검사-> 토글디바이스툴바 로 아이폰12pro 선택하고 새로고침을 해야 모바일 레이아웃이 나오고 있는데해당 사이트들은 반응형 사이트가 아닌건가요? 적응형 웹 사이트의 경우 카카오뱅크, 다방 으로 pc, mobile 따로 사이트가 있는 적응형 사이트로 알고 있습니다.(실제로 위에 토글디바이스툴바 방식으로 새로고침 하면 m.***.com || ***.com/mobile)크몽, 당근마켓이 적응형일 경우 주소가 변경되야 될꺼 같은데 주소 변동이 없어서 더 궁금합니다;;제가 잘못 이해하고 있을 수도 있습니다.ㅠ답변 부탁드립니다. 감사합니다.
-
미해결반응형 웹사이트 포트폴리오(Architecture Agency)
slider 적용이 안되어서 올립니다
<div class="history-info"> <h2>History</h2> <hr class="bar" /> <div class="history-slider"> <div> <h4> The Project<br />of Architect for the <span>2013</span> </h4> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet praesentium ipsum dolor consectetur officia nobis veritatis qui doloribus impedit quia! </p> </div> <div> <h4> The Project<br />of Architect for the <span>2014</span> </h4> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet praesentium ipsum dolor consectetur officia nobis veritatis qui doloribus impedit quia! </p> </div> <div> <h4> The Project<br />of Architect for the <span>2015</span> </h4> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet praesentium ipsum dolor consectetur officia nobis veritatis qui doloribus impedit quia! </p> </div> <div> <h4> The Project<br />of Architect for the <span>2016</span> </h4> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet praesentium ipsum dolor consectetur officia nobis veritatis qui doloribus impedit quia! </p> </div> <div> <h4> The Project<br />of Architect for the <span>2017</span> </h4> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet praesentium ipsum dolor consectetur officia nobis veritatis qui doloribus impedit quia! </p> </div> <div> <h4> The Project<br />of Architect for the <span>2018</span> </h4> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet praesentium ipsum dolor consectetur officia nobis veritatis qui doloribus impedit quia! </p> </div> <div> <h4> The Project<br />of Architect for the <span>2019</span> </h4> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet praesentium ipsum dolor consectetur officia nobis veritatis qui doloribus impedit quia! </p> </div> <div> <h4> The Project<br />of Architect for the <span>2020</span> </h4> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet praesentium ipsum dolor consectetur officia nobis veritatis qui doloribus impedit quia! </p> </div> </div> </div> 도저히 문제를 못찾겠습니다 한시간동안 체크했는데 답이 안나오네요..
-
해결됨HTML5 CSS3 기초 & 반응형 웹 템플릿 만들기!
max-width:1199px 강의 앞부분이 궁금합니다.
안녕하세요. 미디어쿼리 부분부터 열심히 달리고 있습니다.좋은 정보가 많아서 큰 도움이 되네요. 감사합니다^^그런데 "max-width:1199px" 강의 중 앞부분 영상이 누락된 게 아닌지 문의드립니다. 앞에 시작 부분 설명이 없고, font-size: 56.3%부분도 아무리 찾아도 없는데, 그 다음 강좌에 "지난 시간 설정했던"이라고 멘트가 나와서 어디있는지 궁금해서 문의드립니다.감사합니다 :)
-
해결됨XD UI 디자인 + Clone Coding 인터렉티브 반응형웹 포트폴리오!
강사님 transition-delay 질문있습니다
강사님! 수업 css에서 transition-delay가 작성만 돼 있고 사용되지는 않은 거죠?? 딜레이하고자 하는 요소에 똑같이 작성된 delay00 클래스명만 똑같이 붙여주면 되는 거 맞나요??
-
미해결그리드(Grid) 핵심이론 및 실전 활용
안녕하세요 두 가지 고민이 있어서 질문 합니다^^
브라켓츠 문제.VS를 쓰다가 오랜만에 브라켓츠를 써보았는데요.라이브뷰를 보려고 하니까 이런 창이 뜹니다.그래서 크롬에서 해결방법을 찾아 보려고 했더니 정확한 방법을 못 찾았습니다.혹시 이런 경우에 어떻게 해야 할지 아시면 좀 알려주세요. (새로 인스톨 하면 된다는데 확장기능까지 설치 하려니까 귀찮아서요. ㅎㅎ) 코딩관련pc 버전에서는 가로 1200px 여서 표가 잘 출력이 되는데요.모바일에서는 잘리게 되는 경우가 있습니다.그럴때 위 샘플 이미지의 붉은 색으로 표시된것 처럼 가로 스크롤로 밀어서 볼 수 있도록 하는 방법을 알고 싶습니다.이미지를 가로 스크롤 하는 방법도 있던데요.코딩 된 table 자체를 가로로 스크롤 할 수 있는 방법이나 소스를 알려 주시면 감사하겠습니다.실무를 해 보려니까 여러가지 어려움이 많습니다. 도와 주세요! ㅜㅜ