묻고 답해요
164만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
[섹션4] 입력 컨포넌트 마지막 정리하기 질문!
[섹션4] 입력 컨포넌트 마지막 정리하기 질문!있습니다!File>Pages에 "INPUTS"에 모두 옮기고 나면, Assets에서 검색시 두개가 나옵니다!File>Pages에 "INPUTS"에 모두 옮기라는 말씀이 복사 붙여넣기가 아니라 잘라서 붙여넣기로 해야하는걸까요?저번 질문에 답변주셔서 너무 감사합니다! 강의 열심히 듣고 있습니다!우선 강의를 들어주셔서 감사합니다. 강의 들으시면서 궁금하신 부분을 남겨주세요. 회사 일 관계로 빠른 답변이 어려울 수 있으며, 최대 3일 이내에 답변드리도록 하겠습니다. 이해를 돕기 위해서 스크린샷 이미지, 피그마 파일 링크를 반드시 첨부해주세요. 마지막으로 먼저 유사한 질문이 있는지 한번 찾아보시는 걸 권장 드립니다. 인프런 서비스 운영 관련해서는 1:1 문의하기로 인프런 쪽으로 연락 주시기 바랍니다.
-
해결됨[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
5기 스터디는 없는걸까요!
5기 스터디는 따로 없는걸까요?!우선 강의를 들어주셔서 감사합니다. 강의 들으시면서 궁금하신 부분을 남겨주세요. 회사 일 관계로 빠른 답변이 어려울 수 있으며, 최대 3일 이내에 답변드리도록 하겠습니다. 이해를 돕기 위해서 스크린샷 이미지, 피그마 파일 링크를 반드시 첨부해주세요. 마지막으로 먼저 유사한 질문이 있는지 한번 찾아보시는 걸 권장 드립니다. 인프런 서비스 운영 관련해서는 1:1 문의하기로 인프런 쪽으로 연락 주시기 바랍니다.
-
해결됨[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
레이어 이름 정의시, 대문자 소문자 차이는 무엇인가요?
레이어 이름 정의시, 대문자 소문자 차이는 무엇인가요?Page에서 이름 정의시, 대소문자 기준이 있는지도 궁금합니다!(제가 디자이너가 아닌 기획자다보니, 디자이너의 생각을 알고 싶습니다!)우선 강의를 들어주셔서 감사합니다. 강의 들으시면서 궁금하신 부분을 남겨주세요. 회사 일 관계로 빠른 답변이 어려울 수 있으며, 최대 3일 이내에 답변드리도록 하겠습니다. 이해를 돕기 위해서 스크린샷 이미지, 피그마 파일 링크를 반드시 첨부해주세요. 마지막으로 먼저 유사한 질문이 있는지 한번 찾아보시는 걸 권장 드립니다. 인프런 서비스 운영 관련해서는 1:1 문의하기로 인프런 쪽으로 연락 주시기 바랍니다.
-
미해결[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
화면이 많이 짤리는데 이유가 뭘까요 ?
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="/레이아웃css/08_공자사항갤러리탭구성.css" /> </head> <body> <div class="container"> <div class="header-inner"> <header> <div class="header-logo"></div> <div class="header-navi"></div> </header> </div> <div class="content-inner"> <div class="slide"> <div></div> </div> <section class="items"> <article class="news-gallery"> <div class="tab-inner"> <div class="btn"> <a href="#none" class="active">공지사항</a> <a href="#none">갤러리</a> </div> <div class="tabs"> <div class="tab1"> <a href="#none" >SMS 발송 서비스 개선작업 <span>2020.01.09</span> </a> <a href="#none" >휴대폰 인증 서비스 개선 작업 <span>2020.01.07</span> </a> <a href="#none" >카드사 부분 무이자 할부 이벤트 <span>2019.12.31</span> </a> <a href="#none" >올앳 시스템 작업 안내 <span>2019.12.20</span> </a> <a href="#none" >휴대폰 결제 시스템 작업 안내 <span>2019.12.20</span> </a> </div> <div class="tab2"> <a href="#none"> <img src="/IMAGES/gallery-01.jpg" alt="" /> </a> <a href="#none"> <img src="/IMAGES/gallery-02.jpg" alt="" /> </a> <a href="#none"> <img src="/IMAGES/gallery-03.jpg" alt="" /> </a> </div> </div> </div> </article> <article class="banner"></article> <article class="barogo"></article> </section> </div> <div class="footer-inner"> <footer> <div class="copyright"></div> <div class="sns-family"> <div></div> <div></div> </div> </footer> </div> </div> <script src="https://code.jquery.com/jquery-1.12.4.js" integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU=" crossorigin="anonymous" ></script> <script src="/script/08_공지사항갤러리탭구성.js"></script> </body> </html> body { margin: 0; } .container { } .header-inner { background-color: #ddd; display: flex; justify-content: center; } header { border: 1px solid black; width: 1200px; display: flex; justify-content: space-between; box-sizing: border-box; } .header-logo { width: 200px; height: 100px; border: 1px solid black; box-sizing: border-box; } .header-navi { width: 600px; height: 100px; border: 1px solid black; box-sizing: border-box; } .content-inner { display: flex; flex-direction: column; align-items: center; } .slide { border: 1px solid black; width: 1200px; box-sizing: border-box; } .slide div { height: 300px; box-sizing: border-box; } .items { display: flex; } .items > article { border: 1px solid black; height: 200px; box-sizing: border-box; } .news-gallery { width: 500px; } .banner { width: 350px; } .barogo { width: 350px; } .footer-inner { background-color: #ddd; display: flex; justify-content: center; } footer { width: 1200px; display: flex; } footer > div { height: 100px; border: 1px solid black; box-sizing: border-box; } .copyright { width: 1000px; } .sns-family { width: 200px; } .sns-family > div { height: 50px; border: 1px solid black; box-sizing: border-box; } .tab-inner { width: 97%; margin: auto; } .btn { font-size: 0; } .btn a { font-size: 16px; border: 1px solid black; display: inline-block; width: 100px; text-align: center; padding: 3px; border-radius: 5px 5px 0 0; background-color: #ddd; cursor: pointer; border-bottom: none; margin-bottom: -1px; text-decoration: none; color: #000; } .btn a.active { background-color: #fff; } .tabs { } .tabs > div { border: 1px solid #000; height: 155px; padding: 0 10px; } .tab1 { } .tab1 a { display: block; text-decoration: none; color: #000; border-bottom: 1px solid black; padding: 5px; } .tab1 a:last-child { border-bottom: none; } .tab1 a span { float: right; } .tab2 { display: none; justify-content: center; align-items: center; } .tab2 img { width: 110px; padding: 10px; } // tap Content $('.btn a:first-child').click(function () { $('.tab1').show(); $('.tab2').hide(); $('.btn a:first-child').addClass('active'); $('.btn a:last-child').removeClass('active'); }); $('.btn a:last-child').click(function () { $('.tab1').hide(); $('.tab2').show().css('display', 'flex'); $('.btn a:last-child').addClass('active'); $('.btn a:first-child').removeClass('active'); }); 코드 사항은 이러합니다. 근데 화면 축소를 하면 다보이는데 100%로 해놓고 브라우저 크기를 줄이면 옆으로 움직이는 스크롤바가없이 짤리는데 이유가 뭘가요 ?
-
미해결[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
2. 공지사항, 갤러리 별도로 구성하기(HTML+CSS) html 파일은 어딨나요 ?
■ 질문 남기실 때 꼭! 참고해주세요.- 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다.질문 하실 때 어떤 유형인지 말씀해주세요. ex) 완성본만 있구 와이어프레임만있는 html파일은 어딨나요 ?
-
미해결[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
각 타입별 이미지 크기 제작 / 주조색&보조색
각 타입별 이미지 크기 제작할 때 가. A,B타입 (width: 1200px, height: 300px) 나. C타입 (width: 800px, height: 350px)로 제작하면 되는데 D,E,F유형에는 100%로 구성되어있는데 전체 몇 px로 구성해서 만들면되는지 궁금합니다. 주조색&보조색의 의미가 궁금합니다...
-
미해결[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
레이아웃을 혼자 플렉스로 하고있는데 레이아웃이 좀 보더를 벗어난거같은데 상관없나요?
■ 질문 남기실 때 꼭! 참고해주세요.- 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다.질문 하실 때 어떤 유형인지 말씀해주세요. ex) A1 작업하는데 ???이 안됩니다감점사항인가요 ? 이런것두 ?
-
미해결부트스트랩 5(Bootstrap 5) - 기초부터 웹 프로젝트 만들기
부트스트랩 + *.css 함께 사용하는 이유와 분리 기준이 궁금합니다.
안녕하세요. 현재 강의 중 프로젝트 1 단계를 진행중에 궁금점이 생겨 질문 드립니다.index.html 파일 디자인에 부트스트랩 만으로 작업 하지 않고 순수 css 를 함께 이용하시는데요.분류 원칙이 따로 있으신가요? 예를 들면 section 요소에 배경이미지는 *. css 파일에 position : relative, position : absolute 처리도 *.css 에서 처리를 하시네요.
-
해결됨[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
브랜치 지정 사용시 개발 버전관리 문의
피그마 베리어블 강의 잘 듣고 현재 개발자와 회사 디자인 시스템 가이드 구축중입니다. 피그마에서 브런치 기능이 있는데요.. 브런치 기능과 깃업을 연결해서 버전 관리 하는 방법이 있는지 문의 드리고.혹시 그런 기능이 없다면, 개발 버전 관리를 어떤식으로 피그마에서 사용하는지 강의나 문서 볼 수 있는 곳이 있을까요? ㅜㅜ 개발자들이 문의를 하는데 암것도 모르겠네요ㅜㅜ
-
미해결피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
SF Pro Text
에릭 선생님 안녕하세요! 종합 실전 예제 제작 중 폰트 적용이 안되어 질문드립니다.SF Pro Text 폰트는 어디에서 다운 받을 수 있을까요? 감사합니다.
-
미해결[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
제 느낌대로 레이아웃을 짜봤는데 이렇게 해도 되는건가요 ?
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="/레이아웃css/02_레이아웃가로100.css" /> </head> <body> <div class="container"> <div class="header-container"> <header> <div class="header-logo"></div> <div class="navi"></div> </header> </div> <div class="slide-container"> <div class="slide"> <div></div> </div> </div> <div class="items-container"> <div class="items"> <div class="item1"></div> <div class="item2"></div> <div class="item3"></div> </div> </div> <div class="footer-container"> <footer> <div class="footer-logo"></div> <div class="footer-box"> <div class="footer-navi"></div> <div class="copyright"></div> </div> </footer> </div> </div> </body> </html> -------------------------------------------- .container { } .header-container { border: 1px solid red; } header { margin: auto; border: 1px solid black; height: 100px; width: 1200px; } header > div { border: 1px solid black; height: 100px; box-sizing: border-box; } .header-logo { width: 200px; float: left; } .navi { width: 1000px; float: right; } .slide-container { } .slide { border: 1px solid black; margin: auto; width: 1200px; height: 300px; } .items-container { overflow: hidden; } .items { border: 1px solid black; width: 1200px; margin: auto; } .items > div { border: 1px solid black; width: 400px; height: 200px; float: left; box-sizing: border-box; } .footer-container { border: 1px solid red; } footer { overflow: hidden; border: 1px solid black; width: 1200px; margin: auto; } footer > div { border: 1px solid black; height: 100px; box-sizing: border-box; } .footer-logo { width: 200px; float: left; } .footer-box { width: 1000px; float: right; } .footer-box > div { height: 50px; border: 1px solid black; } 이런식으로 짜도 상관없는건지 물어보고싶습니당.
-
미해결[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
content-inner는 왜필요한건가요 ??
감이 좀 잘 안잡히는데.. contentinner를 없애고 해도 레이아웃이 잘 나와서,,,,
-
해결됨[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
웹표준 컬러 체크 질문
안녕하세요. 웹 표준 컬러에 대해 질문드립니다.혹시 피그마에서 화면단위로 컬러 대비 점수를 확인 할 수 있는 방법이 있을까요?최소 AA 이상이 나와야한다고 하는데, 컬러 잡을 때 고려하지 못해서..이와 관련해서 컬러 시스템 구축때 어떻게 구축을 하고, 만약 고려하지 못했을 때 보완하는 방법은 어떤게 있을까요..?
-
미해결반응형 웹사이트 포트폴리오(Architecture Agency)
안녕하세요. 질문있어서 조심스레 글을 올려봅니다.
page-scroll-effect를 맨 상단 비주얼부분에만 적용하고나머지 section 들은 높이값을 갖도록 하고싶은대요.혹시 알수 있을까요? 말주변이 없어서 아래 이미지를 그렸습니다. ㅠㅠ
-
미해결[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
다운로드한 교재랑 강의 교재가 달라서 너무 불편하네요.
다운로드한 교재 순서대로 진도 나가는 것도 아니라서 매번 교재 어디인지 찾는 것도 불편하고 막상 없는 자료를 찾다 보니 짜증 납니다. 강의 중에 사용 중인 PPT도 올려주시면 좋겠습니다.
-
미해결피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
피그마 cut style delete style 차이점
[섹션11] 피그마 cut style delete style 차이점 뭔가요
-
해결됨[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
완강 이벤트 관련 질문!
완강 이벤트는 기간 혹은 기한이 있나요?
-
해결됨[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
시험시 HTML 작성과 포토샾 작업 중 어느 것을 먼저합니까?
로고, 슬라이드, 갤러리, 배너, 바로가기 이미지 작업 HTML 작성 후에 해야 합니까? 시험지 보고 먼저 제작 해 두어야 합니까?HTML 작성 하다가 중간 중간 제작해야 합니까?
-
해결됨[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
textfield에 맞는 font size 정의
안녕하세요, 볼드 멘토님 🙂 강의를 들으며 현재 버튼과 텍스트필드를 구축해보는 중에 궁금사항이 생겨 질문드리게 되었습니다. 해상도마다 텍스트필드 사이즈에 따라 placeholder나 label 등의 폰트 사이즈가 다르게 구성되도록 구축해야하는지 궁금합니다.이런 식으로 텍스트필드 위 아래에 들어갈 요소들을 사이즈별로 구축을 해야할 필요성이 있는건지 적응형, 반응형에 따라 달라지는건지 궁금합니다. meterial design system은 버튼이나 텍스트필드가 하나로 정해져서 나오는것 같은데 figma design system은 버튼 사이즈마다 안 텍스트 크기가 다 다르게 구축이 되어있어서 서비스마다의 차이인건지 궁금합니다!ㅠㅜ감사합니다-!
-
해결됨[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
질문이 있습니다!(공유해 주신 자료)
안녕하세요 볼드님.강의를 듣다가 궁금한 부분이 있어 질문 남깁니다.공유해 주신 자료중 컴포넌트 프로퍼티 워크시트 와 베리어블 시트 차이가 뭔지 잘 모르겠습니다!현재 출시된 제품내 컴포넌트들을 나누고 있는데 어떤시트를 활용 하는게 좋을까요?정확히는 컴포넌트 프로퍼티 워크시트의Working Status/Accessibility/Documentation 부분이 어떤것에 대한 내용인지 잘 이해가 안갑니다.
