Thumbnail
BEST 개발 ・ 프로그래밍 웹 개발
나만의 포트폴리오 웹페이지 만들기
(4.3)
10개의 수강평 ∙ 248명의 수강생

11,000원

지식공유자 : 이수민
총 20개 수업˙총 2시간 47분
평생 무제한 수강
수료증 발급 강의
초급 대상
내 목록 추가 297 공유
kebin0613 프로필

클릭시 드롭다운이 되지 않습니다.. kebin0613 1달 전
5:35 처럼 클릭했을 시 드롭다운 되지 않습니다.. awesome kit로 진행하였었는데 혹시 충돌이나 우선순위 때문인가 싶어 해당 강의내용처럼 css로 받아와도 되지않습니다. 개발자모드의 콘솔에도 오류가 없다고 뜹니다.. 코드 캡처하여 메일로 전송했습니다. 확인 한번 부탁드리겠습니다 ^^

2
Bananang 프로필

09.NavaigationBar2 js부분 질문입니다. Bananang 1달 전
안녕하세요. 강의 잘 보았습니다. 마지막 NavigationBar2 부분에서 window.scrollTo(0, document.getElementById(id).offsetTop - 70); scrollTo함수의 y좌표값을 왜 offsetTop -70으로 설정했는지 궁금합니다. scrollTo함수나 offsetTop 함수에 대한 사전 설명없이 그냥 진행하시다보니 그 부분에 대해 미리 숙지하지않으면 이해가 어렵네요. offset API 시리즈는 부모의 포지셔닝 정책에 따라 절대좌표 or 상대좌표가 나올 수 있다고는 알고있는데 아직 정확하게 이해가 되지는 않습니다... 반응형웹으로 제작하였는데 왜  getBoundingClientRect()가 아닌 offset 을 사용했는지 궁금합니다. 이 부분에 대한 추가설명 요청드립니다.

1
박진우 프로필

navigation bar 만들기 java script부분에 질문이 있습니다. 박진우 2달 전
안녕하세요 현재 강의를 열심히 듣고 있는 학생입니다. 현재 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>&#10094;</a>           <a>&#10095;</a>           <div>             <span></span>             <span></span>             <span></span>             <span></span>           </div>         </div>       </div>     </div>     <!-- user script -->     <script src="portfolio.js"></script>   </body> </html>

1
스가유진 프로필

자바스크립트 에러 현상 스가유진 4달 전
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') 위에 적혀있는 것처럼 했더니 에러가 뜨네요 그래서 다시 확인을 해보았지만 원인을 찾을 수가 없었습니다. 어떻게 해야 할까요

1
Yong-Hae Lee 프로필

건의사항입니다. Yong-Hae Lee 5달 전
최종 결과물을 볼 수 있는 링크도 있으면 좋겠습니다. (예. github.io에서 볼 수 있게요.)

1
Haeun Jeong 프로필

CSS Haeun Jeong 7달 전
안녕하세요. 강의 잘 보고 있습니다.  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; } */

1
순간을 그리다 프로필

작동이안되여.. 순간을 그리다 10달 전
js 부분 똑같이 했고 css랑 html도 똑같이 했는데  css 까진 잘되는데 js 가 작동이 안되네요  빠른 답변 부탁드려요 제발요

1
순간을 그리다 프로필

이미지 순간을 그리다 10달 전
저도 똑같이 했는데 왜 이미지가 2씩 안보이져?

1
김상훈 프로필

.header-area > .navbar에 적용한 css에 대해서 김상훈 2019.07.18
안녕하세요, 강의 잘 보고 있습니다. .header-area > .navbar{     width: calc(100%-120)px;     margin: 0 60px;     overflow: hidden; } 이 내용에서  굳이  width에 다가 calc를 적용하면서 좌우의 120px을 빼주는 이유가 무엇인지 궁금합니다. margin으로 양옆에 60px씩 주는것 때문에 width가 100%+120px이 되는 것이 문제라면, 차라리 padding을 양옆에 60px을 줘도 좌우 간격은 여백이 생길텐데요. 혹시 이유가 있으신지 해서 질문 올려봅니다.  

1
이정석 (ProCASTer) 프로필

css 적용이 안되는 증상 이정석 (ProCASTer) 2019.04.23
html 후 css 강좌 중반까지 진행 중인데 css 적용이 안되는 것 같습니다. 이렇게 판단한 이유는... (1) css 초기 구문에 'uppercase'를 적용하게 하는 부분이 있지만 제 브라우저에선 그렇게 적용이 안되네요. (2) 메뉴 박스에 그림자 효과 적용한 부분도 적용이 안됩니다.   저만의 문제일까요?  아니면 css 적용을 위해선 VS-code나 윈도우즈 환경 등에서 사전에 설정이나 조정이 필요한 부분이 있을까요?

1
최병규 프로필

className과 classList에 대해 궁금합니다. 최병규 2019.04.20
className과 classList에 대해 궁금합니다.감사합니다.

1
최병규 프로필

이미지 슬라이드 적용예제에서 자바스크립트 함수 bind()에 대해 궁금합니다. 최병규 2019.04.20
// 반응없음//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은 무엇을 의미하는 것인지 잘 모르겠습니다.구체적인 답변 부탁드립니다. 감사합니다

1
pln1992 프로필

CSS 적용이 안됩니다ㅠㅠ pln1992 2019.04.09
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는 위의 부분부터 적용되지 않습니다. 어떻게 해결해야 하나요ㅠㅠ?

2
*은* 프로필

header 부분에 js파일을 타이핑 했으나 오류가 뜸니다. *은* 2019.04.08
선생님이 하신것고 동일하게 타이핑 했는데 오류가 생겨서요.확인 좀 해주시고요. 왜 그런지 좀 가르켜 주세요. 이미지로 캡쳐 떴습니다.https://github.com/wiris123/Admin/blob/underwearRun/jsError.png

1
천혜린 프로필

스크롤을 내리면 네비게이션바 길이가 줄어듭니다 천혜린 2019.04.08
js파일 작성하고스크롤을 내리면if (document.documentElement.scrollTop > 70)이 실행될 때,네비게이션바의 width가 왼쪽으로 줄어들면서 logo와 menu들이 겹쳐서 나타납니다.html, css, js파일 오타까지 다 확인하고강사님 github에 있는 코드 그대로 복붙해서 실행해도 마찬가지입니다...ㅠ어디가 문제인지 찾을 수 가 없어요..

1

11,000원

내 목록 추가 297 공유
지식공유자 : 이수민
총 20개 수업˙총 2시간 47분
평생 무제한 수강
수료증 발급 강의
초급 대상
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의들을
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스