46,200원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
:target 가상클래스 HTML+CSS 탭 메뉴 콘텐츠 질문드립니다.
■ 질문 남기실 때 꼭! 참고해주세요.- 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다. 다 완성 한 뒤에 그 밑에 div를 이어 붙이려고 하는데position: absolute; 를 사용한 tab-content 가 공중으로 떠서 영역이 이미지처럼 이렇게 잡힙니다.다음 div를 일반적인 block 처럼 tab-content 까지 끝난 맨 밑에 이어져서 영역을 잡으려면 어떻게 해야할까요????
- 해결됨HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
강의 기간만료 파일 관련 문의드립니다.
안녕하세요 선생님 수업 너무 잘 듣고 있습니다.다름아니라 예전에 신청한퍼블리싱 핵심이론 PDF 교재 및 예제파일 강의의수강기간을 확인하지 못해서 flex 파일까지밖에 다운받지 못하였는데 만료가 되는 강의더라고요ㅠ가능하다면 다시 받을 수 있을지 문의 드려봅니다!이메일 주소 : vkrt120@gmail.com주문번호 : 2156377 입니다.답변 부탁드리겠습니다ㅠ
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
sns 아이콘 애니메이션
안녕하세요 선생님!정말 재밌고 유익하게 강의듣고있습니다 ㅎㅎ해당 강의를 듣다가 아이콘부분이 아래에가있어서 hover시 보여주기 위해position: relative를 주셨는데z-index를 주는것은 왜 안될까요??될까 싶어서 해봤는데 먹히지 않아서 여쭤봅니다
- 해결됨HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
<strong> 과 <b>의 실무에서의 사용
<strong> <b>에 대해 궁금해서 더 찾아봤습니다. 사용 시 표시되는 내용은 같지만, 검색 엔진 최적화(SEO) 측면에서 다르다는 이야기를 보았습니다.실제 업무에서는 어떤 것을 선호하는지 궁금합니다. 실제로 이런 태그들을 검색을 고려해서 신중히 사용하나요?
- 해결됨HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
css에서 Emmet이 안먹어요 ㅜㅜ
code 영상, css 에서 emmet 단축키 알려주신거쓸려고 하는데 css가 자꾸 안먹습니다...emmet 설정도 always 고 단축키 뭐는 되는데 뭐는 안되는 걸 보면제가 pdf 파일 제공해주신 걸 미리 보고 확장 프로그램을 다 설치 해놨는데 그게 문제일까요?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
비쥬얼스튜디오 설정
■ 질문 남기실 때 꼭! 참고해주세요.- 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다. 비쥬얼스튜디오 강의처럼 캡쳐 상단에에 <파일 편집 선택영역 보기 이동> < 나오게 어떻게 하나요? 그리고 또 젤 밑에 파란색줄(줄,열,공백 등 적혀있는것)이 사라졌는데 어떻게 나오게 하나요 ㅜㅜ?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
비주얼 스튜디오 말고 웹스톰을 사용해도 되나요?
웹스톰이 깔려 있는데 웹스톰으로 실습해도 되나요?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
강의에 쓰셨던 행성 이미지는 어디서 구하셨나용?
제가 포폴을 만들고 있는데 참고가 될것 같아서 여쭤봅니다.
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
별점주기 첫번째에서 nextAll이 적용안됩니다.
prevAll속성은 잘 들어가지는데그 다음에 넣은 nextAll 속성이 동작을 안하네요.. 코드도 다 똑같이 넣고 오타도 없는데 어디를 수정해야하나요...?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
input type submit 관련 질문입니다.
안녕하세요. input type submit 관련 질문입니다. input 태그를 써서 type 속성을 줘서 submit 하는것과 button 태그를 쓰는것과 차이점이 있나요??둘다 별반 차이는 없을거 같긴한데, 시맨틱태그를 고려한다면 button 태그를 쓰는게 괜찮을거 같아서 궁금해서 질문드립니다!
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
item p span 에 float 주신것과 .progress 에 대한 질문입니다.
안녕하세요. item p span 에 float left 와 right 주신것과 .progress에 대한 질문입니다.item p 에.item p { display: flex; justify-content: space-between; align-items: center; }하면 span 에 float left right 를 한것과 같은 레이아웃이 만들어지긴 하는데, float 를 사용하신것은 혹시 크로스브라우징 때문에 사용하신걸까요?can i use 를 살펴보면 메이져 브라우저들은 거의 flex 를 지원하는데 IE 에서는 지원을 안하는 버전도 있고, prefix 를 사용해야 하는 버전도 있더라구요.크로스브라우징을 생각하면 flex 보다 float 를 사용하는것이 맞긴하지만, 이미 서비스가 종료된 IE까지 생각해야 하는것이 맞는것인지 고민이 되네요...html tag 중에 progress 라는 tag 가 있는것으로 알고 있습니다. progress 라는 태그 대신에 div 를 사용하신 이유가 있을까요?혹시 커스텀 css 를 입히기 힘든 태그일까요...? input type=checkbox 같은 경우도 css 를 입히기 힘들기 때문에 div 같은 영역을 커스텀 입힌다고 하더라구요. 위같은 경우들처럼 input type checkbox 나 <progess> 를 사용하지 않고 div 같은 영역으로 커스텀을 입히면 웹접근성에 저해되지는 않나요??웹접근성이나 시맨틱 태그때문에 태그 하나 사용하는거에 고민이 되네요....
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
script 속성 defer 질문드립니다.
안녕하세요.<script> 태그를 넣는 위치에 대해 질문드립니다.<script> 태그를 </body> 바로 위에 넣어야 <body> 태그 안에 있는 html 내용들이 전부 파싱 된 이후에 script 가 실행된다고 하셨는데, 그렇다면 </head> 바로 위에 넣고 나서 script 태그의 속성으로 defer 를 넣으면 <body> 태그 안에 있는 html 내용들이 전부 파싱될때까지 <script> 태그 내용들이 실행을 기다렸다가 <body> 태그 안에 있는 html 내용들이 전부 파싱된 후에 실행된다고 알고 있는데,defer 속성을 쓰고, </head> 바로 위에 script 태그를 넣으면 안되는걸까요?2번 방법을 쓰게 된다면 아마 즉시실행함수를 만들어야 하는거 같은데, defer 속성을 쓰게 되면 즉시실행함수를 굳이 만들지 않아도 될것 같은데 defer 속성을 쓰면 안되는건가 해서 궁금해서 질문 드립니다!!
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
overflow:hidden사용해야 없어지는 이유
<div class="container"> <ul class="navi"> <li><a href="#none" data-text="ABOUT">ABOUT</a></li> <li><a href="#none" data-text="INSTRUCTOR">INSTRUCTOR</a></li> <li><a href="#none" data-text="CLASS">CLASS</a></li> <li><a href="#none" data-text="LOCATION">LOCATION</a></li> </ul> </div>.navi li a{ font-size: 4em; text-decoration: none; color:#fff; position:relative; } .navi li a:before{ content : attr(data-text); position: absolute; color:yellowgreen; top:0; left:0; width:0; overflow:hidden; }위의 코드에서 왜 overflow:hidden을 주어야 비포에 width가 적용되는지 궁금합니다.overflow:hidden을 주지않고 position:absolute만 있을때 absolute는 요소를 inline block으로 바뀐다고 알고 있는데 F12개발자도구에서는 before가 inline요소라고 나오는 이유도 궁금합니다.제 독학길에 한줄기 빛이신 선생님 항상 감사합니다~!
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
mouseenter와 mouseover의 차이
선생님 안녕하세요!마우스를 올렸을때 실행되는 함수로 mouseover를 알고있었는데, 선생님은 mouseenter를 사용하시더라구요!혹시 mouseenter랑 mouseover랑 차이점이 있을까요??
- 해결됨HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
transition transition-delay속성 질문드립니다.
■ 질문 남기실 때 꼭! 참고해주세요.- 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다. 강의 21:35초 경에서.content{ position: absolute; text-align: center; background-color: #000; color:#fff; height:300px; bottom:-300px; } .gallery li:hover .content{ bottom: 0; transition: 0.5s ; transition-delay: 0.5s; }tranisiton:0.5s 와 tranistion-delay:0.5s를 .content나 .gallery li:hover .content 어느곳에 넣어도 똑같이 동작하는데요. 어디에 넣어야 올바른 건가요 아니면 어느곳에 넣어도 상관이 없나요?ㅠ미리 답변 감사합니다 독학하는 중에 굉장히 도움이 많이 되고 있습니다!!
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
이미지가 나오지 않습니다
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>DropDown Navigation</title> <style> @import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&display=swap'); body { font-family: 'Black Han Sans', sans-serif; color: #222; line-height: 1.5em; } a{ color: #222; text-decoration: none; } </style> </head> <body> <div class="items"> <div class="item"> <img src="인프런/assets/product-01.png" alt=""> <div class="caption"> <h2>Rirakuma doll 25cm</h2> <p> The owner of the most popular and cute looks Rilakkuma ~! Rilakkuma giant - It is size sale to small size. </p> <p>Price : <s>$12</s> → $10</p> <a href=""></a> </div> </div> </div> </body> </html>
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
문의
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title> 도형 로딩 애니메이션-01 </title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="loading"> <span></span> <span></span> <span></span> </div> </body> </html>@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100&display=swap'); 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; } .loading {} .loading span { display: inline-block; width: 15px; height: 15px; background-color: gray; background-repeat: 50%; } .loading span:nth-child(1) {} .loading span:nth-child(2) {} .loading span:nth-child(3) {} @keyframes loading { 0% { opacity: 0; transform: scale(0.5); } 50% { opacity: 0; transform: scale(1.2); } 100% { opacity: 0; transform: scale(0.5); } }도형 자체가 만들어지지 않는데 뭐가 문제일까요?VS CODE 사용중입니다.
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
vscode 괄호 안에서 엔터 후 줄바꿈
선생님 안녕하세요! 현재 선생님강의와 프론트엔드 개발 공부를 함께하고있는데, 설정을 만지는 와중에 그랬는지 언제부턴가 중괄호 안에서 엔터를 치면 원래 괄호 사이에 빈 공간이 생기고 그 안에서 커서가 생겼는데, 지금은 사진과 같이 괄호 사이에 빈 공간이 없이 되어서 전처럼 하려면 어떻게해야할까요??
- 미해결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로 만들기 때문에 해당 방법은 사용하지 않았습니다.)
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
float 속성 상속 관련 궁금합니다!
float 속성이 상속 될 때에, 바로 아래 선택자 하나에만 상속되나요? 아니면 그 아래 모든 선택자들에게 상속되나요??그리고 clear 속성 예제 과정 중, clear div 가 다른 div들 뒤에 가려졌는데, 왜 text는 밖에 나와있는건가요?