46,200원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
탭메뉴 만들기에서.. (:target)
기능은 다 잘 작동해요 페이지 열었을때 첫번째 탭 선택도 잘 되어있는데 아래 이미지와 내용부분 (.tab부분)은 페이지 새로고침하기전 눌렀던 탭 내용 그대로네요 CSS코드중에서 맨마지막 .tab:nth-child(1) {} 이부분 코드가 안먹어서 저러는건지 왜그럴까요?? 그리고 <실전 웹페이지 퍼블리싱 - 로그인 화면 UI 디자인> 이부분 맨마지막 모달(Modal) 만들기 #01(제이쿼리 페이드인아웃 모달) 이 강의는 영상이나 다운로드 파일 없는부분인건가요?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
gnb에 padding: 0; 을 2번주는 이유가있을까요?
gnb에 padding: 0; 을 2번주는이유가있을까요?
- 해결됨HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
블릿요소 float:rihgt; 부분 질문 좀 드릴게요.
어코디언 콘텐츠 슬라이드 - 상세 내용 퍼블리싱 15:49 안녕하세요 선생님 언제나 감사하게 공부하고 있습니다. float:right;속성 질문이 있는데요. 블릿 아이콘 오른쪽 배치하는 부분인데요. position대신 float: right;로 해주잖아요. 부모요소에 overflow:hidden; 해주지 않으면 부모의 높이값을 잃는다고 알고 있어서 .accordion { border: 1px solid red; } 보더라인을 그려줘봤는데요. overflow를 주지 않아도 높이값은 가지는 것 같아요. 선생님께서도 overflow를 주지 않으셨는데요. 제가 잘못 알고 있는건지 궁금해서요. 혹시 after가상요소에 주는 float는 상관이 없는건지요? .accordion { border: 1px solid red; } .title { border: 1px solid #ddd; padding: 5px; border-radius: 3px; cursor: pointer; /* position: relative; */ padding-left: 15px; transition: 0.3s; margin-bottom: 10px; } .title:after { content: '\f105'; font-family: fontawesome; /* position: absolute; right: 10px; top: 7px; */ float: right; margin-right: 5px; margin-top: 3px; transform: 0.3s; } .title.active:after { transform: rotate(90deg); color: orange; }
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
강의 중에 box-sizing 부분 궁금해서요.
순서 체크 가상클래스 활용한 실전 예제 제작 (개인 프로필 카드 UI 호버 이펙트) 18.33 에서요. 하나의 선택자 안에서 box-sizing: border-box;를 2번을 해주셨는데요. 이게 순차적으로 적용되는 우선순위 문제 때문인가요? .content { width: inherit; height: inherit; position: absolute; top: 100%; left: 0; padding: 20px; box-sizing: border-box; background: linear-gradient(to top, crimson, transparent); color: #fff; text-align: center; padding-top: 150px; transition: 0.5s; } 크롬에서 개발자도구 들어가봤는데요. 위의 box-sizing 취소선으로 그어져 있는데요. 이게 불필요해서 그런 건지 잘 모르겠습니다. 선생님 그리고 별도의 질문이긴 한데요. 코딩하면서 개발자도구를 보면서 공부하는 것이 도움이 되는 건가요? 봐주셔서 감사합니다.
- 해결됨HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
overflow: hidden; 부분 질문 좀 드릴게요.
before after 가상클래스 활용한 실전 예제 제작 (네비게이션 호버이펙트 - content attr) 선생님 overflow: hidden; 사용법에 대해서 알고 있다고 생각했는데요. 갑자기 응용이 되니깐 어려워서요.. 제가 이해하기로는, 자식요소에 float속성을 주면 부모요소가 자식요소의 높이값을 잃어버려서 overflow:hidden를 줘서 높이값을 되찾아주는 기능으로 알고 있었거든요. 위의 예제에서는 가상클래스 before,after이용해서 마우스호버하면 position값 지정해서 바뀌어보이는 기능인데요. 마우스오버하면 before, after요소가 다 보여서 문제였는데 마지막에 .gnb a { overflow: hidden;를 주니깐 제대로 보이는 걸 알 수 있는데요. overflow:hidden;를 찾아보니깐 '콘텐츠를 안쪽 여백 상자에 맞추기 위해 잘라낸다' 이런 설명이 있더라고요. 그러니깐 여기에서는 a영역만큼만 보여지기 위해서 overflow:hidden;를 준 것이라고 이해하면 맞을까요? 만약에 display:none;값을 주는 경우는 적용될 수 없는 걸까요? <body> <div class="gnb"> <a href="#none" data-text="CodingWorks Online Class"></a> </div> </body> ------------------------------------------------------------------ .gnb a { /* border: 1px solid green; */ width: 300px; display: block; height: 40px; position: relative; /* overflow: hidden; */ } .gnb a:before, .gnb a:after { content: attr(data-text); position: absolute; width: inherit; height: inherit; text-align: center; line-height: 40px; color: #fff; text-transform: uppercase; transition: 0.3s; } .gnb a:before { background-color: crimson; } .gnb a:after { background-color: royalblue; top: 100%; } .gnb a:hover:before { top: -100%; } .gnb a:hover:after { top: 0; }
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
로딩화면 성공적으로 띄웠는데 다른 것도 만들어보고 싶어요
안녕하세요? 이 강좌에서 CSS키프레임 원형 로딩크기변경 애니메이션을 만들어 보았는데요. 크기변경애니메이션으로 사각형 크기변경 애니메이션을 만들어보고 싶어서요.. 혹시 사각형으로 만드려면 CSS코드를 어떻게 바꾸어주면 될까요??
- 해결됨HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
flex 수직중앙정렬 질문드립니다.
안녕하세요. 선생님 flex 수직수평중앙정렬에서요. 높이값이 없다면 수직중앙은 안된다고 알고 있는데요. 강의에서 보면, height: 100vh;주기 전에 align-items: center;를 주니깐 수직으로 가운데로 내려오는데요. 의아해서 질문드립니다. HTML+CSS 실전 퍼블리싱 제작 with JQUERY 20세 이상 성인인증 체크 강의에서, 8:35초 내용입니다.
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
clac 공식에 대해서
clac (100 % - 10px); 할때 띄어쓰기가 필수인가요? 띄어쓰기를 안하니까 애니메이션이 실행이 안되더라고요. 또 띄어쓰기 그런 부분에 주의할 사항이 있는 속성값들이 있나요?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
transition 속성질문입니다
포지션 속성을 통해 자식요소를 부모요소로 위치시켜주고 hover를 통해 위치를 이동시켜준다음 transition 속성을 주려면 시작지점을 지정해줘야된다는 말씀을 이전 강의를 통해 알았습니다. 요번에는 시작지점을 지정해주지않았는데 transition 이 적용된 이유를 알 수 있을까요?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
구현해보고자 하는 코드 작성에 대한 질문이 있습니다.
선생님 안녕하세요. 수업을 듣고 만들어보다가 배웠던 것을 활용하여 조금 더 변화를 주고 싶었는데, 인터넷에서 찾아보면서 해봐도 도저히 원하는대로 실행이 되지가 않아 도움을 받고자 질문을 드립니다. 두가지를 해보고 싶었는데 첫째로는, 만약 제가 active가 되어 있는 타이틀을 다시 한번 눌렀을 때 desc를 완전히 접었다 다시 펼수 있는지 해보려고 했으나 잘 되지가 않네요.. toggleClass()를 이용하여 active를 넣었다 뺐다 해봤지만 title의 active는 넣었다 뺐다가 가능하지만 그에 맞게 desc를 움직이기가 힘든 것 같습니다. 둘째로는, CSS로 이미지에 transition을 줘서 부드럽게 변할 수 있도록 해보려고 아래와 같이 해봤습니다만, 당연히 제가 잘못 했으니 반응이 없는 것 같습니다..^^ .accordion .title.active .image img{ transition: 0.5s; } jQuery로는 인터넷에서 검색하여 아래와 같이 작성해 보니 실행이 되기는 합니다. $(".image img").attr("src", dataImage).stop().hide().fadeIn(); 다만, 제가 작성한 CSS 코드는 어떤 부분에서 잘못되었길래실행이 되지 않는 것인지 궁금합니다. 마지막으로, 사실 이런 질문들이 수업 내용 외적인 부분인 질문들인 것 같은데 해도 괜찮은건가요..? 만약 수업 내용 외적인 질문이라 매번 답변이 곤란하시다면나중에 더 지식이 쌓였을 때 스스로 해보도록 하겠습니다. 감사합니다!
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
섹션9 다운로드 모아둔 곳에 해당 강의 이미지 예제파일이 없습니다.
섹션 9 다운로드 모아둔 곳에 해당 강의에 대한 예제파일이 없습니다.
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
마우스 호버했을 때 일어나는 현상
선생님 안녕하세요. 마우스를 호버했을 때 일어나는 현상에 대해서 궁금한 점이 있어서 질문 드립니다. 본 예제에서 ABOUT, CLASS, LOCATION 단어의 오른쪽 빈 공간에 마우스를 올릴 경우에도 배경이 변하는 현상이 일어납니다. 예를 들면 제가 아래에 <--->로 표시해둔 것처럼 <---->만큼의 빈 공간에 마우스를 올릴 경우에도 배경이 변경되는 현상이 일어나는데 이런 현상은 어떻게 해야 막을 수 있을까요? ABOUT<---->INSTRUCTORCLASS<----->LOCATION<-> 예전 예제 중 비슷한 경우에는 visibility: hidden을 통해서 했었지만, 이번 경우에는 그렇게 하면 단어 자체가 사라집니다. 확인해 주시면 감사드리겠습니다!!
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
jQuery 작성 순서에 따른 결과값 변화에 대한 질문이 있습니다
안녕하세요 선생님! 너무 재밌게 강의 듣고 있는 1인입니다 :) 다름이 아니라 복습하던 중 jQuery 작성 순서에 따라서 결과값이 다르게 나오는 것에 대한 궁금증이 있습니다. <script> $(".testimonial-pic img").click(function () { $(this).addClass("active"); $(this).siblings().removeClass("active"); $(".testimonial .content").removeClass("active"); $("#" + $(this).attr("data-alt")).addClass("active"); }); </script> 수업에서 설명주셨던 jQuery 부분을 보면.testimonial-pic의 img를 클릭했을 때클릭된 this, 즉 img에 active라는 class를 주고그와 동시에 siblings()로 형제들에겐 active 클래스를 삭제하라는 것은 잘 이해했습니다. 그리고 마찬가지로 #tab1~tab4에 addClass로 active를 주고 동시에 removeClass로 그 외의 요소에는 active 클래스를 삭제하라는 것은 알겠는데, $("#" + $(this).attr("data-alt")).addClass("active"); $(".testimonial .content").removeClass("active"); 왜 위와 같이 두개의 순서를 바꿔서 작성하게 되면 이미지를클릭했을 때 p태그 안에 있는 내용이 모두 사라지게 되는오류가 생기는지 잘 모르겠습니다.jQuery가 위에서부터 실행되는 것은 알고 있는데,그걸 생각한다 하더라도 조금 이해가 안되는 것 같습니다..! 그리고, $(".testimonial .content").removeClass("active"); 여기에서는 .siblings()를 넣어줘도 안 넣어줘도 똑같은 결과값을 가지는 것 같은데, 왜 이 코드에서는siblings()를 빼도 문제없이 작동하는 건가요~? 순서가 바뀐건 제가 혼자서 안보고 연습 작성하다가 일어난 오류이기 때문에 선생님 코드와 달라진 것은 없습니다만, 혹시 제가 작성한 전체 코드가 필요하실수도 있을 것 같아서git주소 공유드립니다. https://github.com/Kyu-holic/tab-menu-content-jQuery.git 감사합니다~!!
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
slideUp, slideDown 사용할 때 addClass('active') 여부
html 부분에 첫번째 desc 클래스명에 active 클래스를 줘서 화면에 나오게 하고 나머지 desc 클래스는 display none으로 없애줬는데 $(this).siblings('.desc').stop().slideUp() $(this).next('.desc').stop().slideDown() 어느 부분에서 active 클래스를 넣고 없애는 건가요?
- 해결됨HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
탭 메뉴 콘텐츠- 스타일 02(실전 제작) with jQuery
안녕하세요, 선생님. 항상 양질의 강의 감사드립니다. 이전 강의들을 따라하면서 제이쿼리 탭구조가 어느 정도 익숙해져서 이번 강의는 결과물만 보고 혼자서 미리 만들어보았는데요. 강의 22:05 부분을 보면 선생님은 var result = $(this).attr('data-alt') $('.tabs div').removeClass('active') $('#' + result).addClass('active') 라고 코드를 작성하셨더라고요. var result = $(this).attr('data-alt') $('#' + result).addClass('active') $('#' + result).siblings().removeClass('active'); 이건 제가 짠 코드인데요. 선생님이 하신 것처럼 removeClass를 먼저 줘서 active를 삭제한 뒤 클릭한 하나에만 addClass로 active를 추가하는 것과 addClass를 먼저 준 후 형제 요소들은 removeClass로 active를 삭제하는 것에 차이가 있을까요? 문제없이 작동하긴 합니다만, 혹시 제가 모르는 차이가 있을지 궁금해서 질문 남깁니다!
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
.gallery:hover li
안녕하세요 강의내용 11분 35초 경에 대한 질문입니다. .gallery:hover li{ flex: 1} 을 주시는데 이전에 이미 .gallery li { flex:1} 값을 작성하셨습니다. hover 했을 때 또 다시 같은 값을 주어야할 이유가 있나요? .gallery li:hover {flex:3} 이것만 줘도 상관없을 것 같아서요! 확인 부탁드릴게요~!
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
z-index
<div class="container"> <div class="items"> <div class="top"> <img src="images/space-01.png"> <p>Mars</p> </div> <div class="description"> <p> 화성은 태양계의 네 번째 행성이다. 4개의 지구형 행성 중 하나다. 동양권에서는 불을 뜻하는 화(火)를 써서 화성이라 부르고 로마 신화의 전쟁의 신 마르스의 이름을 따 Mars라 부른다. </p> <a href="#none">Read More </a> </div> </div> </div> body { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #222; } .items { position: relative; width: 300px; border: 1px solid red; } .top { width: inherit; height: 200px; background-color: #333; } p { margin: 0; } .description { position: absolute; top: 0; left: 0; width: inherit; height: 200px; background-color: #ddd; z-index: -1; } .top 요소랑 .description 을 겹쳐놓은 상황입니다. 이제 .top요소를 z-index: 1; 을 주려 하는데 z-index가 안먹히더라고요 그래서 .description에 z-index: -1; 을 주니깐 작동하더라고요 제가 무엇을 잘못했는지 잘 모르겠어요. 혹시 같은 형제 요소끼리는 z-index가 적용이 안되나요?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
모바일 UI 관련 질문
안녕하세요 선생님. 선생님 수업을 잘 듣고있는 현직 2개월차 신입 퍼블리셔입니다. 다름이 아니라... 이런걸 선생님께 여쭤보는게 죄송스럽지만, 회사에 퍼블리셔가 저뿐이라..여쭤볼곳이 없어서 선생님께 여쭤봅니다. ㅠㅠ 프로젝트 진행중에 아래와 같은 UI를 만들어야 하는데.. 어디서 예시를 찾아야 하는지 도저히 모르겠어서 여쭤봅니다.. 해당 UI의 명칭과, 혹시 참고할만한 예시 코드를 알고계신게 있다면.. 가르쳐 주시면 감사하겠습니다. ㅠㅠ 구글에 scrolling datepicker, roller datepicker 부터.. jquery, bootstrap datepicker demo 까지 다 살펴봐도 해당 UI를 찾기가 힘들더라구요... 부탁드리겠습니다.
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
로딩화면을 마치는 방법은 무엇인가요
index에 콘텐츠가 있을 때 그 콘텐츠들을 보여주기 위해서 로딩화면을 어떻게 멈추는지에 대해 궁금합니다
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
before, after의 차이
안녕하세요 강의 따라하다가 궁금한 부분이 생겨 질문남깁니다. 강의에서 backgrond 효과 적용하신 것을 저는 before 말고 after 클래스로 해보았는데요. after에는position:relative를 주어도 <i>태그의 아이콘이 앞으로 나와 보이지 않네요. before로 바꾸니까 강의에 나온대로 잘 적용은 됩니다. before, after 가상 클래스의 기본 z-index 값이 다른건가요? 그리고 다른 수강생분이 i.fa에 position:relative 속성을 주는 이유에 대한 답으로 relative가 absolute보다 우선하기 때문이라고 답변 주신 것을 봤는데요. 해당 내용에 대해서 좀 더 자세한 설명을 알 순 없을까요? 구글링을 해봐도 찾기가 어려워서요. 내용이 조금 지엽적일지 모르겠으나 나중에 해당 속성들을 활용할 때 작동 원리를 확실하게 알고 싶어서 질문 드립니다!