묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
loginForm input type=email, password 위치 css 오류
선생님~ padding-left:30px; 이 부분이 placeholder 블럭안으로 가야할 거같아요 input[type="email"], input[type="password"] {} 이 블럭안에 있으면 밑에 이미지처럼 중앙에 안맞더라고요~
-
미해결처음 만난 리액트(React)
chapter_05 오류 질문 입니다.
안녕하세요 소플님!!좋은 강의 너무 잘 듣고 있습니다. 다름이 아니라 chapter_5에서 npm start 를 하면 다음과 같이 실행이 되고 빈 화면이 뜹니다... 어떤 오류인지 찾지 못해서 질문 드립니다..!!
-
미해결처음 만난 리액트(React)
컴포넌트 재 렌더링 과정이 궁금합니다.
안녕하세요 소플님!감사하게도 강의 너무 잘 듣고 있습니다!강의에서 알려주신 Accommodate function component 코드 제일 상단에 아래 처럼 로그를 찍도록 선언을 했는데요.function Accommodate(prop) { console.log("Accommodate created!!!") const [isFull, setIsFull] = useState(false); const [count, increaseCount, decreaseCount] = useCounter(0); useEffect(() => { console.log("======================"); console.log("useEffect() is called."); console.log(`isFull: ${isFull}`); }); //이후 생략 }최초에 화면을 그린 로그는 아래처럼 나오고 있는데Accommodate created!!! ====================== useEffect() is called. isFull: false Current count value: 0 입장 버튼을 누르고난 뒤에는 Accommodate created!!!로그가 마지막에 한번씩 더 찍히더라구요.count가 변경이 됐기 때문에 Accommdate를 재렌더링 했고 그 과정에서 1번 useEffect에 선언한 함수가 호출되고count가 변경됐기 때문에 2번 useEffect에 선언한 함수가 호출되는건 알겠는데, 최상단에 작성한 로그가 다시 찍히는 이유가 어떤거 인가요??Accommodate created!!! ====================== useEffect() is called. isFull: false Current count value: 1 Accommodate created!!!재렌더링이 또 된거라고 봐야하는걸까요..?!
-
미해결처음 만난 리액트(React)
실행이 잘 되지않습니다.
안녕하세요 import문에서 일부 입력하면 뒤에 경로가 자동으로 생성되는 부분에서 자꾸 소문자로 변하길래 수정해 주니 빨간 줄이 뜹니다. 또한 경로의 대소문자에 상관없이 실행이 어렵습니다. 확인 부탁 드립니다. 코드와 오류 나는 부분 첨부 합니다. Book.jsximport React from "react"; function Book(props){ return( <div> <h1>{`이 책의 이름은 ${props.name}입니다.`}</h1> <h2>{`이 책은 총 ${props.numOfPage}로 이루어져 있습니다.`}</h2> </div> ); } export default Book;Library.jsximport React from "react"; import Book from "./Book"; function Library(props){ return( <div> <Book name="책 1" numOfPage ={100}/> <Book name="책 2" numOfPage ={200}/> <Book name="책 3" numOfPage ={300}/> </div> ); } export default Library;index.jsimport React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; // import App from './App'; import reportWebVitals from './reportWebVitals'; import Library from './ch03/Library'; ReactDOM.render( <React.StrictMode> <Library /> </React.StrictMode>, document.getElementById('root') ); // If you want to start measuring performance in your app, pass a function // to log results (for example: reportWebVitals(console.log)) // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals reportWebVitals();
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
(수정) D 타입 메가 메뉴 서브메뉴 높이 설정에 문제가 있습니다
.menu {list-style: none;position:relative;padding: 0;margin:auto;}.menu li {background-color: #fff;text-align: center;}.menu li > a {display:block;padding:5px;}.menu li:hover > a{background-color: #000;color:#fff;}.sub-back{ /* display: none;position:absolute;background-color: #00000060;top:0;left:100%;z-index: 1000;width:100vw; }.mega-menu { / display: flex; /}.sub-menu { / height:calc(128px / 4); / / display:flex; align-items:center; */}.sub-menu a { display:block; padding:5px;}.sub-menu a:hover { background-color: bisque;}
-
해결됨HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
이미지 전환 후 잔상 효과
안녕하세요! 시즌 1강의부터 시즌 2 강의까지 유익하게 잘 듣고 있습니다! 다름이 아니라 강의를 듣고 강사님께서 작성해주시는대로 코드는 똑같이 작성했는데 이미지 전환 후 화면 아래에 잔상이 생깁니다. 이것저것 써보다가 혹시나 하여 강의 영상도 확인해보니 영상에서도 아랫쪽에 잔상이 남아있습니다. (24:23초 부분) 혹시 이유가 있거나 해결하는 방법이 있을까요?!(코드는 영상과 똑같이 작성하였기에 첨부하지 않았습니다!)감사합니다!
-
미해결면접과 취업을 부르는 '퍼블리셔 개인 포트폴리오 홈페이지' 제작
기능정의서 html에 첨부하는 방법/header include
pdf로 만든 기능정의서를 html안에 첨부하는 방식이 어떻게 될까요?검색해봐도 나오지 않아서 질문드립니다..!
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
E타입 레이아웃
슬라이드 이미지를 똑같이 calc(100vh - 120px)로 바꿨는데 강의화면과는 다르게 나타나 질문 드립니다 ㅜ<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>E1</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <div class="main-content"> <div class="left"> <header> <div class="header-logo"></div> <div class="navi"></div> <div class="spot-menu"></div> </header> </div> <div class="center"> <div class="shortcut"></div> <div class="news"></div> <div class="gallery"></div> <div class="slide-banner"></div> </div> <div class="right"> <div class="slide-img"></div> </div> </div> <footer> <div class="footer-logo"></div> <div class="footer-content"> <div class="footer-link"></div> <div class="copyright"></div> </div> </footer> </div> </body> </html>@charset "UTF-8"; body{ background-color: #fff; color: #333333; margin: 0; } a{ text-decoration: none; color: #333333; } .contaniner{} .main-content{ display: flex; } .main-content>div{ border: 1px solid black; } .left{ width: 200px; } .center{ width: 400px; } .right{ flex: 1; } header{} header>div{ border: 1px solid red; } .header-logo{ height: 100px; } .navi{ height: 400px; } .spot-menu{ height: 50px; } .slide-img{ border: 1px solid green; height: calc(100vh - 120px); } .shortcut{ border: 1px solid blue; height: 150px; } .news{ border: 1px solid blue; height: 250px; } .gallery{ border: 1px solid blue; height: 250px; } .slide-banner{ border: 1px solid blue; height: 150px; } footer{ display: flex; } footer>div{ border: 1px solid black; height: 120px; } .footer-logo{ width: 200px; } .footer-content{ flex: 1; } .footer-content>div{ border: 1px solid black; height: 60px; } .footer-link{} .copyright{}
-
해결됨비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
완성 사이트 접속이 안됩니다
안녕하세요. 오늘부터 <풀스택 맛집지도> 수강하고 있는데요. 아래 완성 링크에 접속이 되지 않습니다. 확인 부탁드립니다~! 감사합니다. http://www.seongong.shop/
-
미해결중상급 퍼블리싱을 위한 CSS3의 모든 것
안녕하세요 가상클래스 포지션 활용 질문드립니다
안녕하세요 강의를 듣다 의문이 생겨 질문을 드립니다. before after 가상클래스(도형과 버튼 만들기 , 포지션 활용)01 강의중13분 경 가상클래스 포지션 활용을 설명해 주시면서 absolute가 relative가 우선 한다고 설명해주셨는데요 강의에서는 .btn:before에 적용되어있는데 .btn:after 로 적용하게 되면 text가 가려지게 되는데 relative가 우선하게 되면 before after에 관계없이 text가 보여야 될거 같은데 가려지게 됩니다 동작 원리에 대해 좀 더 설명을 해주시면 감사하겠습니다
-
해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
네비 왼쪽2번 서브메뉴가 계속 가려집니다
왼쪽1번은 메뉴에 높이값이 없어서 잘내려오는데, 왼쪽2번은 .left를 width:200px로 고정시킨것 때문인지 전부 펼쳐지지 못하고 사진처럼 막힙니다. 마우스를 올리면 자바는 잘 먹혀서 나왔다 들어가는건 보이고 css문제 같은데, 왼쪽2번 완성본과 비교해도 어느부분이 문제인지 모르겠어서 질문드립니다.저는 header의 메뉴부분 div를 .menu라고 css를 줬고, 네비게이션 부분은 .menu안에 .navi, .sub-navi라고 이름 지었습니다.네비게이션이 계속 높이값과 넓이값때문에 전부 펼쳐지지 못하고 가려지는건 z-index로 해결해야하나요?1) html코드 <div class="content"> <div class="left"> <!-- header --> <header> <div class="logo"></div> <div class="menu"> <!-- navi --> <ul class="navi"> <li> <a href="#">main1</a> <div class="sub-navi"> <a href="#">sub1</a> <a href="#">sub2</a> <a href="#">sub3</a> <a href="#">sub4</a> </div> </li> <li> <a href="#">main2</a> <div class="sub-navi"> <a href="#">sub1</a> <a href="#">sub2</a> <a href="#">sub3</a> <a href="#">sub4</a> </div> </li> <li> <a href="#">main3</a> <div class="sub-navi"> <a href="#">sub1</a> <a href="#">sub2</a> <a href="#">sub3</a> <a href="#">sub4</a> </div> </li> <li> <a href="#">main4</a> <div class="sub-navi"> <a href="#">sub1</a> <a href="#">sub2</a> <a href="#">sub3</a> <a href="#">sub4</a> </div> </li> </ul> <!-- navi --> </div> </header> </div> <div class="right"> <!-- section --> <div class="section"> <div></div> </div> <!-- items --> <div class="items"> <div class="notice"></div> <div class="banner"></div> <div class="short"></div> </div> <!-- footer --> <footer> <div class="llogo"></div> <div class="mmenu"> <div></div> <div></div> </div> </footer> </div> </div>2) css코드*{ margin: 0; padding: 0; } .content{ border: solid 1px #000; width: 1000px; overflow: hidden; } .content > div{ float: left; box-sizing: border-box; } .left{ width: 200px; } .right{ width: 800px; } header{ overflow: hidden; } header > div{} .logo{ border: solid 1px #000; height: 100px; } .menu{ /* border: solid 1px #000; */ /* height: 200px; */ } /* navi */ .navi{ padding: 0; list-style: none; width: 90%; margin: auto; margin-top: 10px; /* 2번추가 */ position: relative; } .navi li{ box-sizing: border-box; text-align: center; background: #fff; } /* 큰메뉴(자식)만 선택 */ .navi li > a{ border: solid 1px #000; display: block; padding: 5px; color: #000; text-decoration: none; transition: 0.5s; } .navi li:hover > a{ /* 큰메뉴hover는 li에 넣기(그래야 자손메뉴 호버시에도 유지) */ background: #fff; color: #000; } .sub-navi{ border: solid 1px #000; /* 1번 = css다하면 서브메뉴 가리기 */ display: none; /* 2번추가 */ position: absolute; top: 0; left: 100%; /* 부모요소에 딱 붙이기 */ width: 100%; height: 200px; background: #000; } .sub-navi a{ display: block; /* 세로정렬 먼저하기 */ padding: 5px; transition: 0.5s; color: #FFF; text-decoration: none; } .sub-navi a:hover{ background: #fff; color: #000; } /* navi */ .section{ overflow: hidden; } .section div{ border: solid 1px #000; height: 350px; } .items{ overflow: hidden; } .items > div{ border: solid 1px #000; height: 200px; float: left; box-sizing: border-box; } .notice{ width: 300px; } .banner{ width: 250px; } .short{ width: 250px; } footer{ overflow: hidden; } footer > div{ border: solid 1px #000; height: 100px; float: left; box-sizing: border-box; } .llogo{ width: 200px; } .mmenu{ overflow: hidden; width: 600px; } .mmenu > div{ border: solid 1px #000; height: 50px; box-sizing: border-box; }3) js코드$('.navi li').mouseenter(function(){ $(this).children('.sub-navi').stop().slideDown() }) $('.navi li').mouseleave(function(){ $(this).children('.sub-navi').stop().slideUp() })
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
var isFool = true; 는 무슨 용도인가요?
var name ="그랩";var num = 100;이렇게만 입력해도 비교 연산자가 작동하는데var isFool = true; 는 왜 쓰인건지 궁금합니다
-
해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
css슬라이드 배너
안녕하세요.강의듣고 시험 보고 왔는데 슬라이드 배너 가로형이 출제 되었는데요css사용해서 슬라이드 작업했고요 배운것은 123에서 다시 1번으로 돌아와서 롤링되는 방식인데 그렇게 하면 감점사항이라고 시험관이 그래서요.지금 보니까 jquery로 작업하는 방식이 맞는것 같은데감점이 많이 될까요?.
-
미해결<1만 시간의 법칙> 웹 페이지 제작하기
공부하면서 내용들
공부한 내용들 개인 블로그랑 깃허브에 올려도 되나요? 저작권 문제때문에 문의드립니다!
-
미해결자바스크립트 : 기초부터 실전까지 올인원
로컬스토리지 저장하는 방법 알려주세요 ㅠㅠ
로컬스토리지에 투두리스트 내역들을 저장하고 싶은데 콘솔/로컬스토리지에는 저장이 되는데 화면에는 새로고침해도 그냥 다 사라저버리네요 ㅠㅠ 로그인은 새로고침해도 이름이 남아있는데.. 혹시라도 코드한번보시고 도와주세요 ㅠㅠ let loginForm = document.querySelector('#login-form'); let loginBtn = document.querySelector('#login-btn'); let loginInput = document.querySelector('#login-input'); let greeting = document.querySelector('#greeting'); let taskArea = document.querySelector('.task-area'); let inputArea = document.querySelector('.input-area'); let inputText = document.querySelector('.input-area__text'); let addBtn = document.querySelector('.input-area__btn'); let arrary = []; let titleList = document.querySelector('.title-box'); let discription = document.querySelector('.discription'); const body = document.querySelector('body'); const images = [ '훈이.jpg', '유리.jpg', '철수.jpeg', '흰둥이.jpeg', '부리부리3.png', ]; let randomIndex = Math.floor(Math.random() * images.length); let container = document.querySelector('.container'); //로그인 const HIDDEN_CLASSNAME = 'hidden'; const USERNAME_KEY = 'username'; function loginHandle(event) { event.preventDefault(); loginForm.classList.add(HIDDEN_CLASSNAME); const userName = loginInput.value; localStorage.setItem(USERNAME_KEY, userName); greeting.innerHTML = `<span style="color:blue">${userName}</span> 님이 로그인함`; greeting.classList.remove(HIDDEN_CLASSNAME); reMoveClassList(); backImg(); } //리무브 클래스 function reMoveClassList() { taskArea.classList.remove(HIDDEN_CLASSNAME); inputArea.classList.remove(HIDDEN_CLASSNAME); } const savedUserName = localStorage.getItem(USERNAME_KEY); loginForm.addEventListener('submit', loginHandle); if (savedUserName === null) { loginForm.classList.remove(HIDDEN_CLASSNAME); backImg(); } else { reMoveClassList(); greeting.classList.remove(HIDDEN_CLASSNAME); greeting.innerHTML = `<span style="color:blue">${savedUserName}</span> 님이 로그인함`; backImg(); } //로컬스토리지 let toDos = []; const TODOS_KEY = 'todos'; function saveToDos() { localStorage.setItem(TODOS_KEY, JSON.stringify(toDos)); } const savedToDos = localStorage.getItem(TODOS_KEY); console.log(savedToDos); if (savedToDos !== null) { const parsedToDos = JSON.parse(savedToDos); toDos = parsedToDos; parsedToDos.forEach(render); } //인풋 function enterBtn(event) { event.preventDefault(); let obType = { id: Math.floor(Math.random() * 1000), isComplete: false, inputValue: inputText.value, }; inputText.value = ''; arrary.push(obType); render(); toDos.push(obType.inputValue); console.log(toDos); saveToDos(); } addBtn.addEventListener('click', enterBtn); //랜더 function render() { divHTML = ''; discription.innerHTML = `<sapn style="color:lightgreen">전체할일 :${ arrary.length } <sapn style="color:red">완료할일 :${checkCount()}</span>`; for (let i = 0; i < arrary.length; i++) { if (arrary[i].isComplete == true) { divHTML = divHTML + ` <div class="title-list"> <div class="title-list__title"> <h4 class="textDone">${arrary[i].inputValue}</h4> </div> <div class="title-list__btn"> <button class="title-list__btn1" onclick="checkBtn('${arrary[i].id}')"> <i class="fa-solid fa-face-tired"></i> </button> <button class="title-list__btn2" onclick ="deleteBtn('${arrary[i].id}')"> <i class="fa-solid fa-trash-can hello"></i> </button> </div> </div>`; } else { divHTML = divHTML + ` <div class="title-list"> <div class="title-list__title"> <h4>${arrary[i].inputValue}</h4> </div> <div class="title-list__btn"> <button class="title-list__btn1" onclick="checkBtn('${arrary[i].id}')"> <i class="fa-solid fa-check-to-slot"></i> </button> <button class="title-list__btn2" onclick ="deleteBtn('${arrary[i].id}')"> <i class="fa-solid fa-trash-can"></i> </button> </div> </div>`; } } titleList.innerHTML = divHTML; } //전체할일 카운트 function checkCount() { let count = 0; for (let i = 0; i < arrary.length; i++) { if (arrary[i].isComplete == true) { count++; } } return count; } //삭제버튼 function deleteBtn(b) { for (let i = 0; i < arrary.length; i++) { if (arrary[i].id == b) { arrary.splice([i], 1); break; } } render(); } //체크버튼 function checkBtn(a) { for (let i = 0; i < arrary.length; i++) { if (arrary[i].id == a) { arrary[i].isComplete = !arrary[i].isComplete; break; } } render(); } //시계 let getClock = () => { let date = new Date(); //new라서 객체임 현재 시간을 가저옴 const clock = document.querySelector('#clock'); let hour = String(date.getHours()).padStart(2, '0'); let mimute = String(date.getMinutes()).padStart(2, '0'); let second = String(date.getSeconds()).padStart(2, '0'); clock.innerHTML = `<span style="color:red">${hour}시 ${mimute}분 ${second}초</span>`; }; //타이머 함수를 통해서 1초마다 시간을 받아오게 작성 setInterval(getClock, 1000); getClock(); //배경 이미지 function backImg() { container.style.backgroundImage = `url(./image/${images[randomIndex]})`; container.style.backgroundSize = '160px'; container.style.backgroundRepeat = 'repeat'; } backImg();
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
강의 잘 따라가고 있는지 체크 부탁합니다.
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>영상박물관</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <div class="main-content"> <div class="left"> <header> <div class="header-logo"> <a href="#none"><img src="images/header-logo.png" alt="header logo"></a> </div> <div class="navi"> <ul class="menu"> <li> <a href="#none">박물관 소개</a> <div class="sub-menu"> <a href="#none">인사말</a> <a href="#none">박물관연혁</a> <a href="#none">박물관 조직도</a> <a href="#none">오시는 길</a> </div> </li> <li> <a href="#none">전시</a> <div class="sub-menu"> <a href="#none">전시 리스트</a> <a href="#none">전시일정</a> <a href="#none">특별전</a> <a href="#none">지역작가</a> </div> </li> <li> <a href="#none">체험행사</a> <div class="sub-menu"> <a href="#none">문화행사</a> <a href="#none">진로체험</a> <a href="#none">명사특강</a> </div> </li> <li> <a href="#none">커뮤니티</a> <div class="sub-menu"> <a href="#none">사용자메뉴얼</a> <a href="#none">박물관 약도</a> <a href="#none">게시판</a> </div> </li> </ul> </div> <div class="spot-menu"> <a href="#none">로그인</a> <span>|</span> <a href="#none">회원가입</a> </div> </header> </div> <div class="center"> <div class="items"> <div class="shortcut"> <img class="shortcut-image" src="images/shortcut-01.png" alt="shortcut image"> <div class="shortcut-content"> <h2>얼리버드 선착순 할인 이벤트</h2> <p> 12월 개강반을 접수하는 분들께는 15%의 얼리버드 할인을 제공합니다.<br> <b>기간: 2022년 12월 18일~ 12월 25일</b> </p> </div> <a href="#none"><img src="images/shortcut-02.png" alt="shortcut link"></a> </div> <div class="news"> <div class="tab-inner"> <div class="btn"> <span>공지사항</span> </div> <div class="tab1"> <a class="open-modal" href="#none"><em>스트리밍 서버 이전 작업으로 2시간 서비스 중지</em><b>2022.12.20</b></a> <a href="#none"><em>얼리버드 선착순 할인 이벤트 최대 50% 할인</em><b>2022.10.13</b></a> <a href="#none"><em>내 집 마련의 꿈을 꿈이 아닌 현실로 만드는 진짜 방법</em><b>2022.11.31</b></a> <a href="#none"><em>외국인과 영어로 네이티브처럼 대화하는 노하우</em><b>2022.08.09</b></a> <a href="#none"><em>월 500만원 매출을 내는 블로그 운영하는 노하우</em><b>2022.07.07</b></a> </div> </div> </div> <div class="gallery"> <div class="tab-inner"> <div class="btn"> <span>갤러리</span> </div> <div class="tab2"> <a href="#none"><img src="images/gallery-01.png" alt="gallery1"><span>퍼블리셔 취업 가이드</span></a> <a href="#none"><img src="images/gallery-02.png" alt="gallery2"><span>전문가가 되는 사진촬영</span></a> </div> </div> </div> </div> </div> <div class="right"> <div class="slide"> <div class="slide-image"> <div class="slide-image-inner"> <a href="#none"><img src="images/slide-e-01.jpg" alt="slide1"></a> <a href="#none"><img src="images/slide-e-02.jpg" alt="slide2"></a> <a href="#none"><img src="images/slide-e-03.jpg" alt="slide3"></a> </div> </div> </div> </div> </div> <footer> <div class="footer-logo"> <a href="#none"><img src="images/footer-logo.png" alt="footer logo"></a> </div> <div class="copyright"> 상호 : (주)코딩웍스 | 대표자 : 홍길동 | 개인정보관리책임자 : 성춘향 부장 사업장주소 : 경기도 남양주시 별내동 1234 코딩웍스 빌딩 6층 (주)코딩웍스 </div> <div class="sns"> <a href="#none"><img src="images/sns-01.png" alt="sns1"></a> <a href="#none"><img src="images/sns-02.png" alt="sns2"></a> <a href="#none"><img src="images/sns-03.png" alt="sns3"></a> </div> </footer> </div> <div class="modal"> <div class="modal-content"> <h3>스트리밍 서버 이전으로 서비스 장애</h3> <p> 스트리밍 서버 이전 작업으로 2시간 서비스 중지됩니다. 주요 작업 내용은 아래와 같습니다. <ol> <li>서버 이전에 따른 DNS 이전으로 기존 호스팅 서비스 대체</li> <li>문자셋을 utf-8로 변경 후 모바일 등에 대처하기 위해 미리 조치</li> <li>스트리밍 서버 CDN과 연동 후 멀티미디어 이러닝 서비스가 제공</li> </ol> 위 내용을 보시면 제법 큰 작업이었음을 알 수 있습니다.<br> 특히 문자셋의 변경에 따라 기존의 DB, data, 웹사이트 솔루션 등의 커스트마이징 등에 상당한 어려움이 있었고, 이에 따른 일부 접속 오류가 있을 수 있었음에 양해를 구합니다. 특히 인터넷익스플로러 11로 접속하셨을 경우 일부 문제은행 목차가 출력되지 않았을 수도 있습니다.<br> 서버 이전 작업으로 고객님들께 불편을 드려서 대단히 죄송합니다.<br> 정상 운영되도록 최선을 다하겠습니다. 감사합니다. </p> <a class="close-modal" href="#none">닫기</a> </div> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom.js"></script> </body> </html> @charset "UTF-8"; body { margin: 0; background-color: #fff; color: #333; font-size: 15px; } a { color: #333; text-decoration: none; } .container {} .main-content { display: flex; } .main-content > div { /* border: 1px solid red; */ /* height: 800px; */ } .left { width: 200px; } .center { width: 400px; } .right { flex: 1; } header { position: relative; z-index: 10; } header > div { /* border: 1px solid blue; */ } .header-logo { height: 100px; display: flex; align-items: center; } .navi { height: 150px; } /* Navigation */ .menu { list-style: none; padding: 0; width: 90%; margin: auto; margin-top: 10px; } .menu li { text-align: center; background-color: #fff; position: relative; } .menu li > a { border: 1px solid #000; display: block; padding: 5px; transition: 0.5s; } .menu li:hover > a { background-color: #000; color: #fff; } .sub-menu { border: 1px solid #000; position: absolute; top: 0; left: 100%; width: 100%; height: 150px; background-color: #ddd; display: none; } .sub-menu a { display: block; padding: 5px; transition: 0.5s; color: #000; } .sub-menu a:hover { background-color: #000; color: #fff; } .spot-menu { height: 50px; text-align: center; } .spot-menu a:hover { text-decoration: underline; } .items {} .items > div { /* border: 1px solid black; */ } .shortcut { height: 150px; display: flex; align-items: center; font-size: 14px; padding: 0 5px; gap: 5px; } .shortcut .shortcut-image { height: 70px; } .shortcut h2 { font-size: 17px; } .news { height: 250px; } .gallery { height: 250px; } /* news & gallery */ .tab-inner { width: 95%; margin: auto; margin-top: 25px; } .btn {} .btn span { border: 1px solid #000; display: inline-block; width: 100px; text-align: center; padding: 5px; border-radius: 5px 5px 0 0; border-bottom: none; margin-bottom: -1px; background-color: #ddd; } .tab1 { border: 1px solid #000; height: 170px; box-sizing: border-box; padding: 5px 10px; } .tab1 a { display: block; padding: 5px; border-bottom: 1px solid #000; overflow: hidden; } .tab1 a:last-child { border-bottom: none; } .tab1 a em { display: block; float: left; font-style: normal; width: 75%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .tab1 a b { float: right; font-weight: normal; } .tab2 { border: 1px solid #000; height: 170px; text-align: center; box-sizing: border-box; padding-top: 35px; } .tab2 a { display: inline-block; text-align: center; } .tab2 a img { height: 80px; border-radius: 5px; margin: 0 25px; } .tab2 a span { display: block; } .slide { display: flex; } .slide > div { /* border: 2px solid green; */ height: calc(100vh - 100px); } .slide-image { flex: 1; overflow: hidden; position: relative; height: inherit; } .slide-image-inner { font-size: 0; position: absolute; top: 0; left: 0; animation: slide 10s linear infinite; height: inherit; } .slide-image-inner a { height: inherit; } .slide-image-inner a img { width: 100%; height: inherit; object-fit: cover; } @keyframes slide { 0% { top: 0; } 30% { top: 0; } 35% { top: -100%; } 65% { top: -100%; } 70% { top: -200%; } 95% { top: -200%; } 100% { top: 0; } } footer { display: flex; height: 100px; align-items: center; } footer > div { /* border: 1px solid red; */ text-align: center; } .footer-logo { width: 200px; display: flex; align-items: center; } .copyright { flex: 1; } .sns { width: 230px; } .sns a img { width: 50px; border-radius: 5px; } /* modal */ .modal { background-color: #00000052; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; display: none; } .modal-content { background-color: #fff; width: 500px; padding: 20px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .close-modal { float: right; border: 1px solid #000; padding: 5px 10px; } /* Navigation */ $('.menu li').mouseenter(function(){ $(this).children('.sub-menu').stop().slideDown() }) $('.menu li').mouseleave(function(){ $(this).children('.sub-menu').stop().slideUp() }) /* modal */ $('.open-modal').click(function(){ $('.modal').fadeIn() }) $('.close-modal').click(function(){ $('.modal').fadeOut() })
-
미해결처음 만난 리액트(React)
chapter5인데 왜 안되는지 모르겠습니다.
clock은 위에 app import문을 주석처리하고 cd my-app하고 npm start하니까 돌아가는데, 이거는 똑같이 해도 계속 안 돌아가고 오류메세지가 뜹니다. 어떻게 수정해야하나요?
-
미해결처음 만난 리액트(React)
그냥 npm start하면 돌아가지 않습니다.
npm ERR! Missing script: "start"npm ERR!npm ERR! Did you mean one of these?npm ERR! npm star # Mark your favorite packagesnpm ERR! npm stars # View packages marked as favoritesnpm ERR!npm ERR! To see a list of scripts, run:npm ERR! npm runnpm ERR! A complete log of this run can be found in:npm ERR! C:\Users\hhayo\AppData\Local\npm-cache\_logs\2023-04-01T13_55_50_978Z-debug-0.log이런 에러가 뜨는데 cd my-app을 해야만 돌아가는데 어떻게 바꿀 수 있나요? 그리고 이유가 뭔가요?
-
미해결처음 만난 리액트(React)
시계 만들기 실행이 안됩니다.
복붙해서 한건데, 실행이 안돼서 위에 import app 부분 주석처리하니까 돌아갑니다. 강사님은 안그러는데 제꺼에서는 왜 그런가요?
-
미해결인터랙티브 웹 개발 제대로 시작하기
new 키워드의 역할
강사님! 함수를 생성자 함수로서 실행을 하고 생성자 함수의 this에 개별 객체를 바인딩 하기 위해서 new 키워드를 쓰는것으로 이해를 했는데 제가 이해한게 맞나요?
