172만명의 커뮤니티!! 함께 토론해봐요.
미해결
SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma
수강신청 장바구니 화면에서 항목중 1개라도 선택이 해제되면 전체선택체크박스의 체크도 풀려야 하는거 아닌가요? 어떤 스크립트를 추가해야 적용이 되나요?
미해결
프로그래밍 시작하기 : 파이썬 입문 (Inflearn Original)
rokoppa@gmail.com 입니다. 감사합니다~!
미해결
입문자를 위한, HTML&CSS 웹 개발 입문
안녕하세요! 고급 선택자 2탄 영상의 대략 8분 경에서 [data-tooltip]이 relative가 되서 absolute인 [data-tooltip]:hover::after가 저기에 붙었다고 하셨는데, absolute는 부모 요소 중에 static이 아닌 요소에 붙지 않나요? 그러면 :hover::after처럼 의사요소는 붙은 요소의 자손으로 들어가는 걸까요? [data-toolip]과 [data-toolip]:hover::after이 동일 선상에 위치(형제 요소)처럼 보이는데 어떻게 그럴 수 있는지 궁금합니다!
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
서브메뉴가 슬라이드 뒤로 숨고 서브메뉴 배경이 꽉 차는 게 아니라 약간의 여백이 생기는데 왜일까요? <!DOCTYPE html> <html lang="ko"> <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/logo-header.png" alt="header-logo"></a> </div> <div class="navi"> <!-- navigation --> <ul class="menu"> <li> <a href="#none">MENU-1</a> <div class="sub-menu"> <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">MENU-2</a> <div class="sub-menu"> <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">MENU-3</a> <div class="sub-menu"> <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">MENU-4</a> <div class="sub-menu"> <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> <!-- header --> <div class="slide"> <div class="slide-items"> <a class="slide-item" href="#none"><img src="images/slide-01.jpg" alt="slide-01"></a> <a class="slide-item" href="#none"><img src="images/slide-02.jpg" alt="slide-02"></a> <a class="slide-item" href="#none"><img src="images/slide-03.jpg" alt="slide-03"></a> </div> </div> <!-- slide --> <div class="items"> <!-- news --> <div class="news"> <div class="tab-inner"> <div class="btn"> <a class="active" href="#none">공지사항</a> <a href="#none">갤러리</a> </div> <div class="tabs"> <div class="tab1"> <a class="open-modal" href="#none">asisaisdoijsdas <b>2020</b></a> <a href="#none">asisaisdoijsdas <b>2020</b></a> <a href="#none">asisaisdoijsdas <b>2020</b></a> <a href="#none">asisaisdoijsdas <b>2020</b></a> <a href="#none">asisaisdoijsdas <b>2020</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> <!-- news --> </div> <div class="banner"> <a href="#none"><img src="images/banner-01.jpg" alt="banner-01"></a> </div> <div class="shortcut"> <a href="#none"><img src="images/banner-02.jpg" alt="shortcut"></a> </div> </div> <!-- items --> @charset "UTF-8"; body { margin: 0; font-size: 15px; background-color: #fff; color: #222328; display: flex; justify-content: center; } a { color: #222328; text-decoration: none; } .container { border: 1px solid black; width: 1200px; } header { display: flex; justify-content: space-between; } header > div { height: 100px; } .header-logo { width: 200px; } .navi { width: 600px; } .slide {} .slide > div { border: 1px solid black; height: 300px; } .items { display: flex; } .items > div { border: 1px solid black; height: 200px; } .news { width: 500px; } .banner { width: 350px; } .shortcut { width: 350px; } footer { display: flex; } footer > div { height: 100px; } .footer-logo { width: 200px; } .copyright { width: 800px; } .sns { width: 200px; } /* news */ .tab-inner { width: 97%; margin: auto; } .tab-inner .btn {} .tab-inner .btn a{ border: 1px solid black; display: inline-block; width: 100px; text-align: center; padding: 3px; border-radius: 5px 5px 0 0; margin-right: -6px; background-color: #ccc; border-bottom: none; margin-bottom: -1px; cursor: pointer; } .tab-inner .btn a.active { background-color: #fff; } .tabs {} .tabs div { border: 1px solid black; height: 155px; padding: 0 10px; box-sizing: border-box; } .tabs .tab1 {} .tabs .tab1 a { display: block; border-bottom: 1px solid black; padding: 5px } .tabs .tab1 a:last-child { border-bottom: none; } .tabs .tab1 a b{ float: right; font-weight: normal; } .tab2 { display: none; text-align: center; } .tab2 img { width: 120px; padding-top: 20px; } /* slide modal */ .slide { position: relative; width: 1200px; height: 300px; overflow: hidden; } .slide-items { position: absolute; font-size: 0; } /* navi */ .menu { list-style: none; padding: 0; margin-top: 30px; display: flex; } .menu li { float: left; width: 150px; box-sizing: border-box; text-align: center; } .menu li > a { border: 1px solid #000; display: block; padding: 3px; transition: 0.5s; } .menu li:hover > a { background-color: #000; color: #fff; } .sub-menu { padding: 3px; 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 setInterval(function(){ $('.slide-items').animate({top: '-300px'}, function(){ $('.slide-items').css({top: 0}); $('.slide-item:first-child').appendTo('.slide-items'); }); }, 3500) // news $('.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') }) // modal $(".open-modal").click(function(){ $('.modal').fadeIn() }) $(".close-modal").click(function(){ $('.modal').fadeOut () }) // navi $('.menu li').mouseenter(function(){ $(this).children('.sub-menu').stop().fadeIn() }) $('.menu li').mouseleave(function(){ $(this).children('.sub-menu').stop().fadeOut() }) 제이쿼리 부분이 좀 줄이 엉켰는데 양해 부탁드립니다...
미해결
풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
안녕하세요. 쉽고 자세한 설명해주셔서 즐겁게 잘 듣고 있습니다. 여기까지는 잘 따라왔는데요. 실행시 화면상에 약간의 차이가 있는 부분이 생겨서 문의드립니다. class-container 부분을 하고 있는데요. 코드는 강사님 내용이랑 동일한데 화면상에서 보이는 카드화면 부분이 제 화면에서는 좁게 나와서요. [강사님화면] [제 화면] 혹시나 코드가 뭐라도 다른 가 해서 전체적으로 살펴보았고, 또 혹시나 해서 강사님 강의자료 ( 05_roadmap_section ) 의 index.html로 golive로 구동을 해보았습니다만. 동일하게 좁은 상태인데... .class-card 폭은 240px 고정이고요. .class-card { width : 240px; /* 요런 건 사이즈를 픽스하는 게 좋다 */ /* box-shadow: 블럭에 그림자를 적용하는 CSS 기능 https://developer.mozilla.org/ko/docs/Web/CSS/box-shadow offset-x | offset-y | blur-radius | spread-radius | color */ box-shadow: 10px 10px 10px -5px rgba(25, 42, 70, 0.2); border-radius: 8px; margin: 0 10px; } 개발자 모드로 확인시에도 폭이 240px 이고... 혹시 pc의 해상도에 따라서 다른 걸까요?? 이걸 확인을 어떻게 해야 할 지 모르겠습니다. ㅡㅡ;
미해결
CSS Flex와 Grid 제대로 익히기
백엔드 지망생입니다. 개인프로젝트 겸 기본적인 css 지식은 있어야 할 것 같아서 하고 공부하고 있는데, 아직 px와 em rem을 언제 어떻게 써야 할지 잘 모르겠네요.. px em rem의 개념은 잘 알고 있지만 강사님꼐서 어떤 상황에선 px을 쓰시고 em을 쓰시고 rem을 쓰시는데 초보자 입장에서 잘 와닿지 않네요.. 3:42초에 search-form input[type='search']에만 보더라도 한 클래스 안에 3개의 px em rem이 써 있는데 이런 감각적인 것을 어떻게 연습하면 좋을까요? 레이아웃 크기 지정도 그렇지만 또 font크기도 px em rem을 따로 쓰던데 이것도 감을 못잡겟네요..
해결됨
손에 익는 Next.js - 마이그레이션하기
안녕하세요. 현재 react 로 구성되어 있는 프로젝트를 next.js 로 마이그레이션 하기 위해 강의 신청해서 들었습니다. 마이그레이션 도중 질문이 있어서 글 남겨봅니다. 1) 기존 react 에서 navigate 의 state 값으로 전달하던 데이터 들이 있습니다. 전달된 데이터는 location state 로 가져와서 사용했구요. 2) next 12 버전 까지는 query 에 객체를 담아서 보낼수 있고 url 도 as 를 이용해서 제어할 수 있는걸 확인했습니다. 3) 하지만 13버전 이후부터 next/router -> next/navigate 로 변경되면서 query 객체, as 가 삭제되어진 걸로 확인되는데 페이지 이동시 데이터를 전달하러면 url 에 그냥 꼬라박는 방법 뿐인지 질문 드립니다.
미해결
프로그래밍 시작하기 : 파이썬 입문 (Inflearn Original)
안녕하세요. F5나 Ctrl+F5를 누르면 코드를 실행하지 않고 첨부한 캡쳐처럼 Select debugger 라고 뜹니다. 그리고 오른쪽의 세모를 클릭하면 실행합니다. 강의대로 그대로 따라했는데 제가 무언가 빠뜨린 게 있는 건가요? 어떻게 해야하죠? 감사합니다!
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
뚝뚝 끊기기만 하고 사진은 아예 안바껴요.. 모션만 보이고 <!DOCTYPE html> <html lang="ko"> <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/logo-header.png" alt="header-logo"></a> </div> <div class="navi"></div> </header> <!-- header --> <div class="slide"> <div class="slide-items"> <a class="slide-item" href="#none"><img src="images/slide-01.jpg" alt="slide-01"></a> <a class="slide-item" href="#none"><img src="images/slide-02.jpg" alt="slide-02"></a> <a class="slide-item" href="#none"><img src="images/slide-03.jpg" alt="slide-03"></a> </div> </div> <!-- slide --> <div class="items"> <div class="news"></div> <div class="banner"> <a href="#none"><img src="images/banner-01.jpg" alt="banner-01"></a> </div> <div class="shortcut"> <a href="#none"><img src="images/banner-02.jpg" alt="shortcut"></a> </div> </div> <!-- items --> <footer> <div class="footer-logo"> <a href="#none"><img src="images/logo-footer.png" alt="footer-logo"></a> </div> <div class="copyright"> 상호 : 엣지컴퍼니 | 대표자 : 홍길동 | 개인정보관리책임자 : 장길산 차장 <br>사업장주소 : 서울특별시 강남구 테헤란로 123-56 </div> <div class="sns"> <a href="#none"><img src="images/sns-01.png" alt="sns-01"></a> <a href="#none"><img src="images/sns-02.png" alt="sns-02"></a> <a href="#none"><img src="images/sns-03.png" alt="sns-03"></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 { margin: 0; font-size: 15px; background-color: #fff; color: #222328; display: flex; justify-content: center; } a { color: #222328; text-decoration: none; } .container { border: 1px solid black; width: 1200px; } header { display: flex; justify-content: space-between; } header > div { height: 100px; } .header-logo { width: 200px; } .navi { width: 600px; } .slide {} .slide > div { border: 1px solid black; height: 300px; } .items { display: flex; } .items > div { border: 1px solid black; height: 200px; } .news { width: 500px; } .banner { width: 350px; } .shortcut { width: 350px; } footer { display: flex; } footer > div { height: 100px; } .footer-logo { width: 200px; } .copyright { width: 800px; } .sns { width: 200px; } /* 모듈 외 컨텐트 */ .header-logo { line-height: 130px; } .footer-logo { line-height: 130px; } .copyright { text-align: center; padding-top: 30px; } .sns { line-height: 130px; text-align: center; } /* slide modal */ .slide { position: relative; width: 1200px; height: 300px; overflow: hidden; } .slide-items { position: absolute; font-size: 0; } // slide setInterval(function(){ $('.slide-items').animate({top: '-300px'}, function(){ $('.slide-items').css({top: 0}); $('slide-item:first-child').appendTo('.slide-items'); }); }, 3500) 좌우로 넘어가는 거 했을 때도 똑같은 현상이 나타났는데 뭐가 문제일까요..ㅜㅠㅠ
미해결
처음 만난 리액트(React)
ReactDOM.render( <React.StrictMode> <CommentList /> </React.StrictMode>, document.getElementById('root') ) 위 내용대로 npm start해서 띄우면 React 18버전부터는 React.createRoot를 사용하라고 나오네요. .render대신에 .createRoot로 사용하면 될까여? 만약 .createRoot로 사용시 예제 간단히 알려주시면 감사하겠습니다.
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
■ 공지사항,갤러리가 별도로 구성되어있는 강의를 듣고있는데 news 클래스 아래로 a태그가 떨어집니다 ㅠㅠ 혹시 잘못된 부분이 있는걸까요? <body> <section class="items"> <article class="news"> <div class="tab-inner"> <div class="btn"> <span>공지사항</span> </div> <div class="tab"> <a href="#none"> 문자발송서비스 <b>2024.03.06</b> </a> <a href="#none">문자발송서비스 <b>2024.03.06</b> </a> <a href="#none">문자발송서비스 <b>2024.03.06</b> </a> <a href="#none">문자발송서비스 <b>2024.03.06</b> </a> <a href="#none">문자발송서비스 <b>2024.03.06</b> </a> </div> </div> </article> <article class="gallery">갤러리</article> <article class="now">바로가기</article> </section> </body> <css> * { padding: 0; margin: 0; position: relative;} a { color: inherit; text-decoration: none; display: inline-block;} ul,li,ol { list-style: none;} /*와이어프레임정렬*/ .items { border: 3px solid blue; max-width: 1200px; margin: 0 auto; display: flex; } .items div { height: 200px; } .news { width: 350px; background-color: lightblue;} .news .tab-inner { border: 5px solid salmon; } .news .tab a { border: 3px solid slateblue; } .gallery { width: 500px; background-color: coral;} .now { width: 350px; background-color: lightseagreen;} /*tab content*/ -출력화면-
미해결
자바스크립트 : 기초부터 실전까지 올인원
1부터 50까지 369결과 프린트인데 왜 숫자 2인데 박수 짝치죠?
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
선생님 안녕하세요. 수강생입니다.수업은 섹션1부터 차근 차근 따라가면 될까요? 안배우고, 몰랐던 부분들이 등장해서 인강을 어디서부터 어떻게 들으면 될지 여쭈어 봅니다.(비전공자라 코딩 지식이 아예 없습니다.)
미해결
모바일 웹 퍼블리싱 포트폴리오 with Figma
안녕하세요 ! gnb부분 하다가 헷갈리는게 있어서요 .. gnb 부분엔 flex를 줘서 가로배치 1/5한 건 이해했는데, .gnb a 위아래 여백이 남았어서 그 여백을 없애려면 .gnb a에 display : flex를 주어야한다고 하셨는데 왜 flex를 주면 위아래 여백이 사라지고 딱 맞게 배치가 되는건지 이해가 잘 안가서요 ㅠ..! 말로 설명이 가능하실까 모르겠지만 일단 남겨봅니다!
미해결
HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>도형 로딩 애니메이션</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="loading"> <span></span> <span></span> <span></span> </div> </body> </html> /* Google Web Font */ @import url('http://fonts.googleapis.com/css?family=Raleway&display=swap'); body { font-family: 'Raleway', sans-serif; line-height: 1.5em; margin: 0; font-weight: 300; display: inline; justify-content: center; align-items: center; height: 100vh; } a { text-decoration: none; } .loading {} .loading span { display: inline-block; width: 20px; height: 20px; background-color: gray; border-radius: 50%; animation: loading 1s linear infinite; } .loading span:nth-child(1) { animation-duration: 0s; background-color:crimson; } .loading span:nth-child(2) { animation-duration: 0.2s; background-color:dodgerblue; } .loading span:nth-child(3) { animation-duration: 0.4s; background-color:royalblue; } @keyframes loading { 0% { opacity: 0; transform: scale(0.5); } 50% { opacity: 1; transform: scale(0.5); } 100% { opacity: 0; transform: scale(0.5); } } 이렇게 작성했는데 go live 화면에선 이렇게 뜨고 애니메이션이 안나와요.. ㅠㅠ 뭐가 문제일까요??? 몇주동안 안되요..
미해결
HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>도형 로딩 애니메이션</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="loading"> <span></span> <span></span> <span></span> </div> </body> </html> /* Google Web Font */ @import url('http://fonts.googleapis.com/css?family=Raleway&display=swap'); body { font-family: 'Raleway', 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; } .loading {} .loading span { display: inline-block; width: 20px; height: 20px; background-color: gray; } .loading span:nth-child(1) {} .loading span:nth-child(2) {} .loading span:nth-child(3) {} 지금 이 상태인데 화면에 아무것도 나타나지 않습니다. 이렇게 뜨는데 뭐가 문제일까요?
미해결
HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
이렇게 뜨는데 뭐가 문제일까요.. go live 화면에서도 안보이고 문제가 뭔지 모르겠어요 ㅠ
해결됨
순수 html/css/js만을 활용한 반응형웹 제작[실전편] 부트캠프
영상 수업 소스 다운로드는 어디서 받을수 있나요? 영상 수업 동일하게 코딩해도 오류가 나거나 정상적으로 출력되지 않아..
해결됨
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
이전 강의인 그랩 마켓 서버 구축하기 에서는 node_modules가 없었는데 이번 강의부터는 생성 되어있습니다. 생성 과정을 건너뛰셨다면 어디서 확인할 수 있는지는 강의에 포함시켜주시는게 맞는거 같습니다.
미해결
처음 만난 리액트(React)
우선 좋은 강의를 무료로 제공해 주신다는 점에 매우 감사드립니다 🙂 다름이 아니라 props에 대해 궁금한 점이 있어서 글 남깁니다. function SampleComponent(props) { return ( <div> <div>{props.name}</div> <div>{props.age}</div> </div> ); } 만약 위와 같이 코드를 작성했다고 하면, 이 컴포넌트를 사용할 때 아래와 같이 사용할 것으로 예상됩니다. root.render( <React.StrictMode> <SampleComponent name={'kim'} age={12} /> </React.StrictMode> ); 근데 만약 코드가 매우 길어지고, props로 넘겨야 하는 것들이 많아진다고 가정해 보겠습니다. 예를 들어 props.name props.age props.university props.profilePhoto props.grade etc... 이런 경우에는 도대체 props로 어떤 것들을 넘겨 주어야 하는지 굉장이 헷갈리는 상황이 발생할 것 같은데 이를 해결하기 위한 방법이 있을지 궁금합니다. ++ 제가 찾아본 바로는 아래와 같이 코드를 작성하면 된다고 합니다. function SampleComponent({name, age}) { return ( <div> <div>{name}</div> <div>{age}</div> </div> ); } 그런데 이 방식을 사용하게 되면 children은 어떻게 넘겨 줄 수 있는지가 궁금합니다. 그냥 아래와 같이 처리하면 되는 것일까요? function SampleComponent({children, name, age}) { return ( <div> <div>{name}</div> <div>{age}</div> <div>{children}</div> </div> ); } 또한, 이 방식이 맞는 방식이라면, 굳이 아래 코드와 같이 props를 사용하시는 이유가 무엇인지도 궁금합니다. function SampleComponent(props) { return ( <div> <div>{props.name}</div> <div>{props.age}</div> </div> ); }
