묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결CSS Flex와 Grid 제대로 익히기
animation forwards 관련 질문
안녕하세요, "CSS Flex와 Grid 제대로 익히기" 강의 및 "인터렉티브 웹개발 제대로 시작하기"강의를 듣고 예제를 응용 중 다음과 같은 질문사항이 생겼습니다."3D 보드게임판" 예제에 보면 초기에 "starting" 애니메이션 지정을 통해 카메라 앵글을돌려주는데 forwards 속성을 사용하여 마지막 프레임에서 멈추게 하는 것은 이해를 하였습니다.여기에 더 나아가 "전진! 3D 스크롤" 예제에 나오는 방향키 액션으로 앵글을 돌리는 액션을추가해보고 싶어 코드를 수정하였는데요. 질문은 위 starting 애니메이션 지정을 빼면 방향키 이벤트 키로 앵글을 서서히 누른만큼돌아가게 만들기는 했는데, starting 애니메이션 지정만 넣으면 방향키 이벤트가 먹통이되는 것을 확인하였습니다. 이리저리 알아본 바로는 애니메이션의 forwards 속성에 의해이후 rotate() 가 적용이 안되는 것처럼 보이는데, "animationFillMode" 속성을 통해 "none" 이나"backwards" 를 주면 방향키 이벤트가 정상작동 하지만, starting 으로 이미 돌아간 앵글에서첫 프레임으로 "짠" 하고 되돌아가고 방향키 이벤트가 먹는 것처럼 되어 자연스럽지가 않아보이는데 이를 해결하는 방법이 있을까요?
-
미해결처음 만난 리액트(React)
아예 처음부터에러가나요..
왜 처음부터 에러가나는지 모르겠어요..
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
코드가 잘못 됐나요..
코드가 잘못 됐나요..상품 목록이 나오질 않네요..#1 vsCode<html> <head> <title>TerretAccompany</title> <link href="index.css" type="text/css" rel="stylesheet" /> <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> </head> <body> <div id="header"> <div id="header-area"> <img src="images\icons\logo.png" /> </div> </div> <div id="body"> <div id="banner"> <img src="images\banners\banner1.png" /> </div> <h1>판매되는 상품들</h1> <div id="product-list"></div> </div> <div id="footer"></div> </body> <script> axios .get("https://2007f5d2-9d8b-49f0-8b70-032507e17d79.mock.pstmn.io") .then(function (result) { console.log("통신 결과 : ", result); const products = result.data.products; let productsHtml = ""; for (var i = 0; i < products.length; i++) { let product = products[i]; productsHtml = productsHtml + '<div class="product-card">' + "<div>" + '<img class="product-img"' + 'src="' + product.imageUrl + '" />' + "</div>" + '<div class="product-contents">' + "<!-- text를 넣을때 많이 씀 -->" + '<span class="product-name">' + product.name + "</span>" + '<span class="product-price">' + product.price + "원" + "</span>" + '<div class="product-seller">' + '<img class="product-avatar" src="images/icons/avatar.png" />' + "<span>" + product.seller + "</span>" + "</div>" + "</div>" + "</div>"; } document.querySelector("#product-list").innerHTML = productsHtml; }) .catch(function (error) { console.error("error 발생 : ", error); }); </script> </html> #2 postman{ "products" : [ { "name": "농구공", "price": 500000, "seller": "조던", "imageUrl": "images/products/basketball1.jpeg" }, { "name": "축구공", "price": 600000, "seller": "메시", "imageUrl": "images/products/soccerball1.jpg" }, { "name": "키보드", "price": 300000, "seller": "그랩", "imageUrl": "images/products/keyboard1.jpg" } ] }
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
item p span 에 float 주신것과 .progress 에 대한 질문입니다.
안녕하세요. item p span 에 float left 와 right 주신것과 .progress에 대한 질문입니다.item p 에.item p { display: flex; justify-content: space-between; align-items: center; }하면 span 에 float left right 를 한것과 같은 레이아웃이 만들어지긴 하는데, float 를 사용하신것은 혹시 크로스브라우징 때문에 사용하신걸까요?can i use 를 살펴보면 메이져 브라우저들은 거의 flex 를 지원하는데 IE 에서는 지원을 안하는 버전도 있고, prefix 를 사용해야 하는 버전도 있더라구요.크로스브라우징을 생각하면 flex 보다 float 를 사용하는것이 맞긴하지만, 이미 서비스가 종료된 IE까지 생각해야 하는것이 맞는것인지 고민이 되네요...html tag 중에 progress 라는 tag 가 있는것으로 알고 있습니다. progress 라는 태그 대신에 div 를 사용하신 이유가 있을까요?혹시 커스텀 css 를 입히기 힘든 태그일까요...? input type=checkbox 같은 경우도 css 를 입히기 힘들기 때문에 div 같은 영역을 커스텀 입힌다고 하더라구요. 위같은 경우들처럼 input type checkbox 나 <progess> 를 사용하지 않고 div 같은 영역으로 커스텀을 입히면 웹접근성에 저해되지는 않나요??웹접근성이나 시맨틱 태그때문에 태그 하나 사용하는거에 고민이 되네요....
-
해결됨쉽게 배우고, 포트폴리오로 만드는 반응형 웹! #설화수
a태그 질문!
강사님 lounge에 자세히보기로 이동하는 a태그는 div class: btn-view 태그로 한번 감싸서 사용해했는데 플래그십 스토어 스파에서(강의 4분 34초)는 div로 감싸지 않고 그냥 a태그를 사용하는 이유가 있을까요?? 같은 페이지 이동 버튼인데 div로 한번 더 감싸는 이유가 따로 있는지 궁금합니다!
-
해결됨쉽게 배우고, 포트폴리오로 만드는 반응형 웹! #설화수
질문있습니다!!
10분 40초쯤에 recomm_list li에 중앙 정렬을 위해 padding값을 주는 것 같은데 padding : 34px 35px 0 으로 어떻게 계산되는건지 궁금해요!혹시 다른 방법으로 정렬을 할 수 없을까요??
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
요소들이 조금씩 다른데
두개 사진에 태그들이 조금 다른데어떤걸로 외우면되나요
-
미해결퍼블리셔 개인 포트폴리오 홈페이지 제작 완벽 가이드(PDF)
취업시 포폴을 제출할 때
궁금한점이 있습니다. 취업시 포트폴리오를 작성한 것을 제출할 때프로젝트 배포한것을 계속 유지한체 링크를 포폴에 올려줘야나요 아니면 배포했을 때 모습을 이미지로 보여주는 건가요?
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
script 속성 defer 질문드립니다.
안녕하세요.<script> 태그를 넣는 위치에 대해 질문드립니다.<script> 태그를 </body> 바로 위에 넣어야 <body> 태그 안에 있는 html 내용들이 전부 파싱 된 이후에 script 가 실행된다고 하셨는데, 그렇다면 </head> 바로 위에 넣고 나서 script 태그의 속성으로 defer 를 넣으면 <body> 태그 안에 있는 html 내용들이 전부 파싱될때까지 <script> 태그 내용들이 실행을 기다렸다가 <body> 태그 안에 있는 html 내용들이 전부 파싱된 후에 실행된다고 알고 있는데,defer 속성을 쓰고, </head> 바로 위에 script 태그를 넣으면 안되는걸까요?2번 방법을 쓰게 된다면 아마 즉시실행함수를 만들어야 하는거 같은데, defer 속성을 쓰게 되면 즉시실행함수를 굳이 만들지 않아도 될것 같은데 defer 속성을 쓰면 안되는건가 해서 궁금해서 질문 드립니다!!
-
미해결따라하면서 배우는 웹애플리케이션 만들기
"페이지가 작동하지 않습니다."
강의보면서 따라하다가 새로고침을 하면 꼭 이런 페이지가 발생합니다. "페이지가 작동하지 않습니다.현재 localhost에서 요청을 처리할 수 없습니다.HTTP ERROR 500"완전 초보이다보니..아무리 봐도 어디를 고쳐야할지 모르겠어요 ㅜㅜ도움 요청 드립니다
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
overflow:hidden사용해야 없어지는 이유
<div class="container"> <ul class="navi"> <li><a href="#none" data-text="ABOUT">ABOUT</a></li> <li><a href="#none" data-text="INSTRUCTOR">INSTRUCTOR</a></li> <li><a href="#none" data-text="CLASS">CLASS</a></li> <li><a href="#none" data-text="LOCATION">LOCATION</a></li> </ul> </div>.navi li a{ font-size: 4em; text-decoration: none; color:#fff; position:relative; } .navi li a:before{ content : attr(data-text); position: absolute; color:yellowgreen; top:0; left:0; width:0; overflow:hidden; }위의 코드에서 왜 overflow:hidden을 주어야 비포에 width가 적용되는지 궁금합니다.overflow:hidden을 주지않고 position:absolute만 있을때 absolute는 요소를 inline block으로 바뀐다고 알고 있는데 F12개발자도구에서는 before가 inline요소라고 나오는 이유도 궁금합니다.제 독학길에 한줄기 빛이신 선생님 항상 감사합니다~!
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
슬라이드 넘어가는 효과가 안들어가요
선생님께서 만드신 슬라이드처럼 부드럽게 넘어가지 않고 이미지가 그냥 툭툭 끊기면서 바뀝니다.ㅠㅠ설마 이러면 실격사유인가요? .right { flex: 1; } .slide { width: calc(100vw - 600px); height: 850px; border: 1px solid orange; } .slide-image { width: inherit; height: 850px; font-size: 0; /* overflow: hidden; */ } .slide-items { height: 850px; } .slide-item { height: 850px; } .slide-item a { display: block; height: 850px; } .slide-item img { width: 100%; height: 850px; object-fit: cover; } setInterval(function(){ $('.slide-items').animate({top:'-100%'}, function(){ $('.slide-items').css({top:0}) $('.slide-item:first-child').appendTo('.slide-items') }) },3500)
-
미해결[웹 개발 풀스택 코스] HTML&CSS 기초
img 태그 관련 질문
img태그 뒤에 alt ""안에 개발자의 품격 로고 라고 쓰고 싶은데 써도 웹페이지에 안 나타나요 어떻게 해야 하나요?
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
D,E유형 제이쿼리로 슬라이드 할 때 CSS 문의
슬라이드를 제이쿼리로 공부하고 있는데,이런 상황에서는 어떻게 css를 고쳐야할지 궁금합니다 ㅠㅠ슬라이드 크기가 넘쳐요 높이값 적용이 안되고있는것같습니다. 지금 상황 말고도 다른 유형에서 calc 함수를 줄 때마다 제대로 적용이 안돼서 가로는 꼭 flex:1을 썼는데, 혹시 flex가 위에 있으면 적용이 안된다거나.. 특정 (block, inline-block..등) 요소에만 되거나 등등 적용 가능/불가능한 조건이 있나요?숫자에 공백 다 주고 똑같이 작성해도 잘 안됩니다.
-
해결됨처음 만난 리액트(React)
Cannot create property '_updatedFibers' on number '0' 에러가 떠요
차례대로 index.js, comment.jsx, commentlist.jsx인데. npm start를 하면 아래와 같은 에러가 떠요,,ㅜ
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
시험 출제 유형 문의
혹시 정보가 있으시다면 이번 회차(2023.3월~4월)의 지난 시험에는 어떤 유형이 나왔는지 궁금합니다.남은 하루동안 D, E 유형이 난이도 조정을 위해 새로 생긴 만큼 아주 집중적으로 공부하는편이 좋을지, 아니면 A~C 최종 복습을 하고 갈지 선택하려구요.. 물론 다 잘 해야겠지만요 ^^;;내일 시험이라 걱정이 많이 되고 떨리네요.
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
mouseenter와 mouseover의 차이
선생님 안녕하세요!마우스를 올렸을때 실행되는 함수로 mouseover를 알고있었는데, 선생님은 mouseenter를 사용하시더라구요!혹시 mouseenter랑 mouseover랑 차이점이 있을까요??
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
어디 물어볼곳이 없어서 질문합니다 ㅜㅜ
d3 가로메가 메뉴 말고도 다른부분들 암기할 부분들이 많은데... 물론 연습을 최대한 해보겠지만 만약 d3 유형 가로메가메뉴를 구현하지 못하고 c유형처럼 메뉴를 구성하게 됬을때 점수로 따지면 d3 메뉴에서 몇점정도 깎이게 되는건지 궁금합니다 ㅜㅜ 슬라이드 영역이 아니기에 실격은 아닐것 같은데..
-
미해결처음 만난 리액트(React)
빨간줄이 왜 싱기는지 모르겠습니다.
빨간줄은 뜨는데 왜 빌드는 되는건가요..??
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
Failed to compile [./src/App.js 12:35-41 문제 원인 좀
어디 쪽에서 문제가 발생 하는지 모르겠습니다.
