묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
수험자 제공 텍스트 , 끊어도 되나요?
혹시 수험자 제공텍스트를 끊어써도 될까요?제공된 수업영상에는 줄바꿈으로만 하셨는데한 슬라이드에 제공되는 한 줄의 텍스트를 타입툴 여러개로 끊어써서 이동시켜도 되나하구요.한 단어만 회전시키거나 다른 글씨체로 해도 되는지 궁금합니다!
-
해결됨피그마 배리어블을 활용한 디자인 시스템 구축하기
피그마 UI 에 대해 여쭙니다.
강의를 열심히 듣고 있습니다.근데 한가지 해결이 안되는 문제가 있어서 질문드립니다.이번에 피그마가 UI3 로 업그레이드를 했다고 하는데, 저는 일단 강사님 버전에 맞게 거기에 맞춰서 하고자 하는데, 테스트로 여러개를 만들어봤는데, 어떤건 UI3 로 화면이 새롭게 바뀌어서 나오고 어떤건 이전 UI 로 나오더라구요,근데 UI3로 나와도 피그마 안에 들어가서 오른쪽 하단에 ?이이콘을 클릭하면 Go back to previous UI를 클릭하면 원래버전으로 돌아간다고 주변에서 알려줬는데, 그 메뉴가 아예 없어서 UI3 이전 인터페이스를 사용하려면 어지 해야 하는건지 해서요 ㅜㅜUI3는 아직 베타버전이라고 하니 아직은 이전 화면으로 사용하고 싶은데, 방법이 있을까요?
-
미해결피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
섹션 12는 따로 파일이 없나요?
섹션12에 나오는 강의는 따로 수업 노트에 예제 파일이 안보여서 그러는데 공유가 안 되는 자료인가요?
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
D유형 최종본제작 - D1 갤러리 이미지
D유형 최종본제작 - D1갤러리 이미지 3개 사용하라고 나와있는데 저렇게 많이 나열하는게 맞나요? 그리고 완성본 화면줄이면 이미지 전부 갤러리 탭보더 밖으로 나와서 배열되는데.. css제대로 된게 맞을까요
-
해결됨피그마 배리어블을 활용한 디자인 시스템 구축하기
색상베리어블 등록하기
색상베리어블 등록하기에서 질문드립니다.플로그인을 사용해서 색상을 등록하는 내용에서 ...아래와 같이 강사님의 화면과 다르게 나와서요이 플러그인을 오른쪽처럼 화면이 뜨는데....강의화면에서는 실행하면 색상들이 뜨던데...혹시 제가 중간과정을 빼놓은걸까요?
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
header_logo 질문#2
E유형 로고 작성하는 부분에 "심벌과 로고명이 포함된 완전한 형태로 디자인한다." 라고 되어있는데 심벌은 따로 이미지가 주어지는지 혹은 심벌로 따로 만들어야 하는지, 만약에 footer_logo 부분에도 심벌을 포함해서 만들어야 하는지 궁금합니다.
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
제이쿼리로 슬라이드 작성 시, .css({left : 0}) 이게 왜 들어가는지 이해가 되지 않습니다.
.css({left : 0 })를 주석 처리해도 정상적으로 동작하는데굳이 넣으신 이유를 알 수 있나요?아니면 저 부분을 빼면 이상이 생긴다는 것을 보려면 코드를 어떻게 작성하면 좋을까요?
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
header_logo 부분 질문
header_logo 부분에 "로고의 크기 변경 시, 가로세로 비율(종횡비, aspect ratio)을 유지하여야 한다." 부분이 있습니다. 그냥 포토샵 할 때는 200 x 40 비율로해서 그대로 작성하는지 궁금합니다.
-
미해결피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
플러그인 제거 방법이 궁금합니다
선생님 플러그인을 잘못 다운 받았는데 제거하는 법 좀 물어봐도 될까요?
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
제이쿼리 슬라이드제작(2) left : 0 이 왜 들어가는지 모르겠습니다.
slide-items를 애니메이트해서 -1200픽셀만큼 이동시킨후 다시 left 0 은 무슨소린지 모르겠습니다 그러면 첫번째 이미지가 보여야하는게아닌가요 ? 첫번째 이미지가 보여진후 appendTo로 인해서 마지막 요소로 이동해야하는게 정상아닌가요..?
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
4:30초경에 질문이있습니다.
setInterval(function () { $('.slide-item').animate({ left: '-1200px' }, function () { $('.slide-item').css({ left: 0 }); $('.slide-item a:first-child').appendTo('.slide-item'); }); }, 3500); 기존에 자바 개발자라서 코드의 흐름을 파악하는데 약간 어려움이 있습니다. 코드 순서로 따져봤을때, left로 -1200픽셀만큼 이동후 다시 left0으로 돌아오는데,, 이게 약간 이해가 안가는데 이런식이면 제자리 걸음이 아닌가 헷갈리네요. -1200픽셀만큼 이동후 다시 left 0..? left 0에대한 설명이 없어서 뭔지 모르겠네요.
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
sub-menu에 백그라운드 색상을 화이트로 넣어도 뒤에 보더가 보여요.
<!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/11_상단드롭다운1.css" /> </head> <body> <div class="container"> <div class="header-container"> <header> <div class="header-logo"></div> <div class="header-navi"> <ul class="menu"> <li> <a href="#none">Menu1</a> <div class="subMenu"> <a href="#none">Sub-Menu-1</a> <a href="#none">Sub-Menu-2</a> <a href="#none">Sub-Menu-3</a> <a href="#none">Sub-Menu-4</a> </div> </li> <li> <a href="#none">Menu2</a> <div class="subMenu"> <a href="#none">Sub-Menu-1</a> <a href="#none">Sub-Menu-2</a> <a href="#none">Sub-Menu-3</a> <a href="#none">Sub-Menu-4</a> </div> </li> <li> <a href="#none">Menu3</a> <div class="subMenu"> <a href="#none">Sub-Menu-1</a> <a href="#none">Sub-Menu-2</a> <a href="#none">Sub-Menu-3</a> <a href="#none">Sub-Menu-4</a> </div> </li> <li> <a href="#none">Menu4</a> <div class="subMenu"> <a href="#none">Sub-Menu-1</a> <a href="#none">Sub-Menu-2</a> <a href="#none">Sub-Menu-3</a> <a href="#none">Sub-Menu-4</a> </div> </li> </ul> </div> </header> </div> <div class="content-container"> <div class="slide"> <div></div> </div> <div class="items"> <div class="gallery"></div> <div class="banner"></div> <div class="barogo"></div> </div> </div> <div class="footer-container"> <footer> <div class="footer-logo"></div> <div class="footer-navi-copyright"></div> </footer> </div> </div> </body> </html> body { margin: 0; } .header-container { border: 1px solid black; display: flex; justify-content: center; } header { border: 1px solid black; width: 1200px; display: flex; justify-content: space-between; } header > div { border: 1px solid black; height: 100px; } .header-logo { width: 200px; } .header-navi { width: 600px; } .content-container { display: flex; flex-direction: column; align-items: center; } .slide { width: 1200px; border: 1px solid black; } .slide > div { height: 300px; } .items { width: 1200px; display: flex; border: 1px solid black; } .items > div { border: 1px solid black; height: 200px; flex: 1; } .footer-container { border: 1px solid black; display: flex; justify-content: center; } footer { width: 1200px; display: flex; } footer > div { border: 1px solid black; height: 100px; } .footer-logo { width: 200px; } a { text-decoration: none; color: black; } .footer-navi-copyright { width: 1000px; } /* Navigation */ .menu { list-style: none; padding: 0; } .menu > li { text-align: center; width: 150px; float: left; box-sizing: border-box; } .menu > li > a { border: 1px solid black; display: block; } .menu > li > .subMenu > a { display: block; padding: 5px; } .subMenu { border: 1px solid black; background-color: white; }코드 상황은 이러한데 네비게이션 뒤로 자꾸 보더가 보이는데 이걸 어떻게 해결할 수 있을까요 ..?
-
해결됨피그마 배리어블을 활용한 디자인 시스템 구축하기
[섹션4] 입력 컨포넌트 마지막 정리하기 질문!
[섹션4] 입력 컨포넌트 마지막 정리하기 질문!있습니다!File>Pages에 "INPUTS"에 모두 옮기고 나면, Assets에서 검색시 두개가 나옵니다!File>Pages에 "INPUTS"에 모두 옮기라는 말씀이 복사 붙여넣기가 아니라 잘라서 붙여넣기로 해야하는걸까요?저번 질문에 답변주셔서 너무 감사합니다! 강의 열심히 듣고 있습니다!우선 강의를 들어주셔서 감사합니다. 강의 들으시면서 궁금하신 부분을 남겨주세요. 회사 일 관계로 빠른 답변이 어려울 수 있으며, 최대 3일 이내에 답변드리도록 하겠습니다. 이해를 돕기 위해서 스크린샷 이미지, 피그마 파일 링크를 반드시 첨부해주세요. 마지막으로 먼저 유사한 질문이 있는지 한번 찾아보시는 걸 권장 드립니다. 인프런 서비스 운영 관련해서는 1:1 문의하기로 인프런 쪽으로 연락 주시기 바랍니다.
-
해결됨피그마 배리어블을 활용한 디자인 시스템 구축하기
5기 스터디는 없는걸까요!
5기 스터디는 따로 없는걸까요?!우선 강의를 들어주셔서 감사합니다. 강의 들으시면서 궁금하신 부분을 남겨주세요. 회사 일 관계로 빠른 답변이 어려울 수 있으며, 최대 3일 이내에 답변드리도록 하겠습니다. 이해를 돕기 위해서 스크린샷 이미지, 피그마 파일 링크를 반드시 첨부해주세요. 마지막으로 먼저 유사한 질문이 있는지 한번 찾아보시는 걸 권장 드립니다. 인프런 서비스 운영 관련해서는 1:1 문의하기로 인프런 쪽으로 연락 주시기 바랍니다.
-
해결됨피그마 배리어블을 활용한 디자인 시스템 구축하기
레이어 이름 정의시, 대문자 소문자 차이는 무엇인가요?
레이어 이름 정의시, 대문자 소문자 차이는 무엇인가요?Page에서 이름 정의시, 대소문자 기준이 있는지도 궁금합니다!(제가 디자이너가 아닌 기획자다보니, 디자이너의 생각을 알고 싶습니다!)우선 강의를 들어주셔서 감사합니다. 강의 들으시면서 궁금하신 부분을 남겨주세요. 회사 일 관계로 빠른 답변이 어려울 수 있으며, 최대 3일 이내에 답변드리도록 하겠습니다. 이해를 돕기 위해서 스크린샷 이미지, 피그마 파일 링크를 반드시 첨부해주세요. 마지막으로 먼저 유사한 질문이 있는지 한번 찾아보시는 걸 권장 드립니다. 인프런 서비스 운영 관련해서는 1:1 문의하기로 인프런 쪽으로 연락 주시기 바랍니다.
-
미해결[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/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%로 해놓고 브라우저 크기를 줄이면 옆으로 움직이는 스크롤바가없이 짤리는데 이유가 뭘가요 ?
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
2. 공지사항, 갤러리 별도로 구성하기(HTML+CSS) html 파일은 어딨나요 ?
■ 질문 남기실 때 꼭! 참고해주세요.- 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다.질문 하실 때 어떤 유형인지 말씀해주세요. ex) 완성본만 있구 와이어프레임만있는 html파일은 어딨나요 ?
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
각 타입별 이미지 크기 제작 / 주조색&보조색
각 타입별 이미지 크기 제작할 때 가. A,B타입 (width: 1200px, height: 300px) 나. C타입 (width: 800px, height: 350px)로 제작하면 되는데 D,E,F유형에는 100%로 구성되어있는데 전체 몇 px로 구성해서 만들면되는지 궁금합니다. 주조색&보조색의 의미가 궁금합니다...
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
레이아웃을 혼자 플렉스로 하고있는데 레이아웃이 좀 보더를 벗어난거같은데 상관없나요?
■ 질문 남기실 때 꼭! 참고해주세요.- 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다.질문 하실 때 어떤 유형인지 말씀해주세요. ex) A1 작업하는데 ???이 안됩니다감점사항인가요 ? 이런것두 ?
-
미해결부트스트랩 5(Bootstrap 5) - 기초부터 웹 프로젝트 만들기
부트스트랩 + *.css 함께 사용하는 이유와 분리 기준이 궁금합니다.
안녕하세요. 현재 강의 중 프로젝트 1 단계를 진행중에 궁금점이 생겨 질문 드립니다.index.html 파일 디자인에 부트스트랩 만으로 작업 하지 않고 순수 css 를 함께 이용하시는데요.분류 원칙이 따로 있으신가요? 예를 들면 section 요소에 배경이미지는 *. css 파일에 position : relative, position : absolute 처리도 *.css 에서 처리를 하시네요.
