172만명의 커뮤니티!! 함께 토론해봐요.
해결됨
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
안녕하세요 선생님, 저는 spot 메뉴에서 ' | ' 바의 역할이 단어 칸 나누기라고 생각해서 지금까지 키보드 위에 있는 저 바를 html 에 입력하고 a태그로 메뉴를 구성했었거든요, 필독 사항 강의 에서도 반드시 필요한 것은 아니고, 코드 간결을 위해서 사용한다고 말씀해주셨는데, | 부분을 실무에서 코사용할 때 after를 사용하나요? 키보드에 있는 걸 쓰는 것을 쌤은 비추를 하시는지 궁금해서 질문 드립니다..!
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
<div class="content-inner"> <div class="slide"> <div class="slide-items"> <a href="#none" class="slide-item"><img src="images/slide-01.jpg" alt="slide 01"></a> <a href="#none" class="slide-item"><img src="images/slide-02.jpg" alt="slide 02"></a> <a href="#none" class="slide-item"><img src="images/slide-03.jpg" alt="slide 03"></a> </div> </div> .slide-items { position: relative; width: 1200px; height: 300px; overflow: hidden; } .slide-item { position: absolute; top: 0; left: 0; width: 3600px; font-size: 0; } setInterval(function(){ $('.slide-items').animate({left: '-1200px'}, function(){ $('.slide-items').css({left: 0}); $('.slide-item:first-child').appendTo('.slide-items'); }); }, 3500); 제 컴퓨터가 이상한 건지는 모르겠는데 코드 확인 해봐도 도저히 다른 곳이 없는데 뭐가 문제일까요ㅠㅠ 사진이 툭툭 끊기면서 넘어가요
미해결
코알못에서 웹서비스 런칭까지 : 2021 제주 코딩 베이스캠프(Django)
vscode에서 html은 자동완성이 되는데 javascript 자동완성이 안됩니다. 해결방법이 있나요?
미해결
구글 애드센스 수익형 워드프레스 블로그 만들기
올려주신 드라이브 파일에서 sticky 관련 파일은 찾을 수가 없는데 누락된건가요? 제가 못찾은거라면 어느부분에 작성되어 있는 지 알 수 있을까요? +추가) 밑줄 없애는 css 코드도 따로 없는것 같은데 확인 부탁드립니다..!
해결됨
구글 애드센스 수익형 워드프레스 블로그 만들기
강의에 대한 질문은 인프런 질문하기나 1:1 카카오톡 플러스 친구에서 문의하셔도 가능합니다. (카카오톡 플러스친구 주소 http://pf.kakao.com/_ckMyxj/chat ) 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요 글 가져오기 파일.xml은 어디서 다운 받을 수 있나요? 이런 파일들도 하나하나 다 요청해야지 받을 수 있는건가요?
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
단축키 자료 올려주신건 비쥬얼스튜디오에도 똑같이 적용이 가능한 부분인가요? 시험전 준비영상도 봤는데 그 영상에서 말씀하신 단축키만 바꾸면 똑같이 써도 되는건지 궁금해서요. ■ 질문 남기실 때 꼭! 참고해주세요. - 먼저 유사한 질문이 있었는지 검색해주세요. - 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다. - HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요. - 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다. 질문 하실 때 어떤 유형인지 말씀해주세요. ex) A1 작업하는데 ???이 안됩니다.
해결됨
[코드캠프] 시작은 프리캠프
2024년에 html이 새로 바뀌었다는 얘기를 들었는데 이 강의를 들어도 되나요?
미해결
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을 따로 쓰던데 이것도 감을 못잡겟네요..
미해결
프로그래밍 시작하기 : 파이썬 입문 (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를 주면 위아래 여백이 사라지고 딱 맞게 배치가 되는건지 이해가 잘 안가서요 ㅠ..! 말로 설명이 가능하실까 모르겠지만 일단 남겨봅니다!
