개인 포트폴리오 웹 사이트 작업 중에 질문이 있습니다.기초반 중급반 고급반 버튼 각자 클릭하면 색깔이 바뀌면서 아래에 4개의 사진들이 바뀌는 형태로 하고 싶은데 잘되지 않습니다. html   <div class="online-inner"> <section class="online"> <div class="online-title"> <h2> 온라인 강의 미리보기 <i class="fa fa-line-chart" aria-hidden="true"></i> </h2> </div> <div class="online-content"> <div class="online-btn"> <a class="active" href="#none">기초반</a> <a href="#none">중급반</a> <a href="#none">고급반</a> </div> <div class="online-tabs"> <div class="online-tab1"> <div class="online-tab-inner"> <a href="#none"><img src="images/tab1-img-01.jpg"></a> <a href="#none"><img src="images/tab1-img-02.jpg"></a> <a href="#none"><img src="images/tab1-img-03.jpg"></a> <a href="#none"><img src="images/tab1-img-04.jpg"></a> </div> </div> <div class="online-tab2"> <div class="online-tab-inner"> <a href="#none"><img src="images/tab2-img-01.jpg"></a> <a href="#none"><img src="images/tab2-img-02.jpg"></a> <a href="#none"><img src="images/tab2-img-03.jpg"></a> <a href="#none"><img src="images/tab2-img-04.jpg"></a> </div> </div> <div class="online-tab3"> <div class="online-tab-inner"> <a href="#none"><img src="images/tab3-img-01.jpg"></a> <a href="#none"><img src="images/tab3-img-02.jpg"></a> <a href="#none"><img src="images/tab3-img-03.jpg"></a> <a href="#none"><img src="images/tab3-img-04.jpg"></a> </div> </div> </div> </div> </section> </div> CSS.online-inner { background-color: #5f98e7; } .online { width: 1300px; margin: auto; padding: 50px 0; } .online-title { text-align: center; } .online-title h2 { font-size: 35px; font-weight: 600; color: #fefefe; } .online-content {} .online-btn { text-align: center; } .online-btn a { display: inline-block; padding: 10px 18px; margin-right: 30px; border: 1px solid #295aa0; border-radius: 30px; background-color: #fff; } .online-btn .active { background-color: #132f55; color: #fff; } .online-tabs {} .online-tab-inner { padding-top: 50px; text-align: center; } .online-tab-inner a { margin-right: 20px; } .online-tab-inner a img { width: 280px; } .online-tab1 {} .online-tab2 { display: none; } .online-tab3 { display: none; } $('.online-btn button:nth-child(1)').click(function(){ $('.online-tab1').show() $('.online-tab2').hide() $('.online-tab3').hide() $(this).addClass('active') $(this).siblings().removeClass('active') }) $('.online-btn button:nth-child(2)').click(function(){ $('.online-tab2').show() $('.online-tab1').hide() $('.online-tab3').hide() $(this).addClass('active') $(this).siblings().removeClass('active') }) $('.online-btn button:nth-child(3)').click(function(){ $('.online-tab3').show() $('.online-tab1').hide() $('.online-tab2').hide() $(this).addClass('active') $(this).siblings().removeClass('active') })마지막 jquery입니다. 웹디자인기능사 시험처럼 탭메뉴 2개일때는 됐는데 3개로 형태바꾸니까 잘되지 않습니다.

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.안녕하세요 마지막 미니블로그 테스트만 남았는데코드를 깃헙에서 그대로 가져와 복붙을 하고 실행해도 사파리에서는 null is not an object크롬에서는 Cannot read properties of null (reading 'useContext') TypeError: Cannot read properties of null (reading 'useContext') 오류가 뜹니다 어떻게 해야 할까요? 

docker 관련 에러인것 같습니다.docker 관련 파트 언제 했는지 찾을 수가 없어서 수업 다시 들어 보면서 해결하지도 못하네요어떻게 손대야 할 지 모르겠습니다.

 마지막 homework 문제에서 저는 box라고 지정했는데 저 margin-top부분을 padding으로 하면 적용이 안되던데 padding은 상위 태그부분에만 작용하는 건가요?

깃허브에서 레퍼지토리 만들고 파일도 업로드 한 후 page에서 source branch를 none에서 main으로 바꾸고 저장도 했는데 저장이 되었다는 것만 뜨고 강의처럼 URL을 주지 않는데,,, URL을 얻을 수 있는 다른 방법이 있나요?

인강 한바퀴 다 듣고 이제 제 개인 프로젝트를 하나 해보고싶어 다시 들으면서 조금 변형시키면서 만드는 중입니다.객체 안에 배열을 하나 넣어뒀는데, 그것을 반복문으로 배열의 요소 만큼 태그를 생성시키고 싶어 이중for문을 사용했는데, characters의 다음요소가 들어가버려서 모양이 이상하게 됩니다.... 이렇게는 아예 못쓰는건가요?character-tag에 css를 설정해두어 없애면 안됩니다.사진이 넘치는건 overflow: hidden을 안했습니다.   

안녕하세요강의를 들으면서 궁금한 사항이 생겨서 질문드립니다!1분 코딩님께서 제작하신 강의중에 apple페이지를 클론 코딩하는 강의가 있는데web animation API를 통해서는 똑같이 만들수없을까요??그리고 web animation API를 통해서 canvas를 조작할수는 없을까요?

안녕하세요, 좋은 강의 제공 해주셔서 감사드립니다.section.about 영역 마크업 강의 수강 중 궁금한게 있어 질문 드립니다.img 태그를 감싸실 때 p 태그를 사용 하셨는데 따로 이유가 있을까요? UI상 리스트에서 하나의 문단으로써 자리하기에 그런것일까요?<li> <a href="#"> <p class="img"> <img src="img/about_1.jpg" alt="회사소개" /> </p> <div class="text"> <h3>회사소개</h3> <p>삶의 가치를 높이는 기술기업, 한화 케미칼</p> <p class="more">more</p> </div> </a> </li>

저희 직장 사수가 실무에서 사용할 때에는 작은 프로젝트 외 금융권 같은 큰 프로젝트는body{display:block;height:100px;width:100px;}무조건 이런 방식으로 모든 공백을 최소화해서 코딩을 해서 작성해야 한다고 했는데,scss를 사용할 경우에는 위처럼 작성하는 것은 사실상 불가능하고, 한 줄씩 띄워서 쓰는 방식이랑, 실제 컴파일러도 그렇게 만들어 컴파일해주는데,이렇게 제작해도 성능 상의 큰 차이가 없나요? 프리랜서 외주 제작을 받는다고 가정하면 한줄 코딩 최적화보다는 ,하단 코딩스타일처럼 제작해서 주는 것이 맞을까요? body { display:grid; height: 100vh; justify-content: center; align-items: center; background-color: #222; }

스크롤했을때 한 페이지씩 넘어가다가도가끔씩 2개의 페이지가 샤샥하고 한번에 넘어갈때가 있는데마우스 휠감도 조절해봐도 안되네요 ㅠ방법이 있을까요?

 검사하기 창을 불러왔을 때,선생님 따라서 계속 코드 작성해놓고 강의보다가 다시 코드 치려고 보면 계속해서 작성해둔 코드가 삭제가 됩니다 ㅜㅜ 이거 방법이 없을까요?

캐릭터에 대한 css 작성 강의가 없는데 이 부분은 제가 직접 작성하면 되는 부분일까요?

코드 부트스트랩에 있는거 복사 붙여넣기 했는데 아이콘이 안나오고 자꾸 네모박스 나오는데 왜이러는걸까요??

안녕하세요! 오랜만에 질문글을 작성하게 되었습니다! 결론부터 말씀드리면 89점으로 합격했다고 오늘 연락을 받고 수첩형 자격증 신청을 마친 상태입니다 :)사실 다른 일과 병행을 하느라 공부를 제대로 하지 못하다가 급하게 한 달 벼락치기를 했는데요.. 현재 웹디자인 기능사를 준비하시는 분들에게 제가 했던 방법이 조금이라도 도움이 되면 좋을 것 같아 길게 작성하게 되었습니다.한 달 벼락치기라는 말에 의아하실 수 있을 것 같아 먼저 말씀드리면, 저는 영상, 광고, 디자인 계열 전공을 해서 작년 여름 웹디자인을 하기 위해 공부하고 필기를 따놓고 실기 준비보다 (디자인 계열로)취업을 먼저 해버려서 늦게 딴 케이스입니다 ^-^;;이전에 공부한게 있었기 때문에 한 달 벼락치기가 가능했습니다ㅜㅜ제가 공부한 방법에 대해 말씀드리면저는 강의를 보며 따라하는 방법이 아닌,제가 가진 정보로 직접 만들어보고 강의를 보며 선생님이 어떻게 하는지 보고 배우는 방식으로 공부했습니다.구체적인 예시를 들자면,A유형 레이아웃을 배웠다면 B유형은 직접 만들어보고와이어프레임 이론을 배웠다면, 그 이론만 가지고 제가 직접 먼저 만들었습니다.당장 공부할 때는 시간이 오래 걸리기는 하지만, 외워지는 정도도 빠르고 이렇게 한 번이라도 직접 만들게 되면 2-3번째 즈음엔 혼자서 만들 수 있게 되었습니다.또 영상 중간중간 선생님께서 말씀하신 것처럼 선생님께선 이전에 만든 것들을 복사해 넣더라도 저는 매번 하나하나 직접 쳐서 틀을 만들었던 것도 컸던 것 같습니다.어쩌면 당연한 공부방식일지 모르겠지만 시간을 많이 잡아먹고 제가 먼저 만들어보기 때문에 처음엔 안되는 것들이 생기는데 그때 왜일까? 생각하게 되고 선생님 강의를 들으며 왜 안되었는지 알게 되는 부분이 공부가 되는데 크다고 생각합니다.조금이라도 도움이 되었으면 하는 마음에 길게 작성하게 되었습니다. 감사합니다 :)

학원을 찾고 있는데 선생님이 현재 출강하고 있는 학원 반 정보도 알수있을까요? 단기 퍼블리싱 같은 수업반은 없나요?

ui디자인을 포토샵 대신 피그마로 해도 괜찮을까요?

transform: translateZ(-490vw); /* 줌아웃 */ .wall-front-a{transform: translateZ(300vw);} .wall-front-b{transform: translateZ(50vw);} .wall-front-c{transform: translateZ(-200vw);} .wall-front-d{transform: translateZ(-500vw);} 이렇게 translateZ 에 px, rem , % 이가 아닌 vw 를 사용하신 이유가 가로축 을 기준으로 원근감을 주기 위해서 이신게 맞을까요?

안녕하세요 강의들으면서 제가 제대로 이해한게 맞는지 궁금해서 문의 드립니다.강의에서.house{ width: 100vw; height: 100vh; transform-style: preserve-3d; }이렇게 css 를 지정해주신 이유가 스크롤을 했을때 house 안에 있는 자식요소들이 꽉차게 보이기 위해서 그렇게 지정하신게 맞으신걸까요?

 제가 footer부분 할 때 하단에 배치하기 위해서 <br>을 사용해서 내렸는데 css를 이용해서 하는 방법이 어떤게 있을까요? margin이랑 padding으론 안되는 건가요?다른 방법이 있다면 알려주시면 감사하겠습니다 :D

 fontawesome에서 회원가입까지 같이 완료했는데 창이 달라서 질문 드립니다. 복사하는 부분은 안보이는데 어떻게 진행해야 할까요:?