inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

묻고 답해요

172만명의 커뮤니티!! 함께 토론해봐요.

EventListener 질문입니다.

미해결

자바스크립트 : 기초부터 실전까지 올인원

버튼 클릭하면 콘솔 창에 3이 나오도록 해보았는데요, 아래와 같이 입력해봤는데, 콘솔 창에 3이 안 나옵니다.. 오류가 EventLstener 라고 뜨는데요;;. 제가 뭘 잘못 입력했는지 잘 모르겠어요;;. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> const a = 3; const Btn1 = document.getElementById("click-button"); Btn1.addEventListener("click", activation); function activation(){ console.log(a); } </script> </head> <body> <button id="click-button">누름</button> </body> </html>

  • HTML/CSS
  • javascript
한일테크 김민국 대리 댓글 1 좋아요 0 조회수 279

아랫글 질문자입니다.

미해결

비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지

구체적인 에러코드 알려달라 하셔서 대답글에 알려드렸는데 못보신거 같아서 다시 올려봅니다. fatal: unable to access ' https://github.com/깃유저명/깃프로젝트명.git/ ': Failed to connect to {EC2 PUBLIC IP} port 3000: Connection timed out 이라는 에러메시지 발생했으며, 위 사진에서는 git clone으로 인한 에러이지만 pull로 당겨도 동일 에러가 발생합니다. 답변 기다리는동안 틈틈히 찾아봤는데 결국 해결이 안돼서 다시 여쭤보는점 죄송합니다 ㅠㅠ

  • HTML/CSS
  • javascript
  • aws
  • git
  • mysql
  • rest-api
  • github
전예준 댓글 2 좋아요 0 조회수 261

추가영상에서 span을 a태그로변경하라하셔서 했는데 이렇케 뜨는게 맞을까요?

미해결

[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드

<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <header> <div class="header-logo"></div> <div class="navi"></div> </header> <div class="slide"> <div></div> </div> <div class="items"> <div class="news"> <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">핸드폰수리일정안내입니다.<b>2022.07.24</b></a> <a href="#none">핸드폰 택배일정 안내입니다.<b>2022.07.24</b></a> <a href="#none">핸드폰 현금영수증안내입니다.<b>2022.07.24</b></a> <a href="#none">핸드폰 주문시안내입니다.<b>2022.07.24</b></a> <a href="#none">핸드폰 환불및교환 안내입니다.<b>2022.07.24</b></a> </div> <div class="tab2"> <a href="#none"><img src="images/gallery-01.jpg" alt="gallery1"></a> <a href="#none"><img src="images/gallery-02.jpg" alt="gallery2"></a> <a href="#none"><img src="images/gallery-03.jpg" alt="gallery3"></a> </div> </div> </div> </div> <div class="gallery"></div> <div class="shortcut"></div> </div> <footer> <div class="footer-logo"></div> <div class="copyright"></div> <div class="sns"></div> </footer> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom.js"></script> </body> </html> @charset "UTF-8"; .container{ border: 1px solid #000; width: 1200px; margin: auto; } header{ display: flex; justify-content: space-between; } header >div{ border: 1px solid #000; height: 100px; } .header-logo{ width: 200px; } .navi{ width: 600px; } .slide{} .slide >div{ border: 1px solid #000; height: 300px; } .items{ display: flex; } .items >div{ border: 1px solid #333; height: 200px; } .news{ width: 500px; } .gallery{ width: 350px; } .shortcut{ width: 350px; } footer{ display: flex; } footer >div{ border: 1px solid #333; height: 100px; } .footer-logo{ width: 200px; } .copyright{ width: 800px; } .sns{ width: 200px; } /*tab-inner*/ .tab-inner{ width: 95%; margin: auto; } .btn{} .btn a{ display: inline-block; border: 1px solid #000; width: 120px; text-align: center; border-radius: 5px 5px 0 0; padding: 5px; margin-right: -6px; border-bottom: none; margin-bottom: -1px; background-color: #ddd; cursor: pointer; } .btn a.active{ background-color: #fff; } .tabs{} .tabs div{ border: 1px solid #000; height: 155px; padding: 0 10px; } .tab1{ } .tab1 a{ display: block; color: #000; text-decoration: none; border-bottom: 1px solid #333; padding: 4px; } .tab1 a:last-child{ border-bottom: none; } .tab1 a b{ float: right; font-weight: normal; } .tab2{ display: none; text-align: center; } .tab2 img{ width: 120px; margin-top: 20px; } /*tab content*/ $('.btn a:first-child').click(function(){ $('.tab1').show() $('.tab2').hide() $(this).addClass('active') $(this).siblings().removeClass('active') }) $('.btn a:last-child').click(function(){ $('.tab2').show() $('.tab1').hide() $(this).addClass('active') $(this).siblings().removeClass('active') }) 추가영상에서 span을 a태그로변경하라하셔서 했는데 브라우저에 공지사항 갤러리 밑에 밑줄이 표시되는데 이렇케 뜨는게 맞을까요?

  • HTML/CSS
  • jquery
  • 웹-디자인
jkjk7088 댓글 1 좋아요 1 조회수 348

windows에서 발생하는 경로 \ 관련 문의드립니다.

미해결

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

"상품 업로드 기능 구현-2" 강의 중 잘 따라가다가 후반부에서 경로 문제로 인해 문의드립니다. 업로드 페이지에서 업로드는 잘 되나, 업로드 후 메인 페이지에서 등록된 이미지가 나오지 않아 확인해보니 "/" 대신에 콘솔에는 캡처1과 같이 "\\" 가 나오고 DB Browser에서는 캡처2와 같이 "\"가 나옵니다. : 캡처1 입니다. : 캡처2 입니다. 원인을 찾아보니 windows에서 파일 경로를 다룰 때 "\\"로 하기 때문에 생기는 문제라고 하는데요... 어떻게 해결하면 좋을지 모르겠습니다. 해결방법을 알려주시면 감사하겠습니다.

  • HTML/CSS
  • javascript
  • react
  • node.js
  • react-native
  • 머신러닝
  • express
  • tensorflow
kms930322 댓글 2 좋아요 0 조회수 354

17298 오큰수 구하기 질문있습니다.

미해결

Do it! 알고리즘 코딩테스트 with Python

올려주신 코드로 공부하고 백준에 업로드 해 본 결과 시간 초과가 뜨는데, 시간 초과가 되지 않게 하려면 어떻게 수정할 수 있을까요 ?

  • python
  • 코딩-테스트
  • 알고리즘
스탑수 댓글 2 좋아요 1 조회수 706

섹션2 Material 학습 중에 마우스 드래그로 돌려보는 기능?

해결됨

떠먹는 Three.js

섹션2 Material 학습 중에 있는데요, 강사님 영상에서는 마우스 드래그를 통해 오브젝트가 회전하는데, 저는 안됩니다.^^; 뭔가 세팅을 하는 게 있을 것 같은데, 아마 다 공부하고 나면 알 수 있는거겠죠?

  • HTML/CSS
  • javascript
  • three.js
rookiepepe 댓글 2 좋아요 2 조회수 518

import { Switch, Route } from "react-router-dom"; 모듈을 찾을수 없다고 뜹니다.

해결됨

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

선생님 수업 따라서 열심히 따라 왔는데 여기서 막히네요.해결 좀 부탁드립니다.제가 나이가 53인데 사다리차 운전 하면서 자영업 하는데 다른길좀 가보려고 공부하는 중이거든요. 다른 분들한테는 쉬운걸 텐데 저한테는 어렵네요.구글링 해보고 네이버 도 찾아봣는데 찾을수가 없네요.이걸 해결해야 앞으로 나갈수 있을것 같은데 도와주세요.감사합니다

  • HTML/CSS
  • javascript
  • react
  • node.js
  • react-native
  • 머신러닝
  • express
  • tensorflow
TV캠핑카 다있다 댓글 1 좋아요 0 조회수 431

styled-components

미해결

처음 만난 리액트(React)

chapter 15 실습에서 막힙니다. styled-components를 @latest 붙여서 다운받았는데도 실행이 안됩니다. 그냥 빈 하얀 화면만 뜹니다... 다른 챕터는 확인해보니까 다 되던데, 왜 styled-components 실습만 왜 안될까요? Blocks.jsx 파일 코드 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; 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; index.js 파일 코드 import React from "react"; import ReactDOM from "react-dom/client"; import "./index.css"; import App from "./App"; import reportWebVitals from "./reportWebVitals"; // import Library from "./chapter_03/Library"; // import Clock from "./chapter_04/Clock"; // import CommentList from "./chapter_05/CommentList"; // import NotificationList from "./chapter_06/NotificationList"; // import Accomodate from "./chapter_07/Accommodate"; // import ConfirmButton from "./chapter_08/ConfirmButton"; // import LandingPage from "./chapter_09/LandingPage"; // import AttendanceBook from "./chapter_10/AttendanceBook"; // import SignUp from "./chapter_11/SignUp"; // import Calculator from "./chapter_12/Calculator"; // import ProfileCard from "./chapter_13/ProfileCard"; // import DarkOrLight from "./chapter_14/DarkOrLight"; import Blocks from "./chapter_15/Blocks"; const root = ReactDOM.createRoot(document.getElementById("root")); root.render( <React.StrictMode> <Blocks /> </React.StrictMode> ); // 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(); 빈 하얀 화면에서 F12 눌러서 오류 확인해보니까 이렇게 뜹니다. Warning: Each child in a list should have a unique "key" prop. Check the render method of Blocks . See https://reactjs.org/link/warning-keys for more information. at O ( http://localhost:3000/static/js/bundle.js:43804:6 ) at Blocks printWarning @ react-jsx-dev-runtime.development.js:87 2react.development.js:209 Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem. printWarning @ react.development.js:209 react.development.js:1618 Uncaught TypeError: Cannot read properties of null (reading 'useContext') at Object.useContext (react.development.js:1618:1) at StyledComponent.ts:124:1 at O (StyledComponent.ts:190:1) at renderWithHooks (react-dom.development.js:16305:1) at updateForwardRef (react-dom.development.js:19226:1) at beginWork (react-dom.development.js:21636:1) at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1) at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1) at invokeGuardedCallback (react-dom.development.js:4277:1) at beginWork$1 (react-dom.development.js:27451:1) 2react.development.js:209 Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem. printWarning @ react.development.js:209 react.development.js:1618 Uncaught TypeError: Cannot read properties of null (reading 'useContext') at Object.useContext (react.development.js:1618:1) at StyledComponent.ts:124:1 at O (StyledComponent.ts:190:1) at renderWithHooks (react-dom.development.js:16305:1) at updateForwardRef (react-dom.development.js:19226:1) at beginWork (react-dom.development.js:21636:1) at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1) at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1) at invokeGuardedCallback (react-dom.development.js:4277:1) at beginWork$1 (react-dom.development.js:27451:1) react-dom.development.js:18687 The above error occurred in the <styled.div> component: at O ( http://localhost:3000/static/js/bundle.js:43804:6 ) at Blocks Consider adding an error boundary to your tree to customize error handling behavior. Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries. logCapturedError @ react-dom.development.js:18687 react-dom.development.js:26923 Uncaught TypeError: Cannot read properties of null (reading 'useContext') at Object.useContext (react.development.js:1618:1) at StyledComponent.ts:124:1 at O (StyledComponent.ts:190:1) at renderWithHooks (react-dom.development.js:16305:1) at updateForwardRef (react-dom.development.js:19226:1) at beginWork (react-dom.development.js:21636:1) at beginWork$1 (react-dom.development.js:27426:1) at performUnitOfWork (react-dom.development.js:26557:1) at workLoopSync (react-dom.development.js:26466:1) at renderRootSync (react-dom.development.js:26434:1) 뭐가 문제일까요?

  • HTML/CSS
  • javascript
  • react
현진 댓글 1 좋아요 0 조회수 1733

npm start 하고 localhost:3000으로 접속할때 로드오류

미해결

처음 만난 리액트(React)

npm start 하고 localhost :3000으로 접속이 되었고, 리액트 로딩창만 나오고 다음창이 로드가 안됩니다. 터미널에서도 successfully 뜨고 코드도 오류가 없습니다. 왜 로딩이안될까요 ? 단순 컴퓨터문제일까요?

  • HTML/CSS
  • javascript
  • react
upward070 댓글 2 좋아요 0 조회수 1963

js작동이 안되는데 머가문제일까요 ㅠㅠ

미해결

[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드

<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <header> <div class="header-logo"></div> <div class="navi"></div> </header> <div class="slide"> <div></div> </div> <div class="items"> <div class="news"> <div class="tab-inner"> <div class="btn"> <span class="active">공지사항</span> <span>갤러리</span> </div> <div class="tabs"> <div class="tab1">tab1</div> <div class="tab2">tab2</div> </div> </div> </div> <div class="gallery"></div> <div class="shortcut"></div> </div> <footer> <div class="footer-logo"></div> <div class="copyright"></div> <div class="sns"></div> </footer> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom.js"></script> </body> </html> @charset "UTF-8"; .container{ border: 1px solid #000; width: 1200px; margin: auto; } header{ display: flex; justify-content: space-between; } header >div{ border: 1px solid #000; height: 100px; } .header-logo{ width: 200px; } .navi{ width: 600px; } .slide{} .slide >div{ border: 1px solid #000; height: 300px; } .items{ display: flex; } .items >div{ border: 1px solid #333; height: 200px; } .news{ width: 500px; } .gallery{ width: 350px; } .shortcut{ width: 350px; } footer{ display: flex; } footer >div{ border: 1px solid #333; height: 100px; } .footer-logo{ width: 200px; } .copyright{ width: 800px; } .sns{ width: 200px; } /* tab-content */ .tab-inner{ width: 95%; margin: auto; } .btn{} .btn span{ border: 1px solid #000; display: inline-block; padding: 10px; border-radius: 5px 5px 0 0; margin-right: -6px; background-color: #ddd; width: 100px; border-bottom: none; margin-bottom: -1px; cursor: pointer; } .btn span.active{ background-color: #fff; } .tabs{} .tabs div{ border: 1px solid #000; height: 150px; } .tab1{} .tab2{ display: none; } /*tab content*/ $('.btn span:frist-child').click(function(){ $('.tab1').show() $('.tab2').hide() }) $('.btn span:last-child').click(function(){ $('.tab2').show() $('.tab1').hide() }) js가작동이안되는거같아요 ,,, 일단 따라하고있는데 script 소스가 문제인걸까요 ??

  • HTML/CSS
  • jquery
  • 웹-디자인
jkjk7088 댓글 1 좋아요 1 조회수 210

main/index.js과 product/index.js에서 setProduct 관련 문의드립니다.

미해결

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

main/index.js 에서는 setProducts( result.data .products); 로 써야하고 product/index.js 에서는 setProducts( result.data ); 로 써야하는데 두 파일에서 return문에서는 동등하게 { product.name } , {product.price} 등으로 사용됩니다. 둘의 차이를 알려주시면 감사하겠습니다.

  • HTML/CSS
  • javascript
  • react
  • node.js
  • react-native
  • 머신러닝
  • express
  • tensorflow
kms930322 댓글 2 좋아요 0 조회수 220

import시 {} 유무의 차이는 무엇인가요?

미해결

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

import axios from 'axios'; 에서는 중괄호가 없고 import {Link} from 'react-router-dom' 에서는 중괄호가 있는데 차이가 뭔지 잘 모르겠습니다. axios는 'axios' 안에 있는 함수를 import 하는 것이고 {Link} 는 'react-router-dom' 안에 많은 컴포넌트 중 Link만 import 하기 위함인가요?

  • HTML/CSS
  • javascript
  • react
  • node.js
  • react-native
  • 머신러닝
  • express
  • tensorflow
kms930322 댓글 2 좋아요 0 조회수 1037

학과 설정

미해결

프로그래밍 시작하기 : 웹 입문 (Inflearn Original)

지금까지 HTML 학습한거로 질문을 드리자면, 폼에 조건 지정이 가능한가요? 예를 들어 대학 소속에 따라 학과 종류가 다른데, 이에 대해 앞에 선택한 option에 따라서 뒤에 option이 달라지는 것은 어떻게 만드는 건가요?

  • HTML/CSS
taeyun1118 댓글 2 좋아요 0 조회수 359

useState를 사용하는 이유가 무엇인가요?

해결됨

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

빈 배열을 선언해서 빈 배열에 (axios 통신을 통해 전달받은) result.data를 대입해서 사용하는 것이 아니라 useState를 사용하는 이유는 무엇인가요? 제가 이해한 것은 서버에 새로운 데이터가 업로드되면 그때마다 바로바로 업로드 된 데이터를 화면에 보여주기 위함인 것 같은데(예를 들어 상품이 3개로 보이다가 관리자가 상품을 한 개 추가하면 새로고침을 안해도 4개로 보임), 올바르게 이해한 것이 맞을까요?

  • HTML/CSS
  • javascript
  • react
  • node.js
  • react-native
  • 머신러닝
  • express
  • tensorflow
kms930322 댓글 2 좋아요 0 조회수 1228

폰트, 이미지? 관련 질문입니다

미해결

면접과 취업을 부르는 '퍼블리셔 개인 포트폴리오 홈페이지' 제작

클론페이지 및 개인포트폴리오 홈페이지 다 제작했는데 제 컴퓨터에서는 주소 들어가면 문제없이 나오지만 모니터가 조금 작은 다른컴퓨터에서 보니까 글씨, 이미지가 밀리거나 제 컴퓨터에서 본거랑은 다르게 좀 이상하게 나오는 경우가 있는데 회사에 지원했을때 상대방 모니터가 제꺼와 사이즈 차이가 날 경우 혹시 이상하게 보여질까바 걱정인데 단위의 문제일까요? 어떻게 수정하면 될까요?

  • HTML/CSS
  • jquery
  • 포트폴리오
댓글 1 좋아요 1 조회수 321

https 이후 git clone 도는 git pull

미해결

비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지

certbot을 통해 https를 적용한 뒤에 front 파일에 변경, 추가할 파일이 있어서 git pull origin main으로 시도해 봤지만 타임 아웃 에러가 걸리고 혹시 clone으로 하면 될까 해서 해봤지만 역시 타임아웃 에러가 걸렸습니다. 방법을 찾아보려고 열심히 구글링 2일간 해봤지만 도무지 개선이되질 않아서 ㅠㅠ 혹시 문제원인이나 해결방안 귀뜸해 주시면 감사하겠습니다.

  • HTML/CSS
  • javascript
  • aws
  • git
  • mysql
  • rest-api
  • github
전예준 댓글 1 좋아요 0 조회수 359

텝메뉴 색상이 변경이 이상합니당 ㅠㅠ

해결됨

[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/style.css"> </head> <body> <div class="container"> <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> <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> </ul> </div> </header> <div class="slide"> <div> <a href="#none"><img src="images/slide-01.jpg" alt="slide-01"> </a> <a href="#none"><img src="images/slide-02.jpg" alt="slide-02"></a> <a href="#none"><img src="images/slide-03.jpg" alt="slide-03"></a> </div> </div> <div class="items"> <div class="news"> <div class="tab-inner"> <div class="btn"> <a class="active" href="#none">공지사항</a> <a href="#none">갤러리</a> </div> <div class="tab"> <div class="tab1"> <a href="#none">SMS 발송 모바일 서비스 개선작업 <b>2020.01.09</b></a> <a href="#none">휴대폰 인증 서비스 개선 작업 <b>2020.01.07</b></a> <a href="#none">카드사 부분 무이자 할부 이벤트 <b>2019.12.31</b></a> <a href="#none">올앳 시스템 작업 안내 <b>2019.12.20</b></a> <a href="#none">휴대폰 결제 시스템 작업 <b>2019.12.20</b> </a> </div> <div class="tab2"> <a href="#none"><img src="images/gallery-01.jpg" alt="gallery-01"></a> <a href="#none"><img src="images/gallery-02.jpg" alt="gallery-02"></a> <a href="#none"><img src="images/gallery-03.jpg" alt="gallery-03"></a> </div> </div> </div> </div> <div class="banner"> <a href="#none"><img src="images/banner.jpg" alt="banner"></a> </div> <div class="shortcut"> <a href="#none"><img src="images/shortcut.jpg" alt="shortcut"></a> </div> </div> <footer> <div class="footer-logo"> <a href="#none"><img src="images/footer-logo.png" alt="footer-logo"> </a> </div> <div class="copy"> 상호 : 엣지컴퍼니 | 대표자 : 홍길동 | 개인정보관리책임자 : 장길산 차장 <br> 사업장주소 : 서울특별시 강남구 테헤란로 123-56 </div> <div class="sns"> <a href="#none"><img src="images/sns-01.png" alt="facebook"></a> <a href="#none"><img src="images/sns-02.png" alt="twitter"></a> <a href="#none"><img src="images/sns-03.png" alt="instagram"></a> </div> </footer> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom.js"></script> </body> </html> @charset "utf-8"; body { background-color: #fff; color: #333333; margin: 0; font-size: 15px; } a { color: #333333; text-decoration: none; } /* 기본구도잡기 */ .container { /* border: solid 1px red; */ width: 1200px; margin: auto; } header { height: 100px; } header > div { /* border: 1px solid blue; */ height: 100px; } .header-logo { width: 200px; float: left; } .navi { width: 600px; float: right; } .slide {} .slide > div { /* border: 1px solid green; */ height: 300px; } .items { overflow: hidden; } .items > div { /* border: 1px solid pink; */ height: 200px; float: left; box-sizing: border-box; } .news { width: 500px; } .banner { width: 350px; } .shortcut { width: 350px; } footer { overflow: hidden; } footer > div { /* border: 1px solid purple; */ height: 100px; float: left; box-sizing: border-box; } .footer-logo { width: 200px; } .copy { width: 800px; } .sns { width: 200px; } /* 이미지와 텍스트 */ header { position: relative; z-index: 10; } .header-logo { line-height: 130px; } .slide { margin-bottom: 20px; } .footer-logo { line-height: 130px; } .copy { text-align: center; padding-top: 30px; } .sns { padding-top: 20px; text-align: center; } /* 슬라이드 */ .slide { position: relative; width: 1200px; height: 300px; overflow: hidden; } .slide > div { position: absolute; top: 0; left: 0; animation: slide 10s linear infinite; font-size: 0; } @keyframes slide { 0% { top: 0; } 30% { top: 0; } 35% { top: -300px; } 65% { top: -300px; } 70% { top: -600px; } 95% { top: -600px; } 100% { top: 0; } } /* 네비게이션 */ .menu { list-style: none; padding: 0; padding-top: 20px; /* border: 1px solid red; */ } .menu li { /* border: 1px solid #000; */ float: left; width: 25%; box-sizing: border-box; text-align: center; } .menu li > a { border: 1px solid black; display: block; padding: 5px; transition: 0.5s; } .menu li:hover > a { background-color: #000; color: #fff; } .sub-menu { background-color: #fff; border: 1px solid black; display: none; } .sub-menu a { display: block; padding: 5px; transition: 0.5s; } .sub-menu a:hover { background-color: #000; color: #fff; } /* 뉴스와 갤러리 텝메뉴 */ .tab-inner { width: 95%; margin: auto; } .btn {} .btn a { border: 1px solid #000; display: inline-block; width: 100px; text-align: center; padding: 5px; border-radius: 5px 5px 0 0; margin-right: -6px; border-bottom: none; margin-bottom: -1px; background-color: #ddd; } .btn a.active { background-color: #fff; } .tab {} .tab1 { border: 1px solid #000; padding: 0 10px; /* display: none; */ } .tab1 a { display: block; padding: 5px; border-bottom: 1px solid #000; } .tab1 a:last-child { border-bottom: none; } .tab1 a b { float: right; font-weight: normal; } .tab2 { border: 1px solid #000; height: 169px; text-align: center; padding-top: 20px; box-sizing: border-box; display: none; } .tab2 img { width: 130px; } // 네비게이션 $('.menu li').mouseenter(function(){ $('.sub-menu').stop().slideDown() }) $('.menu li').mouseleave(function(){ $('.sub-menu').stop().slideUp() }) // $('.menu li').mouseenter(function(){ // $(this).children('.sub-menu').stop().slideDown() // }) // $('.menu li').mouseleave(function(){ // $(this).children('.sub-menu').stop().slideUp() // }) // 텝메뉴 $('.btn a:first-child').click(function(){ $('.tab1').show() $('.tab2').hide() $(this).addClass('active') $(this).sliblings().removeClass('active') }) $('.btn a:last-child').click(function(){ $('.tab2').show() $('.tab1').hide() $(this).addClass('active') $(this).sliblings().removeClass('active') })

  • HTML/CSS
  • jquery
  • 웹-디자인
혜민 댓글 1 좋아요 2 조회수 280

선생님처럼 했는데 창이이상하게 그림이 계속 떨어지네요 ,,,

미해결

[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드

/*tab-inner*/ .tab-inner, .gallery-inner{ width: 95%; margin: auto; } .tab-inner .btn{} .tab-inner .btn span, .gallery-inner .btn span{ border: 1px solid #000; display: inline-block; width: 100px; padding: 5px; text-align: center; border-radius: 5px 5px 0 0; border-bottom: none; margin-bottom: -1px; background-color: #fff; } .tab-inner .tab, .gallery-inner .tab{ border: 1px solid #000; padding: 0 10px; height: 155px; } .tab-inner .tab a { display: block; text-decoration: none; color: #000; border-bottom: 1px solid #333; padding: 4px; } .tab-inner .tab a:last-child{ border-bottom: none; } .tab-inner .tab a b { float: right; font-weight: normal; } .gallery .tab img{ width: 100px; } .gallery .tab{ text-align: center; padding-top: 30px; box-sizing: border-box; } 소스는 똑같이한거같은데 사진이 문제인가 저렇케 내려와서요 뭐가 문제일까요 /...???

  • HTML/CSS
  • jquery
  • 웹-디자인
jkjk7088 댓글 4 좋아요 1 조회수 389

제이쿼리가 작동하지 않는데 이유를 모르겠어요ㅠㅠ

미해결

[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드

제이쿼리가 작동하지 않는데 이유를 못찾겠습니다 ㅠㅠㅠㅠ... 밑에 누르면 이런게 뜨는데 이거랑 연관이 있는걸까요?

  • HTML/CSS
  • jquery
  • 웹-디자인
댓글 1 좋아요 1 조회수 316

인기 태그

인프런 TOP Writers

주간 인기글