묻고 답해요
156만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma
spoqa han sans neo
spoqa han sans neo글씨체 다운받았는데 피그마 할 때 text밑에 fonts에서 no matching font로 나오네요.아예 검색자체가 안되는데 무슨 문제인가요??
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
vscode emmet 핵심 단축키 파일 관련
안녕하세요!vscode에서 emmet 사용법 강좌 끝에 보면 첨부파일에 핵심 단축키 정리된 파일을 다운로드 받으라고 되어 있는데, 아무리 찾아도 다운로드할 파일을 찾지 못하여... 제가 못찾는건지, 다운이 안되는 상황인건지 문의드립니다!
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
D,E유형 제이쿼리로 슬라이드 할 때 CSS 문의
슬라이드를 제이쿼리로 공부하고 있는데,이런 상황에서는 어떻게 css를 고쳐야할지 궁금합니다 ㅠㅠ슬라이드 크기가 넘쳐요 높이값 적용이 안되고있는것같습니다. 지금 상황 말고도 다른 유형에서 calc 함수를 줄 때마다 제대로 적용이 안돼서 가로는 꼭 flex:1을 썼는데, 혹시 flex가 위에 있으면 적용이 안된다거나.. 특정 (block, inline-block..등) 요소에만 되거나 등등 적용 가능/불가능한 조건이 있나요?숫자에 공백 다 주고 똑같이 작성해도 잘 안됩니다.
-
미해결자바스크립트+jQuery 기초부터 실무까지 : 기초 Part.1
상단에 일시정지 새로고침하는 것은 어떻게 나오게 하나요??
html에 상단에 일시정지 새로고침 아이콘들 나오게 하는것은 어떻게 하나요??
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
탭 메뉴 콘텐츠(스타일 01) with JQUERY 에서 제이쿼리 질문 드립니다.
■ 질문 남기실 때 꼭! 참고해주세요.- 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다. 해당 강의를 보고 간단한 ul li a 를 이용한 메뉴 탭을 연습해 보았습니다.그런데 이 부분에서 제이쿼리를 짤 때예제에서는 .testimonial-pic 밑에 img 들이 형제 요소로 잡혀서 siblings 를 이용해 removeClass('active') 를 하여 클릭한 것 외에 나머지들의 active 클래스들이 빠지도록 했는데제가 만든 부분은 menu 라는 div 에 ul > li > a 로 작성을 하고 a 에 active 를 넣어주다보니 siblings가 먹질 않아서 고민고민하다 제이쿼리는 li 에 class="active"를 넣어주고 css 에서는 active 가 들어가면 그 하위 a에 효과가 들어가도록 한번 짜봤는데 이렇게 하는게 문제 없는 방법일까요? 아니면 더 나은 방법이 있는 걸까요?<!DOCTYPE html> <html lang="ko"> <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 src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <link rel="stylesheet" href="./style.css"> </head> <body> <div class="content"> <div class="menu"> <ul> <li class="active" data-alt="tab1"><a href="#none">메뉴01</a></li> <li data-alt="tab2"><a href="#none">메뉴02</a></li> <li data-alt="tab3"><a href="#none">메뉴03</a></li> <li data-alt="tab4"><a href="#none">메뉴04</a></li> </ul> </div> <div class="news active" id="tab1"> news01 </div> <div class="news" id="tab2"> news02 </div> <div class="news" id="tab3"> news03 </div> <div class="news" id="tab4"> news04 </div> </div> <script> $('.menu ul li').click(function(){ $(this).addClass('active') $(this).siblings().removeClass('active') $('.content .news').removeClass('active') $('#'+ $(this).attr('data-alt')).addClass('active') }) </script> </body> </html> * { margin:0; padding:0; box-sizing: border-box; } body { height: 100vh; } a{ text-decoration: none; color: #000; } li { list-style: none; padding: 10px; } .content { border: 1px solid #000; } .menu ul { display: flex; } .menu ul a { padding:5px; color:gray; } .menu ul li.active a{ color: #000; font-weight: 700; } .news { border: 1px solid #000; height: 100px; display: none; } .news.active { display: block; }위 코드 처럼 만들었고 고민 후 수정해서 정상적으로 작동하는 전체 코드 입니다.수정전에 문제였던 부분을 코드와 함께 설명드리면,예제를 따라하면서 하다보니HTML 에 a 태그에 클래스와 데이터속성을 넣어줘서 <div class="menu"> <ul> <li><a class="active" data-alt="tab1" href="#none">메뉴01</a></li> <li><a data-alt="tab2" href="#none">메뉴02</a></li> <li><a data-alt="tab3" href="#none">메뉴03</a></li> <li><a data-alt="tab4" href="#none">메뉴04</a></li> </ul> </div>css 에서도 a 에 active 효과를 주었고.menu ul li a.active{ color: #000; font-weight: 700; }그래서 a태그들은 형제요소가 아니기 때문에 siblings 가 먹지 않았어서 이 문제를 어떻게 해결해야 하나 고민하다 맨 위에 정상작동되는 코드처럼 처리하였습니다. <script> $('.menu ul li a').click(function(){ $(this).addClass('active') $(this).siblings().removeClass('active') $('.content .news').removeClass('active') $('#'+ $(this).attr('data-alt')).addClass('active') }) </script> 해당 코드로 active를 넣어주고 해도 크게 문제 될게 없는지 더 나은 방법이 있는지 알려주시면 감사하겠습니다.(메뉴 구성을 .menu 클래스 밑에 ul과 li 를 쓰지말고 a 태그만을 이용하여 siblings 형제요소들을 사용하는 방법도 생각했으나 메뉴를 흔히 ul li로 만들기 때문에 해당 방법은 사용하지 않았습니다.)
-
해결됨스프링 프레임워크는 내 손에 [스프2탄]
page의 값이 어디서 증가하는지 궁금합니다..
29강 - 리스트에 페이지 번호 구하기를 들으면서 이해가 안가는 부분이 있어 질의 드립니다.페이지 하단에 페이지번호 출력과 각 번호를 누르면 list?page=1, list?page=2 이런식으로 웹이 이동하는 방식 같은 전체적인 프로세스는 강의를 들으면서 이해가 잘되었습니다.한가지 이해가 안가는 부분이 있는데 제목에 작성한것처럼 page의 증가가 어디서 이루어지는지를 잘모르겠습니다.정상적으로 다 작동이 잘되고 디버깅을 이용해서 page가 1 - > 2 로 값이 정상적으로 들어가있는것도 확인하였습니다.코드를 전체적으로 검토를 해봤지만 page를 따로 증가시켜주는 코드는 찾지못했는데 어디서 증가가 되는건지가 궁금합니다 ㅠㅜㅠㅠ
-
미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
5-2 vanilla.html 질문합니다.
안녕하세요. 정말 기초적이라고 생각 하실 수 있는데 정말 모르겠어요 ㅜㅜ..scrollMove 라는 함수 매게변수에 moveY가 있는데요.moveY가 움직이는 y값이라고 하셨잖아요그걸 변수로 어디에다가 지정해놓지 않았는데 moveY가 움직이는 y값일거다 라는걸 어떻게 알고 if문이나 다운 클리어, 업 클리어에 어떻게 쓰는거죠?moveY에는 아무런 값이 지정되어 있지 않은데 if문 조건문에 쓰이는거 보면 이해가 잘 안가요 ㅜ
-
미해결스프링 프레임워크 입문자를 위한 따라하기
pom에 스프링 jdbc 인식 오류
Invalid property 'dataSourse' of bean class [org.mybatis.spring.SqlSessionFactoryBean]: Bean property 'dataSourse' is not writable or has an invalid setter method. Did you mean 'dataSource'? 해당 오류가 떠서 구글링 막 검색하고 했는데 스프링 jdbc pom에 코드 복사해서 삽입하고 라이브러리에 잘 등록된것 까지 확인했는데도 서버 실행시 같은 오류가 뜨는데 뭐가 문제일까요? ㅠㅠ 마리아db 데이터베이스 -> 테이블까지 다 해놓은 상태인데 원인 해결이 안됩니다 ㅠㅠ
-
미해결모바일 웹 퍼블리싱 포트폴리오 with Figma
HTML 와이어프레임 만들기 실습(커스텀 체크박스 로그인폼) 강의의 파일이 없는것 같아요
안녕하세요! 코딩웍스 선생님 강의를 열심히 듣고있는 학생입니다! :)공유해주신 폴더 모두 찾아보았는데 모바일 웹 HTML 와이어프레임 구조 , HTML 와이어프레임 실습 (로그인폼) 관련된 파일을 찾아봐도 없는데 혹시 어디에 있는지 알려주시면 감사하겠습니다!
-
해결됨HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
position 질문
선생님 안녕하세요. 햄버거 메뉴 만들 때label에 position: relativelabel span 에 position: absolute 이렇게 포지션값을 주었는데,사이드바 만들면서 label의 position: relative 를 absolute로 바꿔주게 되는데그럼 label span 의 position: absolute 의 relative는 무엇이 되는 건가요?? label의 포지션을 앱솔루트로 바꿨는데도, label span에는 영향이 없는 이유가 궁금합니다label[for=trigger] { /* border: 1px solid red; */ width: 30px; height: 20px; display: block; position: absolute; cursor: pointer; right: 10px; top: 50%; transform: translateY(-50%); transition: 0.5s; } label[for=trigger] span { position: absolute; height: 2px; background-color: #000; width: 100%; left: 0; transition: 0.3s; } /* sidebar */ .sidebar { background-color: #000; width: 300px; height: 100vh; position: fixed; right: -300px; transition: 0.5s; }
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
input이 focus 되었을때
border을 없에거나 바꾸고 싶은데 어떻게 해야 되나요?border:none 해도 그대로고 border 속성을 바꿔도 밖에 검은색 solide가 없어지지 않습니다. 왜 이렇게 되는건가요
-
미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
4-3 함수선언방식 질문
function motion() { //스크롤할때마다 작동할 함수 setProperty(); changeBg(); parallaxMove(); } function init() { motion() }; $(window).scroll(function(e) { motion(); }); init(); //이런식으로 함수끼리 연결?하는방식으로 하셨는데 $(window).scroll(function(e) { setProperty(); changeBg(); parallaxMove(); }); /** 이런식으로 해도 작동이되는거같아서 왜 함수를 스크롤함수,init함수,motion함수 각각 만들어서 연결하는방식으로 하신이유가있을까요? */
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
24.Pure CSS 콘텐츠 슬라이더 프로토타입 01 (풀스크린 탭 콘텐츠 슬라이더 프로토
slide content 3개 까지만 있는데,3개 이상이면 어떻게 해야되나요??
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
모달(Modal) 만들기 Only CSS 애니메이션 모달 : target 가상 클래스 - 모달창 닫을 때는 스크립트 써야 하나요?
항상 수업 잘 듣고 있습니다. 궁금한 점이 있어 글 남깁니다. 모달(Modal) 만들기 Only CSS 애니메이션 모달 : target 가상 클래스 영상에서요. - 모달창 열때는 css : target로 열었는데요. - 모달창 닫을 때는 스크립트 써야 하나요?궁금합니다. 항상 감사드립니다.
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
대체 크롬 확장 프로그램 알려주세요!
안녕하세요! 크롬확장프로그램 1, 2탄 강의 수강 중 아래 4개 프로그램이 검색이 되지 않습니다. 혹시 대체할 만한 프로그램을 추천 해주실 수 있을까요?^^ 1탄 - page ruler redux, gallerify powerful image, Mobile RWD Tester 2탄 - maracopy
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
폰트가 이상해요 ㅠㅠ
before , after 의 텍스트 스타일이 다르게 나옵니다 이건 뭐가 문제일까요 ... ?
-
미해결반응형 웹사이트 포트폴리오(Architecture Agency)
hiring button의 comment-dots image issue 2
말씀하신대로 index.html 과 style.css 풀 코드 올립니다. comment-dots image가 왜 적용 안되는지.. 혹 fontawesome 문제인지.. 설명 부탁 드리겠습니다. index.html: <!doctype html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <title>bizpage website - Architecture</title> <script src="js/jquery-2.1.4.js"></script> <!-- Page scroll Effects JS & CSS --> <script src="js/velocity/modernizr.js"></script> <script src="js/velocity/velocity.min.js"></script> <script src="js/velocity/velocity.ui.min.js"></script> <script src="js/velocity/main.js"></script> <link rel="stylesheet" href="js/velocity/velocity.css"> <!-- Smooth Scrolling --> <script src="js/jquery.scrollTo.min.js"></script> <!-- Custom JS & CSS --> <script src="custom.js"></script> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="responsive.css"> </head> <!-- hijacking: on/off - animation: none/scaleDown/rotate/gallery/catch/opacity/fixed/parallax --> <body data-hijacking="on" data-animation="rotate"> <div class="container"> <section class="cd-section visible" id="home"> <div> <div class="content"> <img src="images/temp-section-01.jpg"> </div> </div> </section> <section class="cd-section" id="about"> <div> <div class="content"> <img src="images/temp-section-02.jpg"> </div> </div> </section> <section class="cd-section" id="project"> <<div> <div class="content"> <img src="images/temp-section-03.jpg"> </div> </div> </section> <section class="cd-section" id="plan"> <div> <div class="content"> <img src="images/temp-section-04.jpg"> </div> </div> </section> <section class="cd-section" id="awards"> <div> <div class="content"> <img src="images/temp-section-05.jpg"> </div> </div> </section> <section class="cd-section" id="location"> <div> <div class="content"> <img src="images/temp-section-06.jpg"> </div> </div> </section> <section class="cd-section" id="contact"> <div> <div class="content"> <img src="images/temp-section-07.jpg"> </div> </div> </section> <header class="active"> <div class="gnb-inner"> <div class="logo active">bizpage</div> <div class="gnb active"> <div class="menu"> <a href="#home">Home</a> <a href="#about">About</a> <a href="#project">Project</a> <a href="#plan">Plan & History</a> <a href="#awards">Awards</a> <a href="#location">Location</a> <a href="#contact">Contact</a> </div> <div class="slogan">We think different and make different.</div> </div> <div class="trigger active"> <span></span> <span></span> <span></span> </div> </div> </header> </div> <a href="#" class="gototop active"><img src="images/gototop.png"></a> <a href="" class="btn-hiring"><i class="fa-duotone fa-comment-dots"></i>Hiring</a> <nav> <ul class="cd-vertical-nav"> <li><a href="#0" class="cd-prev inactive">Next</a></li> <li><a href="#0" class="cd-next">Prev</a></li> </ul> </nav> </body> </html> style.css: /* Google Web Font : Montserrat */ @import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic&family=Nunito&family=Open+Sans&display=swap'); @import url('https://fonts.googleapis.com/css?family=Montserrat:200,300,400,500&display=swap'); @import url('https://fonts.googleapis.com/css?family=Manrope:300,400,500,600&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;600;700;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Overpass&display=swap'); /* FontAwesome CDN 4.7 */ @import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); /* Reset CSS */ * { box-sizing: border-box;} ul {list-style: none;} a {text-decoration: none;} /* Default CSS */ body { font-family: 'Mondtserrat', 'sans-serif'; color: #222; font-size: 15px; margin: 0; height: 100vh; background-color: #fff; } /* Entire Layout */ .cd-section { height: 100vh; } .cd-section > div { height: 100%; position: relative; } .content { background-color: #ddd; position: absolute; width: calc(100% - 40px); height: calc(100% - 80px); left: 20px; bottom: 20px; overflow: hidden; } /* Header */ header { position: fixed; top: 0; left: 0; width: 100%; z-index: 100; } .gnb-inner { /* border: 1px solid #000; */ width: calc(100% - 40px); margin: auto; height: 60px; line-height: 60px; } .logo { font-size: 2.4rem; font-weight: bold; color: #066bf7; float: left; } /* .logd img { padding-top: 17px; } */ .gnb { float: right; } .menu { display: none; } /* .menu a {} */ .slogan { font-style: italic; font-size: 16px; float: right; } .trigger { display: none; } /* Hiring Button */ .btn-hiring { position: fixed; right: 30px; bottom: 30px; color: #fff; background-color: #000; padding: 10px 20px; border-radius: 20px; box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.38); transition: 0.5s; } .btn-hiring .fa-duotone { transform: rotateY(180deg); margin-right: 5px; } .btn-hiring:active { transform: scale(0); }
-
미해결자바스크립트+jQuery 기초부터 실무까지 : 기초 Part.1
변수 선언 시 undefined
콘솔에 var tmp = 10; 과 같이 변수 선언한 경우에 undefined가 결과로 나오는데 왜 그런건가요? 초기화 하지 않고 선언만 한 경우에는 null이, 초기화한 경우에는 초기화한 값이 나올거라고 생각했었어요.
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
dots custom cs 수정
dots 커스텀cs 로 수정하는 강의는 어디서 확인가능한가요 ??
-
해결됨[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
공지사항 갤러리 탭메뉴 div a태그
공지사항 갤러리 탭메뉴랑 공지사항 갤러리 별도 구성메뉴가 있는데 div 안에 '공지사항', '갤러리' 제목넣는 곳에 태그를 span은 별도메뉴에 쓰고, 탭메뉴에는 a태그로 쓰면 되나요? 상호작용이 들어가는 부분은 tab을 눌렀을 때 확인되어야 해서 a 임시링크를 걸어주는 걸로 기억하는데, 별도 구성인 경우엔 a태그 말고 span으로 줘도 무관한가요?
