inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

173만명의 커뮤니티!! 함께 토론해봐요.

featherlight iframe를 사용해서 불러온 html에 scrolltrigger가 있는 경우 밀립니다

미해결

SCSS(SASS)+GRID+FLEX 실전 포트폴리오 퍼블리싱

GRID 반응형 포트폴리오 강의를 참고하며 개인 포트폴리오를 작업 중입니다. featherlight iframe를 사용해서 연결한 html파일 중 scrolltrigger 이벤트가 뜨는 이미지나 글상자가 다르게 출력됩니다. 원본html을 직접 들어갈 경우 정상적으로 작동하는데, 아이프레임을 통해 들어간 경우만 scrolltrigger로 transform x, y값을 이동하게 지정한게 오류가 나서 문의드립니다. 이럴 때는 어떻게 접근해서 해결해야 좋을까요? 해당이미지의 js 코드입니다.

  • featherlight
  • scrolltrigger
  • HTML/CSS
  • flex
  • sass
댓글 1 좋아요 1 조회수 432

dots custom cs 수정

미해결

HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)

dots 커스텀cs 로 수정하는 강의는 어디서 확인가능한가요 ??

  • slickslider
  • jquery
  • dotscustomcs
  • HTML/CSS
eun 댓글 1 좋아요 2 조회수 493

스크롤이 적용이 안되는것같아요!ㅜㅜ

미해결

애플 웹사이트 인터랙션 클론!

스크롤도 늘어나질 않고 스티키도 안보이고 씬도 변하질 않고 계속 0에 있어요ㅜㅜ 첨부하겠습니당 const main = () => { let y0ffset = 0; const sceneInfo = [ { //0 type: 'sticky', heightNum: 5, //브라우저 높이의 5배로 scrollHeight 세팅 scrollHeight: 0, objs: { container: document.querySelector('#scroll-section-0') } }, { //1 type: 'normal', heightNum: 5, scrollHeight: 0, objs: { container: document.querySelector('#scroll-section-1') } }, { //2 type: 'sticky', heightNum: 5, scrollHeight: 0, objs: { container: document.querySelector('#scroll-section-2') } }, { //3 type: 'sticky', heightNum: 5, scrollHeight: 0, objs: { container: document.querySelector('#scroll-section-3') }, } ]; function setLayout() { //각 스크롤 섹션의 높이 세팅 for (let i = 0; i < sceneInfo.length; i++) { sceneInfo[i].scrollHeight = sceneInfo[i].heightNum * window.innerHeight; sceneInfo[i].objs.container.style.height = `${sceneInfo[i].scrollHeight}px`; } console.log(sceneInfo); } function scrollLoop() { } window.addEventListener('resize',setLayout); window.addEventListener('scroll',() => { y0ffset = window.pageXOffset; scrollLoop(); }); setLayout(); }; main();

  • 클론코딩
  • 웹 디자인
  • HTML/CSS
  • 인터랙티브-웹
  • svg
  • javascript
댓글 1 좋아요 0 조회수 336

DetailView 변수명

해결됨

Do It! 장고+부트스트랩: 파이썬 웹개발의 정석

- 학습에 관련된 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. post_list.html에서는 변수를 소문자로 변환한 모델명 + _list 로 사용했는데 post_detail.html에서는 변수를 소문자로 변환한 모델명(post)로 사용한건가요? 어떤 방식으로 하는건지 설명이 없어서요...

  • django
  • docker
  • bootstrap
  • javascript
  • tdd
  • python
  • HTML/CSS
  • aws
Heyna 댓글 1 좋아요 0 조회수 218

공지사항 갤러리 탭메뉴 div a태그

해결됨

[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드

공지사항 갤러리 탭메뉴랑 공지사항 갤러리 별도 구성메뉴가 있는데 div 안에 '공지사항', '갤러리' 제목넣는 곳에 태그를 span은 별도메뉴에 쓰고, 탭메뉴에는 a태그로 쓰면 되나요? 상호작용이 들어가는 부분은 tab을 눌렀을 때 확인되어야 해서 a 임시링크를 걸어주는 걸로 기억하는데, 별도 구성인 경우엔 a태그 말고 span으로 줘도 무관한가요?

  • HTML/CSS
  • 웹 디자인
  • jquery
tenna104nn 댓글 1 좋아요 1 조회수 358

js) 2/3 -> 3/3으로 안 넘어갑니다

미해결

<M.B.I.T> 테스트 페이지 만들기! with Django

1/3 -> 2/3 은 잘 되는데 2/3 -> 3/3은 안 넘어갑니다. const vheight를 .text가 아니라 영상대로 .test로 했을 땐 아예 넘어가지도 않았구요,(근데 이건 질문이랑 답, 버튼들 div class명이 text로 되어있어서 그런 것 같습니다.) 오타가 난 건가 확인을 해봐도 오타는 하나도 없는데 왜 안 되는지 모르겠습니다. 밑에는 자바스크립트 코드이구요. 혹시 css에서 수치를 잘 못 설정하면 이렇게 될 수도 있나요? 아니면 j query 때문일 수도 있나요.. ? 해결방법 아시는 분들 도움 부탁드립니다. (참고: alert창 나오는 부분은 일부러 코드를 적지 않았습니다. 커뮤니티 글 다 확인해보고 할 수 있는 수정은 다 해봤는데 안 됐습니다.)

  • django
  • javascript
  • HTML/CSS
한승주 댓글 1 좋아요 0 조회수 347

소켓 프로그래밍 이란

미해결

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

질문있습니다. 소켓프로그래밍이라 하면 어떤것을 제작하는 것을 의미하나요 어렴풋이 서버 프로그래밍을 얘기하는 것 같은데.... 그리고 서버 어플리케이션을 만드는 것으 이야기하는지 서버의 운영체제를 만드는 것을 이야기하는지 잘 모르겠습니다. 도움말씀 부탁드려요..

  • 머신러닝 배워볼래요?
  • react-native
  • tensorflow
  • react
  • HTML/CSS
  • javascript
  • express
  • nodejs
신진 댓글 2 좋아요 1 조회수 827

예제 없어서 불편한분들

미해결

생활코딩 - HTML 기초

https://opentutorials.org/module/1892/10930 이 사이트 가서 새로 배우세요 예제 포함되어있습니다.

  • HTML/CSS
RAI KAI 댓글 1 좋아요 2 조회수 973

라이브 서버가 네이버웨일에서는 안되는건가용?

해결됨

[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드

안녕하세요 비주얼스튜디오 세팅부분 들으면서 선생님이 하시는거 따라 하는데 네이버 웨일 브라우저에서는 바디 부분에 글자 넣은게 반영이 안되는데 그래서 이 폴더에서 index를 우클릭하여 연결프로그램 -> edge 브라우저로 연결하면 텍스트가 반영이 되는데 문제는 주소가 이렇게 폴더위치로 뜨는데 이렇게 되면 안되는거 아닌가용?ㅠㅠ 어떻게 하면 좋을까요 ㅠㅠㅠㅠㅠㅠㅠ

  • 웹 디자인
  • jquery
  • HTML/CSS
혜민 댓글 1 좋아요 2 조회수 776

메일 확인 부탁드립니다!

미해결

풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]

메일 확인 부탁드립니다!

  • es6
  • HTML/CSS
  • javascript
장준 댓글 1 좋아요 0 조회수 176

와.. 여기서 1도 못하겠어요 ㅠㅠ

미해결

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

버전이 달라서 그런지 인터페이스도 다르고 메뉴도 다른 것 같아요 AVD Manager도 보이지 않고요 ㅠ 어떻게 해야 할지 모르겠습니다

  • tensorflow
  • javascript
  • HTML/CSS
  • react
  • nodejs
  • express
  • 머신러닝 배워볼래요?
  • react-native
LeeGunWoo 댓글 2 좋아요 0 조회수 249

Product ? Products?

미해결

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

<질문1> Products.js에서 sequelize.define로 테이블 정의시 복수형태로 Products된다고 들었는데 models.Product.create도 Product 단수 형태로 테이블 이름에서 s를 빼주는건가요??? <질문2> result를 log찍어 봤을떄는 또 Product라고 나오고 위에는 Products 테이블로 insert into 됐다고 나오는데 테이블을 만들어주는건 models/products.js 에서하는건데 model.Product.create 이말은 사실 테이블 생성이아니라 데이터 삽입이라고 보면 될까요? models . Product . create ( { name , description , price , seller , } )

  • express
  • react
  • javascript
  • react-native
  • HTML/CSS
  • tensorflow
  • 머신러닝 배워볼래요?
  • nodejs
댓글 1 좋아요 1 조회수 318

왜 색이 안변하죠??

미해결

만들면서 배우는 HTML/CSS

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. //style.css width : 100% ; height : 100% ; } .bx-wrapper , .bx-viewport , .slider { width : 100% ; height : 100% ; } .background__01 { width : 100% ; height : 100% ; background : url ( "../images/a.jpg" ) no-repeat ; background-size : cover ; background-position : center ; } .background__02 { width : 100% ; height : 100% ; background : url ( "../images/b.jpg" ) no-repeat ; background-size : cover ; background-position : center ; } .background__03 { width : 100% ; height : 100% ; background : url ( "../images/c.png" ) no-repeat ; background-size : cover ; background-position : center ; } .contents { position : absolute ; top : 0 ; text-align : center ; } .contents__name { font-size : 64px ; font-weight : bold ; color : blanchedalmond ; margin-bottom : 25px ; } .contents__job { font-size : 25px ; font-weight : bold ; color : blanchedalmond ; margin-bottom : 50px ; } .content__list { font-size : 0 ; } .contents__list > li { display : inline-block ; width : 52px ; height : 52px ; border : 1px solid white ; border-radius : 50% ; font-size : 16px ; } .content__list > li > a { color : white ; } //index.html <! DOCTYPE html > < html > < head > < meta charset = "utf-8" > < title > Halfhalfman's Homepage </ title > < link href = "css/reset.css" rel = "stylesheet" type = "text/css" /> < link href = "css/style.css" rel = "stylesheet" type = "text/css" /> < script src = "js/jquery.1.12.4.js" type = "text/javascript" ></ script > < script src = "plugins/bxslider/js/jquery.bxslider.js" type = "text/javascript" ></ script > < script src = "https://kit.fontawesome.com/2871c12638.js" crossorigin = "anonymous" ></ script > < script > $ ( document ). ready ( function (){ $ ( '.slider' ). bxSlider ({ controls : false , pager : false , auto : true }); }); </ script > </ head > < body > < div class = "slider" > < div class = "background__01" ></ div > < div class = "background__02" ></ div > < div class = "background__03" ></ div > </ div > < div class = "contents" > < p class = "contents__name" > Halfhalfman </ p > < P class = "contents__job" > I live at korea, I am a student, I have my own NFT. </ P > < div class = "contents__sns" > < ul class = "contents__list" > < li > < a href = "#" > < i class = "fa-brands fa-discord" ></ i > </ a > </ li > < li > < a href = "#" > < i class = "fa-solid fa-water" ></ i > </ a > </ li > </ ul > </ div > </ div > </ body > </ html >

  • HTML/CSS
우주대지 댓글 1 좋아요 0 조회수 301

왜 .content를 하면 content클래스를 인식하지 못하죠??

미해결

만들면서 배우는 HTML/CSS

<! DOCTYPE html > < html > < head > < meta charset = "utf-8" > < title > Halfhalfman's Homepage </ title > < link href = "css/reset.css" rel = "stylesheet" type = "text/css" /> < link href = "css/style.css" rel = "stylesheet" type = "text/css" /> < script src = "js/jquery.1.12.4.js" type = "text/javascript" ></ script > < script src = "plugins/bxslider/js/jquery.bxslider.js" type = "text/javascript" ></ script > < script > $ ( document ). ready ( function (){ $ ( '.slider' ). bxSlider ({ controls: false , pager: false , auto: true }); }); </ script > </ head > < body > < div class = "slider" > < div class = "background__01" ></ div > < div class = "background__02" ></ div > < div class = "background__03" ></ div > </ div > < div class = "contents" > < p class = "contents__name" > Halfhalfman </ p > < P class = "contents__job" > I live at korea, I am a student, I have my own NFT. </ P > < div class = "contents__sns" > < ul > < li > < i > discord </ i > </ li > < li > < i > opensea.io </ i > </ li > </ ul > </ div > </ div > </ body > </ html > 코드입니다.

  • HTML/CSS
우주대지 댓글 2 좋아요 0 조회수 418

position 속성으로 인한 높이값문의

미해결

HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)

div 안에 div가 존재하고 자식 div에 position:absolute를 주면 높이값을 잃기 때문에 높이값을 부모요소에 준다고 알고있습니다. 근데 그 높이값이 고정으로 주는게 아니라 안에 자식들이 div가 여러개 있거나 자식 div높이값에 따라서 유동적으로 부모 div값도 고정값이 아닌 자동으로 높이값이 변경되게 하려면 어떻게 해야하나요? 꼭 고정값으로 줘야 하나요? 당연히...자식에 의해서 부모의 높이값을 주면 담길꺼라 생각했는데 실제 담기는게 아니라...부모 사이즈만 늘어나는것 같습니다.

  • jquery
  • HTML/CSS
odark 댓글 4 좋아요 1 조회수 3836

if (scrollRatio <= 0.22) 로 이벤트 발생 시점을 컨트롤 하는 부분과 values 에 있는 start 와 end 값

해결됨

애플 웹사이트 인터랙션 클론!

if (scrollRatio <= 0.22) 로 이벤트 발생 시점을 컨트롤 하는 부분과 values 에 있는 start 와 end 로 처리하는 부분이 동일하지 않나요? 단순히 calcValues 도 하지 않기 위해서 if (scrollRatio <= 0.22) 와 같은 조건문이 있는걸까요?

  • 클론코딩
  • javascript
  • HTML/CSS
  • 웹 디자인
  • 인터랙티브-웹
  • svg
dev park 댓글 1 좋아요 0 조회수 228

비주얼스튜디오 세팅부분

해결됨

[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드

선생님 ㅠㅠ 비주얼 스튜디오 설치 및 사용법 영상 보면서 따라하는데, 여기서 우클릭 누르면 폴더추가가 있어야하는데 저에겐 왜 이런식으로 보일까요 ㅠㅠ 어떻게 해야 폴더 추가 할 수 있는게 되는지 알 수 있나요 ㅠㅠ 그리고 여기서 비주얼스튜디오 시작하기에서 어떤걸로 세팅해야할까요 ㅠ? 시험장에서도 이런식으로 세팅하기가 뜨나용?ㅠㅠ

  • jquery
  • 웹 디자인
  • HTML/CSS
혜민 댓글 1 좋아요 1 조회수 333

++에 대해서 궁금합니다.

미해결

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

1:40부근에 ++에 대해서 설명하실때 예를들어 i++ 라고하면 i에 1씩 더한다고 설명하셨는데. 실행할때는 i=0 이라 선언하고 i++를 실행하면 바로 1이더해진값인 1이 나오는게아니라 한번더 i의 값에 대해서 물어야지 1이더해진 값이 출력되더라구요. i++가 한번치면 i+1 두번치면 i+2 인데 해당상수 더하기는 바로적용되서 값이 반영되던데 ++는 어째서 출력값이 한번더 i의 값에대해 물어야지 나오는건가요? 쓸때없는 질문이지만 단순호기심에 여쭤봅니다.

  • HTML/CSS
  • javascript
  • react-native
  • nodejs
  • tensorflow
  • react
  • express
  • 머신러닝 배워볼래요?
댓글 1 좋아요 1 조회수 170

select 에 option태그 관련

미해결

[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드

선생님! option태그에 value="" 이부분은 그냥 공백으로 비워놔도 상관없는지 궁금해요

  • HTML/CSS
  • jquery
  • 웹 디자인
psk1710 댓글 1 좋아요 1 조회수 239

인기 태그

인프런 TOP Writers

주간 인기글