11,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결나만의 포트폴리오 웹페이지 만들기
화면이 너무작아요
이렇게 조그만한 글씨 인강 처음 봐요. 화면 크게 어떻게 못하나요? 한강의 할때마다 눈 아파요
- 미해결나만의 포트폴리오 웹페이지 만들기
awesome font에서
안녕하세요 지금 수강중인데요 awesome font 사이트에서 코드가 지금 안나오는 상황인데 어떻게 하는것인가요
- 미해결나만의 포트폴리오 웹페이지 만들기
팝업창 동영상
안녕하세요 선생님! 여쭤보고 싶은게 있어서 질문드립니다. 제가 팝업창에 이미지 대신 동영상을 넣었는데 정상적으로 작동이 잘 되지만 창을 닫았을때 영상 소리가 계속 납니다. 동영상 종료 이벤트 같은걸 추가해야할 것 같은데 구글링으로 비슷한 코드들을 넣어도 해결이 안되네요! 혹시 참고 할 수 있는 것이 있을까요? 항상 감사합니다!
- 미해결나만의 포트폴리오 웹페이지 만들기
챕터 6에서 해결이 안되고 있습니다.
보시는것 처럼 작게 화면을 했을때 왼쪽에만 여백이 있습니다. 3번정도 영상 돌려보면서 제가 잘못쓴게 있을까 봤는데도 없고.. 해결이 안되네요ㅠㅠ 그리고 아래 메인,서브,텍스트가 보이질 않는데 해결방법을 몰라 애만 타네요ㅠㅠ +추가로 사진 대신 유튜브 링크를 올리고 싶은데 방법이 있을까요? 구글링을 하고 싶은데 어떻게 검색을 해야할지 막막합니다ㅠㅠ
- 미해결나만의 포트폴리오 웹페이지 만들기
클릭시 드롭다운이 되지 않습니다..
5:35 처럼 클릭했을 시 드롭다운 되지 않습니다.. awesome kit로 진행하였었는데 혹시 충돌이나 우선순위 때문인가 싶어 해당 강의내용처럼 css로 받아와도 되지않습니다. 개발자모드의 콘솔에도 오류가 없다고 뜹니다.. 코드 캡처하여 메일로 전송했습니다. 확인 한번 부탁드리겠습니다 ^^
- 미해결나만의 포트폴리오 웹페이지 만들기
09.NavaigationBar2 js부분 질문입니다.
안녕하세요. 강의 잘 보았습니다. 마지막 NavigationBar2 부분에서 window.scrollTo(0, document.getElementById(id).offsetTop - 70); scrollTo함수의 y좌표값을 왜 offsetTop -70으로 설정했는지 궁금합니다. scrollTo함수나 offsetTop 함수에 대한 사전 설명없이 그냥 진행하시다보니 그 부분에 대해 미리 숙지하지않으면 이해가 어렵네요. offset API 시리즈는 부모의 포지셔닝 정책에 따라 절대좌표 or 상대좌표가 나올 수 있다고는 알고있는데 아직 정확하게 이해가 되지는 않습니다... 반응형웹으로 제작하였는데 왜 getBoundingClientRect()가 아닌 offset 을 사용했는지 궁금합니다. 이 부분에 대한 추가설명 요청드립니다.
- 미해결나만의 포트폴리오 웹페이지 만들기
navigation bar 만들기 java script부분에 질문이 있습니다.
안녕하세요 현재 강의를 열심히 듣고 있는 학생입니다. 현재 navigation bar 만들기 javascipt에서 화면을 밑으로 스크롤하면 로고와 about, service, portfolio, review가저런식으로 나오게됩니다. 창을 줄여서 하면 메뉴버튼과 LOGO가 합쳐져서 하나를 클릭하지도 못하는 상황이 발생됩니다. 코드를 2~3번씩 확인하고 다시 작성해보았지만, 이렇게 밖에 나오지않아 너무 답답하네요 ㅠㅜ 혹시 문제점이 대충이라도 어딘인지 알수있을까요? 현재 navigtaion bar 만들기 - javascript 즉 강의소개글을 포함하여 4번째 강의를 진행중인 코드입니다. 밑은 js코드입니다. /* HEADER */ window.onload = function() {scrollFunction()}; window.onscroll = function() {scrollFunction()}; function scrollFunction() { var header = document.getElementById('header'); if(document.documentElement.scrollTop > 70) { if(!header.classList.contains('navbar-fixed')) { header.classList.add('navbar-fixed'); document.getElementsByTagName('body')[0].style.marginTop = '70px'; header.style.display = 'none'; setTimeout(function(){ header.style.display = 'block'; }, 40); } }else { if(header.classList.contains('navbar-fixed')) { header.classList.remove('navbar-fixed'); document.getElementsByTagName('body')[0].style.marginTop = '0'; } } } function menuToggle() { document.getElementById('menu').classList.toggle('show'); } document.getElementById('toggleBtn').addEventListener('click', menuToggle); 아래는 혹시라도 더 참고될까봐 css와 html을 첨부하겠습니다. /* common */ * { margin: 0; padding: 0; font-size: 0; } body { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; word-break: break-all; font-family: 'Heebo', sans-serif; } img { width: 100%; height: 100%; } a{ text-decoration: none; font-size: 14px; text-transform: uppercase; } ul{ list-style-type: none; } /* HEADER */ .header-area { position: relative; top: 0; left: 0; width: 100% z-index: 99; background-color: white; box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3); } .navbar-fade { animation-name: navbar-fade; animation-duration: 0.5s; -webkit-animation-name: navbar-fade; -webkit-animation-duration: 0.5s; } @keyframes navbar-fade { from {opacity: .4} /*투명도 조절*/ to {opacity: 1} /*투명도 조절*/ } @-webkit-keyframes navbar-fade { from { opacity: 0.4} to { opacity: 1} } .header-area.navbar-fixed { position: fixed; } .header-area > .navbar { width: calc(100% - 120px); margin: 0 60px; overflow: hidden; } @media (min-width: 992px) { .header-area > .navbar { max-width: 900px; margin : 0 auto; } } @media (min-width: 1200px) { .header-area > .navbar { max-width: 1000px; } } .header-area > .navbar> .navbar-brand { display: inline-block; position: absolute; top: 50%; transform: translateY(-50%); font-size: 32px; cursor: pointer; } .header-area > .navbar> .navbar-toggler * { font-size: 32px; } .header-area > .navbar> .navbar-toggler { float: right; height: 70px; line-height:70px; font-size: 32px; cursor: pointer; } @media(min-width: 992px) { .header-area > .navbar> .navbar-toggler { display: none; } } .header-area > .navbar > .navbar-menu { position: absolute; background-color: rgba(0, 0, 0, 0.5); top: 70px; left: 0; width: 100%; height: 0; transition: 0.5s ease; overflow: hidden; } .header-area > .navbar > .navbar-menu.show { height: 200px; } .header-area > .navbar > .navbar-menu > .nav-item { float: none; display: block; height: 50px; line-height: 50px; } .header-area > .navbar > .navbar-menu > .nav-item:hover * { background-color: rgba(0, 0, 0, 0.4); } .header-area > .navbar > .navbar-menu > .nav-item > .nav-link { display:block; padding-left: 50px; color: white; cursor: pointer; } @media (min-width: 992px) { .header-area > .navbar > .navbar-menu { position: relative; background-color: transparent; float: right; top: 0; width: auto; height: auto; transition: none; } .header-area > .navbar > .navbar-menu.show { height: auto; } .header-area > .navbar > .navbar-menu > .nav-item { display: inline-block; height: 70px; line-height: 70px; } .header-area > .navbar > .navbar-menu > .nav-item:hover * { background-color: transparent; } .header-area > .navbar > .navbar-menu > .nav-item > .nav-link { display: block; padding: 0 20px; color: black; } } 마지막으로 html입니다. <!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> <title>Portfolio - Navbar</title> <!-- saved from url = (0013)about:internet --> <!-- icon --> <script src="https://kit.fontawesome.com/15ac349aa2.js" crossorigin="anonymous"></script> <!-- fonts --> <link href="https://fonts.googleapis.com/css2?family=Heebo:wght@100;200;300;400;500;600;700;800;900&family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap" rel="stylesheet"> <!-- user style --> <link rel="stylesheet" href="portfolio.css" </head> <body> <header class = "header-area navbar-fade" id="header"> <nav class = "navbar"> <a class = "navbar-brand" id = "navbarBrand">logo</a> <a class = "navbar-toggler" id = "toggleBtn"><i class = "fa fa-bars"></i></a> <div class = "navbar-menu" id = "menu"> <div class = "nav-item"><a class = "nav-link" id = "navbarAbout">about</a></div> <div class = "nav-item"><a class = "nav-link" id = "navbarService">service</a></div> <div class = "nav-item"><a class = "nav-link" id = "navbarPortfolio">porfolio</a></div> <div class = "nav-item"><a class = "nav-link" id = "navbarReview">review</a></div> </div> </nav> </header> <div> <div> <div> <div> <img src="img\counting-149951__340.jpg"> </div> <div> <img src="img\counting-149953__340.jpg"> </div> <div> <img src="img\counting-149954__340.jpg"> </div> <div> <img src="img\counting-149955__340.jpg"> </div> <a>❮</a> <a>❯</a> <div> <span></span> <span></span> <span></span> <span></span> </div> </div> </div> </div> <!-- user script --> <script src="portfolio.js"></script> </body> </html>
- 미해결나만의 포트폴리오 웹페이지 만들기
자바스크립트 에러 현상
document.getElementById('navbarBrand').addEventListener('click', moveTo.bind(null,'brand'));document.getElementById('navbarAbout').addEventListener('click', moveTo.bind(null,'about')); TypeError: null is not an object (evaluating 'document.getElementById('navbarBrand').addEventListener') 위에 적혀있는 것처럼 했더니 에러가 뜨네요 그래서 다시 확인을 해보았지만 원인을 찾을 수가 없었습니다. 어떻게 해야 할까요
- 미해결나만의 포트폴리오 웹페이지 만들기
건의사항입니다.
최종 결과물을 볼 수 있는 링크도 있으면 좋겠습니다. (예. github.io에서 볼 수 있게요.)
- 미해결나만의 포트폴리오 웹페이지 만들기
CSS
안녕하세요. 강의 잘 보고 있습니다. CSS에서 스타일을 적용하고자 하는 class를 지정할때 첫번째 방법으로 하셨는데요. 두번째(comment out한 부분)처럼 바로 .navbar-brand를 지정하는것과 무슨 차이가 있나요? 결과를 눈으로 봤을 땐 거의 차이가 없어 보여서 질문합니다. 그리고 ' > ' 의 역할이 무엇인지도 궁금합니다. 감사합니다. .header-area > .navbar > .navbar-brand { display: inline-block; position: absolute; top: 50%; transform: translateY(-50%); font-size: 32px; cursor: pointer; } /* .navbar-brand { display: inline-block; position: absolute; top: 50%; transform: translateY(-50%); font-size: 32px; cursor: pointer; } */
- 나만의 포트폴리오 웹페이지 만들기
js에서 className에 관련된 에러
삭제된 글입니다
- 미해결나만의 포트폴리오 웹페이지 만들기
작동이안되여..
js 부분 똑같이 했고 css랑 html도 똑같이 했는데 css 까진 잘되는데 js 가 작동이 안되네요 빠른 답변 부탁드려요 제발요
- 미해결나만의 포트폴리오 웹페이지 만들기
이미지
저도 똑같이 했는데 왜 이미지가 2씩 안보이져?
- 미해결나만의 포트폴리오 웹페이지 만들기
.header-area > .navbar에 적용한 css에 대해서
안녕하세요, 강의 잘 보고 있습니다. .header-area > .navbar{ width: calc(100%-120)px; margin: 0 60px; overflow: hidden; } 이 내용에서 굳이 width에 다가 calc를 적용하면서 좌우의 120px을 빼주는 이유가 무엇인지 궁금합니다. margin으로 양옆에 60px씩 주는것 때문에 width가 100%+120px이 되는 것이 문제라면, 차라리 padding을 양옆에 60px을 줘도 좌우 간격은 여백이 생길텐데요. 혹시 이유가 있으신지 해서 질문 올려봅니다.
- 미해결나만의 포트폴리오 웹페이지 만들기
css 적용이 안되는 증상
html 후 css 강좌 중반까지 진행 중인데 css 적용이 안되는 것 같습니다. 이렇게 판단한 이유는... (1) css 초기 구문에 'uppercase'를 적용하게 하는 부분이 있지만 제 브라우저에선 그렇게 적용이 안되네요. (2) 메뉴 박스에 그림자 효과 적용한 부분도 적용이 안됩니다. 저만의 문제일까요? 아니면 css 적용을 위해선 VS-code나 윈도우즈 환경 등에서 사전에 설정이나 조정이 필요한 부분이 있을까요?
- 미해결나만의 포트폴리오 웹페이지 만들기
className과 classList에 대해 궁금합니다.
className과 classList에 대해 궁금합니다.감사합니다.
- 미해결나만의 포트폴리오 웹페이지 만들기
이미지 슬라이드 적용예제에서 자바스크립트 함수 bind()에 대해 궁금합니다.
// 반응없음//document.getElementById('imagePrev').addEventListener('click',plusImageSlides(-1));//document.getElementById('imageNext').addEventListener('click',plusImageSlides(1));document.getElementById('imagePrev').addEventListener('click',plusImageSlides.bind(null, -1));document.getElementById('imageNext').addEventListener('click',plusImageSlides.bind(null, 1));자바스크립트 기초개념이 부족하여 bind에 대해 검색해보았지만 잘 이해가 되지 않아서 글 남깁니다.짧은 소견으로는 위에 주석처리한 부분으로 동작해도 될 것 같은데 안되더라구요...bind는 나중에 인자값을 추가할 수 있도록 하는 역할을 한다고 하는 데 어차피 plusImageSlide는 인자가 하나밖에 없고 -1을 넣어주고 있는 데 null은 무엇을 의미하는 것인지 잘 모르겠습니다.구체적인 답변 부탁드립니다. 감사합니다
- 미해결나만의 포트폴리오 웹페이지 만들기
CSS 적용이 안됩니다ㅠㅠ
image-prev, image-next class만 css 적용이 안됩니다.. 오타난 부분도 없고, 따로 에러메시지가 뜨는 것도 없는데 사진들 맨 아래쪽에 < > 표시만 되고 css 적용이 안되네요.. ❮ ❯ html에서 위의 코드 부분이고 .welcome-area > .container > .image-prev, .welcome-area > .container > .image-next { cursor: pointer; position: absolute; top : 50%; width: auto; padding: 16px; margin-top: -22px; background-color: rgba(0,0,0,0.8); } .welcome-area > .container > .image-next { right: 0; border-radius: 3px 0 0 3px; } .welcome-area > .container > .image-prev:hover, .welcome-area > .container > .image-next:hover { background-color: rgba(0,0,0,0.8); } css는 위의 부분부터 적용되지 않습니다. 어떻게 해결해야 하나요ㅠㅠ?
- 미해결나만의 포트폴리오 웹페이지 만들기
header 부분에 js파일을 타이핑 했으나 오류가 뜸니다.
선생님이 하신것고 동일하게 타이핑 했는데 오류가 생겨서요.확인 좀 해주시고요. 왜 그런지 좀 가르켜 주세요. 이미지로 캡쳐 떴습니다.https://github.com/wiris123/Admin/blob/underwearRun/jsError.png
- 미해결나만의 포트폴리오 웹페이지 만들기
스크롤을 내리면 네비게이션바 길이가 줄어듭니다
js파일 작성하고스크롤을 내리면if (document.documentElement.scrollTop > 70)이 실행될 때,네비게이션바의 width가 왼쪽으로 줄어들면서 logo와 menu들이 겹쳐서 나타납니다.html, css, js파일 오타까지 다 확인하고강사님 github에 있는 코드 그대로 복붙해서 실행해도 마찬가지입니다...ㅠ어디가 문제인지 찾을 수 가 없어요..