묻고 답해요
129만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨피그마 배리어블을 활용한 디자인 시스템 구축하기
디자인시스템 리뉴얼 관련
안녕하세요 선생님, 강의 잘 듣고 있습니다.현재 디자인시스템 리뉴얼을 하려고 하는데 많은 도움이 되고있습니다.디자인시스템 리뉴얼 중 질문이 생겨 여쭙습니다. 이미 등록되어있는 디자인시스템이 있는데 (배리어블 말고 스타일로만 등록되어 있습니다.) 현재 디자인시스템으로 작업한 핸드오프를 계속 넘기는 작업과 동시에 디자인시스템 리뉴얼 + 전체 서비스 파악 후 리뉴얼 한 디자인시스템 적용을 해야하는 상황입니다.현재 디자인시스템과 리뉴얼할 디자인시스템이 헷갈리지 않고 적용되게 할 수 있는 방법이 있을지 궁금합니다. 특히 색상의 경우 프라이머리 컬러가 같고, 프리미티브 팔레트 내에서만 살짝씩 변화가 있어 육안으로는 구별이 힘듭니다.피그마 화면 내에서만 작업을 하고 리뉴얼 완료 시점에 배리어블, 혹은 스타일에 한번에 등록하는게 좋을까요? 어떻게 작업해도 헷갈리게 될 것 같아 혹시 좋은 방법이 있으시거나 비슷한 경험이 있으실까 하여 여쭙습니다. 항상 감사합니다!!
-
해결됨피그마 배리어블을 활용한 디자인 시스템 구축하기
디자인시스템 개발 적용 시 스토리북 연동
안녕하세요. 볼드님 디자인 시스템을 개발로 적용하는 부분에 궁금한 점이 있어 질문 남기게 되었습니다.개발 시 스토리북을 연동하여 디자인 시스템을 구축하는 것이 필수일까요? 현재 디자인 시스템을 적용하고 있지만 스토리북은 사용하고 있지 않습니다. 개발자분들께서 귀찮아서 디자인 시스템을 사용하지 않고 그냥 만들어쓴다하고 이야기하는 것을 들었습니다. 개발 업무에도 효율적으로 적용되려면 스토리북 연동이 필요한 것인지 궁금합니다.더불어 디자인 시스템을 실제로 개발에 적용하기 위해 필요한 부분에 대해서도 강의 개설해주시면 너무 좋을 것 같습니다. 감사합니다!
-
해결됨피그마 배리어블을 활용한 디자인 시스템 구축하기
프라이머리 버튼-디폴트에서 컬러 500이 아닌 600을 쓰는 이유
강의 앞부분에서 버튼 프라이머리 컬러를 500이 아닌 600으로 설정 하셨는데 왜 이렇게 하셨는지 궁금합니다.그때 강의에서는 지나가는 말씀으로 어떤 이유를 짧게 말씀해주셨고 이후 강의에서 알려주겠다고 하셨는데 제가 그 이유를 아직 못 본 것 같아서요,,,!600이 아닌 500을 쓰면 어떤 문제가 있나요?버튼의 호버, 프레스 액션에 블랙-오파시티를 위에 추가하는 방식으로 진행해도 이후 확장성 측면에서 문제가 없을까요?우선 강의를 들어주셔서 감사합니다. 강의 들으시면서 궁금하신 부분을 남겨주세요. 회사 일 관계로 빠른 답변이 어려울 수 있으며, 최대 3일 이내에 답변드리도록 하겠습니다. 이해를 돕기 위해서 스크린샷 이미지, 피그마 파일 링크를 반드시 첨부해주세요. 마지막으로 먼저 유사한 질문이 있는지 한번 찾아보시는 걸 권장 드립니다. 인프런 서비스 운영 관련해서는 1:1 문의하기로 인프런 쪽으로 연락 주시기 바랍니다.
-
해결됨피그마 배리어블을 활용한 디자인 시스템 구축하기
완강이벤트 참여 관련
안녕하세요.완강 이벤트 참여하려고 하는데, 설문조사창을 못 찾겠어서요ㅠㅠ 어디서 할 수 있을까요?? 우선 강의를 들어주셔서 감사합니다. 강의 들으시면서 궁금하신 부분을 남겨주세요. 회사 일 관계로 빠른 답변이 어려울 수 있으며, 최대 3일 이내에 답변드리도록 하겠습니다. 이해를 돕기 위해서 스크린샷 이미지, 피그마 파일 링크를 반드시 첨부해주세요. 마지막으로 먼저 유사한 질문이 있는지 한번 찾아보시는 걸 권장 드립니다. 인프런 서비스 운영 관련해서는 1:1 문의하기로 인프런 쪽으로 연락 주시기 바랍니다.
-
미해결반응형 웹사이트 포트폴리오(Architecture Agency)
섹션 17 하드코딩으로 이미지맵 만들기 부분 연습파일이 없어요..
하드코딩으로 이미지맵(image map) 만들기코딩웍스 유튜트 채널에 있는 [이미지맵(image map) 만들기]에 상세히 강좌가 있습니다.실무에서 꼭! 사용하게 되니까 한번쯤 만들어보세요.하드코딩으로 이미지맵(image map) 만들기 강좌보기https://youtu.be/21WRDP06O4s※ 연습파일 다운로드는 유튜브 영상의 [더보기]를 누르시면 다운로드 링크가 있습니다.====================================이렇게 되어 있는데 유튜브 링크 내에다운로드 링크가 없고,인프런 강의 18섹션 다운로드 부분에도 이미지맵 관련 파일은 안보이네요연습파일을 얻을 수 있을까요?
-
해결됨피그마 배리어블을 활용한 디자인 시스템 구축하기
입력컴포턴트 파일 어디있나요?
안녕하세요~ 피그마파일이 베리에이션은 있는데 입력 컴포넌트 파일이 없어서 여쭈어 드립니다. 베리에이션파일 이외에는 파일을 없으신가요? 강의에는 쉐어하셨다고 했는데 못찾아서 여쭈어 드립니다.
-
해결됨피그마 배리어블을 활용한 디자인 시스템 구축하기
icon Outline stroke
안녕하세요. 현재 Avatar 강의 듣고 있습니다. 위 사진처럼 아이콘을 삽입 후 크기 조절을 하니 stroke이 깨지지 않은 상태로 적용됩니다. icon Outline stroke을 해도 작동이 되지 않는데 해결 방법 있을까요?ㅜㅜ(*강의 잘 듣고 있습니다! 내용이 너무 좋습니다! 감사드립니다~)
-
미해결애플 웹사이트 인터랙션 클론!
게속 오류떠서 글 작성해봐요....
Uncaught TypeError: Cannot read properties of undefined (reading 'scrollHeight') at scrollLoop (main.js:367:65) at main.js:388:9 이런 오류 떠서 제 자바 스크립트 코드도 여기 올려볼께요....
-
미해결반응형 웹사이트 포트폴리오(Architecture Agency)
line-hieght를 em 단위로 쓰는 것에 대하여 질문 드립니다
jump up 이론 파트 em단위와 rem 단위 이해하기 부분 강의를 듣는 중입니다. em 단위가 부모요소에 대해 상대적으로 지정하는 단위이고line-height에 주로 쓰인다고 하셨는데그렇다면 주로 p의 폰트사이즈는 주로 p를 감싸고 있는 부모요소에 지정하고줄간격은 p 그 자체에 지정하는 것인가요?
-
해결됨피그마 배리어블을 활용한 디자인 시스템 구축하기
[실습] 색상 배리어블 등록하기 - swatchy 웹사이트가 안보입니다.
안녕하세요. 강의 초반에 나오는 swatchy 웹사이트가 없어진 것 같은데 대체할 수 있는 사이트가 있을까요? ++ styles to variables 플러그인도 작동이 안되네요ㅠ
-
해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
오늘 F3 오픈뱅킹 (23번) 유형 시험을 보고 왔습니다!
학습 질문은 아니지만 선생님께서 주변에 F유형 시험 보신 분이 없어서정보가 정확하지 않다는 것이 기억이 나서 오지랖 같아 보이지만 다른 수험생 분들과선생님께 도움이 좀 되고자 시험 끝나고 달려와 게시글을 작성합니다!이번 주 내내 이상하게 F유형이 마음에 걸렸었는데 오늘 딱 시험 보는 걸 직감했었나봅니다ㅠㅠ 강의대로.slide 안에 slide-image 와 slide-banner 로 묶어서 공부를 했는데, 시험지에서는 저희가 slide-banner 라고 칭한 부분을 지시 사항에서는 <바로 가기> 라 했고,content-inner 안에 있는 shortcut 부분을 시험지에서는 <배너> 라고 지시하고 있었습니다.그저 코드 묶는 이름만 달랐지만 F유형 준비하시는 분들은 덜 헷갈리셨으면 하는 맘에코드 명을 바꿔서 공부하는 게 어떨까 하는 생각이 들었어요!저도 중간에 '바로 가기' 지시 사항 읽으면서 평소처럼 slide-banner 로 작성하다가헷갈려서 그냥 지시 사항 요구한 이름으로 코드 이름도 통일을 시켰어요! 핑크색 박스 부분을 색칠한 부분에 대해서 말씀드릴 게 있는데요~ 기억하실지 모르겠지만..ㅠㅠ 제가 24.03.27에 F유형 slide-banner link 부분에 글자 입력하는 지시 사항이 있을 까봐 질문을 올린 적이 있습니다..! 불행하게도ㅠㅠ 제 예상처럼 시험 지시 사항에 각 엥커 마다 텍스트를 넣으라는 부분이 있었습니다.제공되는 텍스트 메모장에 삽입 하라는 텍스트가 있더라고요ㅠㅠ 그리고 총 들어가는 이미지는 레이아웃과 동일하게 5개였습니다.다만, 텍스트를 이미지 어디에 넣으라는 특정 지시는 없어서, 그래서 저는span 으로 텍스트를 입력해서 갤러리 이미지에 span을 넣은 것과 똑같이 display:block 처리를 해서 위아래로 넣고 배열하는 방식으로 만들었습니다.일러스트나 포토샵으로 이미지를 만드는 것이 아니라, 제공 된 이미지를 삽입 했어야 됐습니다..!배치를 하고 나니까 슬라이드 이미지 위에 뜬금없는 사진들을 붙여 놓은 것 같아서,저는 백그라운드 컬러를 주고 투명도 조절을 해서 슬라이드 이미지와 별개 부분인 아이콘처럼 보이게 만들었습니다. 그리고 공지사항 부분이요! 오른쪽에 선생님께서 ???ㅠㅠ 라고 하늘색으로 쓰신 부분 정말 공백이었어요!! 다만, 공지사항 부분에 엥? 하고 놀랬던 부분은, tab-inner 너비가 넓지 않을 수 있으니 공지 사항 부분에 em / b 태그를 이용해서 배치와 말 줄임을 공부하고 갔는데, 날짜 입력이 없었습니다! 그래서 편히 앵커만 넣고 블록 처리해서 중앙 배치해서 꾸몄습니다. 제가 실수한 부분은 푸터 메뉴에 보더 버텀을 안준 것과 메뉴 서브 백 width 크기를 해더 크기로 줬다는 것 두 가지인데, (A유형 sub-back처럼 만들어버렸어요ㅠ)다른 건 다 작동 잘 되고 스스로도 아 이 정도면 됐다하는 맘으로 잘 풀고 왔습니다!! ㅠㅠ 이러다 저 두 가지 문제로 떨어지면 너무 너무 창피하고 부끄러울 것 같습니다만..ㅠㅠㅠㅠ 그래도 스스로 많은 구조를 파악하고 만들 수 있다는 게 너무 뿌듯합니다.그리고 F유형이 아무래도 본 적 없는 유형이라 그런지..오늘 제가 간 시험 장에 12명이 시험 봤는데 6명이 중도 포기하고 나가셨어요..저는 모든 확인을 끝내고 제출하는 데까지 2시간 20분 정도 걸렸는데, 그 시간까지 저 포함 제출한 사람들은 3명이었고, 제가 교실 나올 때까지 3명이 남아있었습니다.4월 9일에 합격발표일인데 제발 붙었으면 좋겠습니다ㅠㅠ선생님 대면 수업이 아닌 온라인 수업이었지만 정말 많은 걸 배웠습니다ㅠㅠ감사합니다ㅠㅠ!
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
시험장에선 인터넷이 사용 되지 않는데 작업 중 확인을 위한 Open with Live Server 어떻게 확인합니까?
시험장에선 인터넷이 사용 되지 않는데 작업 중 확인을 위한 Open with Live Server 어떻게 합니까? 확인해 보고 수정해야 하는데 완성한 후가 아닌 작업 중에 확인하고자 할 때는 어떻게 합니까?
-
해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
F3번 오픈뱅킹 modal 창 질문있습니다.
F 유형에 대해 자꾸 질문 드려서 죄송합니다..ㅠㅠF1하고 F3번 modal 창을 만들면푸터 부분에 modal background-color 가 검정색으로 덮혀 지지 않은데 정상일까요?제가 잘못 만든 줄 알고 선생님께서 올려주신 최종본도 확인해봤는데쌤 최종본에서도 푸터 부분에 검정색이 적용 안되는 걸 확인해서요..!!쌤 코드랑 제 코드가 똑같아서 따로 코드는 올리지 않았습니다..이 부분이 문제가 되지 않는다면 이제 문제가 되는 유형이 없는 것 같아요..!!시험 하루 남아서 최종 점검 겸 질문 남깁니다ㅠㅠ 추가 ) Ai 답변을 보고 제 질문이 디자인 쪽으로 보여지는 것 같아서요..!의문점인 부분이 .modal 의 크기 값을 width:100 % , height: 100% 로 줘서창의 전체를 어둡게 덮게 만드는 건데,그 크기 값이 왜 height 100% 임에도 불구하고 footer에는 적용이 안되는 것 질문이었습니다..!
-
미해결퍼블리셔 개인 포트폴리오 홈페이지 제작 완벽 가이드(PDF)
카페 24 파일질라 부분 질문있습니다.
선생님 알려주신대로 잘 따라와서 드디어 포트폴리오 웹사이트가 완성됐네요 감사합니다^^위 사진은 교재 내용 일부 캡쳐해왔는데요 카페 24 웹호스팅 신청까지 완료 했고 파일질라 다운받아서 그림대로 따라하는데 6번 고급 에서 기본로컬디렉터리 에는 어떤 파일을 넣어야 하나요? 제 포트폴리오 웹사이트 파일을 넣는건가요?
-
해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
d,e유형 네비게이션 제작시 서브메뉴가 고정이 안됩니다
강의 de유형 네비게이션 7:55분초를 보면 선생님 서브메뉴는 고정되어서 잘 나오는데 제꺼는 고정이 안되고 자꾸 슬라이드 업 되어서 서브메뉴에 호버를 할수가 없습니다 제생각에는 엡솔루트 준 뒤로 이러는것 같은데..ㅠ코드올려드립니다 왜이러는걸까요 ㅠㅜhtml <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8" /> <title>D-1</title> </head> <link rel="stylesheet" href="./css/style.css" /> <body> <div class="container"> <div class="main-content"> <div class="left"> <div class="header"> <div class="header-logo"></div> <div class="menu"> <ul class="menu1"> <li> <a href="#none"> meun-1</a> <div class="sub-menu"> <a href="#none">meun-2</a> <a href="#none">meun-2</a> <a href="#none">meun-2</a> <a href="#none">meun-2</a> </div> </li> <li> <a href="#none"> meun-1</a> <div class="sub-menu"> <a href="#none">meun-2</a> <a href="#none">meun-2</a> <a href="#none">meun-2</a> <a href="#none">meun-2</a> </div> </li> <li> <a href="#none"> meun-1</a> <div class="sub-menu"> <a href="#none">meun-2</a> <a href="#none">meun-2</a> <a href="#none">meun-2</a> <a href="#none">meun-2</a> </div> </li> <li> <a href="#none"> meun-1</a> <div class="sub-menu"> <a href="#none">meun-2</a> <a href="#none">meun-2</a> <a href="#none">meun-2</a> <a href="#none">meun-2</a> </div> </li> </ul> </div> <div class="spot-menu"></div> </div> </div> <div class="right"> <div class="slide"> <div class="slide-img"></div> <div class="slide-banner"> <a href="#none"><img src="./images/banner-01.png" alt=""></a> <a href="#none"><img src="./images/banner-02.png" alt=""></a> <a href="#none"><img src="./images/banner-03.png" alt=""></a> </div> </div> <div class="items"> <div class="shortcut"> <a href="#none" ><img src="./images/shortcut-01.png" alt="shortcut-01" /></a> <div class="shortcut-content"> <h3>얼리버드 선착순 할인 이벤트, 신규강의 최대 30% 할인</h3> <p> 12월은 사랑의 달~ 코딩웍스에서 여러분께 사랑을 뿌려요~ 12월 개강반을 12월 06일까지 접수하는 분들께는 15%~ 20% 의 얼리버드 할인을 제공합니다. 더불어 소중한 리뷰를 꼼꼼히 남겨주시는 분들을 뽑아 더 큰 적립금을 추가지급해 드릴 예정이오니 리뷰도 놓치지 마시고 작성해주세요~^^<br /> <b>기간:2022년 12월 18일~ 12월 25일</b> </p> </div> <a href="#none" ><img src="./images/shortcut-02.png" alt="shortcut-02" /></a> </div> <div class="news-gallery"></div> </div> </div> </div> <div class="footer"> <div class="footer-logo"> <a href="#none" ><img src="./images/footer-logo.png" alt="footer-logo" /></a> </div> <div class="copyright"> 상호 : (주)코딩웍스 | 대표자 : 홍길동 | 개인정보관리책임자 : 성춘향 부장 사업장주소 : 경기도 남양주시 별내동 1234 코딩웍스 빌딩 6층 (주)코딩웍스 </div> <div class="sns"> <a href="#none"><img src="./images/sns-01.png" alt="sns1" /></a> <a href="#none"><img src="./images/sns-02.png" alt="sns2" /></a> <a href="#none"><img src="./images/sns-03.png" alt="sns3" /></a> </div> </div> </div> <script src="./script/jquery-3.7.1.js"></script> <script src="./script/custom.js"></script> </body> </html> css @charset "UTF-8"; body { margin: 0; background-color: #fff; color: #333; } a { text-decoration: none; color: inherit; } /* 전체레이아웃 */ .container { border: 1px solid red; } .main-content { border: 1px solid black; display: flex; } .main-content > div { border: 1px solid black; } .left { width: 200px; } .header { } .header > div { border: 1px solid red; } .header-logo { height: 100px; } .menu { height: 400px; } .menu1 { padding: 0; } .menu1 > li { position: relative; } .menu1 > li > a { background-color: #333; display: block; color: #fff; height: 40px; line-height: 40px; text-align: center; transition: 0.5s; } .menu1 > li:hover > a { border: 1px solid#333; background-color: #333; color: #fff; } .sub-menu { position: absolute; top: 0; left: 100%; width: 100%; display: none; } .sub-menu > a { display: block; text-align: center; height: 35px; line-height: 35px; background-color: #333; color: #fff; transition: 0.5s; } .sub-menu a:hover { background-color: #ffffff; color: #333; } .spot-menu { height: 50px; } .right { width: calc(100% - 200px); } .slide { height: 400px; position: relative; } .slide-img { border: 1px solid blue; height: 400px; } .slide-banner { border: 1px solid green; position: absolute; top: 0; right: 0; } .slide-banner > a > img { width: 180px; display: block; } .shortcut { border: 1px solid black; height: 200px; display: flex; align-items: center; } .shortcut-content { display: block; } .shortcut-content > b { font-weight: bold; } .news-gallery { border: 1px solid red; height: 250px; } .footer { display: flex; align-items: center; height: 100px; } .footer > div { text-align: center; } .footer-logo { width: 200px; } .copyright { width: calc(100% - 430px); } .sns { width: 250px; } .sns > a > img { width: 50px; border-radius: 5px; } js$(".menu1 li").mouseover(function () { $(this).children(".sub-menu").stop().slideDown(); }); $(".menu1 li").mouseleave(function () { $(this).children(".sub-menu").stop().slideUp(); });
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
플렉스 질문드려요
slide-banner에 플랙스를 주고slide-banner a img 에 width:100%;를 주면 왜 일렬로 배치될 수 있나요? ■ 질문 남기실 때 꼭! 참고해주세요.- 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다.질문 하실 때 어떤 유형인지 말씀해주세요. ex) A1 작업하는데 ???이 안됩니다.
-
해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
F 유형 slide-banner 질문있습니다
돌아오는 토요일에 시험을 보는데, 모든 유형 다 만들 수 있어도 혹시 라도 실수할까 복습을 계속 하고 있거든요!그러다 문득 F 유형 slide-banner 각 이미지 옆에link 1,2,3,4 라고 적혀있는 글자 입력을 해야 할 경우 어떻게 넣는 게 좋을지 고민하다가 조언 듣고 싶어서 질문 남깁니다.갤러리에서 사진 밑에 span으로 글자를 입력 해야 하는데, 혹시 배너도 갤러리처럼 링크 설명 글자를 넣으라는 지시가 있을까봐 대비해서 가고 싶습니다!
-
미해결피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
기간 연장이 가능할까요?
기간이 무제한인 다른 강의와 달리 기간이 1년인 강의는 처음이라 1편도 보지 못했는데 어느 순간 기간이 다가왔네요.이제부터 열심히 볼 테니 딱 두달만 연장해주세요..TT부탁드립니다.
-
해결됨피그마 배리어블을 활용한 디자인 시스템 구축하기
혹시 캡쳐된 부분 피그마 파일은 어디서 공유 받을 수 있나요?
우선 강의를 들어주셔서 감사합니다. 강의 들으시면서 궁금하신 부분을 남겨주세요. 회사 일 관계로 빠른 답변이 어려울 수 있으며, 최대 3일 이내에 답변드리도록 하겠습니다. 이해를 돕기 위해서 스크린샷 이미지, 피그마 파일 링크를 반드시 첨부해주세요. 마지막으로 먼저 유사한 질문이 있는지 한번 찾아보시는 걸 권장 드립니다. 인프런 서비스 운영 관련해서는 1:1 문의하기로 인프런 쪽으로 연락 주시기 바랍니다.
-
미해결피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
디자인 가이드라인 선택
안녕하세요.'UI Component에 대한 개념, 그리고 Figma의 Component 기능을 사용하는 이유' 강의를 듣던 중 궁금증이 생겨 질문 드립니다.에릭님을 포함한 현직자 분들은 아래 디자인 가이드라인 중, 어떤 디자인 가이드라인을 따르시나요?1. Google Material Design2. Human interface GuidelineOS에 따라 참고하는 가이드라인이 달라질 거 같은데, 현직자 분들이 선호하는 디자인 가이드라인이 궁금합니다!