묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨피그마 배리어블을 활용한 디자인 시스템 구축하기
브랜치 지정 사용시 개발 버전관리 문의
피그마 베리어블 강의 잘 듣고 현재 개발자와 회사 디자인 시스템 가이드 구축중입니다. 피그마에서 브런치 기능이 있는데요.. 브런치 기능과 깃업을 연결해서 버전 관리 하는 방법이 있는지 문의 드리고.혹시 그런 기능이 없다면, 개발 버전 관리를 어떤식으로 피그마에서 사용하는지 강의나 문서 볼 수 있는 곳이 있을까요? ㅜㅜ 개발자들이 문의를 하는데 암것도 모르겠네요ㅜㅜ
-
미해결피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
SF Pro Text
에릭 선생님 안녕하세요! 종합 실전 예제 제작 중 폰트 적용이 안되어 질문드립니다.SF Pro Text 폰트는 어디에서 다운 받을 수 있을까요? 감사합니다.
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
제 느낌대로 레이아웃을 짜봤는데 이렇게 해도 되는건가요 ?
<!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; } 이런식으로 짜도 상관없는건지 물어보고싶습니당.
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
content-inner는 왜필요한건가요 ??
감이 좀 잘 안잡히는데.. contentinner를 없애고 해도 레이아웃이 잘 나와서,,,,
-
해결됨피그마 배리어블을 활용한 디자인 시스템 구축하기
웹표준 컬러 체크 질문
안녕하세요. 웹 표준 컬러에 대해 질문드립니다.혹시 피그마에서 화면단위로 컬러 대비 점수를 확인 할 수 있는 방법이 있을까요?최소 AA 이상이 나와야한다고 하는데, 컬러 잡을 때 고려하지 못해서..이와 관련해서 컬러 시스템 구축때 어떻게 구축을 하고, 만약 고려하지 못했을 때 보완하는 방법은 어떤게 있을까요..?
-
미해결반응형 웹사이트 포트폴리오(Architecture Agency)
안녕하세요. 질문있어서 조심스레 글을 올려봅니다.
page-scroll-effect를 맨 상단 비주얼부분에만 적용하고나머지 section 들은 높이값을 갖도록 하고싶은대요.혹시 알수 있을까요? 말주변이 없어서 아래 이미지를 그렸습니다. ㅠㅠ
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
다운로드한 교재랑 강의 교재가 달라서 너무 불편하네요.
다운로드한 교재 순서대로 진도 나가는 것도 아니라서 매번 교재 어디인지 찾는 것도 불편하고 막상 없는 자료를 찾다 보니 짜증 납니다. 강의 중에 사용 중인 PPT도 올려주시면 좋겠습니다.
-
미해결피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
피그마 cut style delete style 차이점
[섹션11] 피그마 cut style delete style 차이점 뭔가요
-
해결됨피그마 배리어블을 활용한 디자인 시스템 구축하기
완강 이벤트 관련 질문!
완강 이벤트는 기간 혹은 기한이 있나요?
-
해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
시험시 HTML 작성과 포토샾 작업 중 어느 것을 먼저합니까?
로고, 슬라이드, 갤러리, 배너, 바로가기 이미지 작업 HTML 작성 후에 해야 합니까? 시험지 보고 먼저 제작 해 두어야 합니까?HTML 작성 하다가 중간 중간 제작해야 합니까?
-
해결됨피그마 배리어블을 활용한 디자인 시스템 구축하기
textfield에 맞는 font size 정의
안녕하세요, 볼드 멘토님 🙂 강의를 들으며 현재 버튼과 텍스트필드를 구축해보는 중에 궁금사항이 생겨 질문드리게 되었습니다. 해상도마다 텍스트필드 사이즈에 따라 placeholder나 label 등의 폰트 사이즈가 다르게 구성되도록 구축해야하는지 궁금합니다.이런 식으로 텍스트필드 위 아래에 들어갈 요소들을 사이즈별로 구축을 해야할 필요성이 있는건지 적응형, 반응형에 따라 달라지는건지 궁금합니다. meterial design system은 버튼이나 텍스트필드가 하나로 정해져서 나오는것 같은데 figma design system은 버튼 사이즈마다 안 텍스트 크기가 다 다르게 구축이 되어있어서 서비스마다의 차이인건지 궁금합니다!ㅠㅜ감사합니다-!
-
해결됨피그마 배리어블을 활용한 디자인 시스템 구축하기
질문이 있습니다!(공유해 주신 자료)
안녕하세요 볼드님.강의를 듣다가 궁금한 부분이 있어 질문 남깁니다.공유해 주신 자료중 컴포넌트 프로퍼티 워크시트 와 베리어블 시트 차이가 뭔지 잘 모르겠습니다!현재 출시된 제품내 컴포넌트들을 나누고 있는데 어떤시트를 활용 하는게 좋을까요?정확히는 컴포넌트 프로퍼티 워크시트의Working Status/Accessibility/Documentation 부분이 어떤것에 대한 내용인지 잘 이해가 안갑니다.
-
해결됨부트스트랩을 활용한 반응형 웹제작 [실전편] 부트캠프
캐러셀이 좌우로 움직이지 않아요 ㅠㅠ
https://getbootstrap.com/docs/4.6/components/carousel/#with-captions위 사이트에서 똑같이 따라했는데..캐러셀이 좌우로 움직이지않고 그냥 뚝뚝 깜빡이면서다음걸로 바뀌어요 ㅠㅠ 이렇게도해보고 저렇게도 해보는데 안되요 ㅠㅠㅠㅠ<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Fabicorn --> <link rel="shortcut icon" href="/img/favicon.ico" type="image/x-icon"> <title>부트스트랩 1강</title> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous"> <!-- fontawesome cdn --> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous"> <!-- animate.css --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/> <!-- my style --> <link rel="stylesheet" href="css/mystyle.css"> </head> <body> <div class="container-fluid"> <header id="top"> <!-- Captions --> <div id="topCarousel" class="carousel" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#topCarousel" data-slide-to="0" class="active"></li> <li data-target="#topCarousel" data-slide-to="1"></li> <li data-target="#topCarousel" data-slide-to="2"></li> <li data-target="#topCarousel" data-slide-to="3"></li> <li data-target="#topCarousel" data-slide-to="4"></li> </ol> <div class="carousel-inner"> <!-- 01 --> <div class="carousel-item active"> <img src="/img/carousel_1.jpg" class="d-block w-100" alt="..."> <div class="carousel-caption d-none d-md-block"> <h5>First slide label</h5> <p>Some representative placeholder content for the first slide.</p> </div> </div> <!-- 02 --> <div class="carousel-item"> <img src="/img/carousel_2.jpg" class="d-block w-100" alt="..."> <div class="carousel-caption d-none d-md-block"> <h5>Second slide label</h5> <p>Some representative placeholder content for the second slide.</p> </div> </div> <!-- 03 --> <div class="carousel-item"> <img src="/img/carousel_3.jpg" class="d-block w-100" alt="..."> <div class="carousel-caption d-none d-md-block"> <h5>Third slide label</h5> <p>Some representative placeholder content for the third slide.</p> </div> </div> <!-- 04 --> <div class="carousel-item"> <img src="/img/carousel_4.jpg" class="d-block w-100" alt="..."> <div class="carousel-caption d-none d-md-block"> <h5>Third slide label</h5> <p>Some representative placeholder content for the third slide.</p> </div> </div> <!-- 05 --> <div class="carousel-item"> <img src="/img/carousel_5.jpg" class="d-block w-100" alt="..."> <div class="carousel-caption d-none d-md-block"> <h5>Third slide label</h5> <p>Some representative placeholder content for the third slide.</p> </div> </div> </div> <button class="carousel-control-prev" type="button" data-target="#topCarousel" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </button> <button class="carousel-control-next" type="button" data-target="#topCarousel" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </button> </div> <!-- Captions end --> </header> </div> <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) --> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script> <!-- my script --> <script src="js/myscript.js"></script> </body> </html>
-
해결됨피그마 배리어블을 활용한 디자인 시스템 구축하기
Local Variable 등록
안녕하세요 강사님local variables에 여러개의 생삭을 한번에 등록 하는 방법으로 색상표를 만들고 낱개별로 하나씩 이름을 지정해준 다음 Stlyer플러그인으로 스타일 등록 후 Styles to Variables로 등록해주는 순서로 해보았는데 혹시 한번에 더 많은 색상을 최종적으로 local variables 에 등록 할수있는 방법이 있을까요?
-
미해결피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
파워포인트의 화면설계서와 같은....Description은...
에릭선생님!샘 강의 완강했고요. 덕분에 몇단계 경험치가 올라간 듯 싶습니다. 감사드리고요.한가지 질문이 있는데요.파워포인트로 현업들과 협의하면서 화면설계서를 기획자가 작성을 하고그 화면설계서를 웹디자이너, 퍼블리셔, 개발자에게 배포이런 식으로 개발 프로젝트를 진행하고 있다면 피그마로 화면설계서를 대체할만한 노하우나 예시가 될만한 탬플릿이 있을까요?강의에서 설명하신 섹션 15. 핸드오프 강의를 봤을 때 예제 피그마 파일에서 description(보통 ppt 화면설계서 양식에 있는..) 부분이 없어서요. 에릭샘께서는 보통 개발자들과 소통을 어떻게 하시는지 궁금합니다.
-
미해결피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
강의 교안 요청
좋은 강의 잘 듣고 있습니다.강의 교안 공유 요청하고 싶어 문의 글 남깁니다!jjjunn@naver.com 입니다.감사합니다!
-
미해결애플 웹사이트 인터랙션 클론!
React에서 load 상태를 어떻게 감지할 수 있을까요?
안녕하세요. 강의 재미있게 완강하였습니다.Next.js에 애니메이션을 구현해보려고 하는데요.현재는 load event 대신 useEffect안에서 기능들을 호출하는 방식으로 구현하였는데, useEffect는 DOM요소들이 생성이 완료되는 시점에서 기능이 실행되어 이미지들의 다운로드가 다 완료되지 않은 상태에서도 Loading 화면이 끝나버립니다.useEffect안에서 onLoad나 eventListener load를 시도해보았지만 다른 eventListener와 다르게 제대로 동작하지 않는 현상이 발생합니다.혹시 답변이 가능하시다면 React에서는 Resource의 다운로드 완료 시점을 어떻게 알 수 있을지 조언 부탁드립니다!
-
미해결구글 애드센스 수익형 워드프레스 블로그 만들기
선생님 저좀 도와주세요
선생님 워드프레스 처음인데요 애드센스 신청할려고하면 오류떠요 코드 스니펫 ads 하면 오류떠요 유튜브 따라해도 계속 오류나요 도와주세요
-
해결됨피그마 배리어블을 활용한 디자인 시스템 구축하기
디자인 시스템을 만드는 중 버튼 관련 질문이 있습니다.
만드려고 하는 방식은 Leading/Trailing Icon property를 넣어 껐다 켰다 하고 싶습니다. 동시에 버튼에 boolean variable을 넣어 skeleton모드를 껐다 켰다 하려고 합니다.만든 컴포넌트는 다음과 같은 형태로, row는 버튼, skeleton에는 스켈레톤 컬러를 입혀놓은 상태입니다.여기서 Icon 프로퍼티를 껐을 때 다음과 같이 아이콘 영역만큼 줄어드는 것이 아니라 왼쪽으로 밀리기만 하는데, 해결 방법이 있을까요? 더불어 버튼의 width 값도 자유롭게 늘렸다 줄였다 하고싶은데, 컴포넌트 프레임만 조절되며 안의 버튼은 fix된 상태입니다ㅠㅠ
-
해결됨피그마 배리어블을 활용한 디자인 시스템 구축하기
섹션4
섹션 410강 / 1시간 59분입력(Input) 컴포넌트 만들어보기처음 시작 때 에쎗으로 만들어논게 없는데 어느 강의부터 참고해서 이어지는 내용인가요 bold plus 에도 아이콘은 없고 그러다보니 버튼 컴포넌트 강의 중 하트 아이콘 인스턴스 선택지가 없습니다.
