선생님 코딩좀 봐주세요..

// HTML다 실행후, MAIN JS를 읽어라 $(function(){ // Slick slider - welcome $('.slideshow').slick({ infinite:true, dots:false, autoplay:true, autoplaySpeed:2000, fade:true, speed:1000, pauseOnHover:false }); // Typing Script $('#typing').typeIt({ strings: ["Business strategy.", "Innovation Plan.", "Creative Idea."], // 타이핑 텍스트 입력 speed: 100, // 알파벳 타이핑 속도 autoStart: true, // 자동 재생 사용 breakLines: false, // 줄 바꿈 사용안함 loop:true }); }); // Accordion FAQ Slide $(function(){ $('.faq-desc').eq(0).show(); $('.faq-title').click(function(){ $(this).next().stop().slideDown(); $(this).parent().siblings().children('.faq-desc').stop().slideUp(); $(this).parent().addClass('active'); $(this).parent().siblings().removeClass('active'); }); }); // Slick slider $('.review-slider').slick({ infinite: true, // dots: true, autoplay:true, autoplaySpeed: 3000, });

선생님 코딩좀 봐주세요..

/* Font */ @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;1,400&display=swap'); /* font-family: 'Source Sans Pro', sans-serif; */ @import url('https://fonts.googleapis.com/css2?family=Gothic+A1:wght@100;200;300;400;500;600&display=swap'); /* font-family: 'Gothic A1', sans-serif; */ /* */ /* Setting CSS */ /* 박스사이징 고정 */ *{ box-sizing: border-box; } /* A태그 색상 및 데코 none */ a{ text-decoration: none; color:#222; } /* 버튼,인풋에 기본적으로 들어가있는 아웃라인 제거 */ button, input{ outline:none; } /* h태그들 제거, 마진 탑만 0, 라인하이트 설정 */ h1,h2,h3,h4,h5,h6{ margin-top: 0; font-weight: normal; line-height: 1.5em; } /* Default CSS */ /* 바디에 글꼴설정, a태그와 같은 글씨색상 */ body{ font-family: 'Gothic A1', sans-serif; font-size: 18px; line-height: 1.7em; margin: 0; background-color: white; color:#222; } section{ padding:100px 0px; } /* Header */ header{ position: fixed; width: 100%; z-index:999; } .header-inner{ width: 1300px; margin: auto; overflow: hidden; padding-top:30px; padding-bottom:15px; } .logo{ float: left; } .logo img{ margin-top:-5px; } .gnb{ float: right; } .gnb a{ margin:10px; font-size:16px; } /* Welome */ .welcome{ height: 90vh; position: relative; } .welcome-heading{ position: absolute; top:50%; transform:translateY(-50%); left:150px; text-align: center; width: 750px; } .welcome-heading span{ font-size: 24px; } /* @@@@@@@@@@@@ Slickslider arrow delete @@@@@@@@@@@@@@*/ .slideshow .slick-arrow{ display: none !important; } .slideshow img{ outline:none; } /* mouse wheel */ .mouse{ position: absolute; border:2px solid #00A69C; width: 30px; height: 45px; border-radius: 40%; bottom:120px; left:200px; opacity: 0.15; } .wheel{ width: 4px; height: 15px; background-color: #00A69C; position: absolute; border-radius: 4px; left:11px; top:5px; animation: wheel 2s linear infinite; } @keyframes wheel{ 0%{top:0;} 50%{top:15%;} 100%{top:0;} } .gnb a{ transition: 0.5s; } .gnb a:hover{ color:white; background-color: #00A69C; } .gnb a{ padding:6px 8px; border-radius: 5px; } .welcome-heading h1{ font-family: 'Source Sans Pro', sans-serif; font-size: 55px; font-weight: 600; line-height: 1.2em; margin-bottom: 30px; margin-top: 10px; } .welcome-heading h1 em{ display: block; margin-top: 13px; font-style: normal; color:#eb4d4b; } .welcome-heading p{ padding: 0 100px; margin-bottom: 30px; } .welcome-btns .btn{ display: inline-block; width: 150px; padding:5px; border-radius: 5px; margin-right:10px; transition: 0.5s; } .btn.start{ background-color: royalblue; color:white; } .btn.start:hover{ background-color: black; transform:translateY(-5px); } .btn.guide{ background-color: white; color:#222; } .btn.guide:hover{ color:white; background-color: #222; transform:translateY(-5px); } /* ceo-acess */ .ceo-access{ } .ceo-inner, .access-inner{ width: 1300px; margin: auto; } .ceo-content{ overflow: hidden; border-bottom: 1px solid #eee; padding:50px 0; } .ceo-content > div{ float: left; width: 50%; } .ceo-left{ padding-right: 50px; } .ceo-left img{ width: 30px; filter: invert(36%) sepia(63%) saturate(1781%) hue-rotate(150deg) brightness(100%) contrast(101%); } .ceo-right{ text-align: center; } .ceo-left h3{ font-weight:bold; margin-bottom: 20px; } .ceo-right > div{ float: left; padding:20px; } .ceo-msg{ width: 60%; } .ceo-msg h3{ font-size: 29px; color:#00A69C; } .ceo-msg h3 big{ display: block; } .ceo-photo{ width: 40%; } .ceo-photo img{ border-radius: 15px; width: 100%; } .access-content{ overflow: hidden; padding:50px 0; } .access-content > div{ float: left; width: 50%; } .access-left{ padding-top: 60px; } .access-right{ text-align: center; } .btn-download{ padding-top: 30px; } .btn-download a{ margin-right:10px; } /* banner */ .banner{ background-color: #69acfe; } .banner-inner{ width: 1300px; margin: auto; padding-left:40px; } .banner-content{ overflow: hidden; padding:40px 0; } .banner-content > div{ float: left; width: 50%; } .tab-btn{ } input[name=tabmenu]{ display: none; } .tabs{ } .tab-btn label{ width: 30%; display: inline-block; text-align: center; margin:8px; cursor: pointer; } .tab-btn label em{ background-color: #fff; display: inline-block; width: 110px; height: 110px; border-radius: 50%; text-align: center; padding-top:21px; } .tab-btn label em img{ width: 60px; filter: invert(57%) sepia(62%) saturate(664%) hue-rotate(186deg) brightness(103%) contrast(103%); } .tab-btn label span{ display: block; text-align: center; margin-top:15px; color:white; } .tab{ display: none; color:white; padding-top:30px; padding-left:70px; } .tab h2{ font-weight: bold; font-size: 30px; } /* Checked function */ input[id=tab1]:checked ~ .tabs .tab1, input[id=tab2]:checked ~ .tabs .tab2, input[id=tab3]:checked ~ .tabs .tab3{ display: block; } input[id=tab1]:checked ~ .tab-btn label[for=tab1] em, input[id=tab2]:checked ~ .tab-btn label[for=tab2] em, input[id=tab3]:checked ~ .tab-btn label[for=tab3] em { background-color: #34495e; } input[id=tab1]:checked ~ .tab-btn label[for=tab1] em img, input[id=tab2]:checked ~ .tab-btn label[for=tab2] em img, input[id=tab3]:checked ~ .tab-btn label[for=tab3] em img { filter:invert(); } input[id=tab1]:checked ~ .tab-btn label[for=tab1] span, input[id=tab2]:checked ~ .tab-btn label[for=tab2] span, input[id=tab3]:checked ~ .tab-btn label[for=tab3] span{ color:black; } /* feature */ .headline-share{ margin-top:80px; text-align: center; } .headline-share h1{ font-weight: bold; font-size: 40px; position: relative; } .headline-share h1:after{ content:''; position: absolute; height: 5px; width: 80px; background:linear-gradient(to right, #1f8de6, #5ed6fe); top:130%; left:50%; transform: translate(-50%,-50%); } .headline-share p{ padding-top:10px; } .feature-inner{ width: 1300px; margin: auto; } .feature-content{ overflow: hidden; margin:100px 0; } .feature-content > div{ float: left; width: 50%; text-align: center; } .feature-about h2{ font-weight: bold; font-size: 30px; padding-top:10px; } .feature-about{ padding:0 20px; padding-top:80px; } /* vision */ .vision-content{ overflow: hidden; } .vision-content > div{ float: left; width: 33.3333%; height: 400px; } .vision-item-desc{ background-color: #f9f9f9; display: flex; justify-content: center; align-items: center; } .vision-item-headline{ width: 70%; } .vision-item-desc h3{ font-size: 28px; margin-bottom: 0; } .vision-item-desc hr{ width: 45px; height: 3px; border:none; background-color: purple; display: inline-block; } .vision-item-desc p{ margin-top: 0; } .vision-item-photo img{ width: 100%; object-fit: cover; height: inherit; } /* faq */ .faq{ /* display: none; */ } .faq-inner{ width: 1300px; margin: auto; } .faq-content{ } .faq-content > div{ float: left; width: 50%; padding: 30px; min-height: 800px; } .faq-item{ border: 1px solid #ddd; border-radius: 10px; margin-bottom: 15px; } .faq-item > div{ padding: 17px; } .faq-title{ color:skyblue; cursor: pointer; font-weight: bold; } .faq-title:after{ content:'\f105'; font-family: fontawesome; float: right; color:gray; transition: 0.3s; } .faq-desc{ display: none; } .awards-content{ text-align: center; } .award-image{ position: relative; /* border: 1px solid #000; */ margin-bottom: 40px; } .award-image:after{ content: 'July 21 1993'; position: absolute; background-color: black; color:white; width: 180px; height:40px; text-transform: uppercase; text-align: center; line-height:40px; bottom: -20px; left:50%; transform:translate(-50%); } .award-image img{ width: 100%; } .awards-content h2{ font-weight: bold; font-size: 30px; color:gold; } .awards-content p{ margin-bottom: 30px; } .btn-awards{ border: 1px solid #000; padding:12px 20px; border-radius: 5px; text-transform: uppercase; transition: 0.3s; } .btn-awards:hover{ color:white; border-color:transparent; background-color: crimson; } .faq-item.active{ border:1px solid skyblue; } .faq-item.active .faq-title:after{ color:skyblue; transform: rotate(90deg); } /* review */ .review{ background-color: #f9f9f9; } .review-inner{ width: 1300px; margin: auto; } .review-content{ text-align: center; width: 800px; margin: auto; } .slogan{ font-size: 35px; } .review-slider{ padding:0 50px; } .review-slider div p{ } .review-slider div p span{ display: block; font-weight: bold; } .slick-dots .slick-dots li{ margin: 0; } ul.slick-dots{ margin-left:-45px; } .review-slider .slick-prev:before, .review-slider .slick-next:before{ margin-top:-50px; } .review-slider .slick-prev:before{ color:gray; content:"\f104"; font-family: fontawesome; font-size: 30px; display: block; } .review-slider .slick-next:before{ color:gray; content:"\f105"; font-family: fontawesome; font-size: 30px; display: block; } /* focus */ .focus{} .focus-inner{ width: 1300px; margin: auto; } .focus-item i{ font-size: 10px; } .focus-content{ text-align: center; } .start{ padding:10px; } .focus-item{ margin-top:30px; display: inline-block; width: 30%; padding:0 50px; } .focus-item img{ width: 50px; filter: invert(91%) sepia(82%) saturate(4535%) hue-rotate(333deg) brightness(100%) contrast(95%); } .focus-item h3{ font-weight: bold; } .focus-item p{} /* guide */ /* news */ /* footer */

왜 전 선생님과 화면이 다를까요?

확인했습니다 ㅎ.

왜 전 선생님과 화면이 다를까요?

선생님은 코딩 입력하면 바로 위로 뜨던데 전 아래에만 떠서요..ㅠ 끝까지봐도그러네요 ㅠㅠ 상대주소로 입력은 수정해서 작성했습니다 (사진)

따라했는데 이상합니ㅏㄷ..ㅠ

영상을 좀 더 끝까지봤으면 theme.css 들어갓을때 화면이 제 화면인건데 제가 바로 멈추고 계속 해결만하려고하니 안되었네요 ㅠㅠ죄송합니다. 그리고 상대주소로 넣는것도 배웠네요 감사합니다

앵커 만들기 압축파일

$('header a').click(function(e) { $.scrollTo(this.hash || 0, 900); e.prevenDefault(); }); 여기서 틀린게있나ㅣ요?전 왜 스크롤링 스무스가 안되느걸까요 ..

가로 정렬할 때

div class="tab-inner"> input type="radio" name="tabmenu" id="tab1" checked> input type="radio" name="tabmenu" id="tab2"> input type="radio" name="tabmenu" id="tab3"> h1>Testimonialsh1> div class="tabs"> div class="items"> div>Content1div> div>Content2div> div>Content3div> div> div> div class="btn"> label for="tab1">label> label for="tab2">label> label for="tab3">label> div> div> body{ display: flex; align-items: center; justify-content: center; height: 100vh; } .tab-inner{ height: 500px; border:1px solid green; } input[name=tabmenu]{ display: none; } .tabs{ border:1px solid red; width: 3600px; height: 400px; position: relative; } .items{ height: 400px; position: absolute; top:0; left: 0; transition: 0.5s; } .items div{ float: left; border:1px solid blue; width: 1200px; height: 400px; box-sizing: border-box; } .btn{ text-align: center; } .btn label{ width: 10px; height: 10px; background-color: lightgray; border-radius: 50%; display: inline-block; cursor: pointer; } 이렇게하면,, 버튼이 content1내에서 가운데정렬이아니라 전체 3박스에서 가운데정렬이되는데 왜그런것일까요?.