묻고 답해요
158만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
어코디언 네비게이션 중
해당 부분만 흰색으로 양옆에 나오는데, 왜 그런걸까요 ?
-
미해결[웹 퍼블리싱 실습] 웹 표준 사이트 만들기
레이아웃 문제
레이아웃이 선생님께서 올려주신 영상과 다르게 이렇게 나오네요 무슨 문제일까요 ? @charset "utf-8";/*레이아웃*/#wrap{width:100%;}#header{width:100%; height:325px; background: #111;}#contents{width:100%; height:800px; background: #222;}#footer{width: 100%; height: 200px; background:#333;}
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
라이브서버 문제
라이브서버로 열기를 해봐도 웹 브라우저가 열리지 않고 있습니다. 구글링 해서 파일명에 영어나 ., 띄어쓰기 한글 등이 들어가면 안되는 점도 숙지하고 작업했으며 설정도 다음과 같이 수정했고, 브라우저를 열어 직접 ip주소를 쳐 봐도 1번째 사진과 같이 뜨고 실행이 되질 않습니다ㅜㅜ 또 어떤 방법을 써봐야 할까요 선생님?
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
수험자 제공 텍스트 , 끊어도 되나요?
혹시 수험자 제공텍스트를 끊어써도 될까요?제공된 수업영상에는 줄바꿈으로만 하셨는데한 슬라이드에 제공되는 한 줄의 텍스트를 타입툴 여러개로 끊어써서 이동시켜도 되나하구요.한 단어만 회전시키거나 다른 글씨체로 해도 되는지 궁금합니다!
-
미해결GSAP의 ScrollTrigger를 활용한 포트폴리오 제작
완성된 코드 자료 받아볼 수 있을까요?
안녕하세요! 수강을 막 시작하여 학습파일을 다운로드 했습니다.수업에서는 강의자료 폴더명으로 '2023_인프런_포트폴리오메인' 이라는 폴더가 첨부파일로 있다고 하셨는데, 다운받아보니 '학생첨부용_수강학습파일' 폴더 밖에 없어서 문의드립니다.참고할 수 있도록 학습본 말고 완성된 전체본도 받아볼 수 있을까요?
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
D유형 최종본제작 - D1 갤러리 이미지
D유형 최종본제작 - D1갤러리 이미지 3개 사용하라고 나와있는데 저렇게 많이 나열하는게 맞나요? 그리고 완성본 화면줄이면 이미지 전부 갤러리 탭보더 밖으로 나와서 배열되는데.. css제대로 된게 맞을까요
-
미해결반응형 웹사이트 포트폴리오(App Official Landing Website)
position: fixed; 가 안먹혀요..뭐가 문제일까요?
html<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>starUp Mata : App Official Landing</title> <link rel="icon" href="images/logo_a.png"> <!-- jQuery CDN --> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <!-- Slick Slider --> <link rel="stylesheet" href="js/slick/slick-theme.css"> <link rel="stylesheet" href="js/slick/slick.css"> <script src="js/slick/slick.js"></script> <!--Custom csss & js--> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="responsive.css"> <script src="custom.js"></script> </head> <body> <div class="container"> <!-- Header --> <header> <div class="header-inner"> <div class="logo"> <a href="#none"><img src="images/logo_pc.png"></a> </div> <div class="gub"> <a href="#none">아비브소개</a> <a href="#none">제품</a> <a href="#none">이벤트</a> <a href="#none">리뷰</a> <a href="#none">문의하기</a> <!-- <a href="#none"></a> <a href="#none"></a> <a href="#none"></a> --> </div> <div class="login"> <a href="#none">로그인</a> </div> </div> </header> <!-- welcome --> <section class="welcome"> <div class="slideshow"> <img src="images/slide-welcome-01.jpg"> <img src="images/slide-welcome-02.jpg"> <img src="images/slide-welcome-03.jpg"> </div> <div class="welcome-heading"> <span>창의적인 아이디어를 만드는 가장 빠른 방법</span> <h1> An idea solution of startup for your <em>3가지 타이핑 텍스트 자리</em> </h1> <p> 스타트업 메이트 앱이 여러분의 최상의 스타트업 구축을 위해 창의적인 아이디어를 제공하는 데 최선을 다하겠습니다. </p> <div class="welcome-btns"> <a href="#none" class="btn start">CEO 시작하기</a> <a href="#none" class="btn guide">사용자 가이드</a> </div> </div> <div class="mouse"> <span class="wheele"></span> </div> </section> <!-- ceo-access --> <section class="ceo-access"></section> <!-- banner --> <section class="banner"></section> <!-- feature --> <section class="feature"></section> <!-- vision --> <section class="vision"></section> <!-- faq --> <section class="faq"></section> <!-- review --> <section class="review"></section> <!-- focus --> <section class="focus"></section> <!-- guide --> <section class="guide"></section> <!-- news --> <section class="news"></section> <!-- footer --> <footer></footer> </div> </body> </html>1000자 이상 안올라 간다해서 댓글에 남길게요
-
미해결SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma
SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma
수강생 참고자료 및 완성본 다운로드 => 다운로드 해도 소스 텍스트가 없습니다. ㅜㅜ 못 찾는건지 모르겠는데...찾지못해서 일일이 치고 있어요. 소스텍스트가 어디있는지 알려주세요.
-
미해결React + GPT API로 AI회고록 서비스 개발 (원데이 클래스)
css가 화면에 반영이 되지않습니다.
썸네일 이미지가 뜨지 않습니다!그리고 css도 안먹힙니다.더불어if (!data) { return <DiaryContainer></DiaryContainer>; } 위의 코드가 없으면 화면이 웹드라우저에 뜨지 않습니다. import { DiaryContainer, ResultTitle, Divider, CardContainer, CardTitle, CardContent, ActionListItem, } from "./CommonStyles"; import { LoadingOutlined, CheckCircleTwoTone, HeartTwoTone, SmileTwoTone, MessageTwoTone, SoundTwoTone, } from "@ant-design/icons"; import { Image } from "antd"; import styled from "styled-components"; const ThumbnailImage = styled(Image)` max-width: 100%; height: auto; border-radius: 8px; margin-bottom: 15px; display: block; `; const DiaryDisplay = ({ data, isLoading }) => { if (isLoading) { return ( <DiaryContainer> 불러오는중... <LoadingOutlined /> </DiaryContainer> ); } if (!data) { return <DiaryContainer></DiaryContainer>; } return ( <DiaryContainer> <ResultTitle>{data.title}</ResultTitle> <Divider /> <CardContainer> <CardTitle> <CheckCircleTwoTone twoToneColor="#FF9AA2" style={{ marginRight: "6px" }} /> 요약 </CardTitle> <CardContent>{data.summary}</CardContent> </CardContainer> <ThumbnailImage src={data.thumbnail} alt="Thumbnail" fallback="데이터:image/png;base64,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" /> <Divider /> <CardContainer> <CardTitle> <HeartTwoTone twoToneColor="#FFB7B2" style={{ marginRight: "6px" }} /> 감성일기장 </CardTitle> <CardContent>{data.emotional_content}</CardContent> </CardContainer> <Divider /> <CardContainer> <CardTitle> <SmileTwoTone twoToneColor="#FFDAC1" style={{ marginRight: "6px" }} /> 내가 느낀 감정 </CardTitle> <CardContent>{data.emotional_result}</CardContent> </CardContainer> <Divider /> <CardContainer> <CardTitle> <MessageTwoTone twoToneColor={"#B5EAD7"} style={{ marginRight: "6px" }} /> 심리 분석 </CardTitle> <CardContent>{data.analysis}</CardContent> </CardContainer> <Divider /> <CardContainer> <CardTitle> <SoundTwoTone twoToneColor="#C7CEEA" style={{ marginRight: "6px" }} /> GPT 조언 </CardTitle> <CardContent> {data.action_list.map((action, index) => ( <ActionListItem key={index}>{action}</ActionListItem> ))} </CardContent> </CardContainer> </DiaryContainer> ); }; export default DiaryDisplay; 코드는 이렇습니다.썸네일은 원래 본 강의의 깃허브에서 내려받은 코드로도 안돼서 고친 것입니다. 원래코드도 이미지가 안떳습니다 ㅠㅠ어떻게 문제를 해결할 수 있을까요?
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
header_logo 질문#2
E유형 로고 작성하는 부분에 "심벌과 로고명이 포함된 완전한 형태로 디자인한다." 라고 되어있는데 심벌은 따로 이미지가 주어지는지 혹은 심벌로 따로 만들어야 하는지, 만약에 footer_logo 부분에도 심벌을 포함해서 만들어야 하는지 궁금합니다.
-
미해결처음 만난 리액트(React)
15강 실습 오류
import styled from "styled-components"; const Wrapper = styled.div` padding: 1rem; display: flex, flex-direction: row; align-items: flex-start; justify-content: flex-start; background-color: lightgrey; `; const Block = styled.div` padding: ${(props) => props.padding}; border: 1px solid black; border-radius: 1rem; background-color: ${(props) => props.backgroundColor}; color: white; font-size: 2rem; font-weight: bold; text-align: center; `; const blockItems = [ { label: "1", padding: "1rem", backgroundColor: "red", }, { label: "2", padding: "3rem", backgroundColor: "green", }, { label: "3", padding: "2rem", backgroundColor: "blue", }, ]; function Blocks(props) { return ( <Wrapper> {blockItems.map((blockItem) => { return ( <Block padding={blockItem.padding} backgroundColor={blockItem.backgroundColor} > {blockItem.label} </Block> ); })} </Wrapper> ); } export default Blocks;style-componets를 install 하고 실습 코드를 실행했을 때, 강의에서 나온 결과 화면과 다른 화면이 나옵니다. 개발자 도구를 켜면 다음과 같이 display: flex; flex-direction: row 스타일이 적용되지 않은 것 같습니다.Wrapper 의 css 속성이 적용되지 않은 것 같은데, 원인을 못찾겠습니다. 답변주시면 감사하겠습니다.
-
미해결인터랙티브 웹 개발 제대로 시작하기
카드 뒤집힐 때 F가 보인 이유
안녕하세요? 강의 잘 보고 있습니다. F, B 카드가 있고 뒤집는 거잖아요? F에 z-index를 1을 주었기 때문에 B보다 앞에 있어서 F->B 순서로 보이구요. 여기서 궁금한 것은 실물 카드로 생각을 해보았을 때, F카드 밑에 B 카드가 있는거죠. [1번] backface-visibility: hidden을 주지 않았을 때 가드를 뒤집게 되면 B카드 밑에 F 카드가 있는게 아닌가요? [2번] 아니면 뒤집혀진 상태에서도 F의 z-index 1로 인해서 다시 F->B 상태로 되어 있는 건가요?제 생각은 실물 카드로 보면 뒷면이 보이더라도 B의 뒷면이 보여야 할거 같은데 F의 뒷면이 보여서 질문 드립니다.[1]번인 경우 F의 뒷면이 보이는게 이해가 안되고, 만약 [2]번인 경우 F 카드가 B 카드보다 위에 있다는 건데 뒷면을 안보여준다고 해도 그래도 F 카드가 보여야 할 것 같아서요.--------------------------------------------------제가 다시 생각해봤는데요. z-index 1이니깐 F 가 B 보다 무조건 위에 있는 건 맞으나, 실물 카드처럼 딱 붙어있는게 아니니깐 F는 위에서 돌고, B는 밑에서 돌고 F 뒷면, B 뒷면으로 있는 상태가 맞을까요? 여기서 뒷면은 안보이도록 해줬으니 B만 보이는거구요.
-
미해결반응형 웹사이트 포트폴리오(App Official Landing Website)
반응형 fixed 안먹히는 문제
pc버전은 문제가 전혀 없는데반응형이 되면 header에 준 position fixed가 이상해져요그 아예 안되는 건 아니에요 반응형에서 아래로 내릴 때 만 fixed 가 안되고 스크롤을 위로 올리면 작동이 되는데 이문제를 어떻게 해결해야 할지 모르겠어요이렇게 아래로 스크롤 하면 header 가 고정 되지 않고 사라져 버리고스크롤을 위로 하면 나타나요이게 원래 코드이게 반응형 코드인데 뭐가 잘못 된 걸까요?
-
미해결[웹 개발 풀스택 코스] HTML&CSS 기초
9강 form요소 강의 질문
강좌랑 똑같이 코드 쳤는데 태어난 날짜는? 입국한 날짜/시간은? 생년/월일, 예약시간, 주간 계획(몇주차)에 달력 표시가 안뜨는 지 궁금합니다!
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
제이쿼리로 슬라이드 작성 시, .css({left : 0}) 이게 왜 들어가는지 이해가 되지 않습니다.
.css({left : 0 })를 주석 처리해도 정상적으로 동작하는데굳이 넣으신 이유를 알 수 있나요?아니면 저 부분을 빼면 이상이 생긴다는 것을 보려면 코드를 어떻게 작성하면 좋을까요?
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
header_logo 부분 질문
header_logo 부분에 "로고의 크기 변경 시, 가로세로 비율(종횡비, aspect ratio)을 유지하여야 한다." 부분이 있습니다. 그냥 포토샵 할 때는 200 x 40 비율로해서 그대로 작성하는지 궁금합니다.
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
넷플릭스 어코디언 예제 질문
클릭했을 때 content가 나오도록 구현하는 과정에서,jQuery를 이용하지 않고 css의 focus 클래스로클릭했을 때 display:none 에서 display:block 으로 바뀌도록 하였는데 눌렀을 때 적용이 되지 않는 이유를 모르겠습니다.
-
미해결<M.B.I.T> 테스트 페이지 만들기! with Django
data.json 파일을 어디 올려놓은 건가요??
ㅠㅠ https://www.notion.so/MBIT-My-Best-IT-personalities-3d9128d972054b498b98365f1df4e656#ea988d6fd9ef495daae54c5b9ae8c7e9여기에 파일이 없는데..
-
미해결<M.B.I.T> 테스트 페이지 만들기! with Django
python manage.py dumpdata main --output data.json로 생성된 파일의 글자가 깨짐 문제
[{"model": "main.developer", "pk": 1, "fields": {"name": "���ü��", "count": 0}}, {"model": "main.developer", "pk": 2, "fields": {"name": "����ü��", "count": 0}}, {"model": "main.developer", "pk": 3, "fields": {"name": "���ü��", "count": 0}}, {"model": "main.developer", "pk": 4, "fields": {"name": "����ü��", "count": 0}}, {"model": "main.developer", "pk": 5, "fields": {"name": "�ݾ�ü��", "count": 0}}, {"model": "main.developer", "pk": 6, "fields": {"name": "����ü��", "count": 0}}, {"model": "main.developer", "pk": 7, "fields": {"name": "����ü��", "count": 0}}, {"model": "main.developer", "pk": 8, "fields": {"name": "����ü��", "count": 0}}, {"model": "main.question", "pk": 1, "fields": {"number": 1, "content": "����� �� Ư¡�� ��մϱ�?"}}, {"model": "main.choice", "pk": 1, "fields": {"content": "��ī�Ӱ� �ѷ��� �λ�, �ε巴�� �ձ� �λ�, ��ü������ ���� �λ� ������ �λ�,", "question": 1, "developer": 1}}]깨져도 상관없는 것인가요?
-
미해결<M.B.I.T> 테스트 페이지 만들기! with Django
현재는 구름 ide 컨테이너 생성이 유료인가요? 시간당 크레딧이 필요합니다.
네
