56,100원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
실전퍼블리싱 카테고리 탭메뉴 안에 Slick.js가 안먹힙니다ㅠㅠ
안녕하세요!어제오늘 이틀내내 구글링도 해보고 이렇게 저렇게 다 시도해봤는데 결국 실패하고 질문드려요..! 포트폴리오 PDF파일의 예시처럼 실전퍼블리싱 파트를탭메뉴 안에 slick slider로 해서 넣고싶은데탭버튼과 컨텐츠를 pos:r 과 pos:a으로 하면 높이값이 사라지면서 슬라이더가 깨지고,input버튼으로 하면 1번 탭버튼 컨텐츠는 잘 적용되지만2번째 탭버튼부터는 슬라이더가 깨지면서 너비값이 0이 됩니다ㅠㅠ 어떻게 코드를 짜야 pdf파일처럼 나올 수 있나요?ㅠㅠ제가 참고하고 싶은 구성입니다. 처음 탭메뉴에서는 잘 배치가 되는데두번째 탭메뉴부터 이렇게 깨져요...!! html은 이렇게 구성되어있어요..!
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
scss에 active 적용하는 방법
이 햄버거 버튼을 active 넣었을때 바꾸려고 하는데 scss에는 도대체 어떻게 넣는지 너무 궁금해요 제가 강의 들으면서 계속 겪는 문제인데 scss에 .active를 적용해도 아무것도 안돼네요 scss 에 active 적용하려면 도대체 어떻게 해야할 지 모르곘어요 항상 강의들으면서 이 부분에서 막히는데 어떻게 해야할 지 도움 구합니다
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
반응형이 안먹힐때 뭐가 문제일까요?? ㅜㅠ
■ 질문 남기실 때 꼭! 참고해주세요. font-size: 2.2em; 을했는데 크롬 디바이스툴에서는 전혀 줄어들지 않네요 ㅜㅠ 어떻게 해야할지 질문드립니다 저 크롬이 문제인가요??
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
실전 넷플릭스 6 footer부분
a태그들 네개 섹션으로 나누는 .items 부분혹시 float랑 inline-block으로 나누는 법 말고flex해서 1씩 나눠도 상관없나요 ??저런 나누는거 나오면 저는 꼭 flex로 하는 버릇이 들었네요...뭐가 더 좋고 답이다~ 그런건 없는건가요?!
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
.dark 적용 하는 법
제가 scss로 강의 듣는데 html에 profile dark 썼는데scss에는 코드를 어떻게 적어야 할까요?아래처럼 적었는데 미동도 안해요 ㅜㅠ
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
JavaScript & jQuery - 검색창 확장하기(3)에서
<body> <div class="container"> <header> <div class="logo"> <img src="logo.png" href="#none"> </div> <div class="search active"> <!-- x버튼 --> <span class="clear"><i class="xi-close-thin"></i></span> <!-- 돋보기 --> <div class="icon"><i class="xi-search"></i></div> <div class="input-frame"> <input type="text" id="searchInput" placeholder="Type Here..."> </div> </div> </header> <section> <h1>This is Section #01</h1> <p> Lorem </p> </section> <section> <h1>This is Section #02</h1> <p> Lorem </p> </section> </div> <script> var icon = document.querySelector('.icon'), search = document.querySelector('.search'), clear = document.querySelector('.clear'), searchInput = document.querySelector('.searchInput'); icon.onclick = function(){ search.classList.toggle('active') } clear.onclick = function(){ searchInput.value = '' } </script> </body>돋보기까지는 실행이 되는데텍스트 작성후 x버튼 눌렀을때 지워지지 않아요. searchInput.value = '' <<여기서 자꾸 에러가 뜨는데...뭐가 문제일까요?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
포트폴리오 CSS Grid 반응형 레이아웃에서
여기서 align-items 랑 align-content가 개념이 잘 안잡혀요..ㅠ 인터넷에 검색해보니깐 한줄 두줄의 차이라고 하는데...모바일사이즈일때는 한줄이 아니니깐 align-content라고 쓴걸까요? 아니면 justify-items: center; 코드가 있어서 일까요?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
폰트어썸 4.7 아이콘
코드 부트스트랩에 있는거 복사 붙여넣기 했는데 아이콘이 안나오고 자꾸 네모박스 나오는데 왜이러는걸까요??
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
넷플릭스 공식사이트 수업 header
넷플릭스 공식사이트 만들기에서 header에 padding 35px 55px을 주니까 가로스크롤이 생깁니다. 어떻게하면 없앨 수 있을까요?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
JavaScript & jQuery - 푸터 패밀리사이트 셀렉트 커스텀 스타일(2)
■ 질문 남기실 때 꼭! 참고해주세요.- 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다. 해당 강의 응용하다 막히는 부분이 있어 질문 드립니다. 이 강의에 부분을 메뉴에서도 활용 할 수 있을것 같아 아래와 같이 만들어 보았습니다. HTML <header> <div class="gnb"> <div class="search_menu"> <div class="dropdown"> <div class="nav1 title">MENU1-1</div> <ul class="sub_nav1 sub_nav"> <li><a href="#none">MENUI1-1</a></li> <li><a href="#none">MENUI1-2</a></li> <li><a href="#none">MENUI1-3</a></li> <li><a href="#none">MENUI1-4</a></li> </ul> </div> <div class="dropdown"> <div class="nav2 title">MENU2-1</div> <ul class="sub_nav2 sub_nav"> <li><a href="#none">MENU2-1</a></li> <li><a href="#none">MENU2-2</a></li> <li><a href="#none">MENU2-3</a></li> <li><a href="#none">MENU2-4</a></li> </ul> </div> <div class="dropdown"> <div class="nav3 title">MENU3-1</div> <ul class="sub_nav3 sub_nav"> <li><a href="#none">MENU3-1</a></li> <li><a href="#none">MENU3-2</a></li> <li><a href="#none">MENU3-3</a></li> <li><a href="#none">MENU3-4</a></li> </ul> </div> </div> </div> </header>CSS@import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); * { padding: 0; margin: 0; list-style: none; font-size: 10px; } a{ text-decoration: none; } header .search_menu { background-color: #9c9388; display: flex; } header .selectbox { position: relative; border-right: 1px solid #c9c1b7; } header .selectbox:last-child{ border:0; } header .selectbox .select{ width: 88px; height: 35px; padding:10px 12px; font-size: 1.2rem; } header .selectbox:last-child .select { width: 100px; } .dropdown { width: 8.4rem; cursor: pointer; position: relative; border-right: 1px solid #c9c1b7; } .nav1, .nav2, .nav3 { background-size: 9px; background-color: #9c9388; color: #fff; padding: 1.2rem 1rem;} .nav1::after, .nav2::after, .nav3::after{ content: '\f107'; font-family: fontawesome; position: absolute; right: 10px; font-size: 12px; line-height: 14px; } .sub_nav1, .sub_nav2, .sub_nav3 { position: absolute; list-style: none; padding:0; margin: 0; left: 0; top:100%; width: 100%; display: none; z-index: 100; } .sub_nav1 li a, .sub_nav2 li a, .sub_nav3 li a { color: #fff; display: block; padding: 7px; background: #9c9388; border-bottom: 1px solid #aaa; } .sub_nav1 li a:last-child, .sub_nav2 li a:last-child, .sub_nav3 li a:last-child { border: none; }JS 1 (정상작동) (개별적으로 class를 모두 지정하였습니다.)$('.menu li').click(function(){ $(this).children('.sub_menu').slideDown() }) $('.menu li').click(function(){ $(this).children('.sub_menu').slideUp() }) $('.nav1').click(function(){ $('.sub_nav1').stop().slideToggle() $('.sub_nav2').stop().slideUp() $('.sub_nav3').stop().slideUp() $(this).find('>ul').toggle() }) $('.sub_nav1 li').click(function(){ $(this).parent().stop().slideUp() $('.nav1').text($(this).text()) }) $('.nav2').click(function(){ $('.sub_nav2').stop().slideToggle() $('.sub_nav1').stop().slideUp() $('.sub_nav3').stop().slideUp() // $(this).find('>ul').toggle() }) $('.sub_nav2 li').click(function(){ $(this).parent().stop().slideUp() $('.nav2').text($(this).text()) }) $('.nav3').click(function(){ $('.sub_nav3').stop().slideToggle() $('.sub_nav1').stop().slideUp() $('.sub_nav2').stop().slideUp() // $(this).find('>ul').toggle() }) $('.sub_nav3 li').click(function(){ $(this).parent().stop().slideUp() $('.nav3').text($(this).text()) })JS 2 (문제의 JS) (JS1와 같은 매커니즘 코드를 줄여 작성했습니다.)//메뉴 토글 $('.title').click(function(){ $(this).siblings('.sub_nav').slideUp() $(this).next().stop().slideToggle() }) //메뉴 text 변경 $('.sub_nav li').click(function(){ $(this).parent().stop().slideUp() $(this).parent().siblings('.title').text($(this).text()) })이렇게 만들어서 메뉴1-1을 누르면 2-1과 3-1 이 들어가야하는데 3개가 모두 개별적으로 펼쳐집니다.JS 1 처럼 class를 모두 직접 지정하면 정상적으로 되는데 너무 코드가 지저분해서 간단하게 지정을 하려고 작동을 확인 한 뒤 JS 2를 만들었는데 메뉴 text 변경 되는건 잘 되는데 메뉴 토글에서 막혔습니다.$(this).siblings('.sub_nav').slideUp()이 부분이 잘못된것 같은데 아무리 고쳐보고 검색해봐도 작동이 되지 않아 이렇게 여쭤 봅니다.
- 해결됨HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
loginForm input type=email, password 위치 css 오류
선생님~ padding-left:30px; 이 부분이 placeholder 블럭안으로 가야할 거같아요 input[type="email"], input[type="password"] {} 이 블럭안에 있으면 밑에 이미지처럼 중앙에 안맞더라고요~
- 해결됨HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
이미지 전환 후 잔상 효과
안녕하세요! 시즌 1강의부터 시즌 2 강의까지 유익하게 잘 듣고 있습니다! 다름이 아니라 강의를 듣고 강사님께서 작성해주시는대로 코드는 똑같이 작성했는데 이미지 전환 후 화면 아래에 잔상이 생깁니다. 이것저것 써보다가 혹시나 하여 강의 영상도 확인해보니 영상에서도 아랫쪽에 잔상이 남아있습니다. (24:23초 부분) 혹시 이유가 있거나 해결하는 방법이 있을까요?!(코드는 영상과 똑같이 작성하였기에 첨부하지 않았습니다!)감사합니다!
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
안녕하세요. jquery 슬라이더에 대해 질문 있습니다.
안녕하세요.현재 시즌 1,2, 반응형 포트폴리오등 몇가지를 결제해서 듣고 있는중인데요다름이 아니고 강사님꼐서 제이쿼리로 자동 슬라이드를 어떻게 했는지알고 싶어서 강의를 찾아봤는데웹디자인 기능사에만 있는것 같습니다. 그런데 저는 기능사실기자격증을 따기도 했고 그부분만 보기에는 금액이 너무 커서혹시 다른 강의에 제이쿼리 자동슬라이드 부분이 있는 강의는 없는지 물어봅니다.
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
btn 을 block 이 아닌 inline-block 으로 바꾸신 이유가 궁금합니다
CSS 버튼 & 네비게이션 - 드롭다운 네비게이션(CSS 3가지 방식, jQuery 3가지 방식)-02 강의 10분 15초 에서 btn display 를 block 이 아닌 inline-block 으로 바꾸신 이유가 궁금합니다 알려주시면 감사요 ~!
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
flex나 grid 로 구현하는것과 비교하면 어떤가요?
CSS 버튼 & 네비게이션 - 3타입 상단 네비게이션 강의float 과 display 등으로 네비의 각 영역을 배치하는데 flex나 grid 로 구현하는것과 비교하면 어떤가요?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
계속 로딩 - [제작노트 및 필수사항] 실전 반응형 웹사이트 - 넷플릭스 공식사이트
아래 문의글에도 같은 문제가 발생해서 해결해주셨는데지금 또 21초부터 계속 로딩만 되고 강의가 진행되지 않습니다.확인 부탁드리겠습니다~
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
슬라이드 토글식
.faq-title 자기 자신을 눌렀을 때 faq-content가 닫히는 식으로 만들고 싶은데 그 방법은 어떻게 해야 하나요?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
해당 강의만 계속 플레이가 안되고 로딩화면만 나오고 있습니다.
강의 제목 : 실전 반응형 웹사이트 - 넷플릭스 공식사이트(1) - 제작노트 및 필수사항 강의 URL :https://www.inflearn.com/course/%EC%9B%B9-%ED%8D%BC%EB%B8%94%EB%A6%AC%EC%8B%B1-%EC%8B%A4%EC%A0%84-%EC%8B%9C%EC%A6%8C2/unit/83803?tab=community
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
시멘틱 태그 조건에 대해서
타 국비 지원 학원을 다니면서 강의를 듣고 있는데저는 시멘틱 구조가 반복되는 div를 방지하기 위해서 사용함으로 알 고 있었는데저희 학원 선생님 경우에는 section 태그 아래에 h1, h2 등등 제목 태그가 있어야 된다 배웠는데 5:34) 강사님 같은 경우는 .inner div로 묶고 h1로 쓰시는데 section뿐만 아니라 정확한 조건이 궁금합니다
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
헤더 드롭다운 네비게이션 flex로 정렬하는 법이요
.gnb에 display: flex를 주고글자를 수직 정렬하려고 align-items: center를 써봤는데먹히지를 않네요.ul의 자식 요소인 li만 정렬하는 것이고글자는 ul의 자식의 자식인 a에 있는 거라서 정렬이 안먹히는 건가요?