묻고 답해요
158만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
9번강의 피그마 pracrice 수업자료 어디에?
안녕하세요 9번 수업관련해 피그마 자료 어디서 확인할수있나요? 강의내용 그대로 따라해보고싶은데요
-
미해결코딩 몰라도 OK! CursorAI로 시작하는 개발 생활 (웹/초급)
뽀모도로 insert 버튼이 안나오고 에러가 뜹니다
뽀모도로 이제 막 시작했는데, ctrl + j, ctrl+k 인가 눌러서 말씀하신 명령어 입력했더니 화살표 처럼 나옵니다.insert 라는게 안떠서 그냥 엔터 눌렀더니 아래 빨간 글자로 막 오류가 뜨네요 ㅠㅠ어떻게 해야 제대로 설치가 될까요?
-
미해결코딩 몰라도 OK! CursorAI로 시작하는 개발 생활 (웹/초급)
node.js 설치 링크가 안열립니다
실습 첫강의 수업노트에 링크 눌렀는데1번 사진처럼 존재하지 않는 사이트라고 뜨네요ㅠㅠ링크 수정 및 전달 부탁드립니다! ㅠㅠ얼른 만들어보고싶은데 진행을 못 하고 있습니다! 답변 기다리겠습니다. 감사합니다:)
-
해결됨[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
81번 강의 오류로 강의 수료증 발급을 못 받고 있습니다.
82번처럼 내용이 있으면 완강 표시가 되는것 같은데 81번은 아무 내용이 없어서 그런지 강의 완료 표시 자체가 안먹고 있습니다. 완강 후 수료증을 제출해야 하는데 이 강의 오류 때문에 수료증 발급이 안되고 있어요
-
해결됨[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
타이포그래피 네이밍 관련해서 궁금한게 있습니다.
🔍 상황현재 타이포그래피 스타일 명명 방식에 대해 고민이 있습니다. 개발자 측에서는Display1-Bold 와 같이 위계 중심의 토큰 네이밍을 선호합니다.코드 연동 시에는 스타일명이 그대로 토큰으로 등록되기 때문에40px 같은 구체적인 수치를 굳이 명칭에 포함할 필요가 없고,오히려 수치가 변경될 경우 네이밍까지 수정해야 하는 유지보수 이슈가 발생합니다.디자이너 측에서는Figma 내에서 스타일을 빠르게 식별하고 사용하기 위해Display1-Bold-40px처럼 사이즈가 명시된 스타일 네이밍을 선호합니다.수치가 함께 있어야 작업 중 빠르게 위계를 파악하고 적용하기 수월하다는 의견이 있습니다. 🙋🏻 질문이러한 상황에서 다음과 같은 고민이 있습니다: 디자이너가 스타일 명에서 수치를 보고 싶은 니즈와개발자는 위계 중심의 명칭을 유지하고 싶은 니즈를동시에 충족시킬 수 있는 구조가 있을까요?예를 들어 Figma 내에서 디자이너는 Display1-Bold-40px처럼 수치를 보고 작업하되,코드로 내보낼 때는 Display1-Bold로만 연동되는 방식이 가능한지,혹은 실제 조직에서는 이런 상황을 어떻게 운영하고 있는지 궁금합니다.
-
해결됨[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
라이브러리 스왑관련 문의입니다
안녕하세요!라이브러리 스왑관련 문의입니다manage libraries에서 updates와browse libraries에 teams에서 라이브러리 스왑이 가능한걸로 아는데요 이 2개 라이브러리 업데이트 기능에 대한자세한 설명과 차이점을 알고 싶습니다.
-
미해결뉴욕 프로덕트 디자이너가 알려주는, 입문자를 위한 UX디자인 개론
UI 디자인 원리가 잘 적용된 사례와 아닌 사례
게슈탈트 이론이 잘 엮여진 사례 넷플릭스제목 아래 영상들이 배치되어있고 그 사이에 행간이 좁다같은 연관성이 있는 영상들끼리 서로 같은 그룹으로 묶여있다. 아닌 사례요즘엔 워낙 다 웹사이트가 잘되어있어서 찾지 못하겠습니다근데 토스랑 카카오뱅크를 제외한 모든 은행사이트들이 엄청나게 짜증나는 건 알겠습니다 ㅠㅠㅋㅋ
-
해결됨[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
로딩 스피너 크기 조절
섹션 7의 41. 로딩스피너 9:37부근 질문 드립니다레이아웃을 고정하고 안에 있는 백터를 스케일을 조절해서 사용하시는데 질문이 있습니다.1. 영상을 따라하려고했지만 이미지처럼 defult를 16으로, spinner segmants 레이어를 16으로 둘다 postion에서 sacle으로 맞춰주도 보이지 않습니다. 이 상태에서 vector을 클릭하면 우측패널이 잠궈지고 48로 되어있습니다.. 어떻게 해야할지 모르겠네요.K을 눌러서 수정하는 방법으로는 왜 제대로 돌아가지 않나요? 회전 축과 sacle의 관계가 어떻게 되는건지 궁금합니다.
-
해결됨[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
A1 작업하는데 와이어프레임이 무너지고, hover일부가 적용 안되고 메뉴바가 슬라이드를 밀어냅니다. 탭메뉴도 작동하지 않습니다..
이곳저곳 실수가 너무 많은데 처음 연습하는거다보니까 어디서부터 잘못된건지 혼자 알기가 너무 어려워 질문글 올립니다. ㅜㅜ 어디가 잘못된건지 지적 꼭 좀 부탁드립니다.<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>Just 쇼핑몰</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <header> <div class="header-logo"> <a href="#none"><img src="images/header-logo.jpg" alt="헤더로고"></a> </div> <div class="navi"> <ul class="menu"> <li>탑 <div class="sub-menu"> <a href="#none">블라우스</a> <a href="#none">티</a> <a href="#none">셔츠</a> <a href="#none">니트</a> </div> </li> <li>아우터 <div class="sub-menu"> <a href="#none">자켓</a> <a href="#none">코트</a> <a href="#none">가디건</a> <a href="#none">머플러</a> </div> </li> <li>팬츠 <div class="sub-menu"> <a href="#none">청바지</a> <a href="#none">짧은바지</a> <a href="#none">긴바지</a> <a href="#none">레깅스</a> </div> </li> <li>악세서리 <div class="sub-menu"> <a href="#none">귀고리</a> <a href="#none">목걸이</a> <a href="#none">반지</a> <a href="#none">팔찌</a> </div> </li> </ul> </div> </header> <div class="slide"> <div class="slide-items"> <a href="#none" class="slide-item"><img src="images/slide-1.jpg" alt="슬라이드1"></a> <a href="#none" class="slide-item"><img src="images/slide-2.jpg" alt="슬라이드2"></a> <a href="#none" class="slide-item"><img src="images/slide-3.jpg" alt="슬라이드3"></a> </div> </div> <div class="items"> <div class="news"> <div class="tab-inner"></div> <div class="btn"> <a href="#none" class="btn1">공지사항</a> <a href="#none" class="btn2">갤러리</a> </div> <div class="tabs"> <div class="tab1"> <a href="#none"> SMS 발송 모바일 서비스 개선작업 안내입니다.<b>2020.01.09</b></a> <a href="#none">휴대폰 인증 서비스 개선 작업 기간 연장합니다.<b>2020.01.07</b></a> <a href="#none">카드사 부분 무이자 할부 이벤트 2월 3일까지 혜택<b>2019.12.31</b></a> <a href="#none">올앳 시스템 작업 안내<b>2019.12.20</b></a> <a href="#none">휴대폰 결제 시스템 작업이 완료되었습니다.<b>2019.12.20</b></a> </div> <div class="tab2"> <a href="#none"><img src="images/pic.jpg" alt="이미지1"></a> <a href="#none"><img src="images/pic1.jpg" alt="이미지2"></a> <a href="#none"><img src="images/pic2.jpg" alt="이미지3"></a> </div> </div> </div> </div> <div class="banner"> <a href="#none"><img src="images/banner.jpg" alt="배너"></a> </div> <div class="shortcut"> <a href="#none"><img src="images/shortcut.jpg" alt="쇼컷"></a> </div> </div> <footer> <div class="footer-logo"> <a href="#none"><img src="images/footer-logo.jpg" alt="푸터로고"></a> </div> <div class="copyright"> <a href="#none">법적고지 개인정보취급방침 개인정보처리방침<br>상호 : 엣지컴퍼니 | 대표자 : 홍길동 | 개인정보관리책임자 : 장길산 차장 <br>사업장주소 : 서울특별시 강남구 테헤란로 123-56</a> </div> <div class="SNS"> <a href="#none"><img src="images/sns-01.png" alt=""></a> <a href="#none"><img src="images/sns-02.png" alt=""></a> <a href="#none"><img src="images/sns-03.png" alt=""></a> </div> </footer> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/custum.js"></script> </body> </html>@charset "utf-8"; body{ margin: 0; background-color: #fff; color: #333333; font-size: 15px; } body a{ text-decoration: none; color: #333333; } .container{ width: 1200px; margin: auto; } header{ height: 100px; border: red solid 1px; box-sizing: border-box; position: relative; z-index: 10; } .slide{ height: 300px; width: 1200px; border: red solid 1px; box-sizing: border-box; position: relative; overflow: hidden; } .items{ height: 200px; border: red solid 1px; box-sizing: border-box; overflow: hidden; } footer{ height: 100px; border: red solid 1px; box-sizing: border-box; overflow: hidden; } .items > div{ height: 200px; float: left; } .footer>div{ float: left; height: 100px;} .header-logo{ width: 200px; border: red solid 1px; box-sizing: border-box; float: left; margin-top: 25px; } .navi{ width: 500px; border: red solid 1px; box-sizing: border-box; float: right; text-align: center; } .slide-items{ border: red solid 1px; box-sizing: border-box; position: absolute; height: 300px; font-size: 0; left: 0; top: 0; } .news{ width: 400px; border: red solid 1px; box-sizing: border-box; font-size: smaller; } .banner{ width: 400px; border: red solid 1px; box-sizing: border-box; font-size: 0; } .shortcut{ width: 390px; border: red solid 1px; box-sizing: border-box; font-size: 0; } .footer-logo{ width: 250px; height: 100px; border: red solid 1px; box-sizing: border-box; float: left; margin: 20px; } .copyright{ width: 700px; border: red solid 1px; box-sizing: border-box; text-align: center; height: 100px; padding-top: 10px; color: darkgray; float: left; } .sns{ width: 250px; height: 100px; border: red solid 1px; box-sizing: border-box; float: left; } .sns a img{margin: 20px;} /* 네이게이션 */ ul.menu{padding: 0px; list-style: none;} .menu li{ float: left; background: #fff; width: 25%; font-weight:bolder; } .sub-menu{ display: none; background: #fff; } .sub-menu a { display: block; background: #fff; } .menu>li>a {display: block; padding: 5px;} ul.menu li:hover > a { color: #fff; background-color: black; } ul.menu li .sub-menu a:hover{ color: #fff; background-color: black; } /* 탭메뉴 */ .btn{margin-left: 4px;} .btn a{ display: inline-block; border: #333333 1px solid; border-radius: 5px 5px 0 0; width: 100px; text-align: center; margin-right: -6px; background-color: #ddd; margin-bottom: -3px; border-bottom: none; } .tab-inner{width: 80%; margin: auto; border: 1px solid #000; box-sizing: border-box;} .tab1{border: 1px solid #000; padding: 0 10px;} .tab1 a{ display: block; padding: 5px; border-bottom: #333333 1px solid; } .tab1 a:last-child{border-bottom: none;} .tab1 a b {float: right; font-weight: normal;} .tab2{ border: 1px solid #000; display: none; height: 165px; text-align: center; padding-top: 20px; box-sizing: border-box; } .btn a.active {background-color: #fff;} $(".menu li").mouseenter(function(){ $('.sub-menu').stop().slideDown() }) $(".menu li").mouseleave(function(){ $('.sub-menu').stop().slideUp() }) $('.slide-item:gt(0)').hide() setInterval(function(){ $('.slide-item:first-child').fadeOut(500).next().fadeIn(500) $('.slide-item:first-child').appendTo('.slide-items') },3500) $('.btn a:first-child').click(function(){ $('.tab1').show() $('.tab2').hide() $(this).addClass('active') $(this).siblings().removeClass('active') }) $('.btn a:last-child').click(function(){ $('.tab2').show() $('.tab1').hide() $(this).addClass('active') $(this).siblings().removeClass('active') }) $(this).addClass('active') $(this).siblings().removeClass('active')
-
해결됨[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
typography 설정시 엑셀
해당 엑셀 자료가 어디에 있는지 못찾겠네요 ㅠㅠ..
-
미해결코딩 몰라도 OK! CursorAI로 시작하는 개발 생활 (웹/초급)
prd 내용이 강의노트에 없습니다.
안녕하세요.강의를 잘 듣고 있습니다.prd 자료가 강의 노트에 없습니다.가능하면citymir@naver.com으로 자료를 부탁드립니다.
-
미해결나만의 포트폴리오 웹페이지 만들기
CSS가 적용이 안됩니다.
/* ABOUT AREA */ .about-area { height: auto; position: relative; } .about-area > .picture { display: block; text-align: center; padding: 20px; } @media (min-width: 992px) { .about-area > .picture { width: calc(40% - 40px); display: inline-block; } } .about-area > .picture > img { max-width: 300px; max-height: 300px; border-radius: 15px; } .about-area > .picture > .name { font-size: 25px; text-align: center; padding: 15px 0; } .about-area > .picture > .description { font-size: 14px; font-family: 'Noto Sans KR', sans-serif; } .about-area > .text { display: block; padding: 30px; } @media (min-width: 992px) { .about-area > .text { width: calc(60% - 100px); display: inline-block; padding: 0 50px; } } .about-area > .text * { font-size: 16px; }4-2. CSS 강의에서분명 똑같은 방식으로 붙여넣었지만 소개 글 및 정보란이 사진 오른쪽으로 가지 않습니다... 어떻게 해야할까요
-
해결됨[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
25강 Setting 관련 오류
안녕하세요 제가.. 디자인까지 배워야할지 몰랐는데 따라하다 보니 재미있네요. 다만, 25강에서 하기 publish 하면 오류가 있어서.. 어떻게 고칠수 있을까요?
-
미해결뉴욕 프로덕트 디자이너가 알려주는, 입문자를 위한 UX디자인 개론
[좋은 UX과 안 좋은 UX 사례]
좋은 UX유저에겐 좋은 UX가 아니지만 인스타그램 끊임없이 보면서 뭔가를 사기도 좋은 구조 같아서 훅이 있는 것 같습니다 검색창에 검색하면 관련 광고가 떠서 낮은 의도의 사용자도 낚을 수 있는 것 같습니다 나쁜 UX토스모든 메뉴들이 숨겨져 있는 것 같습니다
-
해결됨[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
[19강]시맨틱 베리어블 - 폰트
우선 강의를 들어주셔서 감사합니다. 강의 들으시면서 궁금하신 부분을 남겨주세요.안녕하세요.19강 15분쯤 듣고 있는데요,properties 에서 밑줄(-) 이 있는데 이건 정의가 안된것일까요 ? 회사 일 관계로 빠른 답변이 어려울 수 있으며, 최대 3일 이내에 답변드리도록 하겠습니다. 이해를 돕기 위해서 스크린샷 이미지, 피그마 파일 링크를 반드시 첨부해주세요. 마지막으로 먼저 유사한 질문이 있는지 한번 찾아보시는 걸 권장 드립니다. 인프런 서비스 운영 관련해서는 1:1 문의하기로 인프런 쪽으로 연락 주시기 바랍니다.
-
미해결구글 애드센스 수익형 워드프레스 블로그 만들기
랭크메쓰 설정방법 질문
저는 위에 같이 나오는데 어떻게 설정하면 될까요?
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
footer 높이 값
세로 2칼럼(C2타입) Part ①』 영상 18분 58초 지점에서, 강사님께서 footer > div에 height: 100px를 적용하시던데, 혹시 이 부분의 높이는 50px이 맞는 값이 아닌가요?footer의 높이가 100px로 주어졌는데footer > div에 height: 100px를 적용하면 실제 높이는 200px 아닌가요?
-
미해결뉴욕 프로덕트 디자이너가 알려주는, 입문자를 위한 UX디자인 개론
[과제제출] 좋은 UX 사례와 안좋은 UX 사례
안녕하세요,좋은 UX 사례와 안좋은 UX 사례 과제 제출합니다. 1.좋은 사례-지하철 개찰구 카드 인식기-이유: 직관적으로 카드를 인식하는 아이콘이 있음으로써 사용자 행동에 혼선을 주지 않음 2.안좋은 사례 -네이버 어플 하단 메뉴바-이유: 되돌아가기와 스토어 버튼의 간격이 좁아 사용자가 사용시 오작용할 가능성이 높음
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
div 상하분배?가 안돼요
■ 질문 남기실 때 꼭! 참고해주세요.- 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다.질문 하실 때 어떤 유형인지 말씀해주세요. ex) A1 작업하는데 ???이 안됩니다.2강 가로 고정형 레이아웃 A3 유형 푸터 부분 변형하는 것 듣다가 선생님 따라 똑같이 썼는데도 푸터 부분의 div가 변형이 안되고 이런식으로 분배가 돼요. 3-4번 반복해서 코드 쓰신거 보고 있는데 뭐가 다른지 모르겠어요 ㅠㅠ엉엉
-
미해결구글 애드센스 수익형 워드프레스 블로그 만들기
404 페이지 푸터가 안보이네요 ㅠ
404페이지 푸터가 안보이는데 다시보이게 설정하려고 매니저>에서 푸터에서 글로벌 푸터 선택했는데도 안보이네요 무슨문제일까요?
