48,400원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결실전! 웹사이트제작! Step by Step! (대방산업_InteractiveWeb)
슬라이드 안 find out more 버튼 위치관련
강사님, 안녕하세요.슬라이드 안 find out more 버튼 스크롤 애니메이션이,가운데 정렬로 올라가는게 아니라, 오른쪽으로 치우쳐있다 가운데로 올라갑니다. css에선 left:50%; 되어 있던데 왜 그럴까요??(올려놓으신 수업 파일도 똑같은 현상입니다.)
- 미해결실전! 웹사이트제작! Step by Step! (대방산업_InteractiveWeb)
Splitting / 텍스트가 빠르게 올라는게 아니라 천천히 느리게 올라오게 하려면 어떻게 수정하면 될까요?
Splitting / 텍스트가 빠르게 올라는게 아니라 천천히 느리게 올라오게 하려면 어떻게 수정하면 될까요?
- 미해결실전! 웹사이트제작! Step by Step! (대방산업_InteractiveWeb)
background image 관해서
안녕하세요 강의잘 듣고있습니다. 근데 대방건설 홈페이지에서 하단에 background-image를 이용해서 career를 하셨는데, 도메인 연결해서 도메인으로 들어가면 이미지가 안나옵니다.브라켓이나 비쥬얼스튜디오코드에서 라이브서버로 하면 보이는데,인터넷창에서 도메인으로 접속하면 안나오네요 이유를 아실까요?
- 미해결실전! 웹사이트제작! Step by Step! (대방산업_InteractiveWeb)
slick 스크립트 추가시 적용이 안됩니다
안녕하세요slick 스크립트 내용추가시 적용이 안되고 헤더가 사라지는 현상이 발생합니다.. 몇번을 다시 해봐도 적용이안되어 메일도 보냈습니다 확인 부탁드립니다 ㅠㅠ
- 미해결실전! 웹사이트제작! Step by Step! (대방산업_InteractiveWeb)
반응형이 아니라서 그런지, 강사님 모니터보다 작은 랩탑으로 하니까 레이아웃이 안맞아요
이번강의에서 .list의 width값을 1520px 로 하면 제 랩탑의 화면 길이보다 길어서 화면단을 벗어납니다. 때문에 margin:auto 로 하더라도 .list 부분이 너무 길어서 중앙정렬이 되지 않고, 왼쪽으로 붙고 가로 스크롤이 생깁니다. 이상황에서 강사님의 말씀대로 .list li:nth-child(1)의 포지션값을 left:-50px로 설정하면 화면에서 벗어나서 짤립니다. 제작하는 웹사이트가 반응형이 아니라서 이런 문제가 생기는거겠죠? 강의를 듣다가 조금 난감하네요..혹시 제가 잘못 이해한건지 이럴때는 제가 그냥 임의로 값을 제 화면에 맞게 조정하는 수 밖에 없는지 답변 부탁드립니다.
- 미해결실전! 웹사이트제작! Step by Step! (대방산업_InteractiveWeb)
slick을 사용하면 이미지가 슬라이드로 안되고 블록으로 밑으로 내려가요
안녕하세요, 쌤! 수업을 듣던중에 막혀서 ㅠㅠ slick을 사용하면 이미지가 슬라이드로 안되고 블록으로 밑으로 내려가요 첫번째 이미지가 헤더를 덮어버리고 이미지만 올라옵니다ㅠㅠ 너무 답답해서 글남겨드립니다! 메일로 파일도 함께 보내드려볼게요 바쁘시겟지만 확인한번 부탁드리겠습니다!!
- 미해결실전! 웹사이트제작! Step by Step! (대방산업_InteractiveWeb)
제이쿼리 구문
안녕하세요~어제 질문 드렷다가 오늘 바로 수강해서 듣기 시작햇는데 저는 말씀드렷다 시피 웹디자인 기능사 실기 준비할때는 제이뭐리를 밑에 구문저럼 간단하게 적용하는 방법 까지만 배웟었는데 이 강의에는 복잡하게 구문이 들어가 있는것 같아서 당황스러워서 질문 달아봅니다..ㅠㅠ 실무할때나 포트폴리오 웹사이트를 만들려고 할때 제이쿼리 구문에 대해서 더 공부해서 이 강의 에서처럼 구문 적용을 해야 하는건가요?
- 미해결실전! 웹사이트제작! Step by Step! (대방산업_InteractiveWeb)
slick.js 사용에 대한 질문
선생님 안녕하세요! 제가 평소에 경로를 안쓰는 습관이 있어서 ( 안좋은 습관이지만..) .slick-arrow 랑 .slick-dots 둘다 css줄때도 경로를 안썼는데 .slick-arrow는 경로를 안써도 화면에 표시가 되고 .slick-dots는 경로를 안쓰니까 화면에 나오지 않는데 해당 플러그인만의 특성(?) 일까요? 왜 안나오나 싶어서 개발자도구를 봤더니 .slick-dots는 경로를 안쓰니까 width값, height값이 적용이 안되더라구요. 이미지 첨부할게요!
- 미해결실전! 웹사이트제작! Step by Step! (대방산업_InteractiveWeb)
splitting js 질문 입니다
선생님 질문 있습니다 ! splitting js를 사용하면 자동으로 <span>이 붙는게 맞나요?? 개발자 도구로 확인했을 때 저는 이 과정을 똑같이 했는데 적용이 안되는데 스크립트도 잘 연결 됐고 오류도 없는데 왜 안되는지 모르겠습니다 ㅜㅜ
- 미해결실전! 웹사이트제작! Step by Step! (대방산업_InteractiveWeb)
스크롤시 애니메이트효과
안녕하세요. 강의 잘 듣고있는데요. 스플리팅js 적용도 잘 해줬는데 스크롤시 애니메이트적용이 안되요 ㅜ 처음 새로고침할때만 적용이 됩니다 ㅜ
- 미해결실전! 웹사이트제작! Step by Step! (대방산업_InteractiveWeb)
질문
안녕하세요 왕초보입니다 다름이아니라 .wrap 을 하는 이유가 궁금합니다. .wrap 에 width:100%; overflow:hidden overflow는 부모한데만 적용시켜주면 되는거아닌가요? width도 태그에다가 그냥 지정해서 100%로 하면되지않나요? 왜 전체로 감싸서 하는지 잘 모르겠네요 ㅠㅠ 2img를 p태그로 감싸는 이유 3.section.about ul li a p.img {width:100%; height:369px;overflow:hidden;} section.about ul li a p.img img {width:100%; height: auto; transition: all 0.8s;} width:100%; 를 안해도 이미지크기 만큼 차지하는거아닌가요?! 왜 하는지 궁금합니다 ㅠㅠ
- 미해결실전! 웹사이트제작! Step by Step! (대방산업_InteractiveWeb)
splitting text animation
설명 해주실 때 설명이 너무 빈약한거 같아요ㅠㅠ calc(60ms * var(--char-index)); 이 부분에서 var는 css에서 무엇인지 (--char-index) 얘는 또 무엇인지 대충 이런거다 말씀해주셨는데 정확히 이해가 안되니까 설명을 듣고 또 구글에 검색해야되는게 불편하네요ㅠㅠ 저것들 하나 하나가 정확하게 어떤것들인 댓글로 설명 부탁드립니다ㅠㅠ
- 미해결실전! 웹사이트제작! Step by Step! (대방산업_InteractiveWeb)
스플리팅 쓰는 이유가 뭔가요????
이거는 왜 쓰는건가요..??
- 미해결실전! 웹사이트제작! Step by Step! (대방산업_InteractiveWeb)
하얀줄이 사진위로 올라옵니다.
@charset "utf-8"; @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Noto+Sans+KR:wght@400;500;700&display=swap'); /* layout */ body{ font-family: 'Noto Sans KR', sans-serif; font-size: 14px; } .wrap { width:100%; overflow: hidden; } .en{ font-family: 'Bebas Neue', cursive; } /* header */ header{ width: 100%; position: fixed; z-index: 100; background: #191a1a; } .innerHeader{ padding : 0 60px; height: 90px; transition : all 0.3s; } .innerHeader .logo{ width: 200px; height: 36px; float: left; margin-top: 28px; transition: all 0.3s; } .innerHeader .logo a{ display: block; width: 100%; height: 100%; position: relative; } .innerHeader .logo a img{ width: 100%; position: absolute; top: 0; left: 0; transition: all 0.3s; } .innerHeader .logo a img:nth-child(2){ opacity: 0; } /* gnb */ .gnb{ position: absolute; left: 50%; transform : translateX(-50%); width: 800px; } .gnb>li{ float:left; width: 20%; height: 90px; line-height: 90px; position:relative; transition: all 0.3s; } .gnb>li>a{ display:block; width: 100%; height: 100%; text-align: center; color: white; font-size: 18px; font-weight: 500; } .gnb>li>a:before{ position: absolute; content:''; background: #f8b922; width: 75%; height: 100%; z-index: -1; left: 50%; transform:translateX(-50%); top:-90px; opacity: 0; transition: all 0.3s; } .gnb li:hover>a:before, .gnb li>a:focus:before{ opacity: 1; top:0; } .gnb ul.inner{ position: absolute; top:80px; left: 12%; width: 160px; background: white; box-shadow: 2px 2px 8px rgba(0,0,0,0.1); padding: 0; box-sizing: border-box; line-height: 0px; opacity: 0; transition: opacity 0.5s, top 0.5s; overflow: hidden; } .gnb ul.inner.on{ top:90px; padding: 10px 25px; line-height: 50px; opacity: 1; } .gnb ul.inner a{ display: block; width: 100%; height: 100%; font-size: 17px; } .gnb ul.inner a span{ display:inline-block; position: relative; } .gnb ul.inner a span:after{ content:''; width: 0%; height: 2px; background: #f8b922; position: absolute; left: 0; bottom: 8px; transition: all 0.3s; } .gnb ul.inner a:hover span:after,.gnb ul.inner a:focus span:after{ width: 100%; padding-right: 10px; } /* fixHeader */ header.on .innerHeader{ height: 60px; transition: all 0.4; } header.on .innerHeader .logo{ margin-top: 13px; transition: all 0.4; } header.on .innerHeader .logo a img:nth-child(1){ opacity: 0; } header.on .innerHeader .logo a img:nth-child(2){ opacity: 1; } header.on .innerHeader .gnb > li{ height: 60px; line-height: 60px; transition: all 0.4; } header.on .gnb ul.inner.on{ top: 60px; } /* section.visual */ .visual .slide li{ position: relative; width: 100%; height: 870px; text-align: center; color:white; } .visual .slide li:before{ content: ''; width: 32px; height: 32px; position: absolute; left: 50%; transform: translateX(-50%); top: 22%; background: url(../img/symbol.png) no-repeat center/cover; z-index: 1; } .visual .slide li img{ height: 100%; width: auto; position: absolute; left: 50%; transform: translateX(-50%) scale(1); top: 0; } .visual .slide li .txt{ position: absolute; width: 100%; top: 34%; font-size: 135px; line-height: 1; letter-spacing: 12px; } .visual .slide li a{ display: inline-block; position: absolute; left: 50%; transform: translateX(-50%); bottom: 27%; font-size: 20px; letter-spacing: 1px; } .visual .slide li a:after{ content:''; width: 65%; height: 2px; position: absolute; left: 50%; transform: translateX(-50%); bottom: -6px; background: #f8b922; transition: all 0.3s; } .visual .slide li a:hover:after, .visual .slide li a:focus:after{ width: 100%; transition: all 0.3s; } /* mask */ .visual .slide li .mask{ display: block; position: absolute; top: 0; width: 1px; height: 100%; background: rgba(255,255,255,0.35); } .visual .slide li .mask.a { left: 0%; } .visual .slide li .mask.b { left: 25%; } .visual .slide li .mask.c { left: 50%; } .visual .slide li .mask.d { left: 75%; } /* 화살표 */ .slick-arrow{ position: absolute; top: 50%; transform: translateY(-50%); z-index: 20; background: none; width: 110px; height: 52px; border: none; text-align: right; text-transform: uppercase; font-size: 20px; color:#fff; letter-spacing: 2px; font-family: 'Bebas Neue', cursive; } .slick-next{ right: 0; text-align: left; } .slick-arrow:after{ content:''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 55%; height: 2px; background: #fff; } .slick-next:after{ left:45%; } .slick-arrow:before{ content: ''; width: 0%; height: 100%; background: #fff; position: absolute; top: 0; transition: all 0.4s; z-index: -1; } .slick-next:before{ right: 0; } .slick-prev:before{ left: 0; } /* 화살표 호버 효과 */ .slick-arrow:hover{ color:#000; transition: all 0.3s; cursor: pointer; } .slick-arrow:hover:before{ width: 112%; } .slick-arrow:hover:after{ background: #f8b922; } /* 인디케이터 */ .visual .slide .slick-dots{ position: absolute; bottom: 10%; left: 50%; transform: translateX(-50%); z-index: 20; } .visual .slide .slick-dots li{ width: 2px; height: 20px; float: left; margin: 0 10px; } .visual .slide .slick-dots li:before{ display: none; } .visual .slide .slick-dots li button{ width: 100%; height: 100%; background: #fff; border:none; text-indent: -9999px; } .visual .slide .slick-dots:hover, .visual .slide .slick-dots button:hover{ cursor: pointer; } /* 활성화된 슬라이드 인디케이터 크기와 색 변경 */ .visual .slide .slick-dots li.slick-active button{ background: #f8b922; height: 28px; margin-top: -12px; transition: height 0.3s; } /* 슬라이드 애니메이션 */ /* 1. 노란게이지바 */ .visual .slick-active:after{ content:''; width: 100%; height: 5px; background: #f8b922; position: absolute; left: 0; bottom: 0; animation-name: bar; animation-duration: 6s; } @keyframes bar{ 0%{width: 0%;} 100%{width: 100%;} } /* 2. 마스크 애니메이션 */ @keyframes mask{ 0%{width: 25%; background: #000;} 50%{width: 25%; background: #000;} 99%{background: #000;} } .visual .slick-active .mask.a{ animation-name: mask; animation-duration: 0.4s; } .visual .slick-active .mask.b{ animation-name: mask; animation-duration: 0.6s; } .visual .slick-active .mask.c{ animation-name: mask; animation-duration: 0.8s; } .visual .slick-active .mask.d{ animation-name: mask; animation-duration: 1s; } /* splitting text animation */ .visual .slick-active .splitting .char { display: inline-block; animation: slide-up 1s cubic-bezier(.5, 0, .5, 1) both; animation-delay: calc(60ms * var(--char-index)); } @keyframes slide-up{ 0%{transform: translateY(30px); opacity: 0;} 80%{transform: translateY(30px); opacity: 0;} } /* FIND OUT MORE 버튼 애니메이션 */ .visual .slick-active a{ animation-name: slide-up2; animation-duration: 1s; } @keyframes slide-up2{ 0%{bottom: 20%;opacity: 0;} 60%{bottom: 20%;opacity: 0;} } .visual .slick-active img{ animation-name: img; animation-duration: 7s; } @keyframes img{ 0%{transform: scale(1.2) translateX(-50%);} } /* contents */ .contents{ position: relative; background: #fff; margin-bottom: 5000px; } .contents .line{ display: block; position: absolute; top: 0; width: 1px; height: 100%; background: #eee; } .contents .line.a{ left: 25%; } .contents .line.b{ left: 50%; } .contents .line.c{ left: 75%; } /*information*/ .contents .information .scrollBox{ width: 1200px; margin:0 auto; position: relative; margin-bottom: 150px; } .contents .information .scrollBox .scroll{ display: block; width: 350px; height: 60px; background: #f8b922; padding-left: 25px; box-sizing: border-box; font-size: 20px; letter-spacing: 2px; position: relative; line-height: 60px; } .contents .information .scrollBox .scroll span{ width: 60px; height: 60px; position: absolute; right: 0; top: 0; animation: scroll linear 0.8s 0s infinite; } .contents .information .scrollBox .scroll span img{ width: 100%; } @keyframes scroll{ 0%{top:0;} 50%{top: 7px;} 100%{top: 0;} } .contents .inner{ width: 1200px; margin: 0 auto; position: relative; } .contents .inner:after{ content:''; width: 3px; height: 60px; position: absolute; left: 50%; top: -60px; transform: translateX(-50%); background: #f8b922; } /* 공통된 타이틀 */ .contents .title{ color:#666; } .contents .title .en{ font-size:62px; letter-spacing: 10px; color: #5d6168; line-height: 1.1; } .contents .title p{ font-size: 24px; margin-top: 15px; }
- 해결됨실전! 웹사이트제작! Step by Step! (대방산업_InteractiveWeb)
.안녕하세요 J.영님 ! 그 전 질문을 한 중1학생입니다. 이번에 학교에서 내가 꿈꾸는 장래희망을 가진 사람과 면담하기라는 과제가 있는데 여러가지 질문을 하고 답변하는 형식으로 과제를 합니다. 혹시라도 실례가 안된다면 이메일 주소나 오픈채팅 링크를 받아볼 수 있을까요?
.
- 미해결실전! 웹사이트제작! Step by Step! (대방산업_InteractiveWeb)
안녕하세요!
안녕하세요 . 선생님께서 오프라인으로 수업 하고 계시는 곳이 계시나요!? 오프라인으로 진행하고 계시거나 예정이 있으시면 공유해주세요~!
- 해결됨실전! 웹사이트제작! Step by Step! (대방산업_InteractiveWeb)
수강평 이벤트 당첨 관련
안녕하세요. 수강평 이벤트에 1차로 당첨되서 메일 보냈는데 확인을 안하셔서 이렇게 글 남깁니다.
- 미해결실전! 웹사이트제작! Step by Step! (대방산업_InteractiveWeb)
visual 클래스 높이 100%가 안됩니다.
안녕하세요. visual 클래스와 부모 wrap과 body에 height 100%를 넣어줘 봤는데요 visual 클래스부터 100% 지정이 안됩니다. 왜그러는건가요?
- 미해결실전! 웹사이트제작! Step by Step! (대방산업_InteractiveWeb)
다음 강좌는 언제쯤 올려주시나요?
다음 강좌는 언제쯤 올려주시나요? 기다리고 있습니다~~
- 해결됨실전! 웹사이트제작! Step by Step! (대방산업_InteractiveWeb)
메뉴를 클릭하면 메뉴 테두리가 왜 나타나는 걸까요? 궁금합니다.
선생님~~ 안녕하세요? 대방산업개발 실제 사이트랑 선생님께서 만드신 사이트랑 좀 차이가 있네요. 첨부사진을 보시면 왼쪽화면은 선생님께서 만드신 대방사이트고 오른쪽화면은 실제 대방산업개발 사이트입니다. 선생님께서 만드신 사이트는 메뉴를 클릭하면 왜 메뉴에 테두리가 생기나요? 실제 사이트엔 클릭시 테두리가 안나타납니다. 테두리가 보이지 않아야 되는데 선생님께서 놓치신건지 궁금합니다. 이 부분을 해결하려면 어떻게 해야 하나요?