우선 강의를 들어주셔서 감사합니다. 강의 들으시면서 궁금하신 부분을 남겨주세요.업데이트가 되어 강의부분과 많이 달라 따라가기 어려워요.업데이트는 언제 가능한가요? 회사 일 관계로 빠른 답변이 어려울 수 있으며, 최대 3일 이내에 답변드리도록 하겠습니다. 이해를 돕기 위해서 스크린샷 이미지, 피그마 파일 링크를 반드시 첨부해주세요. 마지막으로 먼저 유사한 질문이 있는지 한번 찾아보시는 걸 권장 드립니다. 인프런 서비스 운영 관련해서는 1:1 문의하기로 인프런 쪽으로 연락 주시기 바랍니다.

안녕하세요. 포모도로 앱만드는 첫번째 부터 막히네요 ㅠㅠ일단 insert버튼이 생기지 않는데 뭐가 문제인걸까요? 이런식으로만 뜨네요 계속해봐도 ㅠㅠ PS C:\Users\your_\OneDrive\바탕 화면\다시> npx create-react-app . --template typescript && npm install -D tailwindcss postcss autoprefixer && npx tailwindcss init -pPS C:\Users\your_\OneDrive\바탕 화면\다시> npx create-react-app . --template typescript && npm install -D tailwindcss postcss autoprefixer && npx tailwindcss init -p위치 줄:1 문자:46+ npx create-react-app . --template typescript && npm install -D tailwi ...+ ~~'&&' 토큰은 이 버전에서 올바른 문 구분 기호가 아닙니다.위치 줄:1 문자:97+ ... escript && npm install -D tailwindcss postcss autoprefixer && npx ta i ...+ ~~ '&&' 토큰은 이 버전에서 올바른 문 구분 기호가 아닙니다.위치 줄:1 문자:205+ ... ive\바탕 화면\다시> npx create-react-app . --template typescript && npm ins ...+ ~~ '&&' 토큰은 이 버전에서 올바른 문 구분 기호가 아닙니다.위치 줄:1 문자:256+ ... escript && npm install -D tailwindcss postcss autoprefixer && npx ta i ...+ ~~ '&&' 토큰은 이 버전에서 올바른 문 구분 기호가 아닙니다. + CategoryInfo : ParserError: (:) [], ParentContainsErrorRec ordException + FullyQualifiedErrorId : InvalidEndOfLinePS C:\Users\your_\OneDrive\바탕 화면\다시> 어떤 프로그램을 어디서 어떻게 깔아야 하는지부터, 어떻게 설정을 하는지물론 정리를 해주셨지만 순서도 모르겠고 적용하는것도 어려운 거 같아요. 처음 강의부터 아예 같이 시작을 하고 설명을 들었으면, 오류가 안났을거같은데수업관련 파일은 또 따로 봐서 공부를 해야하고, 알아서 다 설치하고 공부한다음에강의를 들어야해서그런지 잘 이해가 안가는거같아요..ㅠㅠ오류가 난게 제가 뭐 프로그램을 잘못설치해서그런건지, 아니면 설정을 뭔가 잘못해서 그런건지잘모르겠네요 답변주시면 감사하겠습니다..

선생님 처럼 영상을 보고 css full reload 를 설정 했는데 체크를 해제하면 css 수정 시 안올라가고 체크를 하면 올라 갑니다 또한 html 수정시 마다 매번 위(무한스크롤링)로 올라 갑니다. 해결방법이 있나요?

이부분이 웹상에 확인이 안돼서 혹시 실습할 이미지 파일 보내주실 수 있으신가요?

선생님께서 영상에서 보여주신 것처럼 Frame은 실제 화면 상관없이 길게 하고, 맨 하단에 하단바 Fixed position으로 놓아주고, Prototype에서 볼때 실제 볼 디바이스 설정해서 보는 방법이 있고,1번 방법 아니면 첨부 이미지와 같이 Frame을 실제 볼 디바이스 해상도로 설정해주고, 하단바를 저런 식으로 Frame 하단에 붙여주고, 그 밑으로 스크롤 되는 컨텐츠들은 Frame 밖에 저렇게 놓고 묶어주는게 맞는건가요? (핑크색 바탕에 블랙 사각형 4개 있는 것이 하단바입니다.) 1번 방법이 디자인 작업할때는 쉬운데, Prototype에서 해당 디바이스 설정하면 자꾸 휴대폰 모양 프레임이 나와서 별로예요.. 다른 방법이 있는지요. 조언 부탁드립니다.

안녕하세요, 훌륭한 강의 감사합니다.완강 이벤트에 참여하여 수강 후기와 설문조사를 모두 완료했는데, 아직 노션 자료를 받지 못했습니다. 혹시 누락된 건지, 아니면 언제쯤 받아볼 수 있는지 확인 부탁드립니다.감사합니다.

컴포넌트들 에셋상에서 폴더값으로 분류시키는거요~ 똑같이 컴포넌트명에 폴더명 쓰고 / 처리했는데 왜 에셋상에서 폴더링이 안되는거죠?

시간이 지나서 강의를 들어서인지 그 동안 피그마 업데이트가 좀 많이 된거 같더라구요버튼 프로퍼티와 인스턴스 스왑 하실때 아래 1번 그림에서 만드는게 맞는지토글 버튼을 활용해 아이콘을 껏다 켰다 했는데 그부분이 2번 그림에서 진행하는게 맞는지 확인 부탁드립니다.12.

흰색 도화지 캔버스 세로축 크기 늘렸다 줄였다 하는 기능 어디에 있을까여?

먼저, 저는 선생님이 하신대로 하단바 고정이 안되서 계속 고생하다가 결국 해결했는데~ fixed(stay in place) 선택하기전에 하단바 Constraint를 Scale(생략가능?) + bottom으로 설정을 해놓고서 fixed를 해야하는게 맞는거죠?1번 방법으로 시정해서 하단바 고정은 잘 되었는데, 프로토타이핑에서 전체 화면은 특정 디바이스(ex. 아이폰 13 mini)로 보이게 하고 진짜 화면처럼 해당 화면 사이즈 내에서 하단바 고정시키려면 어떻게 해야하는거예요? 프레임 중간에 하단바를 놓는건 아닐거잖아요? ㅎ

공유 주신 피그마 url 404에러 뜹니다

안녕하세요. 실습 시작 강의에서 node.js설치법이 강의 노트에 있다고 하는데, 안보여서 질문 드립니다.개인적으로 다운 받아 설치 코자 하는데, Docker, fnm 중에서 어떤 걸 선택해야 하는지 모르겠네요혹, 제가 노트에서 못 찾고 있다면 노트 위치를 설명해 주심 감사하겠습니다. 답변 부탁드립니다. 

안내해주신 링크를 눌러 디스코드에 참여하려는데 없는 링크거나 참여 권한이 없다고 뜹니다..ㅠㅠ

시험장 visual studio 2022에 emmet 설치 되어 있습니까?! -> Tab이 되지 않으면 기본 구문 외워서 다 쳐야 합니까?그리고, 시험장에 최신 버전 visual studio 2022 설치 되어 있습니까? 이때까지 visual studio 2019로 연습했었는데요.

안녕하세요, 강의보며 따라 연습하고 있는데7- 상품확대 인터랙션 만들기 4:21 쯤에서상품확대 인스턴스 붙여넣기 후 사진 레이어에 이미지 배치했다고 했는데 어떻게 배치가 된것일까요? 사진 이미지가 보이지않고 인스턴스 상태로만 보입니다.

tab쪽 보더를 tab1과 tab2에 따로 보더를 주셨는데 한번에 줘도 될까요? 왜 따로주셨는지도 궁금해요.tabs > div { border: 1px solid #000; height: 169px; padding: 0 10px; }이런식으로 하는게 더 깔끔하지 않을까 싶어서요

안녕하세요, 혹시 섹션 12의 예제 파일을 어디서 찾을 수 있을까요? 저와 같은 질문을 하신 수강생 분이 계셔서https://www.inflearn.com/course/%ED%94%BC%EA%B7%B8%EB%A7%88-ui%EB%94%94%EC%9E%90%EC%9D%B8/news/90808해당 링크에 가서 확인해보았지만 강의가 추가로 업데이트 되면서 순서가 달라진 것인지, 섹션 12 강의 내용에 맞는 피그마 파일이 아닌 다른 섹션의 피그마 파일이 올려져있었습니다. 섹션 12에 해당하는 예제 파일을 다운받을 수 있는 링크를 다시 한 번 알려주실 수 있으실까요?

영상에선 패스하셨지만네비게이션 서브메뉴 보더 중간없애고 테두리만 있게어떻게 하는지 알수있을까요?

안녕하세요 튜터님강의를 너무 잘보고있습니다! 고민하던 많은 부분이 해소되고있어 감사한 마음이에요 ㅠㅠ강의를 듣던중 평소 가지고있던 몇가지 질문과, 강의에서 파생되는 질문들이 있어 아래 문의남깁니다! [Shadow 여러겹 효과를 주는 이유] shadow효과의경우 튜터님께서도 강의에서 2개 값을 주신것처럼 1개 값만 주기보다는 2개씩 추가해 값을 주는경우가 많은것같은데요. 보다 섬세하게 그림자를 표현하기 위함일까요? (그렇다고 3~4개를 넣는 경우는 못본것같은데, 이렇게 레이어를 쌓듯이 그림자를 많이 추가하는 경우가 있을까요?)  2개를 넣었을때 위에 들어가는 수치와 아래 들어가는수치가 각각 의미하는게 강의에서처럼 큰 그림자, 잔그림자로 생각하면 될런지요? 너무 사소한건데 볼때마다 왜 다들 2개씩 추가해서 쓰게되었을까 궁금했던 부분이라 궁금해서 문의드립니다^^; [1개의 뜻에 여러 용어가 쓰이는경우] 모달 뒷배경의경우에 스크림이라고 나와있는데, overaly, dimmed 이런 용어도 혼용해서 많이 쓰고있는것같아서.. 혹시 3개가 각 의미하는바가 다를까요?   팀에서도 디자이너마다 비슷한데 다르게 쓰고있는 용어들이 종종 있어서 통일을 해야겠다 싶은데, 각자 입에 붙은용어가 편하다보니.. 어떤 기준으로 통일을 제안할수 있을까 싶은데 튜터님은 비슷한 상황이면 어떤 기준으로 통일을 하시나요?  [레이어명 작업] 그리고 또하나 사소한것일수 있는데, 튜터님은 작업하실때 레이어이름을 디자인 할때마다 그때그때 수정하시나요? 빠르게 작업하다보면 신경을 못쓸때가 있는데 나중에 정리하려면 너무 레이어가 많아서 엄두가 안나더라구요. 이런경우는 디자인시스템이 확립되면 많이 수월해질것같은 부분이긴 하지만요.   레이어 이름을 매번 수정해야하는것, 그리고 어떤 레이어이름을 써야할지 이또한 컴포넌트화되어있지 않으면 매번 통일해서 쓰기가 (다른 디자이너와도 일관되게 사용하는게 어렵고, 스스로도 대소문자, 레이어 명칭을 모든 화면에 통일해서 쓰는게) 번거롭고 일관성 유지하기가 어렵다는 생각이 드는데 이런 어려움이 있으셨거나 해결하고 계신 방법이 있으신지 문득 궁금하여 긴 질문글 남깁니다..! [라이브러리를 고려해 디자인시스템을 만들때 주의할점] 저희 개발자분들이 tailwind, shadcn 라이브러리를 사용하는데.. 라이브러리를 고려해 디자인시스템을 만들때 주의해야하는점이 있을까요? 디자인시스템을 막 만들려고 하는 초기단계라, 어떤점을 고려해야좋을지싶어서요.   우선은 컴포넌트의 경우 라이브러리를 활용할수있는 컴포넌트(date pick과 같은)는 디자인을 해놓지 않고, 라이브러리에 없거나, 있다고하더라도 다른 형태의 디자인이 필요하다 생각하는경우는 디자인팀에서 컴포넌트로 만들고 개발팀에서 사용하게 하는 방식을 고민해보고 있어요.  라이브러리마다 토큰 형식이 정해져있다면 그 방식도 따라야하나 싶은데, 토큰은 라이브러리와 관계없이 정해도 되는걸까요? (추후 주로 쓰는 라이브러리가 변경될수도 있으니..?)  [멀티프로젝트 대응을 위한 디자인시스템] 디자인시스템 만드는 과정에서 너무많은 변수를 고민하고, 완벽한 시스템을 기준에 두고 생각하다보니, 보게되는 자료도 너무많고, 각 회사마다 스타일도 다르고 이것저것 고민하다보니 속도가 안나서 고민이었거든요.. 특히나 지금 만들려고하는 시스템은 멀티브랜드도 아니고 멀티 프로젝트에 대응할수있는것을 만들려다보니, 보통은 인하우스나 멀티브랜드용 시스템들이라 이런 목적의 디자인시스템 케이스가 없더라구요.   이런경우에도 강의에서 멀티브랜드용으로 생성했던 테마 베리어블을 적용하면 이점이 많이 있을까요? 이렇게 에이전시성격의 멀티프로젝트를 응대하는 디자인시스템중에 참고할만한 레퍼런스가 있는지 아시는지도 궁금해 함께 여쭤봅니다..!  사소한 질문들도 남긴것 같아서 다소 질문이 길어졌네요.. 천천히 답을 주셔도 너무 감사할것 같습니다! 그럼 좋은하루되세요 🙂

<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="Chrome"> <meta name="viewport" content="width-device-width, initial-scale-1.0, maximum-scale-1.0, minimum-scale-1.0, user-scalable-no"> <title>Portfolio - Navbar</title> <!-- saved from url=(0013)about:internet--> <!-- icon --> <script src="https://kit.fontawesome.com/64fe4437c7.js" crossorigin="anonymous"></script> <!-- fonts --> <link href="https://fonts.googleapis.com/css2?family=Heebo:wght@100..900&family=Noto+Sans+KR:wght@100..900&display=swap" rel="stylesheet"> <!-- user style --> <link rel="stylesheet" href="/css/portfolio.css"> </head> <body> <header class="header-area navbar-fade" id="header"> <nav class="Navbar"> <a class="Navbar-brand" id="navbarBrand">logo</a> <a class="Navbar-toggler" id="toggleBtn"><i class="fa fa-bars"></i></a> <div class="Navbar-menu" id="menu"> <div class="nav-item"><a class="nav-link" id="navbarAbout">about</a></div> <div class="nav-item"><a class="nav-link" id="navbarService">service</a></div> <div class="nav-item"><a class="nav-link" id="navbarPortfolio">portfolio</a></div> <div class="nav-item"><a class="nav-link" id="navbarReview">review</a></div> </div> </nav> </header> <!-- user script --> <script src="portfolio.js"></script> </body> </html>웨에거는 portfolio.html이고 아래거는 portfolio.css인데, 아이콘 적용도 안되고, css적용도 안되요! 고쳐주세요!/* COMMON */ * { margin: 0; padding: 0; font-size: 0; } body { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; word-break: break-all; font-family: 'Heebo', sans-serif; } img { width: 100%; height: 100%; } a { text-decoration: none; font-size: 14px; text-transform: uppercase; } ul { list-style-type: none; } /* HEADER */ .header-area { position: relative; top: 0; left: 0; width: 100%; z-index: 99; background-color: white; box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3); } .navbar-fade { animation-name: navbar-fade; animation-duration: 0.5s; -webkit-animation-name: navbar-fade; -webkit-animation-duration: 0.5s; } @keyframes navbar-fade { from {opacity: .4} to {opacity: 1} } @-webkit-keyframes navbar-fade { from {opacity: .4} to {opacity: 1} } .header-area.navbar-fixed { position: fixed; } .header-area > .navbar { width: calc(100% - 120px); margin: 0 60px; overflow: hidden; } @media (min-width: 992px) { .header-area > .navbar { max-width: 900px; margin: 0 auto; } } @media (min-width: 1200px) { .header-area > .navbar { max-width: 1000px; } } .header-area > .navbar > .navbar-brand { display: inline-block; position: absolute; top: 50%; transform: translateY(-50%); font-size: 32px; cursor: pointer; } .header-area > .navbar > .navbar-toggler * { font-size: 32px; } .header-area > .navbar > .navbar-toggler { float: right; height: 70px; line-height: 70px; font-size: 32px; cursor: pointer; } @media(min-width: 992px) { .header-area > .navbar > .navbar-toggler { display: none; } } .header-area > .navbar > .navbar-menu { position: absolute; background-color: rgba(0, 0, 0, 0.5); top: 70px; left: 0; width: 100%; height: 200px; transition: 0.5s ease; overflow: hidden; } .header-area > .navbar > .navbar-menu.show { height: 200px; } .header-area > .navbar > .navbar-menu > .nav-item { float: none; display: block; height: 50px; line-height: 50px; } .header-area > .navbar > .navbar-menu > .nav-item:hover * { background-color: rgba(0, 0, 0, 0.4); } .header-area > .navbar > .navbar-menu > .nav-item > .nav-link { display: block; padding-left: 50px; color: white; cursor: pointer; } @media (min-width: 992px) { .header-area > .navbar > .navbar-menu { position: relative; background-color: transparent; float: right; top: 0; width: auto; height: auto; transition: none; } .header-area > .navbar > .navbar-menu.show { height: auto; } .header-area > .navbar > .navbar-menu > .nav-item { display: inline-block; height: 70px; line-height: 70px; } .header-area > .navbar > .navbar-menu > .nav-item:hover * { background-color: transparent; } .header-area > .navbar > .navbar-menu > .nav-item > .nav-link { display: block; padding: 0 20px; color: black; } }css파일을 css폴더에 넣고 <link rel="stylesheet" href="/css/portfolio.css">로 불러오기를 했는데 안되요!