묻고 답해요
158만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
라벨이나 chip에 열 개 정도 컬러가 들어갈 때
안녕하세요. 서비스 특성 상, 리스트에 들어가는 chip 컬러가 엄청 다양하게 쓰입니다ㅜ 그럴 경우엔 어떻게 컬러를 묶으면 좋을까요?
-
해결됨[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
Design Kits관련 질문.
안녕하세요. Design Kits관련 질문을 드립니다.지금은 강의를 다 듣고 질문을 드리는데, 초반에 Foundation + Component Library로 하는걸 알려주셨는데, 계속 잘 안되어서 몇일을 시도를 하다가 그냥 Desgin Kits로 진행을 했었습니다. 지금이라도 다시 하는게 좋을까요? 아니면 Design Kits대로 그냥 가도 되는건지 궁금합니다.이제 만든거를 바탕으로 실제 Product에 만들 시기가 점점 다가오고 있는데, 따로 하는게 맞긴 한데, 이미 만들어놔서 좀 아깝긴하네요... 어떻게 하는게 좋은지 조언해주시면 감사드리겠습니다~!
-
해결됨[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
아이콘
볼드님 항상감사합니다.. ! 아이콘은 괜찮은데 Union을 했는데도 저렇게 표시되는 이유는 무엇일까요? 제대로 먹히지 않은걸까요??
-
해결됨[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
피그마 라이브러리 연결 문의건
안녕하세요!강의 잘 들고 있습니다.^^피그마 라이브러리 연결관련 문제로 문의드립니다.현재 외부업체와 협업중인데요!보안문제로 로컬파일로 파일을 주고 받아야 합니다.그런데 라이브러리가 연결된 파일이지만 전달 받으면 그안에 연결된 컴포넌트가 해제되어라이브러리 업데이트를 할수 없는 상황입니다. (라이브러리 스왑기능도 안됨) 라이브러리가 업데이트되면 연결된 파일도 업데이트를 해줘야 하는데 할때마다 연결을 할수가 없어라이브러리가 연결된 상태로 로컬파일을 주고 받을 수 없을까요?? (플러그인이나 다른 방법)
-
해결됨[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
플러그인 lock aspect ratio
안녕하세요 선생님! 강의 잘 듣고 있습니다다름이 아니라, 제가 지금 설명해주신 플러그인인 lock aspect ratio를 활용해서 카드를 만드려고 하는데, 해당 플러그인이 검색이 되지 않아 질문 드립니다. 혹시 해당 플러그인을 사용해야 하는건지, 또는 피그마 자체 기능으로 있는 lock aspect ratio라는 기능을 사용해도 되는건지 질문드립니다 우선 피그마에 있는 기능으로 사용을 해봤는데, 이 기능의 경우 선생님이 정리하시는 레이어처럼 레이거가 별도로 생성이 되지 않아서요..!
-
미해결애플 웹사이트 인터랙션 클론!
스크롤 속도에 따른 messageA_opacity_out
강사님처럼 똑같이 코드를 작성했음에도 불구하고 스크롤을 천천히 내리면 opacity가 0까지 잘 적용이되는데 스크롤을 빨리내리면 opacity가 0으로 빠지다가 그상태로 남아서 씬2까지 넘어가요.혹시 왜그런지 알 수 있을까요?
-
해결됨모던 웹 인터렉티브 CSS3 부트캠프 [Full vers.]
스프링과정은 언제출시되요?
개인적으로 스프링 과정을 기다리고있습니다. 자바는 학원에서 어느정도했기에.... 스프링과정 출시 예정일이 궁금합니다. 이커리큘럼에 남은 단계가 2개맞지요?? 스프링과 스프링 포토폴리오 과정 이렇게 2개 예상되는데.... 둘다 출시예정시기즘 알수있을까요?
-
해결됨[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
상단에 위치하는 글로벌 네비게이션(Global Navigation/Header) 관련 질문드립니다.
우선 강의를 들어주셔서 감사합니다. 강의 들으시면서 궁금하신 부분을 남겨주세요. 회사 일 관계로 빠른 답변이 어려울 수 있으며, 최대 3일 이내에 답변드리도록 하겠습니다. 이해를 돕기 위해서 스크린샷 이미지, 피그마 파일 링크를 반드시 첨부해주세요. 마지막으로 먼저 유사한 질문이 있는지 한번 찾아보시는 걸 권장 드립니다. 인프런 서비스 운영 관련해서는 1:1 문의하기로 인프런 쪽으로 연락 주시기 바랍니다. 안녕하세요. 섹션 9의 상단에 위치하는 글로벌 네비게이션(Global Navigation/Header)를 듣는중 궁금한점이 있어서 질문드립니다. 사실 이미 듣고 나서 해결되지 않은 것때문에 후속에서도 계속 사용되니 문제가 되어서 질문드립니다. global navigation에서 모바일 설정시에 이런식으로 나와서 제가 수정을 열심히 해봤는데도 잘 되지 않아서 어떻게 해야 햄버거 버튼이 오른쪽으로 붙는지 잘 모르겠습니다. 현재 구조는 아래와 같으며, Container는 Auto layout의 fill로 설정되어 있고, 햄버거 버튼은 아래와 같으며, 로고는 아래와 같이 설정되어 있습니다. 되도록이면 혼자서 해보려고 했는데, 몇일동안 해결을 하지 못하여서 질문을 드립니다.감사합니다.
-
미해결바~로 실습! 개념몰라도 됨, HTML 시작
온라인명함만들기 중간부분이 없어요...
html 입문부터 수강하고 있습니다. 온라인명함만들기 부분 이해가 너무 잘되게 설명해주셔서 잘보고 있는데요visual studio code 로 레이아웃잡기영상 다음에 컨텐츠부분 코딩하기 가 나오는데요.레이아웃 잡은 후에 버튼영역이 있는 부분 영상이 없어서요...컨텐츠부분 코딩하기 영상보면 앞부분이 이미 코딩이 되어있는 상태로 수업이 진행됩니다.빠진 부분은 볼 수 없는 걸까요?
-
미해결피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
Auto Layout 적용이 되지 않습니다
안녕하세요오토 레이아웃 기능을 추가할 경우Frame의 일부 기능이 Fixed로 기본 지정되어 직접 Hug Contents로 설정해주어야 정상적으로 오토 레이아웃이 적용됩니다.두 요소를 함께 선택해 auto layout 추가 시 기본적으로 저렇게 세팅이 되고, 제가 직접 hug contents로 설정해주니 정상 작동 되었습니다. 왜 이렇게 되는 것인가요?
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
slide-banner 위치 문제
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>E-1</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <div class="header-inner"> <header> <div class="header-logo"> <a href="#none"><img src="images/header-logo.png" alt="logo"></a> </div> <div class="nav"> <ul class="menu"> <li> <a href="#none">mainmenu</a> <div class="sub-menu"> <a href="#none">submenu</a> <a href="#none">submenu</a> <a href="#none">submenu</a> <a href="#none">submenu</a> </div> </li> <li> <a href="#none">mainmenu</a> <div class="sub-menu"> <a href="#none">submenu</a> <a href="#none">submenu</a> <a href="#none">submenu</a> <a href="#none">submenu</a> </div> </li> <li> <a href="#none">mainmenu</a> <div class="sub-menu"> <a href="#none">submenu</a> <a href="#none">submenu</a> <a href="#none">submenu</a> <a href="#none">submenu</a> </div> </li> <li> <a href="#none">mainmenu</a> <div class="sub-menu"> <a href="#none">submenu</a> <a href="#none">submenu</a> <a href="#none">submenu</a> <a href="#none">submenu</a> </div> </li> </ul> </div> </header> </div> <div class="slide"> <div class="slide-banner"></div> <div class="slide-content"> <a href="#none"><img src="images/slide-e-01.jpg" alt="slide"></a> <a href="#none"><img src="images/slide-e-02.jpg" alt="slide"></a> <a href="#none"><img src="images/slide-e-03.jpg" alt="slide"></a> </div> </div> <div class="content-inner"> <div class="items"> <div class="shortcut"></div> <div class="news-gallery"></div> </div> <footer> <div class="footer-logo"> <a href="#none"><img src="images/footer-logo.png" alt="logo"></a> </div> <div class="footer-content"> <div> <a href="#none">기업소개</a> <p>|</p> <a href="#none">제휴 및 입점 문의</a> <p>|</p> <a href="#none">이용약관</a> <p>|</p> <a href="#none">개인정보처리방침</a> <p>|</p> <a href="#none">이메일무단수집거부</a> <p>|</p> <a href="#none">사이트맵</a> <p>|</p> <a href="#none">인재채용</a> </div> <div> <p> 상호 : (주)코딩웍스 | 대표자 : 홍길동 | 개인정보관리책임자 : 성춘향 부장 <br> 사업장주소 : 경기도 남양주시 별내동 1234 코딩웍스 빌딩 6층 (주)코딩웍스 </p> </div> </div> </footer> </div> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom.js"></script> </body> </html>@charset "utf-8"; body { color: #666; background: #fff; margin: 0; } a { color: inherit; text-decoration: none; } header { border: 1px solid #000; margin: auto; display: flex; width: 1340px; justify-content: space-between; } header > div { border: 1px solid #000; height: 100px; } .header-logo { width: 200px; } .nav { width: 800px; position: relative; } .menu { margin-top: 50px; z-index: 1; position: absolute; display: flex; padding: 0; list-style: none; } .menu a { width: 170px; display: block; padding: 10px; text-align: center; } .menu li > a { border: 1px solid #000; transition: 0.3s; } .menu li:hover > a { color: white; background: #000; } .sub-menu { display: none; border: 1px solid #000; } .sub-menu > a { background: #fff; transition: 0.3s; } .sub-menu > a:hover { color: white; background: #000; } .slide { width: 100vw; height: 350px; border: 1px solid #000; position: relative; } .slide-content { width: inherit; height: inherit; position: relative; display: flex; width: inherit; height: inherit; } .slide-content a { position: absolute; width: inherit; height: inherit; } .slide-content img { width: inherit; height: inherit; object-fit: cover; object-position:center; } .slide-banner { background: #fff; z-index: 1; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); border: 1px solid #000; width: 1340px; height: 100px; } .items > div { width: 1340px; margin: auto; border: 1px solid #000; } .shortcut { height: 150px; } .news-gallery { height: 300px; } footer { width: 1340px; margin: auto; display: flex; } footer > div { height: 120px; border: 1px solid #000; } .footer-logo { width: 200px; } .footer-content { flex: 1; } .footer-content > div { height: 50%; border: 1px solid #000; box-sizing: border-box; } /* fiexd content */ .header-logo, .footer-logo, .footer-content>div { display: flex; align-items: center; } .header-logo, .footer-logo { justify-content: center; } .footer-content>div { padding-left: 20px; } .footer-content>div:first-child>* { margin: 5px; } .footer-content>div:first-child>a { transition: 0.3s; } .footer-content>div:first-child>a:hover { color: dodgerblue; } /* fiexd content */ 슬라이드 배너가묘하게 어긋나는데 어떤부분이 문제인지 모르겠어 질문 드립니다.
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
D,E,F유형 포토샵 질문
D,E,F유형 작업시 슬라이드,배너,갤러리 이미지는 어떤사이즈로 제작해야하는지 시험지에 기재 돼 있는 부분일까요?
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
실기시험 질문
포토샵 작업시PSD 파일은 어느 파일에 저장하는지,PSD파일도 최종 작업물 폴더와 제출해야하는지이해가 잘 안돼 질문 드립니다.
-
해결됨[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
문의
21:48초 플러그인 강의에서 보면 리 네임을 할 수 있는데. 제가 깐 플러그인에서는 리네임 불가 하고 드롭 다운으로만 펼쳐져요...
-
해결됨[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
문의
미듐md 찾아서 장평? 선택하려 했는데 안떠요.. 시멘틱 베리어블 등록하고 스타일과 연결하기 편 16:50분 경 입니다.
-
해결됨[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
베리어블 적용 중 문제
우선 강의를 들어주셔서 감사합니다. 강의 들으시면서 궁금하신 부분을 남겨주세요.시멘틱 베리어블 등록하고 스타일과 연결하기 강의의 2:20초에 보면 등록된 폰트? 베리어블? 이 두개만 뜨는데,, 저는 왜이이렇게 많이 뜨는 걸까요? 회사 일 관계로 빠른 답변이 어려울 수 있으며, 최대 3일 이내에 답변드리도록 하겠습니다. 이해를 돕기 위해서 스크린샷 이미지, 피그마 파일 링크를 반드시 첨부해주세요. 마지막으로 먼저 유사한 질문이 있는지 한번 찾아보시는 걸 권장 드립니다. 인프런 서비스 운영 관련해서는 1:1 문의하기로 인프런 쪽으로 연락 주시기 바랍니다.
-
미해결피그마 시작하기
prototype-overflow 탭 문의
안녕하세요. 1-피그마의 기본, 프레임 다루기 강의prototype에서 Scroll behavior position은 설정할 수 있으나 overflow 탭이 보여지지 않습니다.현재 피그마를 무료로 사용하고있는데 유료 버전에서만 보이는 탭인지 궁금합니다.감사합니다.
-
해결됨[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
플러그인 질문
안녕하세요 볼드님해당값이 있는 베리어블 값일 경우 자동으로 등록해주는 플러그인을 설명해주셨던거 같은데요. 혹시 알 수 있을까요?
-
해결됨[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
디스플레이 파트 Accordian 스트로크 질문
안녕하세요 디스플레이 아코디언 컴포넌트에 관해서 여쭤봅니다. 아코디언에 이렇게 바텀만 스트로크를 주셨는데 볼드님 강의에서는 일직선으로 보이는데제가 한거는 아코디언 border radious 값 때문에 살짝 선이 둥글게 보이더라구요 inside outside 다 해봐도 똑같네요. 어떻게 일직선으로 만들 수 있나요? 감사합니다. 우선 강의를 들어주셔서 감사합니다. 강의 들으시면서 궁금하신 부분을 남겨주세요. 회사 일 관계로 빠른 답변이 어려울 수 있으며, 최대 3일 이내에 답변드리도록 하겠습니다. 이해를 돕기 위해서 스크린샷 이미지, 피그마 파일 링크를 반드시 첨부해주세요. 마지막으로 먼저 유사한 질문이 있는지 한번 찾아보시는 걸 권장 드립니다. 인프런 서비스 운영 관련해서는 1:1 문의하기로 인프런 쪽으로 연락 주시기 바랍니다.
-
해결됨[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
베리언트 레이어 표기 ◑ 관련 문의건
안녕하세요!강의 잘 듣고 있습니다. 한가지 문의 사항이 있는데요! 협력사 피그마 문서에 베리언트로 만든 스위치 셋트중 레이어 페이지에서 표기에서State=pressed, ◑ On/off=off 이런게 있는데요On/off는 불린 기능 설정인데 그 왼쪽옆에 ◑ 반원의 아이콘이 있더라고요....이게 일반적으로 만들때는 안생기던데 일부러 추가한건지 숨겨진 기능이 있는것인지 궁금합니다.
