묻고 답해요
158만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
D 유형할 때 마다 우측에 스크롤바가 생깁니다
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <div class="main-content"> <div class="left"> <header> <div class="header-logo"></div> <div class="navi"> <ul class="menu"> <li> <a href="#none">menu-01</a> <div class="sub-menu"> <a href="#none">sub-menu1</a> <a href="#none">sub-menu1</a> <a href="#none">sub-menu1</a> <a href="#none">sub-menu1</a> </div> </li> <li> <a href="#none">menu-01</a> <div class="sub-menu"> <a href="#none">sub-menu1</a> <a href="#none">sub-menu1</a> <a href="#none">sub-menu1</a> <a href="#none">sub-menu1</a> </div> </li> <li> <a href="#none">menu-01</a> <div class="sub-menu"> <a href="#none">sub-menu1</a> <a href="#none">sub-menu1</a> <a href="#none">sub-menu1</a> <a href="#none">sub-menu1</a> </div> </li> <li> <a href="#none">menu-01</a> <div class="sub-menu"> <a href="#none">sub-menu1</a> <a href="#none">sub-menu1</a> <a href="#none">sub-menu1</a> <a href="#none">sub-menu1</a> </div> </li> </ul> </div> <div class="spot-menu"></div> </header> </div> <div class="right"> <div class="slide"> <div class="slide-image"></div> <div class="slide-banner"> <a href="#none"><img src="images/D image/banner-01.png" alt="banner-01"></a> <a href="#none"><img src="images/D image/banner-02.png" alt="banner-01"></a> <a href="#none"><img src="images/D image/banner-03.png" alt="banner-01"></a> </div> </div> <div class="items"> <div class="shortcut"> <a href="#none"><img src="images/D image/shortcut-01.png" alt="shortcut -1"></a> <div class="shortcut-content"> <h3>fkldmsklmclkmdclmd</h3> <p> fdjdoijfijiowejfdnfndsjfndsncncnfdkljfodsjlkcnkndksjhbfkjdshfkdjsnklcmdslkcjndksjhckdsbcjhdsbfihnuwhfeiuhfnjkdnkfjbds <br> <b>202039202</b> </p> </div> <a href="#none"><img src="images/D image/shortcut-02.png" alt="shortcut-02"></a> </div> <div class="news-gallery"></div> </div> </div> </div> <footer> <div class="footer-logo"> <a href="#none"><img src="images/D image/footer-logo.png" alt="footer-logo"></a> </div> <div class="footer-content"> <div class="footer-link"> <a href="#none">djfjdsfjfs</a> <span>|</span> <a href="#none">djfjdsfjfs</a> <span>|</span> <a href="#none">djfjdsfjfs</a> <span>|</span> <a href="#none">djfjdsfjfs</a> <span>|</span> <a href="#none">djfjdsfjfs</a> <span>|</span> <a href="#none">djfjdsfjfs</a> </div> <div class="copyright"> dfjdsfijdiofjodsfodsmnckljdsicjdiosfjodsnflkndkfjgdsfdsfds </div> </div> </footer> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom.js"></script> </body> </html> @charset "utf-8"; body { margin: 0; background-color: #fff; color: #000; } a { text-decoration: none; color: #000; } .main-content { display: flex; } .main-content > div { border: 1px solid #000; } .left { width: 200px; } .right { flex: 1; } /* header */ header {} header > div { border: 1px solid #000; } .header-logo { height: 100px; } .navi { height: 400px; } .spot-menu { height: 50px; } /* slide */ .slide { position: relative; } .slide > div { border: 1px solid #000; } .slide-image { height: 400px; } .slide-banner { width: 150px; height: 300px; position: absolute; top: 0; right: 10px; } .slide-banner a {} .slide-banner a img { width: 150px; display: block; } /* shortcut */ .shortcut { height: 200px; display: flex; align-items: center; margin: 0 30px; gap: 50px; } /* news - gallery */ .news-gallery { border: 1px solid #000; height: 250px; } /* footer */ footer { display: flex; } footer > div { height: 120px; box-sizing: border-box; } .footer-logo { width: 200px; padding-top: 15px; box-sizing: border-box; } .footer-content { flex: 1; } .footer-content div { height: 60px; } .footer-link { padding-top: 20px; box-sizing: border-box; } .footer-link a, .footer-link span { color: royalblue; } .footer-link a:hover { text-decoration: underline; } .copyright { padding: 10px 0px; box-sizing: border-box; } 뭐가 문젠질 도저히 모르겠습니다..
-
해결됨[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
간격 조정 관련 질문
아래 이미지와 같이 여러 개를 선택했을 때 간격 조정이 뜨지 않는 경우가 종종 발생하고 있습니다. 해결방법을 찾아봐도 발견하지 못해 질문 남깁니다. 고맙습니다.
-
미해결피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
스타일 기능 1. 텍스트, 컬러 같은 스타일, 컴포넌트 강의에서 예시는 실제 디자인 시스템에 적용하시는 스타일이신지 궁금합니다!
스타일 기능 1. 텍스트, 컬러 같은 스타일, 컴포넌트 강의에서 예시는 실제 디자인 시스템에 적용하시는 스타일이신지 궁금합니다! 예를 들면 이런것들 실제로 대제목으로 소제목으로 많이 사용하는 크기인가요>? h1 크기가 기본값이 32px여서 이렇게 하신건가요?.? (2em)effect등도요!
-
미해결반응형 웹사이트 포트폴리오(Architecture Agency)
슬릭 슬라이더 dots 보이게 하는 방법 질문 드립니다
오른쪽 사진 밑에 슬릭 dots 보이게 하고 싶은데 어떻게하면 될까요?같은 질문과 답변을 보았지만 해결이 안되어서 다시 질문드려요~위에 history는 dots 보이는데밑에 project photo 부분은 dots가 안보여요 히스토리에서 했던 것 처럼.history-slider .slick-arrow{ display: none !important; } .history-slider .slick-dots li button:before{ color: #fff; font-size: 40px; } .history-slider .slick-dots li { margin: 0; }이런 것 해줘야하나요? 강의 중 섹션 9 - PC 레이아웃 섹션 상세 퍼블리싱(Project Section) - #06(Slick.js 이미지 슬라이더) 마지막 파트입니다
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
D E 유형 슬라이드 구현 방식
css 말고 제이쿼리로는 어떻게 못하나요..? abc 슬라이드 유형을 제이쿼리로 해서 제이쿼리로 연습했는데 영상엔 css 방식으로 나와 있어서 어떻게 해야할 지 모르겠습니다..
-
미해결피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
그리드는 예시 파일은 제공안해주시는거죠?
수업노트에 예시파일 피그마 링크는 없어서 문의드려요
-
해결됨[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
F 유형 임의 지정 부분과 footer 부분 질문입니다
선생님, F 유형 공부를 하고 있는데 두 가지 확인하고 싶은 게 있어서 질문올립니다!content-inner 부분에 임의 지정이라는 것은D,E 유형에서 나온 세로 임의지정 calc(100vh-100px) 같은 높이값이랑 다르게 ABC 유형에서 slide / items 부분에 줬던 높이를 참고해서 제가 알아서 높이 값을 주면 되는걸까요? 문제는 안되겠지만 공개 시험지에서는 F4를 제외한 F1,2,3 유형은 footer 높이가 120px 로 되어있더라고요..! 강의에서는 F1 레이아웃인데 높이 값을 100px로 주셔서 다른 수험생들도 순간 멈칫할 수 있을 것 같아요. 수업 노트에 이 부분에 대해 올려주시는 게 좋을 것 같아 말씀드립니다!
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
비주얼스튜디오에서 타이핑이 이상하게 될 때 (글자간격이 벌어져요)
글자 간격이 벌어지면서 타이핑이 제대로 되지 않는 현상이 벌어집니다...이럴 때 어떻게 해결할 수 있나요?제가 뭘 눌러서 이런 현상이 벌어지게 된건지 모르겠습니다가끔 이런 현상이 종종 일어나는데 시험보다가 갑자기 이렇게 되면 당황스러울 것 같아서 질문드립니다. ㅠㅠ ■ 질문 남기실 때 꼭! 참고해주세요.- 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다.질문 하실 때 어떤 유형인지 말씀해주세요. ex) A1 작업하는데 ???이 안됩니다.
-
미해결퍼블리셔 개인 포트폴리오 홈페이지 제작 완벽 가이드(PDF)
uk-lightbox 웹표준 검사에 error로 나오는데 괜찮나요?
포트폴리오 어느정도 틀이 정리돼서 웹표준 검사 해봤는데저 부분만 오류로 나와요!저렇게 오류가 떠도 괜찮은 건지 궁금합니다! 포트폴리오는 크게 상관이 없다해도 후에 혹시 실무에서 쓸 일이 생길 때 써도 괜찮은 건가 해서요..!
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
a 태그에 넣는 것
a 태그 안에는 꼭 "#none"를 넣으라고 하셨는데,#만 넣는 걸로 코딩을 배워왔는데, 혹시 이렇게 되면 감점이 되는 걸까요? #none도 맞고 #도 맞는 건지 궁금해요! ■ 질문 남기실 때 꼭! 참고해주세요.- 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다.질문 하실 때 어떤 유형인지 말씀해주세요. ex) A1 작업하는데 ???이 안됩니다.
-
미해결외주 없이 디자이너처럼 스마트스토어 디자인 꾸미기
수업자료
수업자료 어디서 다운받나요
-
미해결외주 없이 디자이너처럼 스마트스토어 디자인 꾸미기
모바일 GNB화이트 설정
모바일 GNB화이트 설정어디서 하는지 모르겠습니다
-
미해결반응형 웹사이트 포트폴리오(Architecture Agency)
이거 h2 가 안나오고 스크롤도 안되는데 왜이래요?
이런 화면만 나오는데요? css 연결 잘했는데 안돼요
-
해결됨UXUI 디자인 비전공자를 위한 포트폴리오 제작방법
테스트케이스가 아닌 신규 제품 개발의 경우
안녕하세요, 포트폴리오 작성과 관련하여 질문이 있습니다. 강의 전체적으로 보여주신 테스트케이스 이외에,초반부 말씀하셨던 신규 제품(서비스) 개발의 경우에도 알려주시는 방식 또는 순서에 따라 하나 하나 진행해가면 될까요? 테스트케이스와 신규 개발 두 가지 모두를 포트폴리오에 넣고 싶을 경우에도 그 작업 방식에는 큰 차이가 없을지 궁금합니다! 감사합니다 :)
-
해결됨[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
[필독] D,E 강의 설명 중 필수 이론 04 가상 클래스 질문
안녕하세요 선생님,저는spot 메뉴에서 ' | ' 바의 역할이 단어 칸 나누기라고 생각해서지금까지 키보드 위에 있는 저 바를 html 에 입력하고a태그로 메뉴를 구성했었거든요,필독 사항 강의 에서도 반드시 필요한 것은 아니고, 코드 간결을 위해서 사용한다고 말씀해주셨는데, | 부분을 실무에서 코사용할 때 after를 사용하나요? 키보드에 있는 걸 쓰는 것을 쌤은 비추를 하시는지 궁금해서 질문 드립니다..!
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
슬라이드가 이상하게 넘어갑니다
<div class="content-inner"> <div class="slide"> <div class="slide-items"> <a href="#none" class="slide-item"><img src="images/slide-01.jpg" alt="slide 01"></a> <a href="#none" class="slide-item"><img src="images/slide-02.jpg" alt="slide 02"></a> <a href="#none" class="slide-item"><img src="images/slide-03.jpg" alt="slide 03"></a> </div> </div> .slide-items { position: relative; width: 1200px; height: 300px; overflow: hidden; } .slide-item { position: absolute; top: 0; left: 0; width: 3600px; font-size: 0; } setInterval(function(){ $('.slide-items').animate({left: '-1200px'}, function(){ $('.slide-items').css({left: 0}); $('.slide-item:first-child').appendTo('.slide-items'); }); }, 3500);제 컴퓨터가 이상한 건지는 모르겠는데 코드 확인 해봐도 도저히 다른 곳이 없는데 뭐가 문제일까요ㅠㅠ 사진이 툭툭 끊기면서 넘어가요
-
미해결피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
강의 연장 문의
안녕하세요 강사님. 저는 작년에 해당 강의를 수료했습니다.세심하고 자세한 좋은 강의덕분에 많이 배울 수 있었습니다.피그마 업데이트로 강사님께서 새롭게 영상을 업로드 해주신 소식을 확인하였습니다.새로운 업데이트로 인해서 한번 더 강의를 복습하고자 하는데, 강의기간이 얼마 남지 않아 1달정도 연장이 가능한지 문의드립니다.
-
해결됨구글 애드센스 수익형 워드프레스 블로그 만들기
sticky 추가 css 코드 누락
올려주신 드라이브 파일에서 sticky 관련 파일은 찾을 수가 없는데 누락된건가요? 제가 못찾은거라면 어느부분에 작성되어 있는 지 알 수 있을까요? +추가) 밑줄 없애는 css 코드도 따로 없는것 같은데 확인 부탁드립니다..!
-
해결됨구글 애드센스 수익형 워드프레스 블로그 만들기
파일
강의에 대한 질문은 인프런 질문하기나 1:1 카카오톡 플러스 친구에서 문의하셔도 가능합니다.(카카오톡 플러스친구 주소 http://pf.kakao.com/_ckMyxj/chat) 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요 글 가져오기 파일.xml은 어디서 다운 받을 수 있나요? 이런 파일들도 하나하나 다 요청해야지 받을 수 있는건가요?
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
단축키자료
단축키 자료 올려주신건 비쥬얼스튜디오에도 똑같이 적용이 가능한 부분인가요?시험전 준비영상도 봤는데 그 영상에서 말씀하신 단축키만 바꾸면 똑같이 써도 되는건지 궁금해서요. ■ 질문 남기실 때 꼭! 참고해주세요.- 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다.질문 하실 때 어떤 유형인지 말씀해주세요. ex) A1 작업하는데 ???이 안됩니다.
