묻고 답해요
130만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
슬라이드가 바뀌는 모션은 보이는데 사진이 안바뀝니다
뚝뚝 끊기기만 하고 사진은 아예 안바껴요.. 모션만 보이고<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <header> <div class="header-logo"> <a href="#none"><img src="images/logo-header.png" alt="header-logo"></a> </div> <div class="navi"></div> </header> <!-- header --> <div class="slide"> <div class="slide-items"> <a class="slide-item" href="#none"><img src="images/slide-01.jpg" alt="slide-01"></a> <a class="slide-item" href="#none"><img src="images/slide-02.jpg" alt="slide-02"></a> <a class="slide-item" href="#none"><img src="images/slide-03.jpg" alt="slide-03"></a> </div> </div> <!-- slide --> <div class="items"> <div class="news"></div> <div class="banner"> <a href="#none"><img src="images/banner-01.jpg" alt="banner-01"></a> </div> <div class="shortcut"> <a href="#none"><img src="images/banner-02.jpg" alt="shortcut"></a> </div> </div> <!-- items --> <footer> <div class="footer-logo"> <a href="#none"><img src="images/logo-footer.png" alt="footer-logo"></a> </div> <div class="copyright"> 상호 : 엣지컴퍼니 | 대표자 : 홍길동 | 개인정보관리책임자 : 장길산 차장 <br>사업장주소 : 서울특별시 강남구 테헤란로 123-56 </div> <div class="sns"> <a href="#none"><img src="images/sns-01.png" alt="sns-01"></a> <a href="#none"><img src="images/sns-02.png" alt="sns-02"></a> <a href="#none"><img src="images/sns-03.png" alt="sns-03"></a> </div> </footer> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom.js"></script> </body> </html> @charset "utf-8"; body { margin: 0; font-size: 15px; background-color: #fff; color: #222328; display: flex; justify-content: center; } a { color: #222328; text-decoration: none; } .container { border: 1px solid black; width: 1200px; } header { display: flex; justify-content: space-between; } header > div { height: 100px; } .header-logo { width: 200px; } .navi { width: 600px; } .slide {} .slide > div { border: 1px solid black; height: 300px; } .items { display: flex; } .items > div { border: 1px solid black; height: 200px; } .news { width: 500px; } .banner { width: 350px; } .shortcut { width: 350px; } footer { display: flex; } footer > div { height: 100px; } .footer-logo { width: 200px; } .copyright { width: 800px; } .sns { width: 200px; } /* 모듈 외 컨텐트 */ .header-logo { line-height: 130px; } .footer-logo { line-height: 130px; } .copyright { text-align: center; padding-top: 30px; } .sns { line-height: 130px; text-align: center; } /* slide modal */ .slide { position: relative; width: 1200px; height: 300px; overflow: hidden; } .slide-items { position: absolute; font-size: 0; } // slide setInterval(function(){ $('.slide-items').animate({top: '-300px'}, function(){ $('.slide-items').css({top: 0}); $('slide-item:first-child').appendTo('.slide-items'); }); }, 3500)좌우로 넘어가는 거 했을 때도 똑같은 현상이 나타났는데 뭐가 문제일까요..ㅜㅠㅠ
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
강의를 보고 똑같이 코드를 쳤는데 a태그가 밑으로 떨어집니다 ㅠㅠ
■ 공지사항,갤러리가 별도로 구성되어있는 강의를 듣고있는데 news 클래스 아래로 a태그가 떨어집니다 ㅠㅠ혹시 잘못된 부분이 있는걸까요? <body> <section class="items"> <article class="news"> <div class="tab-inner"> <div class="btn"> <span>공지사항</span> </div> <div class="tab"> <a href="#none"> 문자발송서비스 <b>2024.03.06</b> </a> <a href="#none">문자발송서비스 <b>2024.03.06</b> </a> <a href="#none">문자발송서비스 <b>2024.03.06</b> </a> <a href="#none">문자발송서비스 <b>2024.03.06</b> </a> <a href="#none">문자발송서비스 <b>2024.03.06</b> </a> </div> </div> </article> <article class="gallery">갤러리</article> <article class="now">바로가기</article> </section> </body><css>* { padding: 0; margin: 0; position: relative;} a { color: inherit; text-decoration: none; display: inline-block;} ul,li,ol { list-style: none;} /*와이어프레임정렬*/ .items { border: 3px solid blue; max-width: 1200px; margin: 0 auto; display: flex; } .items div { height: 200px; } .news { width: 350px; background-color: lightblue;} .news .tab-inner { border: 5px solid salmon; } .news .tab a { border: 3px solid slateblue; } .gallery { width: 500px; background-color: coral;} .now { width: 350px; background-color: lightseagreen;} /*tab content*/ -출력화면-
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
강의 순서 질문드립니다.
선생님 안녕하세요. 수강생입니다.수업은 섹션1부터 차근 차근 따라가면 될까요? 안배우고, 몰랐던 부분들이 등장해서 인강을 어디서부터 어떻게 들으면 될지 여쭈어 봅니다.(비전공자라 코딩 지식이 아예 없습니다.)
-
미해결모바일 웹 퍼블리싱 포트폴리오 with Figma
display flex 질문,,
안녕하세요 ! gnb부분 하다가 헷갈리는게 있어서요 ..gnb 부분엔 flex를 줘서 가로배치 1/5한 건 이해했는데,.gnb a 위아래 여백이 남았어서 그 여백을 없애려면.gnb a에 display : flex를 주어야한다고 하셨는데왜 flex를 주면 위아래 여백이 사라지고 딱 맞게 배치가 되는건지 이해가 잘 안가서요 ㅠ..!말로 설명이 가능하실까 모르겠지만 일단 남겨봅니다!
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
다시 질문 드립니다 ㅠㅠ CSS 키프레임 애니메이션 활용한 실전 예제 제작 01(원형 크기 변경 로딩 애니메이션)
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>도형 로딩 애니메이션</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="loading"> <span></span> <span></span> <span></span> </div> </body> </html> /* Google Web Font */ @import url('http://fonts.googleapis.com/css?family=Raleway&display=swap'); body { font-family: 'Raleway', sans-serif; line-height: 1.5em; margin: 0; font-weight: 300; display: inline; justify-content: center; align-items: center; height: 100vh; } a { text-decoration: none; } .loading {} .loading span { display: inline-block; width: 20px; height: 20px; background-color: gray; border-radius: 50%; animation: loading 1s linear infinite; } .loading span:nth-child(1) { animation-duration: 0s; background-color:crimson; } .loading span:nth-child(2) { animation-duration: 0.2s; background-color:dodgerblue; } .loading span:nth-child(3) { animation-duration: 0.4s; background-color:royalblue; } @keyframes loading { 0% { opacity: 0; transform: scale(0.5); } 50% { opacity: 1; transform: scale(0.5); } 100% { opacity: 0; transform: scale(0.5); } }이렇게 작성했는데 go live 화면에선 이렇게 뜨고 애니메이션이 안나와요.. ㅠㅠ 뭐가 문제일까요??? 몇주동안 안되요..
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
도형 로딩 애니메이션 질문입니다
이렇게 뜨는데 뭐가 문제일까요.. go live 화면에서도 안보이고 문제가 뭔지 모르겠어요 ㅠ
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
마지막 파트 기술적 준수 사항 관련 질문
■ 질문 남기실 때 꼭! 참고해주세요.btn 태그 안에 span 태그를 마지막에 a링크로 바꾸셨는데 별도로 구성하기 할 때도 동일하게 적용되는 사항일까요?
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
박스모델할때 크롬에서 계속 오류가 나오네요
border로 박스를 만들고난 후 크롬에서 확인하면 밑에 빨간줄이나오는데 어떻게 처리해야 하나요박스모델에서 계속 저오류가 나오고 있네요...
-
미해결스프링 프레임워크는 내 손에 [스프2탄]
idx, boardGroup 번호에 대해
idx는 1번부터 시작하고 boardGroup은 0번부터 시작하셨는데, boardGroup도 idx와 동일하게 1번부터 해도 상관없을까요? 관습적으로 0번부터 하는건지 다른 이유가 있는 건지 궁금합니다.
-
해결됨반응형 웹사이트 포트폴리오(Architecture Agency)
모바일 버전에서 메뉴 클릭 후 그 위치로 이동할 때 상단 영역
메인 페이지 모바일로 변경하는 부분까지 수강 잘 마쳤습니다.자세히 잘 설명해주셔서 감사해요.그런데 모바일 버전에서 메뉴로 해당 위치로 이동했을 때, 상단 영역 때문에 화면 윗부분이 잘려보이는 부분은 어떻게 해결해야 할까요?조금 윗부분으로 이동하는 방법이 없을까요?(혹시 제가 아직 못본 뒷부분 강의에 나와있다면 다 보지 않고 질문드려 죄송합니다!)
-
미해결모바일 웹 퍼블리싱 포트폴리오 with Figma
강의자료 질문
강사님 ㅠ 강의자료에 필요한 자료 다운 받을 수 있는 링크 알려주시면 감사합니다결제 후 다운받으려는데 파일이 어디에 있는 지 모르겠습니다ㅠ
-
미해결스프링 프레임워크는 내 손에 [스프2탄]
깃허브 주소를 못 찾겠어요
스프 2탄 깃허브 주소좀 부탁드립니다 ~
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
logo와 video의 html 순서 문제
안녕하세요, 강의 영상에서 페이지의 요소들을 모두 position 속성을 이용해 배치할거라 html 태그의 순서는 상관없다고 하셔서 시험삼아 logo 요소를 video 요소의 앞에 배치시켜봤습니다. 그랬더니 아래 화면처럼 logo 요소가 video의 위에 위치하고 z-index를 주거나 배경색을 transparent로 설정해도 바뀌지 않더라고요.로고가 비디오 위에 오는건 html 태그의 순서의 영향이 있는거 같은데, 그러면 실제 웹사이트를 만들때도 html 태그들의 순서를 고려해서 배치해야 하나요? 사용한 html와 css 스크립트는 댓글에 첨부했습니다
-
미해결모바일 웹 퍼블리싱 포트폴리오 with Figma
안녕하세요! 강의내용을 기반으로 변형해서 개인포트폴리오용으로 만들 때
강의내용을 기반으로 변형해서 개인포트폴리오용으로 만들 때1.실제있는 모바일 웹사이트를 기반으로 제가 리뉴얼해서 만들어야하는건가요 ?? 2.그럼 사이트 안에 들어가는 이미지 같은 건그 웹사이트에 있는 사진을 가져다가 개인 포트폴리오용에 써도 되는지(?)안된다면 어디서 사진을 갖다 써야하는지 궁금합니다.
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
scss에 active 적용하는 방법
이 햄버거 버튼을 active 넣었을때 바꾸려고 하는데 scss에는 도대체 어떻게 넣는지 너무 궁금해요 제가 강의 들으면서 계속 겪는 문제인데 scss에 .active를 적용해도 아무것도 안돼네요 scss 에 active 적용하려면 도대체 어떻게 해야할 지 모르곘어요 항상 강의들으면서 이 부분에서 막히는데 어떻게 해야할 지 도움 구합니다
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
반응형이 안먹힐때 뭐가 문제일까요?? ㅜㅠ
■ 질문 남기실 때 꼭! 참고해주세요. font-size: 2.2em; 을했는데 크롬 디바이스툴에서는 전혀 줄어들지 않네요 ㅜㅠ 어떻게 해야할지 질문드립니다 저 크롬이 문제인가요??
-
해결됨면접과 취업을 부르는 '퍼블리셔 개인 포트폴리오 홈페이지' 제작
skill 섹션 질문
선생님 안녕하세요!제가 포토샵 공부는 하고 있는데 포토샵이 아직 익숙치는 않아서skill 섹션에 포토샵 대신에 figma를 넣고 싶은데요올려주신 참고 텍스트에는 Figma가 없어서 혼자 이렇게 저렇게 적어보았는데 썩 좋아보이지가 않네요ㅠㅠ괜찮은 문구 짧게나마 부탁좀 드려도 될까요?
-
미해결반응형 웹사이트 포트폴리오(Architecture Agency)
PC에서 모바일화면으로 전환되면 GNB 메뉴가 OPEN되어있는 상태 (소스)4
@media (max-width:768px) { /* html { scroll-behavior: smooth; } */ /* Entire Layout */ .cd-section { height: auto; } .cd-section > div { height: auto; } .content { position: static; width: 100%; height: 100%; } /* Header */ header { transition: 0.5s; z-index: 100; } header.active { background-color: #fff; border-bottom: 1px solid #eee; } .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 { margin-top: 60px; line-height: 40px; } .menu a { display: block; text-align: right; padding-right: 20px; color: #000; font-size: 20px; } /* Trigger */ .trigger { display: block; width: 24px; height: 14px; position: absolute; top: 20px; right: 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); } /* go to top */ .gototop { position: fixed; bottom: 20px; left: 20px; border: 1px solid #fff; display: block; width: 40px; height: 40px; border-radius: 50%; text-align: center; line-height: 50px; transform: translateY(0px); opacity: 0; } .gototop.active { opacity: 1; } .btn-hiring { right: 20px; bottom: 20px; } .cd-vertical-nav { display: none; } /* Show Hide Section */ /* #home, #about, #project, #plan, #awards, #location, #contact { display: none; } */ /* ############# section : Home ############# */ .home-inner { height: 100vh; } .welcome-text { transform: translate(-50%, -50%) scale(0.7); width: 100%; /* border: 2px solid red; */ } .home-heading { left: 20px; } .home-heading span { font-size: 50px; } }
-
미해결반응형 웹사이트 포트폴리오(Architecture Agency)
PC에서 모바일화면으로 전환되면 GNB 메뉴가 OPEN되어있는 상태 (소스)3
/* 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'); /* source sans */ @import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@200;300;400;600&display=swap'); /* Overpass */ @import url('https://fonts.googleapis.com/css2?family=Overpass&display=swap'); /* Reset CSS */ * { box-sizing: border-box; } ul { list-style: none; padding: 0; } 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; padding: 10px 20px; border-radius: 20px; box-shadow: 5px 5px 20px rgb(0, 0, 0, 0.3); transition: 0.5s; } .btn-hiring .fa-solid { transform: rotateY(180deg); margin-right: 5px; } .btn-hiring:active { transform: scale(0); } /* ############# section : Home ############# */ .home-inner { background-color: #fff; height: 100%; } .home-inner::before { content: ''; background-color: #000; position: absolute; width: 0; height: 100%; top: 0; left: 0; animation: overlay 1s 2.5s ease-in-out; /* display: none; */ } .welcome-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 50px; font-weight: 300; text-align: center; line-height: 1.2em; margin: 0; font-family: 'Source Sans 3', sans-serif; animation: slideup 2s linear; animation-fill-mode: both; /* display: none; */ } .welcome-text span { display: block; font-size: 26px; } .welcome-text span .fa { color: crimson; } .opacity-image { background: url('images/section-bg-01.jpg') no-repeat center center; background-size: cover; height: 100%; opacity: 0; animation: opacity-image 1s 3s ease-in both; /* display: none; */ } .home-heading { /* display: none; border: 1px solid red;*/ position: absolute; top: 50%; /* left: 40%; */ left: 300px; /* margin-left: 200px; */ transform: translateY(-50%); } .home-heading span { display: block; font-size: 115px; color: #fff; font-weight: 600; width: 0; overflow: hidden; animation: reveal 1s 3s ease-in-out both; } .home-heading span:nth-child(1) { animation-delay: 3s; } .home-heading span:nth-child(2) { animation-delay: 3.2s; } .home-heading span:nth-child(3) { animation-delay: 3.4s; } @keyframes slideup { 0% { opacity: 0; margin-top: 50px; } 20% { opacity: 1; margin-top: 0; } 80% { opacity: 1; margin-top: 0; } 100% { opacity: 0; } } @keyframes overlay { 0% { width: 0; left: 0; } 50% { width: 100%; left: 0; } 100% { width: 0; /* right: 0; */ left: 100%; } } @keyframes opacity-image { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes reveal { 0% { width: 0; } 100% { width: 100%; } }
-
미해결반응형 웹사이트 포트폴리오(Architecture Agency)
PC에서 모바일화면으로 전환되면 GNB 메뉴가 OPEN되어있는 상태 (소스 js)2
/* document ready랑 같은거 = html을 다 읽은 후 실행해라고 표시 */ /* Trigger */ $(function(){ $('.trigger').click(function(){ $(this).toggleClass('active') $('.gnb').toggleClass('active') }) $('section, .menu a').click(function(){ $('.gnb').removeClass('active') $('.trigger').removeClass('active') }) /* smooth Scrolling */ $('.menu a, .gototop').click(function(e){ $.scrollTo(this.hash || 0, 900) }) /* chacng CSS with Scroll */ // 스크롤을 한 상태 if 스크롤을 안한상태 else $(window).scroll(function(){ if($(window).scrollTop() > 50) { $('header, .gototop').addClass('active') } else { $('header, .gototop').removeClass('active') } }) // slick.js History $('.history-slider').slick({ dots: true, infinite: true, speed: 300, slidesToShow: 4, slidesToScroll: 2, responsive: [ { breakpoint: 1024, settings: { slidesToShow: 3, slidesToScroll: 3, infinite: true, dots: true } }, { breakpoint: 600, settings: { slidesToShow: 2, slidesToScroll: 2 } }, { breakpoint: 480, settings: { slidesToShow: 1, slidesToScroll: 1 } } // You can unslick at a given breakpoint now by adding: // settings: "unslick" // instead of a settings object ] }) // slick.js project photo1 $('.project-photo').slick({ dots : true, infinite : true, speed : 500, fade : true, autoplay : true, autoplaySpeed : 2000, cssEase : 'linear' }) })