61,600원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 해결됨면접과 취업을 부르는 '퍼블리셔 개인 포트폴리오 홈페이지' 제작
반응형 질문 드립니다.
responsive.css 파일 연결하고 media 768px 반응형 css 작성했는데 창을 축소하면 괜찮지만 개발자도구 - device tool 에서 확인을 하면 반응형으로 작업한 결과물이 보이지 않습니다..ㅠㅠ 다른 작업물들은 이런문제가 없었는데 .. 제가 뭘 잘못한걸까요 ㅠㅠ
- 미해결면접과 취업을 부르는 '퍼블리셔 개인 포트폴리오 홈페이지' 제작
크로스브라우징 질문드려요
크로스브라우징 관련해서 질문드립니다. 포트폴리오 결과물 중, filter 등의 일부 속성 때문에 인터넷 익스플로어에서 적용이 안되는 상황인데요. 크롬과 엣지는 물론 적용이 되구요... 이부분은 IE에 맞게 고쳐야 하는지 하는건가요? 그리고 다른 결과물을 만들때도 모든 브라우저에 맞게 속성을 사용해야 하는건지도 궁금합니다.
- 미해결면접과 취업을 부르는 '퍼블리셔 개인 포트폴리오 홈페이지' 제작
이미지 주소가 너무 길때
CSS 속성 중, background: url() 에 이미지 주소를 넣었습니다. 그러다보니 이미지 주소가 너무 길어서 혹시 포트폴리오에 이러한 작은 부분도 신경써야 하는 건지 질문드립니다. body { background: url(https://images.unsplash.com/photo-1534796636912-3b95b3ab5986?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1171&q=80); }
- 미해결면접과 취업을 부르는 '퍼블리셔 개인 포트폴리오 홈페이지' 제작
포트폴리오 웹사이트에 작업물 올리는 방법
포트폴리오 웹사이트에 내가한 작업물을 모달창으로 띄우고 어떻게 올리나요? index 파일을 웹사이트에 올리는 건지 궁금합니다. 관련 예제는 어느강의, 어느섹션에서 살펴볼 수 있나요?
- 미해결면접과 취업을 부르는 '퍼블리셔 개인 포트폴리오 홈페이지' 제작
문의드려요,스크롤했을때 애니메이션이 안되는데 한번 봐주세요
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>[플러그인 사용방법]스크롤하면 시작되는 애니메이션-Wow.js & AOS.js</title> <script src="js/wow.min.js"></script> <style> .parent { border: 1px solid #000; width: 800px; padding: 20px; overflow:hidden; } .parent div { float: left; border: 3px solid red; width: 50%; height: 200px; box-sizing: border-box; text-align: center; line-height: 200px; font-size: 3em; } .ltr { animation: ltr 1s linear both; } .rtl { animation: rtl 1s linear both; } @keyframes ltr { 0% { opacity:0; transform:translateX(-150px) } 100% { opacity: 1; transform: translateX(0) } } @keyframes rtl { 0% { opacity:0; transform:translateX(150px) } 100% { opacity:1; transform:translateX(0) } } </style> </head> <body> <h1>scroll Reveal Animation</h1> <img src="http://placehold.it/800x1500"> <div class="parent"> <div class="left ltr wow">left</div> <div class="right rtl wow">right</div> </div> <script> new WOW().init(); </script> </body> </html>
- 미해결면접과 취업을 부르는 '퍼블리셔 개인 포트폴리오 홈페이지' 제작
featherlight을 사용했을 때 취업한 학생들처럼 body의 overflow:hidden이 자유자재로 되려면..
코딩웍스 강사님 안녕하세요! 앞 강의에서 플러그인질문은 여쭤봐도 알려주시기가 난감하셨다 하셨지만, 취업한 학생분들 홈페이지도 제가 하고자 하는 홈페이지대로 되어있어서.. 여쭤봅니다. 해당 강의의 9:57 에서 강사님께서 pc버전을 눌렀을 때 취업한 학생분의 모달창 healing art 홈페이지의 오른쪽부분을 보면 세로스크롤이 한줄이고, 모달창을 꺼도 개인홈페이지가 계속 스크롤할수있는데, 제 홈페이지의 스크롤을 보시면 이 스크린샷이 featherlight를 사용해서 모달창을 띄운 상태입니다. 스크롤 두개중에, 왼쪽 스크롤이 featherlight를 이용해서 나온 포폴홈페이지이고, 오른쪽 스크롤이 개인홈페이지입니다. 취업한 학생분의 홈페이지처럼, featherlight을 이용한 홈페이지가 나오면 개인포폴홈페이지는 잠시 움직이는걸 멈추게하고 싶어서, 반응형 강좌때 (모달창띄울때 body가 움직이는걸 방지할경우)이럴 경우엔 body에 overflow를 주면된다고하셔서 jquery로 $('body').addClass('active') 해보았습니다만 body에 addClass('active')는 적용되는데, $('.featherlight-close-icon')를 클릭했을때, body removeClass('active')는 어떻게해도 적용이 안됩니다. 선택자가 잘못된건가싶어서, F12로 확인해서 .featherlight-close-icon .featherlight-close .close .featherlight-close-icon.featherlight-close .featherlight.featherlight-iframe .featherlight-content .featherlight-close-icon.featherlight-close 여기 있는 선택자들로도 바꿔봤는데도 안되더라구요. 방법이 잘못된걸까요? 공유해주신 featherlight.css에도 나와있지않아서 여쭤봅니다. ↓ 밑의 코드는 css파일과 js파일에 각각 작성하였지만 복붙하니까 이어붙여서 보이네요. .view 는 pc버전보기 버튼입니다! body.active { overflow:hidden; } $(function(){ $('.view').click(function(){ $('body').addClass('active'); }) $('.featherlight .featherlight-close-icon').click(function(){ $('body').removeClass('active'); }) })
- 해결됨면접과 취업을 부르는 '퍼블리셔 개인 포트폴리오 홈페이지' 제작
모바일 웹 앱 포트폴리오 보여주는 서브페이지에서요
뒤로가기 버튼을 a태그에 인라인 자바스크립트로 <a href="javascript:history.back()">뒤로가기</a> 이렇게 했는데 싱글뷰, 멀티뷰 페이지에서 이것 저것 눌러보다가 모달창 닫고 뒤로가기 버튼 누르니까 한번눌러선 바로 이동을 안하고 여러번 눌러야 되던데 이 부분은 어떻게 할 수 있는 방법이 없을까요??
- 해결됨면접과 취업을 부르는 '퍼블리셔 개인 포트폴리오 홈페이지' 제작
uk-lightbox
UIkit 질문 드립니다.. 연습삼아 프로로타입 만드는데 uk-lightbox 가 css 속성이 적용이 안되어서요ㅠ !important 를 줘도 마찬가지 입니다.. 제가 뭔가를 잘못한건지 확인 한번만 해주세요ㅠㅠ <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>UIkit Usage</title> <!-- UIkit CDN --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.8.0/dist/css/uikit.min.css" /> <script src="https://cdn.jsdelivr.net/npm/uikit@3.8.0/dist/js/uikit.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/uikit@3.8.0/dist/js/uikit-icons.min.js"></script> <style> body { background-color: #f5f5f5; height: 100vh; margin: 0; } .container { position: relative; height: 100%; } .content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .uk-lightbox { border: 5px solid #000; } .uk-lightbox div { margin: 30px !important; } .uk-lightbox img { border: 5px solid red; } </style> </head> <body> <div class="container"> <div class="content"> <div uk-lightbox> <div> <a href="portfolio/coding-works/animation/01/index.html"> <img src="images/Practical-Animation-01.jpg"> </a> </div> <div> <a href="portfolio/coding-works/animation/02/index.html"> <img src="images/Practical-Animation-02.jpg"> </a> </div> </div> </div> </div> </body> </html>
- 미해결면접과 취업을 부르는 '퍼블리셔 개인 포트폴리오 홈페이지' 제작
개인포트폴리오랑 개인포트폴리오 홈페이지 질문입니다
■ 질문 남기실 때 꼭! 참고해주세요. 포트폴리오 만들때 하드코딩으로 하라고 하셨는데 slick slider나 typeit wow.js등 은 사용하면 안되는것인가요 ? - 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다.
- 해결됨면접과 취업을 부르는 '퍼블리셔 개인 포트폴리오 홈페이지' 제작
mobile-index.html
mobile-index.html 서브 페이지 만들때 사용하는 목업 이미지들은 최상위 폴더 index.html 과 같은 구조에 있는 images폴더에 넣어둬야하나요? 제가 헷갈리는게 서브페이지 안에서도 목업을 iframe 으로 불러오는 건가요? 아니면 캡쳐한 이미지를 쓰는건가요?
- 미해결면접과 취업을 부르는 '퍼블리셔 개인 포트폴리오 홈페이지' 제작
깔끔한 헤드 입력방법(link, script)
선생님, 최종포트폴리오도 다 만들어가고 만들었던 코드들 정리하고 있는 상태입니다. 매번 질문을 드려서 죄송하고 감사합니다. 다름이 아니라 head영역에 link, script로 되어있는 부분을 통일성과 깔끔하게 정리하고 싶은데 어떤식으로 하면 괜찮을까요? 우선 선생님 강의를 듣고 했을때는 공통적인것은 맨 아래로, min js는 플러그인 다른 스크립트 이전에 이런식으로 구성하였습니다. 아래는 샘플로 만들어놓은 것 입니다. <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <!-- slick CSS , JS --> <script src="js/slick.min.js"></script> <link rel="stylesheet" href="js/slick.css"> <link rel="stylesheet" href="js/slick-theme.css"> <!-- feather CSS & JS --> <script src="js/featherlight.js"></script> <link rel="stylesheet" href="js/featherlight.css"> <!-- wow.JS --> <script src="js/wow.min.js"></script> <!-- scroll JS--> <script src="js/jquery.scrollTo.min.js"></script> <!-- skillbar JS --> <script src="js/skill.bars.jquery.js"></script> <!-- common CSS/ JS --> <script src="js/style.js"></script> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/responsive.css"> <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"> * 그리고 코드들 정리할때 HTM은 head section footer 시맨틱태그로 크게 잡고 그 영역안에 복잡하게 들어가있으면 해당 닫는태그에 주석다는 식으로 해서 수정할때나 볼때 조금 보기 좋게 하였으며, CSS는 한줄코드는 엔터를 하지 않고 그 외엔 다 엔터로 한줄씩 작성 및 큰영역이나 공통으로 묶이는 부분은 주석처리 하였는데 혹시 더 지켜줬으면 좋겠다는거 있으신가요? 감사합니다.
- 미해결면접과 취업을 부르는 '퍼블리셔 개인 포트폴리오 홈페이지' 제작
사이트 최적화
선생님 포트폴리오도 거의 완성다되가고 정신없는 취준생입니다. 다름이 아니라 완성이 거의 다 됐는데 최적화가 걱정입니다. 홈부분에 화면전환 애니메이션 효과를 줘서 시간을 벌었지만 스크롤시 버벅인은 현상이 나와 고민입니다. 사이트 자체가 너무 무거운 것 같은데 제 수준에서 최적화 하는 방법이 있을까요? (ex 사진 화질 줄이기 등등..)
- 해결됨면접과 취업을 부르는 '퍼블리셔 개인 포트폴리오 홈페이지' 제작
-webkit-background-clip
선생님 안녕하세요~ 텍스트를 그레디언트 컬러를 넣는부분에서 -webkit-background-clip: text; 이라고 되어있는데 이건 뭐에요?
- 미해결면접과 취업을 부르는 '퍼블리셔 개인 포트폴리오 홈페이지' 제작
선생님 궁금한게 있습니다.
안녕하세요 선생님 , 낮에는 국비학원에서 저녁에는 선생님의 강의를 들으면서 공부한지 어느덧 4개월이 지났고 수료까지 1달 남은 취준생입니다. 다름이 아니라 이제 슬슬 포트폴리오도 만들면서 준비를 하고 있는데 궁금한게 있어서 글을 남기게 되었습니다. 1. 학원에서 만든 홈페이지 중 제가 하다가 이해가 안되어서 그저 받아적은 홈페이지가 있습니다. 기술면접이나 합격 후 실무를 진행 시 제가 만들지 못한 것을 만들었다고 얘기는 못하는 것은 과감히 버려도 되는지요? 2. 선생님 강의 중 클론코딩은 최소한으로 하라는 말씀을 조금 뒤늦게 보게 되었습니다. 클론코딩한 비율이 더 많아서 제 포트폴리오를 보고 면접까지 갈 수가 있을지가 걱정이기도 합니다. 한두개라도 더 만들어서 제작비율과 클론비율을 맞춰주는게 맞을까요? 3.포토샵, 일러스트는 어느정도 수준으로 다뤄야하는지도 궁금합니다. 제가 생각했을 때 제 포토샵, 일러스트 실력은 wireframe과 이미지 사이즈 맞추고 간단한 작업만 가능한 수준이라고 제가 잘 알고 있습니다. 그래서 퍼블리셔로 희망하는데 이정도 실력만 되도 가능할까요? 4. 시즌2 포트폴리오부분에서 pc랑 모바일을 featherlight.js로 보여주는 부분에서 모바일로 아이폰에 보여주는 방식을 제가 이해를 못하고 있는데 이럴 경우 뺴도 괜찮을까요? 현재 목업용 이미지에 마우스를 올릴시 포지션 top을 마이너스로 변환해 다 보이게끔 만들고 featherlight js를 통해 pc는 구현이 가능하게 만들었습니다. 그래서 pc버전만이라도 링크형태처럼 만들려고 합니다. 밤낮으로 일교차가 심해 감기걸리기 좋은 날씨네요. 항상 건강하시고 좋은 강의 만들어주셔서 감사합니다.
- 미해결면접과 취업을 부르는 '퍼블리셔 개인 포트폴리오 홈페이지' 제작
모바일 웹 앱 질문 드립니다!!
선생님 안녕하세요~ 요새 포트폴리오 결과물 만들고 있는데요~ 모바일 웹 앱은 모바일 화면 5개 정도를 만들어야 된다고 하셨 는데 각각 화면들을 index파일 5개를 만드는건가요? 아니면 하나의 index파일안에 5개를 만드는건가요?
- 미해결면접과 취업을 부르는 '퍼블리셔 개인 포트폴리오 홈페이지' 제작
[예시] 개인 포트폴리오 홈페이지(폴더구조) 파일이 누락되었습니다.
■ 질문 남기실 때 꼭! 참고해주세요.- 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다. [예시] 개인 포트폴리오 홈페이지(폴더구조) 파일 다운로드를 받으려 하는데 파일이 다 비어있네요 폴더는 다 비어있고 파일은 다 0kb로 뜨고 비어있기도 합니다 확인 한번 부탁드려요 실습하면서 제대로 만들었나 확인할 지표가 부족하네요 ㅜ
- 해결됨면접과 취업을 부르는 '퍼블리셔 개인 포트폴리오 홈페이지' 제작
테마를 변경하고 이미지나 텍스트
안녕하세요 선생님 웹사이트 퍼블리싱 결과물을 제작하려고 하는데요 만약 쇼핑몰이라는 테마를 정했으면 그 상품들의 이미지는 전부 무료 이미지 사이트(픽사베이 등)에서 가져와야 하는건가 요? 아니면 기존에 있는 쇼핑몰들에서 이미지를 받아와서 조합 해서 사용하는건가요?
- 미해결면접과 취업을 부르는 '퍼블리셔 개인 포트폴리오 홈페이지' 제작
포트폴리오 - 익스플로어 지원/ 카페24 chrome xeicon,fontawesome 오류
안녕하세요 선생님 ! 기초부터 선생님 강의를 통해 포트폴리오를 완성을 하였는데요 카페 24에 호스팅도 완료하였는데 익스플로어 환경에서는 몇가지 적용(플렉스, 폰트 등등) 이 되지 않아 화면이 제대로 표시가 되지 않더라구요.. 익스플로어 환경에서도 적용될수 있도록 다시 재구성을 해야하는건지 아님 크롬에서 적용되니 이대로 원서를 넣어봐도 될까요? 또 한가지 질문이 있는데요 제가 vccode에서 테스트 하거나 index.html파일을 크롬에서 열었을때는 xeicon과 fontawesome이 잘 적용되어 나타나는데 카페 24에 호스팅 하고 크롬에서 제 주소를 들어가보니 안나오더라구요! 또 아이폰 사파리 모바일 버전에서는 잘 나오는데 ㅜㅜ 혹시 이건 어떤 문제일까요? 두개 파일모두 style.css 파일에 링크 되어 있습니다, 답변주시면 감사하겠습니다. 아무런 베이스 없는 사람이었는데 선생님 강의만 착실하게 들으면서 완성하였습니다 정말 감사합니다!!!
- 미해결면접과 취업을 부르는 '퍼블리셔 개인 포트폴리오 홈페이지' 제작
선생님 안녕하세요! 포트폴리오 관련 부탁드립니다~
안녕하세요 선생님! 선생님 수업 열심히 잘 듣고있습니다 다름이 아니라 현재 포트폴리오가 80프로 정도는 완성 되었는데요 제가 지금 만들고있는게 제대로 되고있는지 판단이 안 서더라구요ㅠㅠㅠㅠ 전문가의 조언을 구할 방법이 선생님께 여쭤보는 방법뿐이더라구요 ㅠㅠㅠ 바쁘시겠지만 혹시 포트폴리오 피드백을 부탁드려도될까요? 혹시 피드백 가능하시면, 포트폴리오는 이메일로 보내드리는게 좋을까요??
- 미해결면접과 취업을 부르는 '퍼블리셔 개인 포트폴리오 홈페이지' 제작
선생님~ 코딩미션, 로딩 애니메이션 연결 관련 질문 있습니다~
안녕하세요 선생님! 궁금한게 여러가지 생겨 질문 남깁니다~ 항상 빠른 답변 감사합니다 :) 1) 코딩미션 - "제이쿼리 Front Back 화면전환 트랜지션" 관련 질문입니다~ front back 화면전환 트랜지션 응용 파일을 만들어보고있는데요 그 중에서 "CREATION" 글자를 가상요소를 이용해 그라데이션을 하셨는데요 background-clip: text 라고 되어있는 부분이 있습니다 그 앞에 -webkit-을 사용하셨는데 -webkit- 사용하는건 자주 봤지만 정확이 이걸 왜 붙이는지 이해가 안되서요~ 구글이랑 사파리에도 적용이 되라는 뜻으로 -webkit-을 사용하는걸로 알고있는데 그럼, 구글이랑 사파리에 적용이 안되는 css속성을 다 알고 제가 일일이 -webkit-을 다 써줘야하는건가요? 아니면 -webkit-을 사용해야하는 css속성을 몇가지 외우고있어야하는건가요? 2) loading 애니메이션을 연결시킬때 스크립트 관련 질문입니다~ loading 애니메이션을 개인 포트폴리오랑 연결 시키고 싶어서 구글링을 해보니 몇가지 방법들이 나오더라구요 그 중에서 두가지 방법을 사용해 보았는데, (현재 제가 만든 폴더 구조이구요) (html 입니다) (script 입니다) 스크립트 부분에서 두 방법을 이용해봤는데, 위에 방법은 적용이 되는데, 아래 방법은 적용이 안되더라구요 1번과 2번의 차이점을 알고 싶습니다 그리고 제가 자주 사용하는 제이쿼리 방법은 2번 방법이라 2번 방법으로 실행되게끔 해보고싶은데 혹시 보안해야할 점이 있을까요? 아니면 fadeOut이 아닌 다른 방법이 또 있을까요? 구글링을 열심히 해봐도 정확한 답이 안나와서 선생님께 질문 남깁니다~ ㅎㅎ 항상 강의 재밌게 잘 보고있습니다 이해가 너무 잘되서 매번 감탄하면서 보고있습니다! content: attr(data-text); position: absolute; top: 0; left: 0; line-height: 110px; transform-origin: bottom; transform: rotateX(180deg); background: linear-gradient(to top, #fff 0%, transparent 80%); -webkit-background-clip: text; color: transparent; opacity: 0.5;CREATION