176만명의 커뮤니티!! 함께 토론해봐요.
미해결
반응형 웹사이트 포트폴리오(App Official Landing Website)
pc버전은 문제가 전혀 없는데 반응형이 되면 header에 준 position fixed가 이상해져요 그 아예 안되는 건 아니에요 반응형에서 아래로 내릴 때 만 fixed 가 안되고 스크롤을 위로 올리면 작동이 되는데 이문제를 어떻게 해결해야 할지 모르겠어요 이렇게 아래로 스크롤 하면 header 가 고정 되지 않고 사라져 버리고 스크롤을 위로 하면 나타나요 이게 원래 코드 이게 반응형 코드인데 뭐가 잘못 된 걸까요?
미해결
[웹 개발 풀스택 코스] HTML&CSS 기초
강좌랑 똑같이 코드 쳤는데 태어난 날짜는? 입국한 날짜/시간은? 생년/월일, 예약시간, 주간 계획(몇주차)에 달력 표시가 안뜨는 지 궁금합니다 !
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
.css({left : 0 })를 주석 처리해도 정상적으로 동작하는데 굳이 넣으신 이유를 알 수 있나요? 아니면 저 부분을 빼면 이상이 생긴다는 것을 보려면 코드를 어떻게 작성하면 좋을까요?
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
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
ㅠㅠ https://www.notion.so/MBIT-My-Best-IT-personalities-3d9128d972054b498b98365f1df4e656#ea988d6fd9ef495daae54c5b9ae8c7e9 여기에 파일이 없는데..
미해결
<M.B.I.T> 테스트 페이지 만들기! with Django
[{"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
네
미해결
풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2] 잔재미코딩 PDF 파일 예제 shorturl.at 링크로 들어가면 something went wrong while fetching invitation 문구가 뜨고 안됩니다
미해결
React + GPT API로 AI회고록 서비스 개발 (원데이 클래스)
그런데 글만 회고록에 글만입력하면 오류가 납니다. 오류의 원인은 speed.js파일 때문이라고 합니다. 현재 코드는 아래와 같습니다. 허파가 뒤집어집니다. import { Input, Button} from 'antd'; const { TextArea } = Input; import { useState } from "react";// 저장하는 곳임포트 const DiaryInput = ({ isLoading, onSubmit }) => { const [userInput, setUserInput] = useState(""); // isLoading 로딩상태에서 사용하는 변수 // inSubmit 다입력 작성하면 사용 const handleUserInput = (e) => { setUserInput(e.target.value); }; const handleClick = () => { onSubmit(userInput); }; return ( <div> <TextArea value={userInput} onChange={handleUserInput} placeholder="오늘 일어난 일들을 간단히 적어주세요." /> <Button loading={isLoading} onClick={handleClick}> GPT 회고록을 작성해줘! </Button> </div> ); } export default DiaryInput; // import { Input , Button} from 'antd'; // import { useState } from 'react'; // const { TextArea } = Input; // const DiaryInput = ({isLoading, onSubmit}) => { // const [userInput, setUserInput] = useState(""); // //사용자의 입력을 받아 상위 컴포넌트로 넘기기 // // 로딩상태에서는 제출버튼 못누루게 // const handleUserInput =(e)=>{ // setUserInput(e.target.value); // const handleClick = ()=>{ // onSubmit(userInput); // } // } // return ( // <div> // <TextArea value={userInput} onChange={handleUserInput} placeholder='오늘 하루 회고'/> // <Button loading={isLoading} onClick={handleClick}>GPT회고록 시작</Button> // </div> // ); // }; // export default DiaryInput; import { useState } from 'react'; import { CallGPT } from './api/gpt'; import DiaryInput from './components/DiaryInput'; const dummyData = { "title": "고립된 개발자의 고민", "thumbnail": "https://source.unsplash.com/1600x900/?programming", "summary": "혼자 코딩과제를 진행하면서 걱정이다.", "emotional_content": "최근 혼자 코딩과제를 진행하면서, 협업이 없이 모든 것을 혼자 결정하고 해결해야 한다는 부담감에 많이 무겁습니다. 강의를 듣고 최선을 다해 프로젝트를 진행했지만, 예상치 못한 버그들로 인해 스트레스가 많이 쌓였습니다. 스택오버플로와 GPT를 통해 문제를 해결하긴 했지만, 이러한 문제해결 방식이 정말로 제 개발 실력을 향상시키는지에 대해 의문이 듭니다. 왠지 스스로의 능력을 시험할 기회를 잃은 것 같아 아쉽고, 불안감도 커지고 있습니다.", "emotional_result": "이 일기에서 감지되는 감정은 불안, 부담감, 그리고 자신감의 결여입니다. 고립된 상황에서의 성공에 대한 압박감과 문제 해결 방법에 대한 의심은 정서적으로 큰 부담을 주고 있습니다. 자기 효능감이 낮아짐을 느끼는 상황입니다.", "analysis": "고립되어 문제를 해결하는 과정은 큰 스트레스와 불안을 유발할 수 있습니다. '혼자서 하는 일은 좋은 일이든 나쁜 일이든 더욱 크게 느껴진다'는 에릭 에릭슨의 말처럼, 혼자서 모든 것을 해결하려는 시도는 때로는 개인의 성장에 도움이 될 수 있지만, 지속적인 고립은 자기 효능감을 저하시킬 수 있습니다. 이러한 상황에서는 자신의 노력을 인정하고, 필요한 경우 도움을 요청하는 것이 중요합니다.", "action_list": [ "프로젝트 중 발생하는 문제를 혼자 해결하려 하지 말고, 멘토나 동료 개발자와 상의를 통해 해결 방안을 모색하라.", "정기적으로 자신의 학습 방법과 진행 상황을 평가하여, 필요한 경우 학습 방식을 조정하라.", "개발 과정에서의 스트레스 관리를 위해 적절한 휴식과 여가 활동을 통해 정서적 안정을 찾으라." ] }; function App() { const [data, setData] = useState(dummyData); // 우선 빈문자열로 해놓고 const [isLoading, setIsLoading] = useState(false); const handleClickAPICall = async (userInput) => { try { setIsLoading(true);// 처음에는 로딩을 트루 const message = await CallGPT({ prompt: `${userInput}`, }); // Assuming callGPT is a function that fetches data from GPT API setData(JSON.parse(message)); } catch (error) { // Handle error (you might want to set some error state here) } finally { setIsLoading(false);//다음에는 펄스로 } }; const handleSubmit = (userInput) => { handleClickAPICall(userInput); }; console.log(">>data", data); return ( <> <DiaryInput isLoading={isLoading} onSubmit ={handleSubmit} /> <button onClick={handleClickAPICall}>GPT API call</button> <div>title : {data?.title}</div> <div>analysis : {data?.analysis}</div> <div>emotional_content : {data?.emotional_content}</div> <div>emotional_result : {data?.emotional_result}</div> </> ); }; export default App; // import { useState } from "react"; // import { CallGPT } from "./api/gpt"; // import { message } from "antd"; // import DiaryInput from "./components/DiaryInput"; // const dumyData = JSON.parse(` // { // "title": "당황스러운 예제 에러", // "thumbnail": "https://source.unsplash.com/1600x900/?confused", // "summary": "가끔 예제 에러가 발생하여 당황함", // "emotional_content": "가끔 예제 에러가 나타나는 것이 정말 당황스럽다. 이런 상황들은 예상치 못한 문제로 인해 나를 혼란스럽게 만든다. 그럼에도 불구하고, 이런 에러들은 동시에 나의 문제 해결 능력을 시험한다.", // "emotional_result": "당황스러움과 혼란스러움이 느껴진다. 그러나 이는 예상치 못한 문제에 대처하는 능력을 향상시키는 과정일 수 있다.", // "analysis": "당신의 당황함과 혼란스러움은 예상치 못한 상황에 대한 불안감과 두려움을 반영할 수 있습니다. 하지만, '문제는 기회다'라는 유명한 격언을 기억하십시오. 이러한 에러들은 당신의 문제 해결 능력을 향상시키는 좋은 기회일 수 있습니다.", // "action_list": [ // "예상치 못한 에러에 대비하는 습관 만들기", // "문제 해결 능력 향상을 위한 자기계발", // "당황하지 않고 차분하게 상황을 평가하는 능력 기르기" // ] // } // `); // function App() { // const [data, setData] = useState(dumyData); // const [isLoading, setIsLoading] = useState(false); // // 여기로딩상태가 // const handleClickAPICall = async (userInput) => { // try{// try catch로 감싸서, 처음에는 로딩상태를 트루라고 하고 // setIsLoading(true); // const message = await CallGPT({ // prompt:'{userInput}', // }); // setData(JSON.parse(message));// 그리고 데이터가 잘오면 받아보자 // } catch (error){ // }finally{ // setIsLoading(false);// 나중에는 false라고 하자 // } // }; // const handleSubmit = (userInput)=>{ // handleClickAPICall(userInput); // }; // console.log(">>data", data); // return ( // <> // <DiaryInput isLoading={isLoading} onSubmit={handleSubmit} /> // // 여기로 옴 // <button onClick={handleClickAPICall}>GPT API call</button> // <div>data : {data?.title}</div> // <div>thumbnail: {data?.thumbnail}</div> // <div>summary : {data?.summary}</div> // <div>emotional_resul : {data?.emotional_resul}</div> // <div>emotional_content : {data?.emotional_content}</div> // <div>analysis: {data?.analysis}</div> // <div>action_list: {data?.action_list}</div> // </> // ); // } // export default App ;{ "name": "my-gpt-diary", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "tsc -b && vite build", "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0", "preview": "vite preview" }, "dependencies": { "@ant-design/icons": "^5.4.0", "antd": "^5.20.1", "react": "^18.3.1", "react-dom": "^18.3.1", "styled-components": "^6.1.12" }, "devDependencies": { "@types/react": "^18.3.3", "@types/react-dom": "^18.3.0", "@typescript-eslint/eslint-plugin": "^7.15.0", "@typescript-eslint/parser": "^7.15.0", "@vitejs/plugin-react": "^4.3.1", "eslint": "^8.57.0", "eslint-plugin-react-hooks": "^4.6.2", "eslint-plugin-react-refresh": "^0.4.7", "typescript": "^5.2.2", "vite": "^5.3.4" } }
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
slide-items를 애니메이트해서 -1200픽셀만큼 이동시킨후 다시 left 0 은 무슨소린지 모르겠습니다 그러면 첫번째 이미지가 보여야하는게아닌가요 ? 첫번째 이미지가 보여진후 appendTo로 인해서 마지막 요소로 이동해야하는게 정상아닌가요..?
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
setInterval(function () { $('.slide-item').animate({ left: '-1200px' }, function () { $('.slide-item').css({ left: 0 }); $('.slide-item a:first-child').appendTo('.slide-item'); }); }, 3500); 기존에 자바 개발자라서 코드의 흐름을 파악하는데 약간 어려움이 있습니다. 코드 순서로 따져봤을때, left로 -1200픽셀만큼 이동후 다시 left0으로 돌아오는데,, 이게 약간 이해가 안가는데 이런식이면 제자리 걸음이 아닌가 헷갈리네요. -1200픽셀만큼 이동후 다시 left 0..? left 0에대한 설명이 없어서 뭔지 모르겠네요.
미해결
React + GPT API로 AI회고록 서비스 개발 (원데이 클래스)
import { Input, Button} from 'antd'; const { TextArea } = Input; import { useState } from "react";// 저장하는 곳임포트 const DiaryInput = ({ isLoading, onSubmit }) => { const [userInput, setUserInput] = useState(""); // isLoading 로딩상태에서 사용하는 변수 // inSubmit 다입력 작성하면 사용 const handleUserInput = (e) => { setUserInput(e.target.value); }; const handleClick = () => { onSubmit(userInput); }; return ( <div> <TextArea value={userInput} onChange={handleUserInput} placeholder="오늘 일어난 일들을 간단히 적어주세요." /> <Button loading={isLoading} onClick={handleClick}> GPT 회고록을 작성해줘! </Button> </div> ); } export default DiaryInput; // import { Input , Button} from 'antd'; // import { useState } from 'react'; // const { TextArea } = Input; // const DiaryInput = ({isLoading, onSubmit}) => { // const [userInput, setUserInput] = useState(""); // //사용자의 입력을 받아 상위 컴포넌트로 넘기기 // // 로딩상태에서는 제출버튼 못누루게 // const handleUserInput =(e)=>{ // setUserInput(e.target.value); // const handleClick = ()=>{ // onSubmit(userInput); // } // } // return ( // <div> // <TextArea value={userInput} onChange={handleUserInput} placeholder='오늘 하루 회고'/> // <Button loading={isLoading} onClick={handleClick}>GPT회고록 시작</Button> // </div> // ); // }; // export default DiaryInput; import { useState } from 'react'; import { CallGPT } from './api/gpt'; import DiaryInput from './components/DiaryInput'; const dummyData = { "title": "고립된 개발자의 고민", "thumbnail": "https://source.unsplash.com/1600x900/?programming", "summary": "혼자 코딩과제를 진행하면서 걱정이다.", "emotional_content": "최근 혼자 코딩과제를 진행하면서, 협업이 없이 모든 것을 혼자 결정하고 해결해야 한다는 부담감에 많이 무겁습니다. 강의를 듣고 최선을 다해 프로젝트를 진행했지만, 예상치 못한 버그들로 인해 스트레스가 많이 쌓였습니다. 스택오버플로와 GPT를 통해 문제를 해결하긴 했지만, 이러한 문제해결 방식이 정말로 제 개발 실력을 향상시키는지에 대해 의문이 듭니다. 왠지 스스로의 능력을 시험할 기회를 잃은 것 같아 아쉽고, 불안감도 커지고 있습니다.", "emotional_result": "이 일기에서 감지되는 감정은 불안, 부담감, 그리고 자신감의 결여입니다. 고립된 상황에서의 성공에 대한 압박감과 문제 해결 방법에 대한 의심은 정서적으로 큰 부담을 주고 있습니다. 자기 효능감이 낮아짐을 느끼는 상황입니다.", "analysis": "고립되어 문제를 해결하는 과정은 큰 스트레스와 불안을 유발할 수 있습니다. '혼자서 하는 일은 좋은 일이든 나쁜 일이든 더욱 크게 느껴진다'는 에릭 에릭슨의 말처럼, 혼자서 모든 것을 해결하려는 시도는 때로는 개인의 성장에 도움이 될 수 있지만, 지속적인 고립은 자기 효능감을 저하시킬 수 있습니다. 이러한 상황에서는 자신의 노력을 인정하고, 필요한 경우 도움을 요청하는 것이 중요합니다.", "action_list": [ "프로젝트 중 발생하는 문제를 혼자 해결하려 하지 말고, 멘토나 동료 개발자와 상의를 통해 해결 방안을 모색하라.", "정기적으로 자신의 학습 방법과 진행 상황을 평가하여, 필요한 경우 학습 방식을 조정하라.", "개발 과정에서의 스트레스 관리를 위해 적절한 휴식과 여가 활동을 통해 정서적 안정을 찾으라." ] }; function App() { const [data, setData] = useState(dummyData); // 우선 빈문자열로 해놓고 const [isLoading, setIsLoading] = useState(false); const handleClickAPICall = async (userInput) => { try { setIsLoading(true);// 처음에는 로딩을 트루 const message = await CallGPT({ prompt: `${userInput}`, }); // Assuming callGPT is a function that fetches data from GPT API setData(JSON.parse(message)); } catch (error) { // Handle error (you might want to set some error state here) } finally { setIsLoading(false);//다음에는 펄스로 } }; const handleSubmit = (userInput) => { handleClickAPICall(userInput); }; console.log(">>data", data); return ( <> <DiaryInput isLoading={isLoading} onSubmit ={handleSubmit} /> <button onClick={handleClickAPICall}>GPT API call</button> <div>title : {data?.title}</div> <div>analysis : {data?.analysis}</div> <div>emotional_content : {data?.emotional_content}</div> <div>emotional_result : {data?.emotional_result}</div> </> ); }; export default App; // import { useState } from "react"; // import { CallGPT } from "./api/gpt"; // import { message } from "antd"; // import DiaryInput from "./components/DiaryInput"; // const dumyData = JSON.parse(` // { // "title": "당황스러운 예제 에러", // "thumbnail": "https://source.unsplash.com/1600x900/?confused", // "summary": "가끔 예제 에러가 발생하여 당황함", // "emotional_content": "가끔 예제 에러가 나타나는 것이 정말 당황스럽다. 이런 상황들은 예상치 못한 문제로 인해 나를 혼란스럽게 만든다. 그럼에도 불구하고, 이런 에러들은 동시에 나의 문제 해결 능력을 시험한다.", // "emotional_result": "당황스러움과 혼란스러움이 느껴진다. 그러나 이는 예상치 못한 문제에 대처하는 능력을 향상시키는 과정일 수 있다.", // "analysis": "당신의 당황함과 혼란스러움은 예상치 못한 상황에 대한 불안감과 두려움을 반영할 수 있습니다. 하지만, '문제는 기회다'라는 유명한 격언을 기억하십시오. 이러한 에러들은 당신의 문제 해결 능력을 향상시키는 좋은 기회일 수 있습니다.", // "action_list": [ // "예상치 못한 에러에 대비하는 습관 만들기", // "문제 해결 능력 향상을 위한 자기계발", // "당황하지 않고 차분하게 상황을 평가하는 능력 기르기" // ] // } // `); // function App() { // const [data, setData] = useState(dumyData); // const [isLoading, setIsLoading] = useState(false); // // 여기로딩상태가 // const handleClickAPICall = async (userInput) => { // try{// try catch로 감싸서, 처음에는 로딩상태를 트루라고 하고 // setIsLoading(true); // const message = await CallGPT({ // prompt:'{userInput}', // }); // setData(JSON.parse(message));// 그리고 데이터가 잘오면 받아보자 // } catch (error){ // }finally{ // setIsLoading(false);// 나중에는 false라고 하자 // } // }; // const handleSubmit = (userInput)=>{ // handleClickAPICall(userInput); // }; // console.log(">>data", data); // return ( // <> // <DiaryInput isLoading={isLoading} onSubmit={handleSubmit} /> // // 여기로 옴 // <button onClick={handleClickAPICall}>GPT API call</button> // <div>data : {data?.title}</div> // <div>thumbnail: {data?.thumbnail}</div> // <div>summary : {data?.summary}</div> // <div>emotional_resul : {data?.emotional_resul}</div> // <div>emotional_content : {data?.emotional_content}</div> // <div>analysis: {data?.analysis}</div> // <div>action_list: {data?.action_list}</div> // </> // ); // } // export default App ;{ "name": "my-gpt-diary", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "tsc -b && vite build", "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0", "preview": "vite preview" }, "dependencies": { "@ant-design/icons": "^5.4.0", "antd": "^5.20.1", "react": "^18.3.1", "react-dom": "^18.3.1", "styled-components": "^6.1.12" }, "devDependencies": { "@types/react": "^18.3.3", "@types/react-dom": "^18.3.0", "@typescript-eslint/eslint-plugin": "^7.15.0", "@typescript-eslint/parser": "^7.15.0", "@vitejs/plugin-react": "^4.3.1", "eslint": "^8.57.0", "eslint-plugin-react-hooks": "^4.6.2", "eslint-plugin-react-refresh": "^0.4.7", "typescript": "^5.2.2", "vite": "^5.3.4" } }
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="/레이아웃css/11_상단드롭다운1.css" /> </head> <body> <div class="container"> <div class="header-container"> <header> <div class="header-logo"></div> <div class="header-navi"> <ul class="menu"> <li> <a href="#none">Menu1</a> <div class="subMenu"> <a href="#none">Sub-Menu-1</a> <a href="#none">Sub-Menu-2</a> <a href="#none">Sub-Menu-3</a> <a href="#none">Sub-Menu-4</a> </div> </li> <li> <a href="#none">Menu2</a> <div class="subMenu"> <a href="#none">Sub-Menu-1</a> <a href="#none">Sub-Menu-2</a> <a href="#none">Sub-Menu-3</a> <a href="#none">Sub-Menu-4</a> </div> </li> <li> <a href="#none">Menu3</a> <div class="subMenu"> <a href="#none">Sub-Menu-1</a> <a href="#none">Sub-Menu-2</a> <a href="#none">Sub-Menu-3</a> <a href="#none">Sub-Menu-4</a> </div> </li> <li> <a href="#none">Menu4</a> <div class="subMenu"> <a href="#none">Sub-Menu-1</a> <a href="#none">Sub-Menu-2</a> <a href="#none">Sub-Menu-3</a> <a href="#none">Sub-Menu-4</a> </div> </li> </ul> </div> </header> </div> <div class="content-container"> <div class="slide"> <div></div> </div> <div class="items"> <div class="gallery"></div> <div class="banner"></div> <div class="barogo"></div> </div> </div> <div class="footer-container"> <footer> <div class="footer-logo"></div> <div class="footer-navi-copyright"></div> </footer> </div> </div> </body> </html> body { margin: 0; } .header-container { border: 1px solid black; display: flex; justify-content: center; } header { border: 1px solid black; width: 1200px; display: flex; justify-content: space-between; } header > div { border: 1px solid black; height: 100px; } .header-logo { width: 200px; } .header-navi { width: 600px; } .content-container { display: flex; flex-direction: column; align-items: center; } .slide { width: 1200px; border: 1px solid black; } .slide > div { height: 300px; } .items { width: 1200px; display: flex; border: 1px solid black; } .items > div { border: 1px solid black; height: 200px; flex: 1; } .footer-container { border: 1px solid black; display: flex; justify-content: center; } footer { width: 1200px; display: flex; } footer > div { border: 1px solid black; height: 100px; } .footer-logo { width: 200px; } a { text-decoration: none; color: black; } .footer-navi-copyright { width: 1000px; } /* Navigation */ .menu { list-style: none; padding: 0; } .menu > li { text-align: center; width: 150px; float: left; box-sizing: border-box; } .menu > li > a { border: 1px solid black; display: block; } .menu > li > .subMenu > a { display: block; padding: 5px; } .subMenu { border: 1px solid black; background-color: white; } 코드 상황은 이러한데 네비게이션 뒤로 자꾸 보더가 보이는데 이걸 어떻게 해결할 수 있을까요 ..?
미해결
웹디자인개발기능사 실기전체 (카톡질문가능)
안녕하세요 공지사항과 갤러리 html 강의를 시청하다가 실습을 하고 싶은데 어떤 폴더와 파일을 사용해야할지 몰라서 문의드립니다.
미해결
React + GPT API로 AI회고록 서비스 개발 (원데이 클래스)
이게 계속로딩중이라고 뜹니다 import { Input, Button} from 'antd'; const { TextArea } = Input; import { useState } from "react";// 저장하는 곳임포트 const DiaryInput = (isLoading, onSubmit) => { const [userInput, setUserInput] = useState(""); // isLoading 로딩상태에서 사용하는 변수 // inSubmit 다입력 작성하면 사용 const handleUserInput = (e) => { setUserInput(e.target.value); }; const handleClick = () => { onSubmit(userInput); }; return ( <div> <TextArea value={userInput} onChange={handleUserInput} placeholder="오늘 일어난 일들을 간단히 적어주세요." /> <Button loading={isLoading} onClick={handleClick}> GPT 회고록을 작성해줘! </Button> </div> ); } export default DiaryInput; import { useState } from 'react'; import { CallGPT } from './api/gpt'; import DiaryInput from './components/DiaryInput'; const dummyData = { "title": "고립된 개발자의 고민", "thumbnail": "https://source.unsplash.com/1600x900/?programming", "summary": "혼자 코딩과제를 진행하면서 걱정이다.", "emotional_content": "최근 혼자 코딩과제를 진행하면서, 협업이 없이 모든 것을 혼자 결정하고 해결해야 한다는 부담감에 많이 무겁습니다. 강의를 듣고 최선을 다해 프로젝트를 진행했지만, 예상치 못한 버그들로 인해 스트레스가 많이 쌓였습니다. 스택오버플로와 GPT를 통해 문제를 해결하긴 했지만, 이러한 문제해결 방식이 정말로 제 개발 실력을 향상시키는지에 대해 의문이 듭니다. 왠지 스스로의 능력을 시험할 기회를 잃은 것 같아 아쉽고, 불안감도 커지고 있습니다.", "emotional_result": "이 일기에서 감지되는 감정은 불안, 부담감, 그리고 자신감의 결여입니다. 고립된 상황에서의 성공에 대한 압박감과 문제 해결 방법에 대한 의심은 정서적으로 큰 부담을 주고 있습니다. 자기 효능감이 낮아짐을 느끼는 상황입니다.", "analysis": "고립되어 문제를 해결하는 과정은 큰 스트레스와 불안을 유발할 수 있습니다. '혼자서 하는 일은 좋은 일이든 나쁜 일이든 더욱 크게 느껴진다'는 에릭 에릭슨의 말처럼, 혼자서 모든 것을 해결하려는 시도는 때로는 개인의 성장에 도움이 될 수 있지만, 지속적인 고립은 자기 효능감을 저하시킬 수 있습니다. 이러한 상황에서는 자신의 노력을 인정하고, 필요한 경우 도움을 요청하는 것이 중요합니다.", "action_list": [ "프로젝트 중 발생하는 문제를 혼자 해결하려 하지 말고, 멘토나 동료 개발자와 상의를 통해 해결 방안을 모색하라.", "정기적으로 자신의 학습 방법과 진행 상황을 평가하여, 필요한 경우 학습 방식을 조정하라.", "개발 과정에서의 스트레스 관리를 위해 적절한 휴식과 여가 활동을 통해 정서적 안정을 찾으라." ] }; function App() { const [data, setData] = useState(dummyData); // 우선 빈문자열로 해놓고 const [isLoading, setIsLoading] = useState(false); const handleClickAPICall = async (userInput) => { try { setIsLoading(true);// 처음에는 로딩을 트루 const message = await CallGPT({ prompt: `${userInput}`, }); // Assuming callGPT is a function that fetches data from GPT API setData(JSON.parse(message)); } catch (error) { // Handle error (you might want to set some error state here) } finally { setIsLoading(false);//다음에는 펄스로 } }; const handleSubmit = (userInput) => { handleClickAPICall(userInput); }; console.log(">>data", data); return ( <> <DiaryInput isLoading={isLoading} onSubmit ={handleSubmit} /> <button onClick={handleClickAPICall}>GPT API call</button> <div>title : {data?.title}</div> <div>analysis : {data?.analysis}</div> <div>emotional_content : {data?.emotional_content}</div> <div>emotional_result : {data?.emotional_result}</div> </> ); }; export default App;
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="/레이아웃css/08_공자사항갤러리탭구성.css" /> </head> <body> <div class="container"> <div class="header-inner"> <header> <div class="header-logo"></div> <div class="header-navi"></div> </header> </div> <div class="content-inner"> <div class="slide"> <div></div> </div> <section class="items"> <article class="news-gallery"> <div class="tab-inner"> <div class="btn"> <a href="#none" class="active">공지사항</a> <a href="#none">갤러리</a> </div> <div class="tabs"> <div class="tab1"> <a href="#none" >SMS 발송 서비스 개선작업 <span>2020.01.09</span> </a> <a href="#none" >휴대폰 인증 서비스 개선 작업 <span>2020.01.07</span> </a> <a href="#none" >카드사 부분 무이자 할부 이벤트 <span>2019.12.31</span> </a> <a href="#none" >올앳 시스템 작업 안내 <span>2019.12.20</span> </a> <a href="#none" >휴대폰 결제 시스템 작업 안내 <span>2019.12.20</span> </a> </div> <div class="tab2"> <a href="#none"> <img src="/IMAGES/gallery-01.jpg" alt="" /> </a> <a href="#none"> <img src="/IMAGES/gallery-02.jpg" alt="" /> </a> <a href="#none"> <img src="/IMAGES/gallery-03.jpg" alt="" /> </a> </div> </div> </div> </article> <article class="banner"></article> <article class="barogo"></article> </section> </div> <div class="footer-inner"> <footer> <div class="copyright"></div> <div class="sns-family"> <div></div> <div></div> </div> </footer> </div> </div> <script src="https://code.jquery.com/jquery-1.12.4.js" integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU=" crossorigin="anonymous" ></script> <script src="/script/08_공지사항갤러리탭구성.js"></script> </body> </html> body { margin: 0; } .container { } .header-inner { background-color: #ddd; display: flex; justify-content: center; } header { border: 1px solid black; width: 1200px; display: flex; justify-content: space-between; box-sizing: border-box; } .header-logo { width: 200px; height: 100px; border: 1px solid black; box-sizing: border-box; } .header-navi { width: 600px; height: 100px; border: 1px solid black; box-sizing: border-box; } .content-inner { display: flex; flex-direction: column; align-items: center; } .slide { border: 1px solid black; width: 1200px; box-sizing: border-box; } .slide div { height: 300px; box-sizing: border-box; } .items { display: flex; } .items > article { border: 1px solid black; height: 200px; box-sizing: border-box; } .news-gallery { width: 500px; } .banner { width: 350px; } .barogo { width: 350px; } .footer-inner { background-color: #ddd; display: flex; justify-content: center; } footer { width: 1200px; display: flex; } footer > div { height: 100px; border: 1px solid black; box-sizing: border-box; } .copyright { width: 1000px; } .sns-family { width: 200px; } .sns-family > div { height: 50px; border: 1px solid black; box-sizing: border-box; } .tab-inner { width: 97%; margin: auto; } .btn { font-size: 0; } .btn a { font-size: 16px; border: 1px solid black; display: inline-block; width: 100px; text-align: center; padding: 3px; border-radius: 5px 5px 0 0; background-color: #ddd; cursor: pointer; border-bottom: none; margin-bottom: -1px; text-decoration: none; color: #000; } .btn a.active { background-color: #fff; } .tabs { } .tabs > div { border: 1px solid #000; height: 155px; padding: 0 10px; } .tab1 { } .tab1 a { display: block; text-decoration: none; color: #000; border-bottom: 1px solid black; padding: 5px; } .tab1 a:last-child { border-bottom: none; } .tab1 a span { float: right; } .tab2 { display: none; justify-content: center; align-items: center; } .tab2 img { width: 110px; padding: 10px; } // tap Content $('.btn a:first-child').click(function () { $('.tab1').show(); $('.tab2').hide(); $('.btn a:first-child').addClass('active'); $('.btn a:last-child').removeClass('active'); }); $('.btn a:last-child').click(function () { $('.tab1').hide(); $('.tab2').show().css('display', 'flex'); $('.btn a:last-child').addClass('active'); $('.btn a:first-child').removeClass('active'); }); 코드 사항은 이러합니다. 근데 화면 축소를 하면 다보이는데 100%로 해놓고 브라우저 크기를 줄이면 옆으로 움직이는 스크롤바가없이 짤리는데 이유가 뭘가요 ?
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
■ 질문 남기실 때 꼭! 참고해주세요. - 먼저 유사한 질문이 있었는지 검색해주세요. - 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다. - HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요. - 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다. 질문 하실 때 어떤 유형인지 말씀해주세요. ex) 완성본만 있구 와이어프레임만있는 html파일은 어딨나요 ?
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
각 타입별 이미지 크기 제작할 때 가. A,B타입 (width: 1200px, height: 300px) 나. C타입 (width: 800px, height: 350px) 로 제작하면 되는데 D,E,F유형에는 100%로 구성되어있는데 전체 몇 px로 구성해서 만들면되는지 궁금합니다. 주조색&보조색의 의미가 궁금합니다...
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
■ 질문 남기실 때 꼭! 참고해주세요. - 먼저 유사한 질문이 있었는지 검색해주세요. - 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다. - HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요. - 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다. 질문 하실 때 어떤 유형인지 말씀해주세요. ex) A1 작업하는데 ???이 안됩니다 감점사항인가요 ? 이런것두 ?
