inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

173만명의 커뮤니티!! 함께 토론해봐요.

모달창에서 반응형 보여주기

미해결

SCSS(SASS)+GRID+FLEX 실전 포트폴리오 퍼블리싱

안녕하세요 선생님. 혹시 Modal 창으로 포트폴리오를 보여 줄 시, 창크기를 줄여서 반응형이 구현된다는 걸 보여 줄 수 있는 방법이 있을까요? (모달창의 창크기가 조절이 되게끔 하는 방법) 수업시간에 지나갔는지 기억이 잘 안나네요 ㅎㅎ; 혹시나 불가능하다면, 어쩔 수 없이 링크버튼이 연결된 버튼을 따로 주는 방법이 좋을까요? 항상 감사드립니다.

  • HTML/CSS
  • sass
  • flex
Jamie K 댓글 1 좋아요 1 조회수 606

spoqa han sans neo

미해결

SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma

spoqa han sans neo글씨체 다운받았는데 피그마 할 때 text밑에 fonts에서 no matching font로 나오네요. 아예 검색자체가 안되는데 무슨 문제인가요??

  • HTML/CSS
  • javascript
  • sass
  • jquery
  • scss
imhj11777 댓글 3 좋아요 1 조회수 1087

모바일웹 소스가 없습니다.

미해결

SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma

질문 주실 때 항상 2가지를 지켜주세요. 브라우저 화면 캡쳐해서 올ㄹ기 HTML+SCSS+JS 코드 캡쳐 말고 텍스트로 붙여넣기 하기 만약 코드를 캡쳐해서 올리시면 제가 코드의 오류를 찾는게 너무 어렵습니다. 반드시 텍스트로 붙여넣기 해주세요. 커리큘럼 하단의 자료소스를 다운받았습니다. 풀어서보니 퍼블소스, pc소스만 있던데 모바일웹 소스가 없습니다. 어디서 다운받아야 하는지요. 퍼블리싱 할때도 모바일웹 소스가 있어야 하는거 아닌가 해서요.

  • HTML/CSS
  • javascript
  • sass
  • jquery
  • scss
김민정(질풍가도) 댓글 1 좋아요 0 조회수 307

scss 히스토리 파일

미해결

SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma

style.scss가 사진처럼 여러 파일로 히스토리가 남게 저장됩니다. 삭제를 해도 watch css를 하면 다시 파일이 만들어지는데.. 아예 히스토리 안남게 하는 방법이 있을까요 ?

  • HTML/CSS
  • javascript
  • sass
  • jquery
  • scss
김수미 댓글 2 좋아요 1 조회수 481

figma 파일 임포팅이 되지 않습니다.

미해결

SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma

beyond insight > 피그마 원본 > 수강생 참고자료, 파일 임포팅이 되지 않습니다 ㅜ 파일명이 수강생 참고자료(Beyond Insight).fig..fig..fig 입니다.

  • HTML/CSS
  • javascript
  • sass
  • jquery
  • scss
김수미 댓글 2 좋아요 1 조회수 2125

Html 코드 스니펫 문의

미해결

SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma

코드 스니펫은 어떤걸 사용하시나요. 추천하는게 있나요?

  • HTML/CSS
  • javascript
  • sass
  • jquery
  • scss
gomzion 댓글 1 좋아요 1 조회수 306

선생님 sass 환경설정 화면이 선생님과 달라요

미해결

SCSS(SASS)+GRID+FLEX 실전 포트폴리오 퍼블리싱

선생님 강의 자세하게 설명해주셔서 너무 잘 듣고있습니다. 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": [ ], } 저는 이런 에러가 떠요. 아무리 구글링을 해도 다들 셋팅 방법만 나와있고 이런 설명이 없어서요..샘 답변 부탁드립니다.

  • HTML/CSS
  • sass
  • flex
openuriz 댓글 1 좋아요 1 조회수 367

scss 관련 코딩 스타일 실무 질문

미해결

SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma

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

  • HTML/CSS
  • javascript
  • sass
  • jquery
  • scss
정혁 댓글 2 좋아요 1 조회수 466

출강하고 있는 학원도 알수있을까요?

미해결

SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma

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

  • HTML/CSS
  • javascript
  • sass
  • jquery
  • scss
정혁 댓글 1 좋아요 1 조회수 302

브라우저별 호환성 접두어

미해결

초보자를 위한 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 */

  • HTML/CSS
  • sass
  • 클론코딩
윤종호 댓글 1 좋아요 0 조회수 299

swr과 recoil을 같이 쓰려면 어떻게 쓰면 될까요?

미해결

실무 중심! FE 입문자를 위한 React

안녕하세요. 유익한 강의 감사합니다. 강의를 다 듣고나니 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을 사용해도 괜찮을까요?

  • react
  • redux
  • node.js
  • sass
  • swr
junyoung.jeong 댓글 1 좋아요 0 조회수 1061

setAnswers 에 함수가 들어가도 괜찮은건가요?

미해결

실무 중심! FE 입문자를 위한 React

안녕하세요. 유익한 강의 감사합니다. 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에 할당되는 건가요??

  • react
  • redux
  • node.js
  • sass
  • swr
junyoung.jeong 댓글 1 좋아요 0 조회수 360

4-3 클래스코드를 찾을 수가없습니다

미해결

실무 중심! FE 입문자를 위한 React

4-3 아코디언 컴포넌트 만들기 실습 코드를 찾을 수 가없습니다 . 4-2코드 링크가 4-3 페이지에 들어있던데 수정부탁 드릴게여!

  • react
  • redux
  • node.js
  • sass
  • swr
shimna1008 댓글 1 좋아요 0 조회수 526

강의 자료가 열리지 않습니다.

미해결

SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma

안녕하세요~ 디자인 작업(beyound+insight) > 피그마(Figma)원본 폴더 안에 있는 두 개 파일이 열리지 않아서요. 어떻게 볼 수 있을까요~?

  • HTML/CSS
  • javascript
  • sass
  • jquery
  • scss
Joy Lee 댓글 3 좋아요 1 조회수 441

이전 figma강의를 수강했으면 생략해도 충분할까요?

미해결

SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma

이전 모바일 웹 퍼블리싱 figma를 수강했는데, 이번 강의에서는 알면 넘어가도 된다는 내용이 없어서요 이번 강의 figma에서 새로 쓰는 기능이 있는지, 아니면 html 프레임 잡는거부터 바로 시작해도 충분할까요?

  • HTML/CSS
  • javascript
  • sass
  • jquery
  • scss
정혁 댓글 1 좋아요 1 조회수 457

강의 자료

미해결

SCSS(SASS)+GRID+FLEX 실전 포트폴리오 퍼블리싱

이미지는 어디서 다운 받는거죠?

  • HTML/CSS
  • sass
  • flex
sigs 댓글 1 좋아요 1 조회수 432

아래 랭크좀 보는법좀 알려주세요

미해결

실무 중심! FE 입문자를 위한 React

코드 샌드박스링크를 알고 싶은데 자꾸 아래를 보래요 ㅠ 근데 안보입니다ㅠㅠ

  • react
  • redux
  • node.js
  • sass
  • swr
백혁인 댓글 2 좋아요 0 조회수 1671

미디어 쿼리 호출 순서(화면사이즈)

미해결

CSS에 날개를 달아주는 Sass (SCSS)

미디어 쿼리 관련하여 질문이 있습니다. SCSS 에서 미디어 쿼리 작성시 화면 사이즈가 큰것 부터 작성해야 한다고 전 강의에서 이야기 하셨는데 이번 강의에서는 index.scss 에서 호출시 @include mq('phone'){ border: none; } @include mq('tablet-land'){ border: 2px solid $border-color; } @include mq('desktop-big'){ border: 10px solid $border-color; } 의 순서로 해서 호출을 하여도 잘 작동을 하는것 같습니다. (작은 사이즈 화면 부터 호출이 되는것 같은데, 작동을 잘되어서 작동되는 이유를 알수 싶습니다.) 원리를 알수가 있을까요?

  • HTML/CSS
  • sass
강지웅 댓글 1 좋아요 0 조회수 435

맥북에서 scss 설치

미해결

SCSS(SASS)+GRID+FLEX 실전 포트폴리오 퍼블리싱

맥북에서 vscode에 live sass compiler 설치하려고하니 setting docs가 없을때는 어떻게 해야하나요?

  • HTML/CSS
  • sass
  • flex
댓글 1 좋아요 1 조회수 584

beautify 확장자가 더이상 관리되지 않다고합니다

미해결

SCSS(SASS)+GRID+FLEX 실전 포트폴리오 퍼블리싱

beautify 확장자가 더이상 관리되지 않다고 해서 beautify css/sass/scss/less 확장자를 다운받았는데 괜찮을까요??

  • HTML/CSS
  • sass
  • flex
hrk 댓글 1 좋아요 1 조회수 580

인기 태그

인프런 TOP Writers

주간 인기글