묻고 답해요
129만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma
slick slide 클레스 네임 관련
PC 레이아웃 상세 퍼블리싱 - 프론트 페이지(Focus Class) 02강의에서 /*section : focus-class*/ .focus-class { background-color: $cloudy-gray; .focus-class-inner { .focus-class-content { margin-bottom: 30px; .focus-class-items { /* Custom Css : Slick - 아이템 간격 조정 */ // 실제로 찾아가는것은 F12 개발자도구로 찾아가서 조절하는것 이다. .slide-list{ margin: 0 -5px; } .slick-slide{ margin: 0 5px; }포커스 클래스 부분의 슬릭슬라이더 부분에서,마진 조절하는 부분에 개발자도구로 찾아보니 .slide-list 가 아니라 .slick-list 인거 같습니다. 감사합니다.
-
미해결SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma
live server는 적용되는데 index.html을 더블클릭하면 아무것도 안되어 있어요..
featherlight 하다가 다 깨져있어서 featherlight 문제인가 했는데html파일 자체가 scss로 작업한 게 적용이 안되어있더라구요...라이브서버로 보면 잘 되어있어서 미처 몰랐는데 index.html 더블클릭하니스타일이 하나도 안되어있습니다ㅠㅠ 뭐가 문제일까요...?? **SCSS로 디자인한 걸 featherlight로 어떻게 해야하는 지 알려주세요...!
-
미해결SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma
장바구니페이지 관련 질문입니다.
수강신청 장바구니 화면에서 항목중 1개라도 선택이 해제되면 전체선택체크박스의 체크도 풀려야 하는거 아닌가요? 어떤 스크립트를 추가해야 적용이 되나요?
-
미해결SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma
네비게이션 클릭시 헤더높이로 인해 제목 가리는 부분 해결방안
선생님, 안녕하세요:)강의 유익하게 잘 보고 있습니다. 좋은 강의 해주셔서 몰랐던 부분을 정말 많이 알아갑니다! 'PC 레이아웃 상세 퍼블리싱 - 강의소개 05(네비게이션 부드럽게 스크롤링)' 강의에서 헤더 높이로 인해 제목 부분이 가려지는 문제를, 헤더 높이를 빼주면 해결되지 않을까 싶어 작성해보았습니다. /* Smooth Scrolling */ var linkLocation = $(this).attr('href'); $('html, body').animate({ scrollTop: $(linkLocation).offset().top-'180' // <- 작성한 부분 }, 500); e.preventDefault();헤더 높이인 123px보다 더 많은 값인 180을 주니 제목이 가리지 않고 알맞게 스크롤되는데 이 방법이 맞는건지, 이렇게 했을 때 다른 문제가 발생하지 않는지 궁금하네요!
-
미해결SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma
소스텍스트는 제공이 안되나요?
안녕하세요~ 선생님.제공되는 파일 중 '[다운로드]+디자인+작업(Beyond+Insight)' 안에 소스텍스트가 없네요. 제공이 안되는건가요?
-
미해결SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma
섹션 4. SCSS 핵심 이론(Essential Theory) 완성예제는 따로 없을까요?
다운받는 곳에 없어서요
-
미해결SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma
SCSS
질문 주실 때 항상 2가지를 지켜주세요.오류가 나는 부분이나 궁금한 부분의 브라우저 화면 캡쳐해서 올리기HTML+SCSS+JS 코드 캡쳐 말고 텍스트로 붙여넣기 하기만약 코드를 캡쳐해서 올리시면 제가 코드의 오류를 찾는게 너무 어렵습니다. 반드시 텍스트로 붙여넣기 해주세요.비쥬얼 스튜디오 코드에서 라이브 서버를 키면 에러가 뜨네요 근데 그냥 파일로 들어가면 HTML이 제대로 나오네요.
-
미해결SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma
scss
질문 주실 때 항상 2가지를 지켜주세요.오류가 나는 부분이나 궁금한 부분의 브라우저 화면 캡쳐해서 올리기HTML+SCSS+JS 코드 캡쳐 말고 텍스트로 붙여넣기 하기만약 코드를 캡쳐해서 올리시면 제가 코드의 오류를 찾는게 너무 어렵습니다. 반드시 텍스트로 붙여넣기 해주세요. scss에서 watch sass를 누르고, whatching이 되잖아요.근데 저는 . css만 생기지 .css.map은 안 생기는데 이유가 뭐죠?
-
미해결SCSS(SASS)+GRID+FLEX 실전 포트폴리오 퍼블리싱
모달창에서 반응형 보여주기
안녕하세요 선생님.혹시 Modal 창으로 포트폴리오를 보여 줄 시, 창크기를 줄여서 반응형이 구현된다는 걸 보여 줄 수 있는 방법이 있을까요? (모달창의 창크기가 조절이 되게끔 하는 방법)수업시간에 지나갔는지 기억이 잘 안나네요 ㅎㅎ; 혹시나 불가능하다면, 어쩔 수 없이 링크버튼이 연결된 버튼을 따로 주는 방법이 좋을까요? 항상 감사드립니다.
-
미해결SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma
spoqa han sans neo
spoqa han sans neo글씨체 다운받았는데 피그마 할 때 text밑에 fonts에서 no matching font로 나오네요.아예 검색자체가 안되는데 무슨 문제인가요??
-
미해결SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma
모바일웹 소스가 없습니다.
질문 주실 때 항상 2가지를 지켜주세요.브라우저 화면 캡쳐해서 올ㄹ기HTML+SCSS+JS 코드 캡쳐 말고 텍스트로 붙여넣기 하기만약 코드를 캡쳐해서 올리시면 제가 코드의 오류를 찾는게 너무 어렵습니다. 반드시 텍스트로 붙여넣기 해주세요. 커리큘럼 하단의 자료소스를 다운받았습니다.풀어서보니 퍼블소스, pc소스만 있던데 모바일웹 소스가 없습니다.어디서 다운받아야 하는지요.퍼블리싱 할때도 모바일웹 소스가 있어야 하는거 아닌가 해서요.
-
미해결SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma
scss 히스토리 파일
style.scss가 사진처럼 여러 파일로 히스토리가 남게 저장됩니다. 삭제를 해도 watch css를 하면 다시 파일이 만들어지는데.. 아예 히스토리 안남게 하는 방법이 있을까요 ?
-
미해결SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma
figma 파일 임포팅이 되지 않습니다.
beyond insight > 피그마 원본 > 수강생 참고자료, 파일 임포팅이 되지 않습니다 ㅜ 파일명이 수강생 참고자료(Beyond Insight).fig..fig..fig 입니다.
-
미해결SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma
Html 코드 스니펫 문의
코드 스니펫은 어떤걸 사용하시나요. 추천하는게 있나요?
-
미해결SCSS(SASS)+GRID+FLEX 실전 포트폴리오 퍼블리싱
선생님 sass 환경설정 화면이 선생님과 달라요
선생님 강의 자세하게 설명해주셔서 너무 잘 듣고있습니다.Sass 환경설정 후 선생님처럼 동일한 코드를 붙여넣으면"liveSassCompile.settings.generateMap": false, "liveSassCompile.settings.formats":[ // This is Default. { "format": "expanded", "extensionName": ".css", "savePath": "/css" } ], "liveSassCompile.settings.autoprefix": [], "liveSassCompile.settings.excludeList": [ "**/node_modules/**", ".vscode/**", ], "liveSassCompile.settings.includeItems": [ ], }저는 이런 에러가 떠요.아무리 구글링을 해도 다들 셋팅 방법만 나와있고 이런 설명이 없어서요..샘 답변 부탁드립니다.
-
미해결SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma
scss 관련 코딩 스타일 실무 질문
저희 직장 사수가 실무에서 사용할 때에는 작은 프로젝트 외 금융권 같은 큰 프로젝트는body{display:block;height:100px;width:100px;}무조건 이런 방식으로 모든 공백을 최소화해서 코딩을 해서 작성해야 한다고 했는데,scss를 사용할 경우에는 위처럼 작성하는 것은 사실상 불가능하고, 한 줄씩 띄워서 쓰는 방식이랑, 실제 컴파일러도 그렇게 만들어 컴파일해주는데,이렇게 제작해도 성능 상의 큰 차이가 없나요? 프리랜서 외주 제작을 받는다고 가정하면 한줄 코딩 최적화보다는 ,하단 코딩스타일처럼 제작해서 주는 것이 맞을까요? body { display:grid; height: 100vh; justify-content: center; align-items: center; background-color: #222; }
-
미해결SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma
출강하고 있는 학원도 알수있을까요?
학원을 찾고 있는데 선생님이 현재 출강하고 있는 학원 반 정보도 알수있을까요? 단기 퍼블리싱 같은 수업반은 없나요?
-
미해결초보자를 위한 Sass 기초 강의 & 자몽톡 클론코딩
브라우저별 호환성 접두어
저는 6분 50초대 보면 선생님께서 브라우저별 호환성까지 고려해서 접두어까지 저절로 붙은 스타일이 알아서 완성 됐다고 하시는데 저는 이렇게만 뜨는데 왜그런걸까요?.one { width: 100px; height: 100px; display: flex; align-items: center; justify-content: center; background-color: orange; } .two { width: 100px; height: 100px; display: flex; align-items: center; justify-content: center; background-color: orange; }/*# sourceMappingURL=main.css.map */
-
미해결라인 파이낸셜 출신 개발자와 리액트로 실무 서비스 제작하기
swr과 recoil을 같이 쓰려면 어떻게 쓰면 될까요?
안녕하세요. 유익한 강의 감사합니다. 강의를 다 듣고나니 recoil 과 swr을 같이 쓰고 싶다는 생각이 들어서 redux를 썼던 admin 페이지를 swr과 recoil 조합으로 만들어보다가 막혀서 질문드립니다.. pages/ListPage.js에서 const { data, error, mutate } = useSWR( "/surveys?_sort_id&_order=desc", fetcher, ); const [survey, setSurvey] = useCurrentQuestion(); // recoil setSurvey(data);이렇게 swr로 불러온 데이터를 set으로 넣어주고 다른 페이지에서 recoil로 데이터를 불러서 써도 되는지 궁금합니다. 아니면 커스텀 훅에서 swr을 사용해도 괜찮을까요?
-
미해결라인 파이낸셜 출신 개발자와 리액트로 실무 서비스 제작하기
setAnswers 에 함수가 들어가도 괜찮은건가요?
안녕하세요. 유익한 강의 감사합니다.const useCurrentAnswer = () => { const step = useStep(); const [answers, setAnswers] = useRecoilState(answersState); const answer = answers[step]; const setAnswer = (newAnswer) => { setAnswers((answers) => { // 새로운 답변 렌더링 (answers 는 그냥 변수명 ) const newAnswers = [...answers]; // 기존 답변목록을 복붙함 (불변성의 법칙을 지켜라 / 기존 데이터는 건들지마..) newAnswers[step] = newAnswer; // 새로 작성한 답변을 복붙한 배열에 넣어줌 return newAnswers; // 새로운 답변 목록 반환 }); }; return [answer, setAnswer]; };에서 answer - String / 답변answers - String[] / 답변 목록 setAnswer - answer를 렌더링해주기위한 함수 / setAnswer(param) { answer = param }setAnswers - answers를 렌더링해주기위한 함수 / setAnswers(param) { answers = param } 로 이해되는데 그렇다면 setAnswers에 함수가 들어가도 괜찮은건지 궁금합니다. setAnswers((answers) => { const newAnswers = [...answers]; newAnswers[step] = newAnswer; return newAnswers; });는 setAnswers(화살표함수) { answers = 화살표함수} 이고answers는 화살표함수가 되는게 아닌가요? answers는 함수가 되어 입력된값을 리턴해서 바로 answers에 할당되는건가요?아니면setAnswers에서 함수가 실행되어 리턴된 값이 answers에 할당되는 건가요??