github 좀 알려주세요...
미해결
DOM 인터랙션
소스코드 링크 알려주세요.. 같은글2번정도올렸었는데 답글 없으셔서 한번더 올립니다..
- html/css
- dom
- HTML/CSS
- javascript
bigger
댓글 1
좋아요 0
조회수 488
묻고 답해요
173만명의 커뮤니티!! 함께 토론해봐요.
웹페이지에서 상품 정렬 혹은 조건을 정하여 보여주려면 어떤 방법을 사용해야할까요?
미해결
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
예를들어서 웹페이지에서 select나 checkbox를 통하여 값을 정했을 때 선택한 값에 따라 정렬이나 조건에 맞게 화면에 보여줄 방법은 없을까요?
- html/css
- HTML/CSS
- react-native
- nodejs
- node.js
- react
- react-native
- 머신러닝
- express
- tensorflow
- 머신러닝 배워볼래요?
- javascript
이태희
댓글 1
좋아요 1
조회수 533
맛집 클릭시 상세조회 부분에서 오류가 생겨요ㅜㅜ
미해결
비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
return에서 기존 hello 문구를 지우고 엔터를 치면 여기서 부터 오류가 떠요 그리고 이렇게html에서 js로 옮기는 과정에서 오류가 뜨는데 어떻게 해야되나요?
- html/css
- HTML/CSS
- github
- git
- javascript
- rest-api
- mysql
- rest-api
- aws
박선희
댓글 2
좋아요 0
조회수 348
메인페이지 헤더 회원/비회원 표시
미해결
비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
로그인이나 회원가입 후 메인페이지 헤더 부분에 비회원과 회원 구분하는 바가 나오지 않습니다. header.js코드는 그대로 복붙하고 url 에서 포트만 3001 -> 3000 으로 바꿨습니다 back end의 indexRoute에서 아래 app.get("/jwt", jwtMiddleware, index.readJwt); 코드도 잘 추가하였는데 문제가 어떤건지 모르겠습니다 ㅠㅠ
- html/css
- mysql
- git
- rest-api
- javascript
- aws
- HTML/CSS
- github
리리릴
댓글 1
좋아요 0
조회수 720
useState 사용 질문
미해결
처음 만난 리액트(React)
기초질문이지만 명확하게 이해가 가지 않아 질문드립니다 ..! (완전 초보입니다.. ㅠㅠ) Calculator function에서 temperature,scale 선언시에 useState()로 받는것은 재사용방지를 위한 hook을 사용하는 것인가요 ˀ̣
- html/css
- javascript
- react
- HTML/CSS
sbnin55
댓글 1
좋아요 0
조회수 445
h2에 background
미해결
CSS에 날개를 달아주는 Sass (SCSS)
느낌표에 호버하면 'invalid property value' 라고 나오면서 h2에 background: linear-gradient(left, $color-primary, $color-secondary); 가 안 먹히는 상황입니다 제공해주신 파일의 _type.scss를 그대로 붙여넣기 했는데도 동일하네요 ㅜㅜ 뭐가 문제일까요..
- html/css
- HTML/CSS
- sass
곰젤리
댓글 1
좋아요 0
조회수 493
float 속성 상속 관련 궁금합니다!
미해결
HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
float 속성이 상속 될 때에, 바로 아래 선택자 하나에만 상속되나요? 아니면 그 아래 모든 선택자들에게 상속되나요?? 그리고 clear 속성 예제 과정 중, clear div 가 다른 div들 뒤에 가려졌는데, 왜 text는 밖에 나와있는건가요?
- html/css
- jquery
- HTML/CSS
nayeon.kim
댓글 2
좋아요 3
조회수 565
부모요소에 uk-child-width-*
미해결
최고의 프론트엔드 CSS Frameworks, UIkit
사이간격 gap 없앨려고 .frame4 {column-gap: 0; } 안먹힙니다. 부모요소에 줄때는uk-child-width줄때는 column-gap이 컬럼이 아니라서 안먹히는건가요? .frame4.uk-grid>* { padding-left: 0px; } 이렇게 주면 먹히는데 이런방법말고 css다른 처리방법이 있는지 궁급합니다. <div class="frame4 uk-child-width-expand" uk-grid> <div> <div class="cell">cell 1</div> </div> <div> <div class="cell">cell 2</div> </div> <div> <div class="cell">cell 3</div> </div> <div> <div class="cell">cell 4</div> </div> <div> <div class="cell">cell 5</div> </div> <div> <div class="cell">cell 6</div> </div> </div> }
- html/css
- 포트폴리오
- HTML/CSS
- 포트폴리오
비타민걸
댓글 1
좋아요 1
조회수 397
블로그 실습 빌드 시 오류
미해결
처음 만난 리액트(React)
마지막 단계까지 마쳤는데요~ 빌드 폴더 생성 후 npm install -g serve 시에 오류가 납니다 어떤 오류 인지 모르겠어서 소스 첨부 후 문의 드립니다 감사합니다~
- html/css
- HTML/CSS
- javascript
- react
h121206
댓글 1
좋아요 0
조회수 751
grid속성 6:36에 나오는 것.
해결됨
[코드캠프] 강력한 CSS
가로의 1fr과 세로의 1fr이 같은 단위인가요? 즉 가로에서 1FR이 100px이었다면 세로의 1fr도 100PX인가요?
- html/css
- HTML/CSS
srt ktx
댓글 1
좋아요 0
조회수 339
데이터베이스 다중값
미해결
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
데이터베이스 한 칼럼에 다중 값을 넣으려면 어떻게 해야 할까요? 예를 들어서 월, 화, 수, 목, 금, 토, 일을 체크박스로 만들고 여러 개의 값을 체크하면 그 값이 한칼럼에 다 들어간다고 가정했을 때 어떤 방법을 사용해야 할까요?
- html/css
- javascript
- HTML/CSS
- express
- node.js
- react
- tensorflow
- 머신러닝
- react-native
- 머신러닝 배워볼래요?
- nodejs
이태희
댓글 1
좋아요 1
조회수 1248
React key prop 오류 케이스 나오시는 분들 보세요
미해결
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
존경하는 그랩님 Warning: Each child in a list should have a unique "key" prop 오류 케이스에 대해서 조언좀 구할 수 있을까요? ReactDOM.render 방식이 React 18에서 지원하지 않으면서 오류들을 수정했습니다. //[AS-IS] import ReactDOM from 'react-dom'; ReactDOM.render( <React.StrictMode> <BrowserRouter> <App /> </BrowserRouter> </React.StrictMode>, document.getElementById('root') //[TO-BE] import * as ReactDOM from 'react-dom/client'; const root = ReactDOM.createRoot(document.getElementById("root")); root.render( <React.StrictMode> <App /> </React.StrictMode>); 다만 아래와 같은 오류들이 발생을 하였는데요. 구글링에서 찾아보니 각 엘리먼트에 key값을 주는 것으로 해결하라고 하는데요. - 그렇다면 src > main > index.js 에서 각 엘리먼트들에 key 값을 설정해줘야 하나요? - 각 엘리먼트들에 map 으로 되어있는 함수를 지우고.. (product, index) 형태를 key={product.id}>{product.imageUrl} key={product.id}>{ product.name } 형태로 바꾸어 주어야 하나요? - 조금 어렵게 느껴지네요. 해당 부분처럼 바꾸는게 맞는지 조금 조언 부탁드립니다. 현재 제 깃 레파지토리 참조로 첨부드립니다. 도와주세요 ㅠㅠ https://github.com/promotionX/Grabmarket-clinet
- html/css
- react
- HTML/CSS
- node.js
- express
- react-native
- tensorflow
- 머신러닝
- javascript
- 머신러닝 배워볼래요?
- nodejs
promotion
댓글 1
좋아요 1
조회수 1372
modal 유튜브 동영상 안들어가요
미해결
최고의 프론트엔드 CSS Frameworks, UIkit
모달 유튜브 동영상 안들어가 져요 iframe으로 퍼가기해서 복사해서넣었는데 동영상이 안들어가지네요~ 다른 유튜브동영상도 마찬가지입니다 왜그런가요 ?? <div id="modal-youtube" uk-modal> <div class="uk-modal-dialog uk-margin-auto-vertical"> <button class="uk-modal-close-outside" type="button" uk-close></button> <iframe width="560" height="315" src="https://www.youtube.com/embed/3adn6-gfbnQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen uk-video></iframe> </div> </div>
- html/css
- HTML/CSS
- 포트폴리오
- 포트폴리오
비타민걸
댓글 1
좋아요 1
조회수 687
netlify not found 오류
미해결
[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
사진에 나와있는 것처럼 만든 html, css, js 파일이 모두 들어있는 파일을 드래그 앤 드롭으로 옮겼는데 링크를 클릭하면 404 not found가 뜹니다 public도 되었다고 나옵니다 파일 설정을 잘못한 것일까요? 코드입니다 <meta property="og:url" content="https://lucent-caramel-9913e2.netlify.app" /> <meta property="og:title" content="십이간지 연애유형" /> <meta property="og:type" content="website" /> <meta property="og:image" content="img/image-9.png" /> <meta property="og:description" content="십이간지로 알아보는 연애유형" />
- html/css
- HTML/CSS
- javascript
- bootstrap
ksoy8n
댓글 1
좋아요 1
조회수 1081
라디오버튼과 체크박스를 커스텀 체크박스로 스타일링 관련 질문 드립니다.
미해결
HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
■ 질문 남기실 때 꼭! 참고해주세요. HTML을 <label> <input type="checkbox" checked >HTML </label> 이렇게 바꾸면 체크박스용 보더는 나타나는데 폰트 어썸 아이콘이 나타나지 않습니다.폰트어썸 아이콘을 나타나게 하려면 어떻게 해야 하나요? <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>커스텀 체크박스 스타일링(2)</title> <link rel="stylesheet" href="style.css"> </head> <body> <form> <label> <input type="checkbox" checked >HTML </label> <label for="chk2">CSS <input type="checkbox" id="chk2"> </label> <label for="chk3">jQuery <input type="checkbox" id="chk3"> </label> <label for="chk4">UIKit <input type="checkbox" id="chk4" disabled> </label> </form> </body> </html> /* Google Web Fonts CDN */ @import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:300,400,500,700,900&display=swap'); /* Fontawesome 4.7 */ @import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); body { font-family: 'Noto Sans KR', sans-serif; line-height: 1.5em; margin: 0; font-weight: 300; display: flex; justify-content: center; align-items: center; height: 100vh; } a { text-decoration: none; } form input[type=checkbox] { display: none; } form label { display: block; border: 1px solid green; cursor: pointer; } form label:before { content: '\f00c'; font-family: fontawesome; display: inline-block; width: 14px; height: 14px; line-height: 14px; font-size: 13px; color: transparent; border: 1px solid #333; border-radius: 3px; text-align: center; vertical-align: middle; margin-right: 5px; transition: 0.2s; } form input[type=checkbox]:checked + label:before { background-color: crimson; color: #fff; border-color: transparent; } form input[type=checkbox]:not(:disabled) + label:active:before { transform: scale(0); }
- html/css
- HTML/CSS
- jquery
dancoffee
댓글 2
좋아요 1
조회수 1033
margin : unset;
해결됨
따라하며 배우는 HTML, CSS
unset을 하게 되면 어떤 margin이 적용되는 건가요?? margin이 없어지는건가요??
- html/css
- HTML/CSS
oridori2705
댓글 1
좋아요 0
조회수 626
CSS 부분
해결됨
따라하며 배우는 HTML, CSS
CSS 부분에서 이런식으로 top 0 left 0 또는 right 0 이 추가되어있는데 적용하는 이유를 알 수 있을까요?? 수업내용을 놓친건가해서 다시봤는데 모르겠어서..ㅠㅠ
- html/css
- HTML/CSS
oridori2705
댓글 1
좋아요 0
조회수 428
left:calc(100% - 100px) 질문드립니다.
해결됨
[코드캠프] 강력한 CSS
.container { position: relative; width: 100%; height: 104px; /* height:104px 이유 : box-sizing:border-box 설정 때문 */ background: rebeccapurple; border: 2px solid red; } .item { width: 100px; height: 100px; background-color: black; display: flex; justify-content: center; align-items: center; animation-name: moveBox; animation-duration: 2s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; position: absolute; } .item span { color: white; } @keyframes moveBox { from { border-radius: 0; left: 0; } to { border-radius: 50%; left: calc(100% - 100px); } } item에 애니메이션 효과를 넣고 .container에서 범위에 벗어나지 않게 @keyframes moveBox에서 left:calc(100% - 100px)을 했는데 영상 설명에서 .item width 크기가 100px이라고 하셨는데 이해가 잘 되지 않아서 질문드립니다ㅠㅠ
- html/css
- HTML/CSS
박종규
댓글 1
좋아요 0
조회수 755
마지막 과제 이후, 여러 궁금증 문의드립니다.
해결됨
[코드캠프] 시작은 프리캠프
(1) dom 이용해서 style 지정할 때 document.getElementById('menuGame').style.color= "white"; document.getElementById('menuGame').style.backgroundColor= "white"; 위와 같이 개별로 지정하지 않고 document.getElementById('check').style = 'color: #FFFFFF; background-color: #0068FF;'; 위와 같이 style 에 string으로 여러 속성을 줄 수 있는건 강의를 통해서 알게되었는데요. 구글링을 하다보니 document.querySelector('.class').style.cssText=`color: pink; font-size: 20px;` ' .cssText '라는 걸 사용하면 동일하게 Multi로 style을 줄 수있다고 하네요. 인터넷 검색의 해당 설명을 보고 이해하기로는 기존 강의에서 배운 ' .style ' 까지만 사용하는것과의 차이는 ' .cssText '의 경우 덮어쓰기 개념인 걸로 판단되는데요... 실무 입장에서 어떤 차이가 있을 때 사용하시는지 문의드립니다. (2) html에서 함수 호출 시, 자동완성이 원래 안되는지? 위에 보시는 것 처럼, oninput 에서 함수 호출할 때 따옴표 내에서, 기존 JS 파일에 있는 함수 자동완성이 안되고, 직접 타이핑하여야 되더라구요. css나 html의 경우 여러 extenstion을 설치하여 각 파일에서 자동완성 되는것까지는 했는데 html 파일에서 JS의 함수나 변수? 등은 자동완성이 원래 불가능한건지 문의드립니다. (3) 특정 속성? 자동완성 안됨 일부 속성?은 자동완성이 안되고 소스 내 사용한적이 있다면 "abc" 형태로 자동완성 제안을 해줄 때도 있는데요. 실제로는 사용하게 되는 속성인데도 자동 완성이 안되는 것들이 몇 개 있는 듯 한데요 ex) .value 이런 것들은 실제 사용되는데도 자동완성이 기본적으로 안되는 별도의 이유가 있나요? 특별한 속성이라 그런건지..... 한 번에 여러 질문을 드려서 죄송하지만, 위에 대한 해답을 아시면 답변해주시면 감사하겠습니다.
- html/css
- javascript
- HTML/CSS
Bluemoon
댓글 1
좋아요 0
조회수 336
네비 상단
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
안녕하세요 선생님:) 상단 네비 전체드롭다운에 사이사이 선들을 어떤방법으로 제거해야하나요? <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css/style3.css"> </head> <body> <div class="container"> <header> <div class="header-logo"> <a href="#"><img src="img/logo.png" alt=""></a> </div> <div class="navi"> <ul class="menu"> <li> <a href="#">탑</a> <div class="sub-menu"> <a href="#">블라우스</a> <a href="#">티</a> <a href="#">셔츠</a> <a href="#">니트</a> </div> </li> <li> <a href="#">아우터</a> <div class="sub-menu"> <a href="#">자켓</a> <a href="#">코트</a> <a href="#">가디건</a> <a href="#">머플러</a> </div> </li> <li> <a href="#">팬츠</a> <div class="sub-menu"> <a href="#">청바지</a> <a href="#">짧은바지</a> <a href="#">긴바지</a> <a href="#">레깅스</a> </div> </li> <li> <a href="#">악세서리</a> <div class="sub-menu"> <a href="#">귀고리</a> <a href="#">목걸이</a> <a href="#">반지</a> <a href="#">팔찌</a> </div> </li> </ul> </div> </header> <div class="slide"> <div> <a href="#"><img src="img/slide1.jpg" alt=""></a> <a href="#"><img src="img/slide2.jpg" alt=""></a> <a href="#"><img src="img/slide3.jpg" alt=""></a> </div> </div> <div class="items"> <div class="news"> <div class="tab-inner"> <div class="btn"> <a href="#" class="actvie">공지사항</a> <a href="#">갤러리</a> </div> <div class="tabs"> <div class="tab1"> <a class="open-modal" href="#">3월 재입고 품목을 알려드립니다.<b>2020.03.14</b></a> <a href="#">반품/환불 규정에 대해 알려드립니다.<b>2020.03.14</b></a> <a href="#">S/S 시즌 신규 의류 신상품 안내<b>2020.03.14</b></a> <a href="#">신규회원 대상 할인 이벤트 안내<b>2020.03.14</b></a> <a href="#">신규회원 대상 할인 이벤트 안내<b>2020.03.14</b></a> </div> <div class="tab2"> <img src="img/gallery1.jpg" alt=""> <img src="img/gallery2.jpg" alt=""> <img src="img/gallery3.jpg" alt=""> </div> </div> </div> </div> <div class="banner"> <a href="#"><img src="img/banner_img.jpg" alt=""></a> </div> <div class="shortcut"> <a href="#"><img src="img/shortcut_img.jpg" alt=""></a> </div> </div> <footer> <div class="footer-logo"> <a href="#"><img src="img/logo2.png" alt=""></a> </div> <div class="copy"> COPYRIGHTⓒ by JUST Shop. ALL RIGHTS RESERVED </div> <div class="sns"> <a href="#"><img src="img/sns1.png" alt=""></a> <a href="#"><img src="img/sns2.png" alt=""></a> <a href="#"><img src="img/sns3.png" alt=""></a> </div> </footer> </div> <div class="modal"> <div class="modal-con"> <h3>이벤트 안내</h3> <p>안녕하세요! JUST쇼핑몰입니다. 고객님들의 성원에 보답하는 JUST쇼핑몰이 되고자 신규회원 20% 할인 이벤트를 실시하고 있습니다. 웹과 모바일 가입회원 대상이며, 서비스만족을 위해 꾸준히 노력하겠습니다.</p> <a class="close-madal" href="#">x 닫기</a> </div> </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: #333; } a{ text-decoration: none; color: #333; } .container{ width: 1200px; margin: auto; } header{ height: 100px; position: relative; z-index: 1;}header>div{ height: 100px; /* border: 1px solid #000; /}.header-logo{ float: left; width: 200px; line-height: 130px;}.navi{ width: 600px; float: right;} .menu{ / border: 1px solid #000; / padding: 0; list-style: none;}.menu>li{ / border: 1px solid #000; / float: left; width: 25%; box-sizing: border-box; text-align: center; margin-top: 15px;}.menu>li>a{ border: 1px solid #000; display: block; padding: 5px; transition: 0.5s;}.menu>li>a:hover{ background-color: #000; color: #fff;}.sub-menu{ border: 1px solid #000; background-color: #fff; display: none;}.sub-menu>a{ display: block; padding: 5px; transition: 0.5s;}.sub-menu>a:hover{ background-color: #000; color: #fff;} .slide{ position: relative; height: 300px; width: 1200px; / border: 1px solid #000; / overflow: hidden;}.slide>div{ position: absolute; top: 0; left: 0; font-size: 0; animation: slide 10s linear infinite;} @keyframes slide{ 0% {top: 0;} 30% {top: 0;} 35% {top: -300px;} 65% {top: -300px;} 70% {top: -600px;} 95% {top: -600px;} 100% {top: 0;}} .items{ overflow: hidden;}.items>div{ height: 200px; / border: 1px solid #000; / float: left; width: 400px; box-sizing: border-box;}.news{} .tab-inner{ width: 95%; margin: auto; padding: 6px;}.btn{}.btn>a{ border: 1px solid #000; display: inline-block; width: 120px; padding: 5px; border-radius: 5px 5px 0 0; background-color: #ddd; margin-right: -5px; border-bottom: none; margin-bottom: -1px;}.btn>a.actvie{ background-color: #fff;}.tabs{}.tabs>div{ border: 1px solid #000; height: 160px; padding: 0 10px;}.tab1{ }.tab1 a{ border-bottom: 1px solid #000; display: block; padding: 6px;}.tab1 a:last-child{ border-bottom: none;}.tab1 a b{ float: right; font-weight: normal;}.tab2{ display: none; text-align: center;}.tab2 img{ width: 100px; padding-top: 30px;} .banner{}.shortcut{} footer{}footer>div{ height: 100px; / border: 1px solid #000; / float: left; box-sizing: border-box;}.footer-logo{ width: 200px; line-height: 130px;}.copy{ width: 800px; line-height: 100px; text-align: center;}.sns{ width: 200px; line-height: 140px; text-align: center;} .modal{ background-color: #000; position: absolute; / 너비값 잃음 */ top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.2); display: none;}.modal-con{ background-color: #fff; width: 400px; padding: 20px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 15px;}.modal-con h3{ background-color: #000; color: #fff; padding: 5px;}.modal-con p{ line-height: 1.6em;}.modal-con a{ border: 1px solid #000; padding: 5px; float: right;} $('.menu>li').mouseover(function(){ $('.sub-menu').stop().slideDown() }) $('.menu>li').mouseout(function(){ $('.sub-menu').stop().slideUp()}) $('.btn>a:first-child').click(function(){ $('.tab1').show() $('.tab2').hide() $(this).addClass('actvie') $(this).siblings().removeClass('actvie')}) $('.btn>a:last-child').click(function(){ $('.tab2').show() $('.tab1').hide() $(this).addClass('actvie') $(this).siblings().removeClass('actvie')}) $('.open-modal').click(function(){ $('.modal').fadeIn()}) $('.close-madal').click(function(){ $('.modal').fadeOut()})
- html/css
- jquery
- 웹 디자인
- 웹-디자인
- HTML/CSS
기쁜 돌고래
댓글 1
좋아요 1
조회수 407
인기 태그
인프런 TOP Writers
주간 인기글
- 🚀 끝까지 만들어 본 적 있나요? | 실서비스 완성 + 수익 창출 모임 💰 catalyst collectiv
- 🚀 끝까지 만들어 본 적 있나요? | 실서비스 완성 + 수익 창출 모임 💰 catalyst collectiv
- 🚀 끝까지 만들어 본 적 있나요? | 실서비스 완성 + 수익 창출 모임 💰 catalyst collectiv
- 🧘♀️ [운동공간] 기획자/디자이너/앱 개발자를 찾습니다 띄띄
- 🚀 IT 공부는 했는데 왜 아직도 안 될까요? | AI와 함께 실무 중심 IT 모임 🤖 NOESIS