묻고 답해요
156만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결[웹 개발 풀스택 코스] HTML&CSS 기초
html style 속성 질문입니다!
style 속성 강좌 11:41 초 별도의 .css 파일로 만들어서 사용하는 것을 external style 이 문장이 주석으로 지정된 거 같은데라이브 채널에 왜 표기되는 지 궁금합니다!
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
이번 강의에선 display flex가 무조건 적으로 필요한건가요 ?
square에다가 포지션 absolute를 주고 수직중앙 수평중앙으로하려고했더니 span이 중앙이아닌 우측하단으로 취우쳐져있고 transform으로 수직중앙 시키고 키프레임 애니메이션으로 돌릴려고하니,, transform이 중첩되어있어서 또 걸리네요. flex를 꼭 사용해야할까요 ?
-
미해결반응형 웹사이트 포트폴리오(Architecture Agency)
안녕하세요. 질문있어서 조심스레 글을 올려봅니다.
page-scroll-effect를 맨 상단 비주얼부분에만 적용하고나머지 section 들은 높이값을 갖도록 하고싶은대요.혹시 알수 있을까요? 말주변이 없어서 아래 이미지를 그렸습니다. ㅠㅠ
-
미해결인터랙티브 웹 개발 제대로 시작하기
3d 뒤집기 추가효과
지금 카드를 3d로 뒤집는데 그냥 뒤집히는게아니라카드의 뒷면이 무엇인지 왼쪽아래나 왼쪽면부터 조금씩 뒤집어지는 느낌으로 뒤집기 위해선 animation3에서 이미지를 나눠서 보여준것처럼 효과를 줘야할까요? 그냥 카드가 3d로 휙 뒤집히는게 아닌 책장넘길때처럼 구현하고싶은데 뒷면을 확인할때 긴장감을 주기위해서 혹시 어떤 방법이 있을까요?
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
active 관련 질문
폰트어썸으로 라디오버튼과 체크박스를 커스텀 하는 강의에서, checked 가상클래스는 input[type=checkbox] 에 적용하였으나 (체크박스를 누르는 것이므로 active 또한 input[type=checkbox]에 적용하면 자연스럽다고 생각하여서)active는 label에 적용한 이유를 모르겠습니다.
-
미해결Tailwind CSS로 만드는 멋진 웹 UI 스타일링
단축키 질문입니다!
Typography(2)-글자 서식 및 색상 강의 5:59에서문장을 드래그 하고 어떤 단축키를 누르셔서 태그로 감싸셨더라구요.해당 단축키가 무엇인지 혹시 알수 있을까요?
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
다운로드한 교재랑 강의 교재가 달라서 너무 불편하네요.
다운로드한 교재 순서대로 진도 나가는 것도 아니라서 매번 교재 어디인지 찾는 것도 불편하고 막상 없는 자료를 찾다 보니 짜증 납니다. 강의 중에 사용 중인 PPT도 올려주시면 좋겠습니다.
-
미해결React + GPT API로 AI회고록 서비스 개발 (원데이 클래스)
임폴트가 안됩니다
import React from 'react'; import Counter from './components/Counter'; // Counter 컴포넌트의 경로를 정확히 입력 function App() { return ( <> <Counter /> </> ); } export default App; 이런 오류가 뜹니다 버전이 달라서일까요?노드는 최신버전을 쓰고있습니다.
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
checked 가상클래스에서 transform 속성을 사용할 때 관련 질문입니다.
'확장선택자 실전 퍼블리싱 5' 강의에서 .heading .text1 을 translateY 로 위치를 이동시켰을 때의 경우 다른 라디오 버튼을 눌렀을 때 이동했던 .text1 이 원래 위치로 돌아가는 모션이 보였는데, 이 강의에서 h1을 이동시켰을 경우에는 이동했던 h1이 이동한 위치에 그대로 머물러 있는 이유를 모르겠습니다.
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
부모요소에 자식요소가 겹쳐지는데 이유가 뭔가요?
<!DOCTYPE html><html lang="ko"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, inital-scale=1.0"> <script src="jquery-3.7.1.min.js"></script> <title></title><style> <!-- .parent{ position:relative; width:800px; height:800px; border: 1px solid #ddd; } .child{ position:absolute; /*수직수평중앙 시작*/ left:50%; top:50%; transform:translate(-50%,-50%); /*수직수평중앙 끝*/ background-color:skyblue; width:100px; height:100px; } --> .parent{ position:relative; width:600px; height:300px; border: 5px solid red; } .child{ position:absolute; top:100%; left:100%; background-color:skyblue; width:150px; height:100px; } </style></head><body> <!-- <div class="parent"> <div class="child"></div> </div> --> <div class="parent"> <div class="child"></div> </div></body></html>
-
미해결처음 만난 리액트(React)
컴포넌트 합성과 추출에서 props에 관해 질문이 있습니다!
안녕하세요. 소플님. 강의 정말 잘 듣고 있습니다.컴포넌트 합성과 추출에서 props에 관련하여 질문이 있어 질문을 드립니다.// Component 추출 전 function Comment(props){ return ( <div className = "comment"> <div className = "user-info"> <img className = "avatar" src = {props.author.avatarUrl}, alt = {props.author.name} /> <div className = "user-info-name"> {props.author.name} </div> </div> <div className = "comment-text"> {props.text} </div> <div className = "comment-date"> {formatDate(props.date)} </div> </div> ); }첫 코드가 Component를 추출하기 전의 코드이고/* Component 추출 후 */ // 1. Avatar Component 추출 function Avatar(props){ return( <img className = "avatar" src = {props.user.avatarUrl}, alt = {props.user.name} {/* 재사용성을 측면을 높이기 위해 보편적인 단어인 user를 사용 */} /> ); } // 2. UserInfoName Component 추출 function UserInfoName(props){ return( <div className = "user-info-name"> {props.user.name} </div> ); } // 3. UserInfo 추출하기 function UserInfo(props){ return( <div className = "user-info"> {/* 이미 추출한 Avatar Component도 적용 */} <Avatar user = {props.user} /> {/* 이미 추출한 UserInfoName Component도 적용 */} <UserInfoName user = {props.user}/> </div> ); } // 4. CommentText 추출하기 function CommentText(props){ return( <div className = "comment-text"> {props.text} </div> ); } // 5. CommentDate 추출하기 function CommentDate(props){ return( <div className = "comment-date"> {formatDate(props.date)} </div> ); } // 6. 추출한 Component들로 Comment 재합성 function Comment(props){ return( <div className = "comment"> <UserInfo user = {props.user}/> <CommentText text = {props.text}/> <CommentDate date = {props.date}/> </div> ); }이 코드가 강의에서 작성해주신 코드를 제 나름대로 완성한 컴포넌트를 추출한 형태입니다.userData가 아래의 형태라고 가정하겠습니다.const commentData = { user: { avatarUrl: "https://example.com/avatar.jpg", // 아바타 이미지 URL name: "Soaple" // 사용자 이름 }, text: "안녕 리액트!", date: new Date() // 댓글 작성 날짜 };처음 Comment Component에 Props로는 CommentData 자체가 전달될 것이고, 그 다음 UserInfo의 props로는 props.user, 여기서는 아래의 commentData.user가 전달이 되는 것까지는 논리적 흐름대로 이해를 했습니다. // UserInfo가 받은 props(commentData.user) user: { avatarUrl: "https://example.com/avatar.jpg", name: "Soaple" } 그런데 Avatar의 props로는 props.user가 전달되어야 하는데 그렇게 되면 Avatar에 전달하는 props가 commentData.user.user가 되어 전달할 수 없지 않나요? UserInfoName도 commentData.user.user가 되어 이상하다는 생각이 드는데... chatGPT나 뤼튼과 AI에 물어봐도 이상이 없는 정상 코드라는 답변을 받았습니다. React에서 props가 굉장히 중요하다고 강조하신 만큼 이 부분은 꼭 집고 넘어가야겠다는 생각이 듭니다. 답변 부탁드립니다!
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
강의 내용 pdf가 제공되나요?
강의 내용 pdf가 제공되나요?
-
미해결SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma
활성화 중인 scss 하나만 css 로 컴파일 가능할까요?
동일한 폴더 내에 있는 파일 중 style.scss만 css로 컴파일 하고 싶습니다하단의 Watch Sass 클릭하여 컴파일 진행시 style.scss 뿐 아니라 common.scss도 동시에 css로 컴파일 되어 방법을 찾다 문의 남깁니다 하나의 파일만 컴파일 가능한지 궁금합니다
-
미해결풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
강의에서 알려주신 Properties for the flex container 복습 사이트, 검색 발견되어서 공유드립니다~
- 본 강의 영상 학습 관련 문의에 대해 답변을 드립니다. (어떤 챕터 몇분 몇초를 꼭 기재부탁드립니다)- 이외의 문의등은 평생강의이므로 양해를 부탁드립니다- 현업과 병행하는 관계로 주말/휴가 제외 최대한 3일내로 답변을 드리려 노력하고 있습니다- 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.강의 영상에서 알려주신 사이트인데, 자료에서는 서비스 종료로 유사 사이트 안내 되어 있었어요. 제가 궁금해서 구글에서 'properties for the flex container' 로 검색해서 이미지탭에서 발견하여서 링크 공유드립니다. https://codepen.io/osublake/pen/dMLQJr항상 좋은 자료 제공해주시는 강사님 감사합니다~~
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
slick slider 이미지 개수
slick slider 로 slideToShow: 4로 해도 화면에는 이미지가 하나 밖에 안떠요 ㅠㅠ 전체 코드 복사해서 올리겠습니다..!
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.01
gsap으로 흐르는 배너도 제작이 가능할까요?
어제 이어 질문드리네요..ㅎㅎ찾아봤더니 잘 안나오기도 하고 머리썻는데 안되서 다시질문드려요 ㅠ인터넷보면 물 흐르듯 무한으로 보여지는 배너들효과를 구현하려고하는데A div실행 이후 B가 실행하고 이걸 무한으로 돌려야겠다! 싶었습니다. 제가 계산을 잘못한것인지 계속 상이하게 됩니다. ㅠ목표 예시) framer 로 구현위와 같은 효과를 GSAP로도 주고 싶었는데 가능할까요?트라이 계쏙해보는데 안되네용 ㅠ 제 생각은 무한루프 돌리는 상태의 div를 감싼 부모를 css 키프레임줘서 빠르게 들어온 이후 무한으로 루프돌릴계획입니다! useGSAP( () => { const Perents = ref.current?.offsetHeight; if (Perents) { gsap.set(".boxes-clone", { y: `-=${Perents}` }); gsap.fromTo( ".boxes", { y: `-${Perents}` }, { duration: 3, ease: "none", y: `+=${Perents}`, repeat: -1, } ); gsap.fromTo( ".boxes-clone", { y: `-${Perents}` }, { duration: 3, ease: "none", y: `+=${Perents}`, repeat: -1, delay: 3, } ); } }, { scope: ".wrapper" } );
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
calc가아니라 transform : transition을 사용해도 상관없는건가요?
보더 안으로 넣을때 top : calc가아니라 transform : transition을 사용해도 상관없는건가요?
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.01
혹시 부드럽게 진입 이후 루프가 가능할까요?
안녕하세요! 초기 애니메이션을 진입할때 css나 gsap으로 keyfream 주고 빠르게 들어온 이후 감속하듯이 부드럽게 흐르도록 구현 할 수 있을까요..? css에 같은 클래스에 키프레임을 줬더니 css때문에 gsap이 충돌나는지 안되더라구요.ㅠ.
-
해결됨[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
시험시 HTML 작성과 포토샾 작업 중 어느 것을 먼저합니까?
로고, 슬라이드, 갤러리, 배너, 바로가기 이미지 작업 HTML 작성 후에 해야 합니까? 시험지 보고 먼저 제작 해 두어야 합니까?HTML 작성 하다가 중간 중간 제작해야 합니까?
-
미해결HTML/CSS 베이스캠프
마지막 섹션9 자료를 다운받아도 압축이 안풀려집니다
마지막 섹션9 자료를 다운받아도 압축이 안풀리네요그러면 파이널 프로젝트 호두 관련 파일은 어디서 다운 받을 수 있을까요?
