묻고 답해요
164만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨[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로 설정해주니 정상 작동 되었습니다. 왜 이렇게 되는 것인가요?
-
미해결[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
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 */ 슬라이드 배너가묘하게 어긋나는데 어떤부분이 문제인지 모르겠어 질문 드립니다.
-
미해결[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
D,E,F유형 포토샵 질문
D,E,F유형 작업시 슬라이드,배너,갤러리 이미지는 어떤사이즈로 제작해야하는지 시험지에 기재 돼 있는 부분일까요?
-
미해결[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
실기시험 질문
포토샵 작업시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는 불린 기능 설정인데 그 왼쪽옆에 ◑ 반원의 아이콘이 있더라고요....이게 일반적으로 만들때는 안생기던데 일부러 추가한건지 숨겨진 기능이 있는것인지 궁금합니다.
-
해결됨[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
브레드크럼 인스턴스에서 Underline 넣는 방법
브레드크럼 파트에서 수강 중 질문드립니다!브레드크럼 인스턴스의 Label text property가 수정되면 Style을 Underline으로 변경이 안됩니다. Underline을 넣고 싶으면 브레드크럼 컴포넌트 셋트에서 적용해야 인스턴스에도 적용되는데, 이렇게 하는게 맞는지 궁금합니다.우선 강의를 들어주셔서 감사합니다. 강의 들으시면서 궁금하신 부분을 남겨주세요. 회사 일 관계로 빠른 답변이 어려울 수 있으며, 최대 3일 이내에 답변드리도록 하겠습니다. 이해를 돕기 위해서 스크린샷 이미지, 피그마 파일 링크를 반드시 첨부해주세요. 마지막으로 먼저 유사한 질문이 있는지 한번 찾아보시는 걸 권장 드립니다. 인프런 서비스 운영 관련해서는 1:1 문의하기로 인프런 쪽으로 연락 주시기 바랍니다.
-
미해결[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
A2 작업하는데 공지사항 내용이 아래로 내려가지 않습니다.
이렇게 가로로 배치되어집니다. 뭐가 문제인걸까요 ㅠㅠ + 애초에 이렇게 공지사항 내용이 적힌 a 메뉴를 하나만 더 적어도 이렇게 가려집니다... ㅠㅠ심지어 저 상황은 지금 갤러리 css까지 다 지웠는데도 이럽니다.... ㅠㅠㅠ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/stylesheet.css"> <title>A2</title> </head> <body> <div class="container"> <header> <div class="header-logo"> <a href="#"> <img src="img/headerlogo.png" alt="header-logo"> </a> </div> <div class="navi"> <ul class="menu"> <li> <a href="#">재단소개</a> <div class="sub-menu"> <a href="#">설립취지</a> <a href="#">연혁</a> <a href="#">찾아오시는 길</a> </div> </li> <li> <a href="#">후원하기</a> <div class="sub-menu"> <a href="#">국내후원</a> <a href="#">국외후원</a> <a href="#">맞춤후원</a> </div> </li> <li> <a href="#">자료실</a> <div class="sub-menu"> <a href="#">서식자료실</a> <a href="#">사진자료실</a> <a href="#">후원양식</a> </div> </li> <li> <a href="#">스토리</a> <div class="sub-menu"> <a href="#">웹진</a> <a href="#">보고서</a> <a href="#">나의 후원</a> </div> </li> </ul> <div class="sub-back"> <!-- 슬라이드 부분을 가려야 하므로 따로 생성하기 (어차피 이 내비게이션 어려운거 맞음) 주의사항: ul 밑에 넣어야함!!! 형제 요소로 넣어!! --> </div> </div> </header> <div class="slide"> <div class="slide-items"> <a class="slide-item" href="#"> <img src="img/slide1.png" alt="slide1"> </a> <a class="slide-item" href="#"> <img src="img/slide2.png" alt="slide2"> </a> <a class="slide-item" href="#"> <img src="img/slide3.png" alt="slide3"> </a> </div> </div> <div class="items"> <div class="notice"> <div class="tab-inner"> <div class="btn"> <span>공지사항</span> </div> </div> <div class="tab"> <a href="#">Green 복지재단 공지사항1 2020.11.23</a> <a href="#">Green 복지재단 공지사항1 2020.11.23</a> </div> </div> <div class="gallery"> <a href="#"> <img src="img/gallery1.png" alt="gallery1"> </a> <a href="#"> <img src="img/gallery2.png" alt="gallery2"> </a> <a href="#"> <img src="img/gallery3.png" alt="gallery3"> </a> </div> <div class="banner"> <a href="#"> <img src="img/banner.jpg" alt="banner"><span class="banner-text">Banner</span> </a> </div> </div> <footer> <div class="footer-logo"> <a href="#"> <img src="img/footerLogo.png" alt="footer-logo"> </a> </div> <div class="copyright"> COPYRIGHTⓒ by WEBDESIGN. ALL RIGHTS RESERVED </div> <div class="familysite"> <select> <option>패밀리사이트1</option> <option>패밀리사이트2</option> <option>패밀리사이트3</option> </select> </div> </footer> </div> <script src="js/jquery-1.12.4.js"></script> <script src="js/custom.js"></script> </body> </html>@charset "utf-8"; body{ margin: 0; font-size: 15px; background-color: #fff; color: #333333; } a{ text-decoration: none; color: #333333; } /* .container{} */ .header-inner{ /* border: 1px solid red; */ background-color: #d58c71; } header{ width: 1200px; margin: auto; height: 100px; position: relative; z-index: 10; } header>div{ /* border: 1px solid blue; */ height: 100px; } .header-logo{ width: 200px; float: left; } .navi{ width: 600px; float: right; } /* .content-inner{} */ .slide{ width: 1200px; height: 300px; position: relative; overflow: hidden; margin: auto; } .slide-items{ width: 3600px; font-size: 0; position: absolute; top: 0; left: 0; } .slide>div{ /* border: 1px solid green; */ height: 300px; } .items{ width: 1200px; margin: auto; overflow: hidden; } .items>div{ /* border: 1px solid purple; */ height: 200px; float: left; box-sizing: border-box; } .notice{ width: 500px; } .gallery{ width: 350px; } .banner{ width: 350px; } .footer-inner{ /* border: 1px solid red; */ background-color: #eee; } footer{ width: 1200px; margin: auto; overflow: hidden; } footer>div{ /* border: 1px solid purple; */ height: 100px; float: left; box-sizing: border-box; } .footer-menu{ width: 1000px; } .footer-menu div{ /* border: 1px solid palevioletred; */ height: 50px; box-sizing: border-box; } .familysite{ width: 200px; } /*모듈 이외 부분*/ .header-logo{ line-height: 130px; text-align: center; } .gallery a{ text-align: center; padding: 5px; } .gallery a img{ text-align: center; padding-top: 45px; transition: 0.1s; } .gallery a img:hover{ opacity: 50%; } .banner a img{ width: 350px; height: 200px; } .under-menu{ text-align: center; } .under-menu a{ line-height: 50px; padding: 10px; } .copyright{ text-align: center; line-height: 45px; } .familysite{ text-align: center; line-height: 90px; } .familysite select{ width: 100%; text-align: center; padding: 8px; } /*내비게이션*/ .menu{ margin-top: 59px; list-style: none; padding: 0; } .menu li{ /* border: 1px solid red; */ float: left; box-sizing: border-box; width: 25%; text-align: center; } .menu li>a{ /* border: 1px solid red; */ background-color: #a7634a; color: white; padding: 10px; display: block; transition: 0.5s; } .menu li:hover>a{ background-color: #e8a891; color: #333333; } .sub-menu{ height: 130px; display: none; } .sub-menu a{ background-color: #e8a891; padding: 10px; display: block; transition: 0.5s; } .sub-menu a:hover{ background-color: #a7634a; color: white; } .sub-back{ position: absolute; width: 100%; height: 200px; top: 100%; right: 0; background-color: #e8a891; z-index: -1; display: none; }
-
해결됨[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
Lock Aspect Ratio 관련
우선 강의를 들어주셔서 감사합니다. 강의 들으시면서 궁금하신 부분을 남겨주세요. 회사 일 관계로 빠른 답변이 어려울 수 있으며, 최대 3일 이내에 답변드리도록 하겠습니다. 이해를 돕기 위해서 스크린샷 이미지, 피그마 파일 링크를 반드시 첨부해주세요. 마지막으로 먼저 유사한 질문이 있는지 한번 찾아보시는 걸 권장 드립니다. 인프런 서비스 운영 관련해서는 1:1 문의하기로 인프런 쪽으로 연락 주시기 바랍니다. ============================================================안녕하세요. 해당 질문관련 검색을 해보았지만 나오지 않는 것같아서 문의드립니다. 현재 8-8 만능으로 쓰이는 기본 카드를 수강중에 있습니다.Lock Aspect Latio의 플러그인이 사라졌는지 검색을 해도 이것밖에 안나오더라구요.저 첫번째 것을 사용하면 강의내용처럼 원하는 대로 나오지 않습니다. 방법이 있는지 아니면 제가 검색을 잘못했는지 알고 싶습니다. 감사합니다!!
