안녕하세요 선생님 강의 들으면서 취업준비 열심히 하고 있는 학생입니다먼저 찾아봤는데 비슷한 질문들은 없는 것 같아서 질문드립니다, 같은 질문이 있었다면 죄송합니다 궁금한 점이 있는데 취업을 위해 포트폴리오를 제작할 때float를 주로(?) 사용하여 제작하되, flex와 grid를 사용한 포트폴리오도제작하여 사용 경험을 어필할 수 있어야 된다고 들었는데요이게 현재도 통용되는 이야기인지 궁금합니다이전에는 ie에서의 flex 및 grid 호환성 문제때문에float를 주로 사용한 걸로 알고있는데(아니라면 죄송합니다)ie지원종료가 된지 2년이 넘어가는 현 시점에서도 float는 여전히 중요한가요?아니면 float를 사용할 줄 알되 flex와 grid를 중점적으로 다룰 줄 알아야 할까요? 

https://www.youtube.com/watch?v=uI3k9Ol-Mp4 영어 강의 보고 따라 하려니까 어려워서 그런데 단계별로 설명좀 해주실수 있나요?

플러그인을 사용해야 되나요 아니면 피그마 ai 정식 버젼을 기다려야 되나요?text to figma , image to figma 괜찮은거 추천해주시면 감사여

이런 테이블 피그마로 쉽게 그리는법 좀 알려주세요 강의에서 참고할만한 부분이 있을까여? 

HTML 핵심이론 수강중입니다.윈도우의 경우 보조프로그램을 이용하여 이미지 좌표 확인이 가능합니다. 다만, 저는 맥북 유저로 윈도우에서 사용하는 보조프로그램이 없어 이미지 좌표를 확인하는데 조금 문제가 생겼습니다.맥os 에서도 이미지 좌표를 확인하는 방법이 있을까요?

/* Tab Content */ .tab-inner { width: 97%; margin: auto; } .btn {} .btn span { border: 1px solid #000; display: inline-block; width: 120px; text-align: center; padding: 3px; border-radius: 5px 5px 0 0; margin-right: -6px; background-color: #ddd; cursor: pointer; border-bottom: none; margin-bottom: -1px; } .btn span.active { background-color: #fff; } .tabs {} .tabs div { border: 1px solid #000; height: 155px; padding: 0 10px; } .tab1 {} .tab1 a { display: block; padding: 3px; border-bottom: 1px solid #333; } .tab1 a:last-child { border-bottom: none; } .tab1 a b { float: right; font-weight: normal; } .tab2 { display: none; text-align: center; } .tab2 img { margin-top: 25px; width: 110px; } // Tab Content $('.btn span:first-child').click(function(){ $('tab1').show() $('tab2').hide() $(this).addClass('active') $(this).siblings().removeClass('active') }) $('.btn span:last-child').click(function(){ $('tab2').show() $('tab1').hide() $(this).addClass('active') $(this).siblings().removeClass('active') })이렇게 작성하였는데 갤러리를 눌러도 공지사항 내용이 뜹니다ㅜ

전 영상들부터 모두 container slide items footer모두 div태그인데 header만 왜 <div class="header">가 아닌 그냥 header인가요?

코딩 초보입니다 핵심이론 가이드북을 참고해서 선생님 유투브를 보면서 공부하고 있어요!코딩 포기하려던 와중에 선생님 강의영상 보고 다른 강의와 다르게 잘 이해할 수 있게 설명해주셔서 포기하지 않고 선생님 강의로 너무 재밌게 공부하고 있는데혹시 폼 요소, 시멘틱 태그 부분은 참고할 수 있는 영상이 없는걸까요??ㅜㅜ유투브에는 표만들기까지만 있네용!

scss 작성하다가 궁금한 것이 있어 질문 남깁니다.scss를 작성할 때 띄어쓰기를 어떻게 해야할지 궁금합니다.  예를들어 .status { display: flex; justify-content: space-between; margin: 20px 0; & label { & input[type=checkbox] { display: none; +em { display: inline-block; width: 18px; height: 18px; background-image: url('images/icon-radio.png'); transform: translateY(4px); background-position: left; } &:checked+em { background-position: right; } &:checked+em+span { color: var(--mainColor); } } } & a:hover { text-decoration: underline; } } 선생님과 수업하면서 작성한 띄어쓰기 하지 않은코드인데요.이쁘게 정렬하고 싶어서 alt + shift + f 를 눌러서 전체 정렬을 했더니 .status { display: flex; justify-content: space-between; margin: 20px 0; & label { & input[type=checkbox] { display: none; +em { display: inline-block; width: 18px; height: 18px; background-image: url('images/icon-radio.png'); transform: translateY(4px); background-position: left; } &:checked+em { background-position: right; } &:checked+em+span { color: var(--mainColor); } } } & a:hover { text-decoration: underline; } } 이렇게 자동으로 띄어쓰기게 되더라구요.의미없는 띄어쓰기는 하지 않는게 좋다고 들었는데띄어쓰기를 하지 않으면scss nesting 특성상 괄호가 많아져서 알아보기 힘들고비주얼 단축키로 정렬했을 때엔 알아서 띄어쓰게 해주는데,scss는 어떤식으로 코드를 작성해야할지 궁금합니다. 

안녕하세요! 항상 강의 재밌게 듣고 있습니다~제가 강의를 따라하며 제작한 실전 반응형 웹사이트(넷플릭스와 크롬 사이트)를 포트폴리오에 넣으려고 합니다. 그런데 현재 실제 사이트들과 디자인에 차이가 있어서, 강의에서 배운 이전 디자인으로 포트폴리오에 포함해도 괜찮을지 고민이 됩니다…

안녕하세요. 강의 잘 보고 있습니다 !강의를 듣다 궁금한 점이 생겨 문의를 남깁니다. 퍼블리싱 작업 마무리 하기 01 강의 중 .btn-fold에 left : 0 을 주라고 하셨는데, 이전 강의 에서 .goods-order-final 에 position: relative; 로 부모로 선언하고, 그 자식으로 .btn-fold 로 position: absolute; 를 선언하여 굳이 left : 0 을 주지 않아도, 위치가 잘 잡히는데, .goods-order-final 에 position: relative; 를 제거하고.btn-fold 에 left: 0 을 주신 이유가 궁금합니다.

가로이동때는 width를 items에 3배로 주었는데세로이동할때는 height를 그대로 400으로 하셨는데 세로는 안바꿔도 되는건가요? 왜그런건가요??

스크롤링 권장 스크립트 올려주신 부분으로 했는데 작동이 되지 않아 해결 방법 문의 드립니다.  권장<script>  /* Smooth Scrolling */  $('.menu a').click(function(e) {    e.preventDefault();    $.scrollTo(0, 900);  });  문제: 이 스크립트 하기 전에는 menu a를 눌렀을 때 잘 이동했는데 해당 스크립트를 추가하면 작동이 되지 않습니다..  그래서 일단 아래와 같이  html { scroll-behavior: smooth; }  해결했더니 다음 챕터에서  .gototop부분에서 같이 스크립트 작성해야 하는 부분이 있네요. 혹시 잘못된 부분이 있을까요?  <!doctype html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>DesignWorks Archecture Agency</title> <script src="js/jquery-2.1.4.js"></script> <!-- Page Scroll Effect 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"> <!--FONTASOME CDN--> <script src="https://kit.fontawesome.com/c7f55332cf.js" crossorigin="anonymous"></script> </head>$(function(){ /* Trigger*/ $('.trigger').click(function(){ $(this).toggleClass('active') $('.gnb').toggleClass('active') }); $('section, .menu a').click(function(){ $('.gnb').removeClass('active') $('.trigger').removeClass('active') }); /* Change CSS with Scroll */ $(window).scroll(function(){ if($(window).scrollTop() > 50) { $('header').addClass('active') } else { $('header').removeClass('active') } }); /* Smooth Scrolling */ $('.menu a').click(function(e){ e.preventDefault(); $.scrollTo(0, 900); }); });  

여기까지 작성하였는데 질문중에 폰트어썸관련질문보고 주신링크인 cdnjs.com에 4.7버전이 없고 다6.대 버전입니다.. 또한 https://fontawesome.bootstrapcheatsheets.com/#보내주셨던 링크에서 복사해서 썼지만 이렇게 아무것도 뜨지 않습니다ㅠㅠ

강의 내용은 아니지만 따로 뭔가를 더 하고싶어서 그런데화면은 잘 나왔는데 text-align: center;로 중앙배치 했지만 세로가 위쪽에있는데 세로도 중앙배치 하려면 어떻게 해야하나요?

제가 슬릭 슬라이더 pc를 모바일로 바꾸려고 하는데요..제이쿼리에서 바꿀 방법 없을까요???아래 같이 추가햇는데 안먹어서 질문합니다 ㅠㅠ /* product */ $('.sales-presentation').slick({ slidesToShow: 3, slidesToScroll: 1, autoplay: true, autoplaySpeed: 2000, dotsClass : "slick-dots", //아래 나오는 페이지네이션(점) css class 지정 draggable : true, //드래그 가능 여부 responsive: [ // 반응형 웹 구현 옵션 { breakpoint: 960, //화면 사이즈 960px settings: { //위에 옵션이 디폴트 , 여기에 추가하면 그걸로 변경 slidesToShow:3 } }, { breakpoint: 768, //화면 사이즈 768px settings: { //위에 옵션이 디폴트 , 여기에 추가하면 그걸로 변경 slidesToShow:2 } } ] });

우선, 강의대로 따라했을 때 index.html 에서는 헤더와 푸터 인클루드가 잘됩니다. 따로 test.html 을 만들어서 인클루드 해봐도 잘 됩니다.  하지만 html/class-detail.html 에 인클루드를 하면 헤더와 푸터가 인클루드 되지 않습니다. custom.js 의 경로를 바꿔봐도 안되네요 ㅜㅜ인클루드가 안되는 이유를 알 수 있을까요 ?

별도로 지정하지않은 상호작용이 필요한 모든 콘텐츠는 임시링크를 적용하고 탭키로 이동 선택할수 있어야 한다라는 기술적 준수사항에, 푸터의 패밀리사이트 항목들도 해당되나요?

해당 부분만 흰색으로 양옆에 나오는데, 왜 그런걸까요 ?

  라이브서버로 열기를 해봐도 웹 브라우저가 열리지 않고 있습니다. 구글링 해서 파일명에 영어나 ., 띄어쓰기 한글 등이 들어가면 안되는 점도 숙지하고 작업했으며 설정도 다음과 같이 수정했고, 브라우저를 열어 직접 ip주소를 쳐 봐도 1번째 사진과 같이 뜨고 실행이 되질 않습니다ㅜㅜ 또 어떤 방법을 써봐야 할까요 선생님?