49,500원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결SCSS(SASS)+GRID+FLEX 실전 포트폴리오 퍼블리싱
모달창에서 반응형 보여주기
안녕하세요 선생님.혹시 Modal 창으로 포트폴리오를 보여 줄 시, 창크기를 줄여서 반응형이 구현된다는 걸 보여 줄 수 있는 방법이 있을까요? (모달창의 창크기가 조절이 되게끔 하는 방법)수업시간에 지나갔는지 기억이 잘 안나네요 ㅎㅎ; 혹시나 불가능하다면, 어쩔 수 없이 링크버튼이 연결된 버튼을 따로 주는 방법이 좋을까요? 항상 감사드립니다.
- 미해결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)+GRID+FLEX 실전 포트폴리오 퍼블리싱
강의 자료
이미지는 어디서 다운 받는거죠?
- 미해결SCSS(SASS)+GRID+FLEX 실전 포트폴리오 퍼블리싱
맥북에서 scss 설치
맥북에서 vscode에 live sass compiler 설치하려고하니 setting docs가 없을때는 어떻게 해야하나요?
- 미해결SCSS(SASS)+GRID+FLEX 실전 포트폴리오 퍼블리싱
beautify 확장자가 더이상 관리되지 않다고합니다
beautify 확장자가 더이상 관리되지 않다고 해서beautify css/sass/scss/less 확장자를 다운받았는데괜찮을까요??
- 해결됨SCSS(SASS)+GRID+FLEX 실전 포트폴리오 퍼블리싱
@mixin 관련 질문입니다.
@mixin 파트 시청중 궁금점이 생겨서요!첫번째 이미지 처럼 hover를 저렇게주고 css 컴파일하면은두번째이미지처럼 3개의 hover를 가진 css로 컴파일 되어서 보여지는데요.저러면은 괜히 css만 지저분해져보이는데 저렇게 hover를 주는 이유가 있었을까여?.그리고 css 컴파일 된것을 보면은ex) .complete.complete:hover -> 이렇게 되어있으면은 제가 알고 있는 css개념으로는.complete 클래스를 가지면서 .complete를가진 요소에 hover를 줘라라고 알고있기때문에hover가 먹지 않을꺼라고 생각이들었는데요. 먹어지는 이유가 있을까요?..
- 해결됨SCSS(SASS)+GRID+FLEX 실전 포트폴리오 퍼블리싱
&에 대해서 질문드립니다.
&에 대해 학습하고나서 더 다른 실습을 해보기 위해 예시를 찾던중에 이해가 안되는 부분이 있습니다. 해당 scss인데 이를 컴파일 했을때 결과물이이렇게 나온다고 예시가 있었으며 이를 실제로 실험해보니 정말로 저렇게 나오더라고요여기서 질문이 div.section & ->이부분은 li안에서 설정한건데 왜 컴파일했을때 맨앞에 아무것도 없이 바로 div로 나오는지 궁금합니다. 위 구문 뒤에 &는 바로 li로 불러오는지 알았는데 맨 상위부모클래스인 .list_gnb까지 포함해서 가져오는데요 이는 왜 그런건지요? &는 바로 직전부모클래스로 가져오는게 아닌것인지요분명 강의 2~3번본건데도 불구하고 저렇게 컴파일된거에 대해 이해가 안되네요 ㅠㅠ
- 미해결SCSS(SASS)+GRID+FLEX 실전 포트폴리오 퍼블리싱
live sass complier 버전 문제
안녕하세요!live sass compiler 익스텐션 설치 및 세팅 영상 공부하고 있는데요!강의에 나오는 ritwick dey의 익스텐션은 더 이상 사용이 불가하다고 하여, 그 아래에 있는 glenn marks 버전을 설치했습니다.설치 후 json 세팅을 하고 있는데설정 > 확장에 live sass compiler가 나오지 않아 문의 드립니다. sass를 검색했을 때 아래 부분만 나오는데요! json 세팅을 할 수 있는 다른 방법이 있을까요? 감사합니다.
- 미해결SCSS(SASS)+GRID+FLEX 실전 포트폴리오 퍼블리싱
선생님 질문이 있습니다 !
variables.scss(변수파일)에는 전역변수만 넣어야 하나요??만약에 그렇다면지역변수는 style.scss 에서 선언하면 되나요?저는 scss 파일에서 밑에 코드를 실행시키니까 css 파일에서 "font-size: 30px" 로 연산되어 나와지는데혹시 최근에 scss에서 버전이 업그레이드 된걸까요?font-size: calc(15px * 2);
- 미해결SCSS(SASS)+GRID+FLEX 실전 포트폴리오 퍼블리싱
savePath
savePath 에다가는 null 값주고따로 탐색기에다가 수동으로 폴더만들어서 css파일이랑 map파일을 옮겨도 상관은 없는걸까용??
- 미해결SCSS(SASS)+GRID+FLEX 실전 포트폴리오 퍼블리싱
css full reroad
저는 full reroad 현상이 발생이 안되는데지금은 vscode 에서 자체적으로 이 현상을 수정해준건가요??
- 미해결SCSS(SASS)+GRID+FLEX 실전 포트폴리오 퍼블리싱
featherlight 모달창 질문 있습니다.
이 모달창 누르면 강의하신것처럼 featherlight가 가운데에 안뜨고 저 왼쪽상단밑으로 뜨는데가운데로 뜨게하려면 어떻게 해야되나요?
- 미해결SCSS(SASS)+GRID+FLEX 실전 포트폴리오 퍼블리싱
컴파일이 안되서
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 컴파일이 안되서../. 오류 확인 방법이나 다시한번 확인해 봐야하는 부분좀 알려주실수 있을까요?, 반복 강의하는데 안돼서요 Compilation Error Error: expected ";". ╷ 3 │ boby{ │ ^ ╵ i:\SCSS_GRID_FLEX\style.scss 3:5 root stylesheet 이렇게 에러는 나왔습니다
- 미해결SCSS(SASS)+GRID+FLEX 실전 포트폴리오 퍼블리싱
왓칭오류..
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 반복해서 해보고있지만.. 왓칭이 안되는데 어떤 방법으로 수정을해야할지 모르겠습니다.. { "workbench.iconTheme": "vscode-icons", "workbench.colorTheme": "Night Owl", "atomKeymap.promptV3Features": true, "editor.multiCursorModifier": "ctrlCmd", "editor.formatOnPaste": true, "liveServer.settings.donotVerifyTags": true, "liveServer.settings.donotShowInfoMsg": true, "liveServer.settings.fullReload": true, "liveSassCompile.settings.formats": [ // This is Default. { "format": "expanded", "extensionName": ".css", "savePath": null } ], }
- 미해결SCSS(SASS)+GRID+FLEX 실전 포트폴리오 퍼블리싱
featherlight iframe를 사용해서 불러온 html에 scrolltrigger가 있는 경우 밀립니다
GRID 반응형 포트폴리오 강의를 참고하며 개인 포트폴리오를 작업 중입니다. featherlight iframe를 사용해서 연결한 html파일 중 scrolltrigger 이벤트가 뜨는 이미지나 글상자가 다르게 출력됩니다. 원본html을 직접 들어갈 경우 정상적으로 작동하는데, 아이프레임을 통해 들어간 경우만 scrolltrigger로 transform x, y값을 이동하게 지정한게 오류가 나서 문의드립니다. 이럴 때는 어떻게 접근해서 해결해야 좋을까요? 해당이미지의 js 코드입니다.
- 미해결SCSS(SASS)+GRID+FLEX 실전 포트폴리오 퍼블리싱
Background url 이미지 사이즈
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요 선생님 질문 드려 봅니다 아이디/ 비밀번호 / 이메일 옆에 들어가는 svg형식 아이콘들 이미지가 너무 큰데 줄이는 방법이 무엇인지 기억이 나지 않아서 여쭤봅니다! background: url(../images/person.svg) no-repeat center left 2px; 여기에서 어떤걸 추가하면 될까요?
- 미해결SCSS(SASS)+GRID+FLEX 실전 포트폴리오 퍼블리싱
선생님 질문 있습니다
안녕하세요! 강의 정말 유익하게 잘 듣고 있습니다. 다름이 아니라 제가 강의 내용을 바탕으로 조금 수정해보면서 만들고 있는데 a태그가 선택이 되질 않아 여쭙고 싶어서 문의 드립니다. html <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>본문</title> <!-- Custom CSS --> <link rel="stylesheet" href="style.css"> <!-- jQuery CDN --> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <!-- Featherlight.js --> <script src="script/featherlight/featherlight.js"></script> <link rel="stylesheet" href="script/featherlight/featherlight.css"> <!-- fontawesome --> <script src="https://kit.fontawesome.com/c21d7630fc.js" crossorigin="anonymous"></script> </head> <body class="indexbody"> <section class="indexmain"> <div> <h1> <span>LATEST </span> RECIPES </h1> </div> <div class="items"> <div> <a href="portfolio/portfolio-01.html" data-featherlight="iframe"><img src="images/test1.jpg"></a> <i class="xi-plus-thin"></i> <span> 난이도 '하'</span> <p> 라면</p> </div> <div> <a href="portfolio/portfolio-01.html"> <img src="images/test2.jpg"> </a> <i class="xi-plus-thin"></i> </div> <div> <a th:href="@{/}"> <img src="images/test3.jpg"> </a> <i class="xi-plus-thin"></i> <span> 난이도 '중' </span> <p> 파스타</p> </div> <div> <a th:href="@{/}"> <img src="images/test3.jpg"> </a> <i class="xi-plus-thin"></i> <span> 난이도 '하' </span> <p> 치킨</p> </div> </div> <br> <br> <div> <div classs="seemoreline"> <p class="seemore"> see more <i class="fa-solid fa-angles-right"></i></p> </div> </div> <br> <br> <div> <h1> <span>QUICK </span> 30-MINUTE MEALS</h1> </div> <div class="items"> <div> <a th:href="@{/}"> <img src="images/test7.jpg"> </a> <i class="xi-plus-thin"></i> <span> 0</span> </div> <div> <a th:href="@{/}"> <img src="images/test8.jpg"> </a> <i class="xi-plus-thin"></i> <span> 06</span> </div> <div> <a th:href="@{/}"> <img src="images/test9.jpg"> </a> <i class="xi-plus-thin"></i> <span> 07</span> </div> <div> <a th:href="@{/}"> <img src="images/test3.jpg"> </a> <i class="xi-plus-thin"></i> <span> 난이도 '중' </span> <p> 08</p> </div> </div> </section> </body> </html> scss //variables $font-base:10px; $color-base:#fff; //Mixin //기본 서식 상태 @mixin default { font-family: 'Montserrat Alternates', sans-serif; margin: 0; color: #222; line-height: 1.6em; background-color: #f8f8f8; } @mixin heading { font-family: 'Montserrat Alternates', sans-serif; text-align: center; font-weight: normal; position: relative; padding-bottom: 30px; &:before { content: ''; position: absolute; width: 100px; height: 4px; background-color: crimson; bottom: 0; left: 50%; transform: translateX(-50%); } span { color: crimson; } } /* Google Web Font */ @import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:ital@1&family=Nanum+Gothic&display=swap'); @font-face { font-family: 'SuncheonB'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2202-2@1.0/SuncheonB.woff') format('woff'); font-weight: normal; font-style: normal; } /* XEION CDN */ @import url('http://cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css'); .indexbody { @include default; height: 100vh; display: grid; justify-content: center; margin: 200px 20%; } // indexmain section .indexmain { margin: 15px; display: flex; flex-direction: column; h1 { @include heading; font-size: $font-base*4; } .items { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 40px; row-gap: 40px; div { border-radius: 6px; overflow: hidden; box-shadow: 0 0 9px rgba(54, 53, 53, 0.3); position: relative; a { img { width: 100%; display: block; } } i { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.2); opacity: 0; font-size: 40px; color: $color-base; } span { position: absolute; bottom: -40px; width: 100%; text-align: center; padding: 10px; color: $color-base; font-weight: bold; font-size: 30px; font-family: 'Nanum Gothic', sans-serif; color: rgb(255, 255, 255); } p { font-family: 'SuncheonB'; font-size: 20px; text-align: center; } span, i, &:before { transition: 0.2s; // all = default값 pointer-events: all; } &:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.418); opacity: 0; } &:hover:before { opacity: 1; } // .items div:hover 선택자 &:hover i { transform: translate(-50%, -50%) scale(1); opacity: 1; } &:hover span { bottom: 70px; } } } .seemore { border: 1px solid #000; height: 35px; width: 120px; text-align: center; padding-top: 10px; margin-left: 45%; } .seemore:hover { color: white; background-color: crimson; border: 1px solid crimson; } } /*tablet*/ @media (min-width: 768px) and (max-width: 1366px) { .indexbody { height: auto; } .indexmain { h1 { font-size: $font-base*4; } .items { grid-template-columns: repeat(2, 1fr); } .seemore { margin-left: 39%; } } } /*mobile*/ @media (max-width: 768px) { .indexbody { height: auto; } .indexmain { h1 { font-size: $font-base*4; } .items { grid-template-columns: repeat(1, 1fr); } .seemore { margin-left: 34%; } } } /* featherlight Custom CSS */ .featherlight .featherlight-content { margin-left: 0 !important; margin-right: 0 !important; max-height: 100% !important; width: 100%; height: 100%; } .featherlight .featherlight-inner { width: 100%; height: 100%; } .featherlight .featherlight-close-icon { top: 90% !important; left: 30px !important; line-height: 50px !important; width: 50px !important; font-size: 28px; background-color: crimson !important; color: #fff !important; border-radius: 50%; } 이런식으로 강의 내용에서 items에 p랑 span만 추가로 더 넣어준 상태로 만들고 featherlight를 추가 했는데 계속 실행이 되지 않았습니다. 제 생각에는 썸네일에 마우스를 올리면 커서가 바뀌지 않아 a태그가 선택되지 않는 상태인거 같습니다. 그래서 z-index도 추가해보고 postion값도 변경해봤는데도 실행이 되지 않아서 문의 드립니다. 어떤 부분을 수정하면 제대로 동작할지 한번 봐주시면 정말 감사하겠습니다.
- 미해결SCSS(SASS)+GRID+FLEX 실전 포트폴리오 퍼블리싱
블록 색상
부모 자식별로 블록 색상이 다른데요 확장프로그램 어떤걸 설치해야 하나요 ?
- 미해결SCSS(SASS)+GRID+FLEX 실전 포트폴리오 퍼블리싱
작업영역내 setting.json설정시
설정에서 sass검색후 작업영역으로 하게 되면 해당 프로젝트에만 적용되면서 .vscode에 setting.json이 생성되는데 이과정에서 작업영역에 live sass compiler 에서 Settings:formats 나 Autoprefix, generateMap에 Setting.json에서 편집을 눌러도 안에 아무것도 셋팅이 안됩니다. 아예 공란인데 제가 기존에 뭘 세팅을 안한걸까요?
- 미해결SCSS(SASS)+GRID+FLEX 실전 포트폴리오 퍼블리싱
선생님 pdf 파일은 다운받을수 없는건가요?
pdf 개념 자료를 다운받고 싶습니다.