묻고 답해요
158만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨Flutter로 웹 서비스 개발하기 (1) - Responsive Web
섹션6 의 포트폴리오 상세 화면 작업 - 1,2 강의가 같은 강의네요
확인 부탁드릴께요
-
미해결GSAP의 ScrollTrigger를 활용한 포트폴리오 제작
섹션 14 테두리 밖 색상 제거
안녕하세요 강의 너무너무 잘 듣고 있습니다.아무 지식도 없이 쓰려니까 너무 막막했는데 강의 감사합니다 !섹션 14를 만들었는데 cloneWrap에 border-radius를 주니까 테두리 밖 색상이 계속 바뀌면서 보이네요 이 부분을 제거하고 싶어서요:) 혹시 가능한 방법이 있을까요 ? 답변 주시면 감사하겠습니다~!
-
해결됨Flutter로 웹 서비스 개발하기 (1) - Responsive Web
설명 하시는 전체 풀 소스는 어디에 있나요?
설명 하시는 전체 풀 소스는 어디에 있나요? 잘 못찾겠네요 ..
-
해결됨부트스트랩을 활용한 반응형 웹제작 [실전편] 부트캠프
캐러셀이 좌우로 움직이지 않아요 ㅠㅠ
https://getbootstrap.com/docs/4.6/components/carousel/#with-captions위 사이트에서 똑같이 따라했는데..캐러셀이 좌우로 움직이지않고 그냥 뚝뚝 깜빡이면서다음걸로 바뀌어요 ㅠㅠ 이렇게도해보고 저렇게도 해보는데 안되요 ㅠㅠㅠㅠ<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Fabicorn --> <link rel="shortcut icon" href="/img/favicon.ico" type="image/x-icon"> <title>부트스트랩 1강</title> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous"> <!-- fontawesome cdn --> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous"> <!-- animate.css --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/> <!-- my style --> <link rel="stylesheet" href="css/mystyle.css"> </head> <body> <div class="container-fluid"> <header id="top"> <!-- Captions --> <div id="topCarousel" class="carousel" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#topCarousel" data-slide-to="0" class="active"></li> <li data-target="#topCarousel" data-slide-to="1"></li> <li data-target="#topCarousel" data-slide-to="2"></li> <li data-target="#topCarousel" data-slide-to="3"></li> <li data-target="#topCarousel" data-slide-to="4"></li> </ol> <div class="carousel-inner"> <!-- 01 --> <div class="carousel-item active"> <img src="/img/carousel_1.jpg" class="d-block w-100" alt="..."> <div class="carousel-caption d-none d-md-block"> <h5>First slide label</h5> <p>Some representative placeholder content for the first slide.</p> </div> </div> <!-- 02 --> <div class="carousel-item"> <img src="/img/carousel_2.jpg" class="d-block w-100" alt="..."> <div class="carousel-caption d-none d-md-block"> <h5>Second slide label</h5> <p>Some representative placeholder content for the second slide.</p> </div> </div> <!-- 03 --> <div class="carousel-item"> <img src="/img/carousel_3.jpg" class="d-block w-100" alt="..."> <div class="carousel-caption d-none d-md-block"> <h5>Third slide label</h5> <p>Some representative placeholder content for the third slide.</p> </div> </div> <!-- 04 --> <div class="carousel-item"> <img src="/img/carousel_4.jpg" class="d-block w-100" alt="..."> <div class="carousel-caption d-none d-md-block"> <h5>Third slide label</h5> <p>Some representative placeholder content for the third slide.</p> </div> </div> <!-- 05 --> <div class="carousel-item"> <img src="/img/carousel_5.jpg" class="d-block w-100" alt="..."> <div class="carousel-caption d-none d-md-block"> <h5>Third slide label</h5> <p>Some representative placeholder content for the third slide.</p> </div> </div> </div> <button class="carousel-control-prev" type="button" data-target="#topCarousel" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </button> <button class="carousel-control-next" type="button" data-target="#topCarousel" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </button> </div> <!-- Captions end --> </header> </div> <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) --> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script> <!-- my script --> <script src="js/myscript.js"></script> </body> </html>
-
미해결반응형 웹사이트 포트폴리오(App Official Landing Website)
선생님
선생님 해당 display: flex; 할떼, 중앙정렬하는 justify-content: center;/ align-items: center; 할때 해당 div 의height를 auto; 또는 아에안적으면 어떻게되나요/? 꼭안적어도되죠
-
해결됨구글 애드센스 수익형 워드프레스 블로그 만들기
선생님 저좀 도와주세요
선생님 워드프레스 처음인데요 애드센스 신청할려고하면 오류떠요 코드 스니펫 ads 하면 오류떠요 유튜브 따라해도 계속 오류나요 도와주세요
-
미해결반응형 웹사이트 포트폴리오(Architecture Agency)
브라켓 라이브 실행시 실행오류때문에 진도가안나갑니다..ㅠㅠ
■ 질문 남기실 때 꼭! 참고해주세요.라이브실행시 계속 이렇게뜨는데 어떻게해야할까요 ??,,- 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다.
-
해결됨구글 애드센스 수익형 워드프레스 블로그 만들기
워드프레스 설치시 사이트 주소를 https://itdjango.com/wp/ 로 뒤에 wp를 붙여서 생성하였습니다. 변경가능한가요?
워드프레스를 설치할 때 사이트 주소를 원래 https://itdjango.com으로 설정하려고 했는데, wp를 지우는 것을 깜박하여서https://itdjango.com/wp로 설정이 되어버렸습니다.뒤에 wp를 지우고 싶습니다. 방법이 없을까요?
-
미해결반응형 웹사이트 포트폴리오(Architecture Agency)
css full reload 문제가 발생하여 질문드립니다!
<!doctype html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>DesignWorks Architecture Agency</title> <script src="js/jquery-2.1.4.js"></script> <!-- Page Scroll Effects JS & CSS --> <script src="js/velocity/modernizr.js"></script> <script src="js/velocity/velocity.min.js"></script> <script src="js/velocity/velocity.ui.min.js"></script> <script src="js/velocity/main.js"></script> <link rel="stylesheet" href="js/velocity/velocity.css"> <!-- Smooth Scrolling --> <script src="js/jquery.scrollTo.min.js"></script> <!-- Custom JS & CSS --> <script src="custom.js"></script> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="responsive.css"> </head> <!-- hijacking: on/off - animation: none/scaleDown/rotate/gallery/catch/opacity/fixed/parallax --> <body data-hijacking="on" data-animation="rotate"> <div class="container"> <section class="cd-section visible" id="home"> <div> <div class="content"> <img src="images/temp-section-01.jpg"> </div> </div> </section> <section class="cd-section" id="about"> <div> <div class="content"> <img src="images/temp-section-02.jpg"> </div> </div> </section> <section class="cd-section" id="project"> <div> <div class="content"> <img src="images/temp-section-03.jpg"> </div> </div> </section> <section class="cd-section" id="plan"> <div> <div class="content"> <img src="images/temp-section-04.jpg"> </div> </div> </section> <section class="cd-section" id="awards"> <div> <div class="content"> <div class="awards-inner"> <div class="about-awards"> <div class="about-heading"> <!-- 이런식으로 부모요소로 묶기 --> <h2>2024 <br>Architecture Awards <br>Winner</h2> <hr class="bar"> <p> The mission of the Architecture MasterPrize (AMP) is to advance the appreciation and exposure of quality architectural design worldwide. The AMP architecture award celebrates creativity and innovation in the fields of architectural design, landscape architecture, and interior design. Submissions from architects all around the world are welcome. </p> <!-- 새창에서 띄우기 타겟 블랭크 --> <a href="https://architectureprize.com/" target="_blank">View the awards</a> </div> </div> <div class="victory-jump"> <img src="/images/victory-jump.png"> </div> </div> </div> </div> </div> </section> <section class="cd-section" id="location"> <div> <div class="content"> <div class="location-inner"></div> </div> </div> </section> <section class="cd-section" id="contact"> <div> <div class="content"> <img src="images/temp-section-07.jpg"> </div> </div> </section> <header> <div class="gnb-inner"> <div class="logo"> <a href="#none"><img src="images/logo.png"></a> </div> <div class="gnb"> <div class="menu"> <a href="#home">Home</a> <a href="#about">About</a> <a href="#project">Project</a> <a href="#plan">Plan & History</a> <a href="#awards">Awards</a> <a href="#location">Location</a> <a href="#contact">Contact</a> </div> <div class="slogan">We design places, not projects.</div> </div> <div class="trigger"> <span></span> <span></span> <span></span> </div> </div> </header> </div> <!-- 스크롤 부분 --> <a href="#" class="gototop"><img src="images/gototop.png"></a> <!-- 폰트어썸 아이콘부분 --> <a href="#" class="btn-hiring"><i class="fa fa-commenting"></i> Hiring</a> <nav> <ul class="cd-vertical-nav"> <li><a href="#0" class="cd-prev inactive">Next</a></li> <li><a href="#0" class="cd-next">Prev</a></li> </ul> </nav> </body> </html> * pc버전 */ /* Google Web Font : Montserrat */ @import url('https://fonts.googleapis.com/css?family=Montserrat:200,300,400,500&display=swap'); @import url('https://fonts.googleapis.com/css?family=Manrope:300,400,500,600&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;600;700;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Overpass&display=swap'); /* FontAwesome CDN 4.7 */ @import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); /* Reset CSS */ * { box-sizing: border-box; } ul { list-style: none; } a { text-decoration: none; } /* Default CSS */ body { font-family: 'Montserrat', sans-serif; color: #222; font-size: 15px; margin: 0; height: 100vh; background-color: #fff; } /* Entire Layout */ .cd-section { height: 100vh; } .cd-section > div { height: 100%; position: relative; } .content { background-color: #ddd; position: absolute; width: calc(100% - 40px); height: calc(100% - 80px); left: 20px; bottom: 20px; overflow: hidden; } /* Header */ header { position: fixed; top: 0; left: 0; width: 100%; } .gnb-inner { /*border: 1px solid #000;*/ width: calc(100% - 40px); margin: auto; height: 60px; line-height: 60px; } .logo { float: left; } .logo img { padding-top: 17px; } .gnb { float: right; } .menu { display: none; } .menu a {} .slogan { font-size: 16px; font-style: italic; } .trigger { display: none; } /* Hiring Button */ .btn-hiring { position: fixed; right: 50px; bottom: 50px; color: #fff; background-color: #000; /* 앞 px상하,뒤 px좌우 */ padding: 10px 20px; border-radius: 20px; /* 가로,세로,퍼짐정도 */ box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.38); transition: 0.5s; } .btn-hiring .fa { transform: rotateY(180deg); margin-right: 5px; } /* 버튼이 눌리는 느낌 */ .btn-hiring:active { transform: scale(0) } /* ################### Section : awards-winner ################### */ .awards-inner { height: 100%; border: 1px solid #ddd; } .awards-inner > div { border: 1px solid #000; float: left; width: 50%; height: 100%; position: relative; } .about-awards { background-color: #1a1f24; color: #fff; } .about-heading { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; width: 70%; } .victory-jump { background-color: #fff; } .victory-jump img { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 80%; }선생님께서 올려주신 비쥬얼스튜디오 full reload 해결 방법 강의를 듣고 적용시킨 후 작업 중이였는데 갑자기 코딩 시 최상단으로 올라가는 현상이 발생합니다.설정을 다시 확인하고 익스텐션에서 open sever를 재설치하였음에도 해결되지 않아서 질문드립니다!
-
미해결반응형 웹사이트 포트폴리오(Architecture Agency)
파일 내 index.html에 대한 오류
<!doctype html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>DesignWokrs Agency</title> <script src="/js/jquery-2.1.4.js"></script> <!-- page scroll Effects js＆css --> <script src="./js/velocity/modernizr.js"></script> <script src="/js/velocity/velocity.min.js"></script> <script src="./js/velocity/velocity.ui.min.js"></script> <script src="./js/velocity/main.js"></script> <link rel="stylesheet" href="./js/velocity/velocity.css"> <!-- Smooth scrolling --> <!-- <script src="./js/jquery.scrollTo.min.js"></script> --> <!-- custom js＆css --> <script src="./custom.js"></script> <!-- 순서가 중요함 pc버전인 스타일 css가 먼저우선시 되야함 --> <link rel="stylesheet" href="./style.css"> <!-- 모바일 부분만 반응 css --> <link rel="stylesheet" href="./responsive.css"> </head> <!-- 애니메이션 속성들 --> <!-- hijacking: on/off - animation: none/scaleDown/rotate/gallery/catch/opacity/fixed/parallax --> <body data-hijacking="on" data-animation="rotate"> <div class="container"> <section class="cd-section visible" id="home"> <div> <div class="content"> <img src="./images/temp-section-01.jpg"> </div> </section> <section class="cd-section" id="about"> <div> <div class="content"> <img src="./images/temp-section-02.jpg"> </div> </div> </section> <section class="cd-section" id="project"> <div> <div class="content"> <img src="./images/temp-section-03.jpg"> </div> </div> </section> <section class="cd-section" id="plan"> <div> <div class="content"> <img src="./images/temp-section-04.jpg"> </div> </div> </section> <section class="cd-section" id="awards"> <div> <div class="content"> <img src="./images/temp-section-05.jpg"> </div> </div> </section> <section class="cd-section" id="location"> <div> <div class="content"> <img src="./images/temp-section-06.jpg"> </div> </div> </section> <section class="cd-section" id="contact"> <div> <div class="content"> <img src="./images/temp-section-07.jpg"> </div> </div> </section> <header> <div class="gnb-inner"> <div class="logo"> <a href="#none"><img src="images/logo.png"></a> </div> <!-- 네비게이션 부분 --> <div class="gnb"> <div class="menu"> <a href="#home">Home</a> <a href="#about">About</a> <a href="#project">Project</a> <a href="#plan">Plan & History</a> <a href="#awards">Awards</a> <a href="#location">Location</a> <a href="#contact">Contact</a> </div> <div class="slogan">We design places, not projects.</div> </div> <!-- 햄버거 버튼 --> <div class="trigger"> <span></span> <span></span> <span></span> </div> </div> </header> </div> <nav> <ul class="cd-vertical-nav"> <li><a href="#0" class="cd-prev inactive">Next</a></li> <li><a href="#0" class="cd-next">Prev</a></li> </ul> </nav> <!-- .cd-vertical-nav --> </body> </html>>/* pc버전 */ /* Google Web Font : Montserrat */ @import url('https://fonts.googleapis.com/css?family=Montserrat:200,300,400,500&display=swap'); @import url('https://fonts.googleapis.com/css?family=Manrope:300,400,500,600&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;600;700;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Overpass&display=swap'); /* FontAwesome CDN 4.7 */ @import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); /* Reset CSS */ * {box-sizing: border-box;} ul { list-style: none;} a {text-decoration: none;} /* Default CSS */ body{ font-family: 'Montserrat', sans-serif; color: #222; font-size: 15px; margin: 0; height: 100vh; background-color: #fff; } /* Entire Layout(전체적인 레이아웃) */ .cd-section { height: 100vh; } .cd-section > div { height: 100%; position: relative; } .content { background-color: #ddd; position: absolute; /* 연산함수 calc를 이용하여 섹션내에 삐저나오지 않고 들어오게함 */ width: calc(100% - 40px); height: calc(100% - 80px); left: 20px; bottom: 20px; /* 넘치는 부분 끊기 */ overflow: hidden; } /* Header */ header { position: fixed; top:0; left: 0; width: 100%; } .gnb-inner { /* bd+tab =보더 생성 */ /* border: 1px solid #000; */ width: calc(100% - 40px); margin: auto; height: 60px; /* 높이값만큼 주면 중앙 정렬 */ line-height: 60px; } .logo { float: left; } .gnb { float: right; } .menu { display: block; } .menu a{ } .gnb a {} .slogan { font-size: 16px; font-style: italic; } .trigger { display: none; $(function() { /* Trigger */ $('.trigger').click(function(){ $(this).toggleClass('active') $('.gnb').toggleClass('active') }) // 중복되는 선택자 콤마로 이어감 $('section, .menu a').click(function(){ // 모바일에서 여백 섹션을 눌렀을 때 서브메뉴가 안으로 들어감 $('.gnb').removeClass('active') }) // // Smooth Scrolling // $('.menu a').click(function(e){ // // ||:쉬프트 +원표시 0.9초동안 슬라이딩 // $.scrollTo(this.hash || 0, 900); // })/* 모바일전용 */ /*pc min:최소너비 */ /* 모바일 기준 최대넓이 768을 넘지 못한다 */ @media (max-width: 768px) { /* Entire Layout(전체적인 레이아웃) */ .cd-section { height: auto; } .cd-section > div { height: auto; } .content { position: static; width: 100%; height: 100%; left: 20px; bottom: 20px; } /* Header */ .menu { display: block; } .slogan { display: none; } .gnb { background-color: #fff; position: fixed; top: 0; right: -270px; width: 250px; height: 100vh; /* 왼쪽,위아래,퍼짐정도 */ box-shadow: -5px 0 10px rgba(0, 0, 0, 0.1); transition: 0.5s; } .gnb.active { right: 0; } .menu { line-height: 40px; /* 메뉴를 전체적으로 내림 */ margin-top: 60px; } .menu a { text-align: right; display: block; padding-right: 20px; color: #000; font-size: 20px; } /* Trigger */ .trigger{ display: block; width: 24px; height: 14px; position: absolute; right: 20px; top: 20px; } .trigger span { position: absolute; height: 1px; width: 100%; background-color: #000; transition: 0.5s; } .trigger span:nth-child(1) { top: 0; } .trigger span:nth-child(2) { top: 50%; width: 80%; } .trigger span:nth-child(3) { top: 100%; } .trigger.active span:nth-child(1) { top: 50%; transform: rotate(45deg); } .trigger.active span:nth-child(2) { top: 50%; width: 80%; opacity: 0; } .trigger.active span:nth-child(3) { top: 50%; transform: rotate(-45deg); } } 비쥬얼 스튜디오 오픈 서버로는 현재까지 작업 내용이 잘 표시되지만 폴더내에서 index 클릭 시 메인페이지 이미지가 표시 되지 않고 모바일로 변경시 사진과 같은 오류 문구와 함께 햄버거 버튼에 적용했던 효과들이 작동되지않습니다.
-
미해결반응형 웹사이트 포트폴리오(Architecture Agency)
모바일 네비게이션 퍼블리싱 - 모바일트리거, GNB 보이기 감추기 부분 해결되지 않아 재 질문 드립니다ㅠㅠ
<!doctype html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>DesignWokrs Agency</title> <script src="./js/jquery-2.1.4.js"></script> <!-- page scroll Effects js＆css --> <script src="./js/velocity/modernizr.js"></script> <script src="./js/velocity/velocity.min.js"></script> <script src="./js/velocity/velocity.ui.min.js"></script> <script src="/js/velocity/main.js"></script> <link rel="stylesheet" href="./js/velocity/velocity.css"> <!-- custom js＆css --> <script src="./js/custom.js"></script> <!-- 순서가 중요함 pc버전인 스타일 css가 먼저우선시 되야함 --> <link rel="stylesheet" href="./style.css"> <!-- 모바일 부분만 반응 css --> <link rel="stylesheet" href="./responsive.css"> </head> <!-- 애니메이션 속성들 --> <!-- hijacking: on/off - animation: none/scaleDown/rotate/gallery/catch/opacity/fixed/parallax --> <body data-hijacking="on" data-animation="rotate"> <div class="container"> <section class="cd-section visible"> <div> <div class="content"> <img src="./images/temp-section-01.jpg"> </div> </div> </section> <section class="cd-section"> <div> <div class="content"> <img src="./images/temp-section-02.jpg"> </div> </div> </section> <section class="cd-section"> <div> <div class="content"> <img src="./images/temp-section-03.jpg"> </div> </div> </section> <section class="cd-section"> <div> <div class="content"> <img src="./images/temp-section-04.jpg"> </div> </div> </section> <section class="cd-section"> <div> <div class="content"> <img src="./images/temp-section-05.jpg"> </div> </div> </section> <section class="cd-section"> <div> <div class="content"> <img src="./images/temp-section-06.jpg"> </div> </div> </section> <section class="cd-section"> <div> <div class="content"> <img src="./images/temp-section-07.jpg"> </div> </div> </section> <header> <div class="gnb-inner"> <div class="logo"> <a href="#none"><img src="images/logo.png"></a> </div> <!-- 네비게이션 부분 --> <div class="gnb"> <div class="menu"> <a href="#none">Home</a> <a href="#none">About</a> <a href="#none">Project</a> <a href="#none">Plan & History</a> <a href="#none">Awards</a> <a href="#none">Location</a> <a href="#none">Contact</a> </div> <div class="slogan">We design places, not projects.</div> </div> <!-- 햄버거 버튼 --> <div class="trigger"> <span></span> <span></span> <span></span> </div> </div> </header> </div> <nav> <ul class="cd-vertical-nav"> <li><a href="#0" class="cd-prev inactive">Next</a></li> <li><a href="#0" class="cd-next">Prev</a></li> </ul> </nav> <!-- .cd-vertical-nav --> </body> </html>/* 모바일전용 */ /*pc min:최소너비 */ /* 모바일 기준 최대넓이 768을 넘지 못한다 */ @media (max-width: 768px) { /* Entire Layout(전체적인 레이아웃) */ .cd-section { height: auto; } .cd-section > div { height: auto; } .content { position: static; width: 100%; height: 100%; left: 20px; bottom: 20px; } /* Header */ .menu { display: block; } .slogan { display: none; } .gnb { background-color: #fff; position: fixed; top: 0; right: 0; width: 250px; height: 100vh; /* 왼쪽,위아래,퍼짐정도 */ box-shadow: -5px 0 10px rgba(0, 0, 0, 0.1); } .menu { line-height: 40px; /* 메뉴를 전체적으로 내림 */ margin-top: 60px; } .menu a { text-align: right; display: block; padding-right: 20px; color: #000; font-size: 20px; } /* Trigger */ .trigger{ display: block; width: 24px; height: 14px; position: absolute; right: 20px; top: 20px; } .trigger span { position: absolute; height: 1px; width: 100%; background-color: #000; transition: 0.3s; } .trigger span:nth-child(1) { top: 0; } .trigger span:nth-child(2) { top: 50%; width: 80%; } .trigger span:nth-child(3) { top: 100%; } .trigger.active span:nth-child(1) { top: 50%; transform: rotate(45deg); } .trigger.active span:nth-child(2) { top: 50%; width: 80%; opacity: 0; } .trigger.active span:nth-child(3) { top: 50%; transform: rotate(-45deg); } }$(function(){ // Trigger $('.trigger').click(function(){ $(this).toggleClass('active') }) })대상이 수동으로 처리되어 수동 이벤트 수신기 내부의 Default를 방지할 수 없습니다라는 문구가 뜹니다.말씀해주신대로 active 클래스를 지우고 다시 작성해보고커스텀 js의 문법도 맞추었는데 햄버거 버튼에 마우스 클릭 시 X표시로 변경되지 않습니다 ㅠㅠ 계속 똑같은 질문 드려 죄송합니다
-
미해결반응형 웹사이트 포트폴리오(Architecture Agency)
모바일 네비게이션 퍼블리싱 - 모바일트리거, GNB 보이기 감추기 질문입니다
<!doctype html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>DesignWokrs Agency</title> <script src="./js/jquery-2.1.4.js"></script> <!-- page scroll Effects js＆css --> <script src="./js/velocity/modernizr.js"></script> <script src="./js/velocity/velocity.min.js"></script> <script src="./js/velocity/velocity.ui.min.js"></script> <script src="/js/velocity/main.js"></script> <link rel="stylesheet" href="./js/velocity/velocity.css"> <!-- custom js＆css --> <script src="./js/custom.js"></script> <!-- 순서가 중요함 pc버전인 스타일 css가 먼저우선시 되야함 --> <link rel="stylesheet" href="./style.css"> <!-- 모바일 부분만 반응 css --> <link rel="stylesheet" href="./responsive.css"> </head> <!-- 애니메이션 속성들 --> <!-- hijacking: on/off - animation: none/scaleDown/rotate/gallery/catch/opacity/fixed/parallax --> <body data-hijacking="on" data-animation="rotate"> <div class="container"> <section class="cd-section visible"> <div> <div class="content"> <img src="./images/temp-section-01.jpg"> </div> </div> </section> <section class="cd-section"> <div> <div class="content"> <img src="./images/temp-section-02.jpg"> </div> </div> </section> <section class="cd-section"> <div> <div class="content"> <img src="./images/temp-section-03.jpg"> </div> </div> </section> <section class="cd-section"> <div> <div class="content"> <img src="./images/temp-section-04.jpg"> </div> </div> </section> <section class="cd-section"> <div> <div class="content"> <img src="./images/temp-section-05.jpg"> </div> </div> </section> <section class="cd-section"> <div> <div class="content"> <img src="./images/temp-section-06.jpg"> </div> </div> </section> <section class="cd-section"> <div> <div class="content"> <img src="./images/temp-section-07.jpg"> </div> </div> </section> <header> <div class="gnb-inner"> <div class="logo"> <a href="#none"><img src="images/logo.png"></a> </div> <!-- 네비게이션 부분 --> <div class="gnb"> <div class="menu"> <a href="#none">Home</a> <a href="#none">About</a> <a href="#none">Project</a> <a href="#none">Plan & History</a> <a href="#none">Awards</a> <a href="#none">Location</a> <a href="#none">Contact</a> </div> <div class="slogan">We design places, not projects.</div> </div> <!-- 햄버거 버튼 --> <div class="trigger active"> <span></span> <span></span> <span></span> </div> </div> </header> </div> <nav> <ul class="cd-vertical-nav"> <li><a href="#0" class="cd-prev inactive">Next</a></li> <li><a href="#0" class="cd-next">Prev</a></li> </ul> </nav> <!-- .cd-vertical-nav --> </body> </html>$(function() { /* Trigger */ $('.trigger').cli(function(){ $(this).toggleClass('active') }) })/* Google Web Font : Montserrat */ @import url('https://fonts.googleapis.com/css?family=Montserrat:200,300,400,500&display=swap'); @import url('https://fonts.googleapis.com/css?family=Manrope:300,400,500,600&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;600;700;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Overpass&display=swap'); /* FontAwesome CDN 4.7 */ @import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); /* Reset CSS */ * {box-sizing: border-box;} ul { list-style: none;} a {text-decoration: none;} /* Default CSS */ body{ font-family: 'Montserrat', sans-serif; color: #222; font-size: 15px; margin: 0; height: 100vh; background-color: #fff; } /* Entire Layout(전체적인 레이아웃) */ .cd-section { height: 100vh; } .cd-section > div { height: 100%; position: relative; } .content { background-color: #ddd; position: absolute; /* 연산함수 calc를 이용하여 섹션내에 삐저나오지 않고 들어오게함 */ width: calc(100% - 40px); height: calc(100% - 80px); left: 20px; bottom: 20px; /* 넘치는 부분 끊기 */ overflow: hidden; } /* Header */ header { position: fixed; top:0; left: 0; width: 100%; } .gnb-inner { /* bd+tab =보더 생성 */ /* border: 1px solid #000; */ width: calc(100% - 40px); margin: auto; height: 60px; /* 높이값만큼 주면 중앙 정렬 */ line-height: 60px; } .logo { float: left; } .gnb { float: right; } .menu { display: block; } .menu a{ } .gnb a {} .slogan { font-size: 16px; font-style: italic; } .trigger { display: none; }햄버거 버튼이 x로 바뀌지 않습니다 ㅠㅠ
-
미해결반응형 웹사이트 포트폴리오(Architecture Agency)
모바일 네비게이션 퍼블리싱 ㅡ모바일트리거,GNB 보이기 감추기 부분 다시 수정하여 질문드립니다!
<!doctype html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>DesignWokrs Agency</title> <script src="./js/jquery-2.1.4.js"></script> <!-- page scroll Effects js＆css --> <script src="./js/velocity/velocity.min.js"></script> <script src="./js/velocity/velocity.ui.min.js"></script> <script src="/js/velocity/main.js"></script> <link rel="stylesheet" href="./js/velocity/velocity.css"> <!-- custom js＆css --> <!-- 순서가 중요함 pc버전인 스타일 css가 먼저우선시 되야함 --> <link rel="stylesheet" href="./style.css"> <!-- 모바일 부분만 반응 css --> <link rel="stylesheet" href="./responsive.css"> </head> <!-- 애니메이션 속성들 --> <!-- hijacking: on/off - animation: none/scaleDown/rotate/gallery/catch/opacity/fixed/parallax --> <body data-hijacking="on" data-animation="rotate"> <div class="container"> <section class="cd-section visible"> <div> <div class="content"> <img src="./images/temp-section-01.jpg"> </div> </div> </section> <section class="cd-section"> <div> <div class="content"> <img src="./images/temp-section-02.jpg"> </div> </div> </section> <section class="cd-section"> <div> <div class="content"> <img src="./images/temp-section-03.jpg"> </div> </div> </section> <section class="cd-section"> <div> <div class="content"> <img src="./images/temp-section-04.jpg"> </div> </div> </section> <section class="cd-section"> <div> <div class="content"> <img src="./images/temp-section-05.jpg"> </div> </div> </section> <section class="cd-section"> <div> <div class="content"> <img src="./images/temp-section-06.jpg"> </div> </div> </section> <section class="cd-section"> <div> <div class="content"> <img src="./images/temp-section-07.jpg"> </div> </div> </section> <header> <div class="gnb-inner"> <div class="logo"> <a href="#none"><img src="images/logo.png"></a> </div> <!-- 네비게이션 부분 --> <div class="gnb"> <div class="menu"> <a href="#none">Home</a> <a href="#none">About</a> <a href="#none">Project</a> <a href="#none">Plan & History</a> <a href="#none">Awards</a> <a href="#none">Location</a> <a href="#none">Contact</a> </div> <div class="slogan">We design places, not projects.</div> </div> <!-- 햄버거 버튼 --> <div class="trigger"> <span></span> <span></span> <span></span> </div> </div> </header> </div> <nav> <ul class="cd-vertical-nav"> <li><a href="#0" class="cd-prev inactive">Next</a></li> <li><a href="#0" class="cd-next">Prev</a></li> </ul> </nav> <!-- .cd-vertical-nav --> </body> </html>/* 모바일전용 */ /*pc min:최소너비 */ /* 모바일 기준 최대넓이 768을 넘지 못한다 */ @media (max-width: 768px) { /* Entire Layout(전체적인 레이아웃) */ .cd-section { height: auto; } .cd-section > div { height: auto; } .content { position: static; width: 100%; height: 100%; left: 20px; bottom: 20px; }; /* Header */ .menu { display: block; } .slogan { display: none; } .gnb { background-color: #fff; position: fixed; top: 0; right: 0; width: 250px; height: 100vh; /* 왼쪽,위아래,퍼짐정도 */ box-shadow: -5px 0 10px rgba(0, 0, 0, 0.1); } .menu { line-height: 40px; /* 메뉴를 전체적으로 내림 */ margin-top: 60px; } .menu a { text-align: right; display: block; padding-right: 20px; color: #000; font-size: 20px; }; /* Trigger */ .trigger{ display: block; border: 1px solid #000; width: 24px; height: 14px; position: absolute; right: 20px; top: 20px; cursor: pointer; }; };/* pc버전 */ /* Google Web Font : Montserrat */ @import url('https://fonts.googleapis.com/css?family=Montserrat:200,300,400,500&display=swap'); @import url('https://fonts.googleapis.com/css?family=Manrope:300,400,500,600&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;600;700;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Overpass&display=swap'); /* FontAwesome CDN 4.7 */ @import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); /* Reset CSS */ * {box-sizing: border-box;} ul { list-style: none;} a {text-decoration: none;} /* Default CSS */ body{ font-family: 'Montserrat', sans-serif; color: #222; font-size: 15px; margin: 0; height: 100vh; background-color: #fff; } /* Entire Layout(전체적인 레이아웃) */ .cd-section { height: 100vh; } .cd-section > div { height: 100%; position: relative; } .content { background-color: #ddd; position: absolute; /* 연산함수 calc를 이용하여 섹션내에 삐저나오지 않고 들어오게함 */ width: calc(100% - 40px); height: calc(100% - 80px); left: 20px; bottom: 20px; /* 넘치는 부분 끊기 */ overflow: hidden; } /* Header */ header { position: fixed; top:0; left: 0; width: 100%; } .gnb-inner { /* bd+tab =보더 생성 */ /* border: 1px solid #000; */ width: calc(100% - 40px); margin: auto; height: 60px; /* 높이값만큼 주면 중앙 정렬 */ line-height: 60px; } .logo { float: left; } .gnb { float: right; } .menu { display: block; } .menu a{ } .gnb a {} .slogan { font-size: 16px; font-style: italic; } .trigger { display: none; }아까 질문드렸던 수강생입니다 추가하여 업로드 하였습니다
-
미해결반응형 웹사이트 포트폴리오(Architecture Agency)
모바일 네비게이션 퍼블리싱 ㅡ모바일트리거,GNB 보이기 감추기 부분 질문드립니다.
& History</a> <a href="#none">Awards</a> <a href="#none">Location</a> <a href="#none">Contact</a> </div> <div class="slogan">We design places, not projects.</div> </div> <!-- 햄버거 버튼 --> <div class="trigger"> <span></span> <span></span> <span></span> </div> </div> </header> </div>@media (max-width: 768px) { /* Entire Layout(전체적인 레이아웃) */ .cd-section { height: auto; } .cd-section > div { height: auto; } .content { position: static; width: 100%; height: 100%; left: 20px; bottom: 20px; }; /* Header */ .menu { display: block; } .slogan { display: none; } .gnb { background-color: #fff; position: fixed; top: 0; right: 0; width: 250px; height: 100vh; /* 왼쪽,위아래,퍼짐정도 */ box-shadow: -5px 0 10px rgba(0, 0, 0, 0.1); } .menu { line-height: 40px; /* 메뉴를 전체적으로 내림 */ margin-top: 60px; } .menu a { text-align: right; display: block; padding-right: 20px; color: #000; font-size: 20px; }; /* Trigger */ .trigger{ display: block; border: 1px solid #000; width: 24px; height: 14px; position: absolute; right: 20px; top: 20px; cursor: pointer; }; };위 코드 적용시 이렇게 임시 보더 박스가 표기 되지 않습니다 ㅠㅠ
-
해결됨구글 애드센스 수익형 워드프레스 블로그 만들기
강의 관련 문의 드립니다
강사님.. 여러 차례 수강전 문의 드리고 수강신청하였습니다.수상 신청하자마자.. 내리 7강 까지 들었네요문의 드릴것이 있는데요,,우선 뉴스페이퍼 테마는 다시 도메인과 알려주시 업체 호스팅을 하고 구매를 해서 진행하려고 합니다.먼저 앞서,, 현재 저렴한 워프 사이트가 하나 있는데,,너무 방치하고 있어서요,, 카페24에서,, 1100원 짜리 와 도메인과 함께 구입을 해서이것 저것 만저보다.. 현재 아무것도 못하고있는데요섹션 4의 Generatepress Theme 부분 강의를 먼저 듣고 그것 먼저 세팅을 해도 될까요?괜찮다면 우선 그것 먼저 세팅을 한 후에 새로이 제대로된 호스팅을 하고 테마도 사서 진행하려 합니다카페24에 1100원의 워드프레스가 강사님께서 지급해 주신다는 Generatepress Theme 정식버젼이 잘 작동이 될까요? 아니면 바로 위에것으로 업그레이드 하고 이것 나름 데로 살려서 써야 할 것 같아서요
-
미해결부트스트랩(BOOTSTRAP)3을 활용한 반응형 웹페이지 만들기
수업중 코드 활용가능여부
안녕하세요? 개념들이 잘 이해가 되게 가르쳐주셔서 감사합니다.수업중 알려주신 내용의 코드들을 구축중인 홈페이지에 일부 사용해도 되나요?
-
미해결GSAP의 ScrollTrigger를 활용한 포트폴리오 제작
선생님
선생님 안녕하세요헤더 영역 스크롤 방향 이벤트 동적 구현이 되지 않아문의 드립니다해당 파일 알집으로 압축하여 보냈는데하기 내용처럼 뜨면서 보내지지가 않습니다....확인 부탁드립니다감사합니다. 파일 첨부 실패첨부할 수 없는 파일과 사유는 아래와 같습니다.첨부파일 목록파일명사유헤더스크롤이벤트.Zip관리자가 제한한 파일 형식
-
미해결GSAP의 ScrollTrigger를 활용한 포트폴리오 제작
섹션6 질문입니다
스크롤 내렸을 때는 문제가없는데 스크롤 올릴 시 .con02의 .worklist와 .title이 높이 올라갔다가 다시 원위치되는 현상이 발생합니다.
-
미해결GSAP의 ScrollTrigger를 활용한 포트폴리오 제작
강의 첨부 파일은 어떻게 받나요??
제 메일은 rkddus3177@naver.com 입니다
-
미해결GSAP의 ScrollTrigger를 활용한 포트폴리오 제작
궁금한게 있습니다~!
안녕하세요~!ScrollTrigger 실무 활용_visual영역 제작하기 강의를 보던중 궁금한게 생겨서 여쭤봅니다! 8분 25초쯤보면 html,css 작업까지만 했을때 img_1의 높이만큼 스크롤이 생겼는데,10분 47초에 scrollTrigger를 적용해주니까 높이값이 많이 늘어나있던데혹시 왜 늘어나는지 알수있을까요??스크롤트리거를 사용하려면 스크롤이 되어야하는건 알겠지만 따로 높이값을 지정하지 않았는데 어떤것을 기준으로 늘어난건지 궁금해서 여쭤봅니다!
