172만명의 커뮤니티!! 함께 토론해봐요.
미해결
반응형 웹사이트 포트폴리오(Architecture Agency)
/* 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%; } }
audlovewns
2024-02-16T02:56:36.455Z
댓글 1
좋아요 2
조회수 333
미해결
반응형 웹사이트 포트폴리오(Architecture Agency)
/* 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' }) })
audlovewns
2024-02-16T02:55:24.833Z
댓글 1
좋아요 2
조회수 294
미해결
반응형 웹사이트 포트폴리오(Architecture Agency)
수업진행을 하는 과정에 있어서 제가 문제를 찾아볼려고 했는데 못찾아서 질문을 드립니다. PC에서 모바일 화면으로 전환되면 GNB메뉴가 항시 OPEN되어있는 상태로 화면이 보이게 되면서 계속 GNB메뉴를 닫아야하더라구요. 선생님께서는 그런 문제가 없어보여서요. 선생님 소스를 복사해서 붙여넣기도 해봤는데요.. 제 쪽에서는 항시 OPEN되서 보이더라구요 제가 문제해결을 하지 못해서 여쭈어봅니다. 소스는 많지만.. 아래와 같습니다. <!doctype html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- <meta name="viewport" content="width=device-width, initial-scale=1"> --> <title>DesignAgency SIYU Family</title> <link rel="icon" href="images/favicon.png"> <script src="/js/jquery-2.1.4.js"></script> <!-- <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> <!-- slick.js --> <script src="js/slick/slick.min.js"></script> <link rel="stylesheet" href="js/slick/slick-theme.css"> <link rel="stylesheet" href="js/slick/slick.css"> <!-- featherlight.js --> <script src="js/featherlight/featherlight.js"></script> <link rel="stylesheet" href="js/featherlight/featherlight.css"> <!-- custom Js & CSS --> <script src="custom.js"></script> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="responsive.css"> <!-- fontawesome --> <script src="https://kit.fontawesome.com/f7c955b0b1.js" crossorigin="anonymous"></script> </head> <!-- hijacking: on/off - animation: none/scaleDown/rotate/gallery/catch/opacity/fixed/parallax --> <body data-hijacking="on" data-animation="rotate"> <!-- S : container --> <div class="container"> <!-- S : Home --> <section class="cd-section visible" id="home"> <div> <div class="content"> <div class="home-inner"> <h3 class="welcome-text"> You can do it <span>with SIYU family <i class="fa fa-heart"></i></span> </h3> <div class="opacity-image"></div> <div class="home-heading"> <span>Creative</span> <span>Architecture</span> <span>Specialists</span> </div> </div> </div> </div> </section> <!-- E : Home --> <!-- S : header --> <header class="active"> <div class="gnb-inner"> <div class="logo"> <a href="/"> <img src="images/logo.png" alt="로고" /> </a> </div> <!-- S : gnb --> <div class="gnb active"> <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 active"> <span></span> <span></span> <span></span> </div> <!-- E : gnb --> </div> </header> <!-- E : header --> </div> <!-- E : container --> <a href="#" class="gototop"> <img src="images/gototop.png" alt="맨 위로"> </a> <a href="hiring.html" class="btn-hiring" data-featherlight="iframe"> <i class="fa-solid fa-comment-dots"></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>
audlovewns
2024-02-16T02:52:20.315Z
댓글 1
좋아요 2
조회수 461
미해결
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
윈도우 11에서 npm install -g sequelize sqlite3 설치가 안됩니다 유사 답변 참고해도 설치가 안되네요 아래 문구가 나왔을 땐 어떻게 어떤 방법으로 접근하는 게 좋을까요? npm WARN deprecated @npmcli/move-file@1.1.2: This functionality has been moved to @npmcli/fs added 146 packages in 6s 13 packages are looking for funding run npm fund for details
HTML/CSS javascript react node.js react-native 머신러닝 express tensorflow
kobaydesign
2024-02-16T01:55:07.965Z
댓글 2
좋아요 0
조회수 529
해결됨
[코드캠프] 시작은 프리캠프
안녕하세요. 회원가입 과제를 하기위해 링크된 피그마를 확인해보니 개발자모드를 이용하려면 유료 플랜에 가입해야 하는 것 같습니다. 해결방법이 있을까요?
장승운/학생/컴퓨터공학
2024-02-15T09:30:51.659Z
댓글 1
좋아요 0
조회수 1697
해결됨
[코드캠프] 강력한 CSS
질문 ) 혼자 실습해본다고 모 홈페이지 하나 클론코딩하는 중인데 header 부분에서 만들다가 막혔습니다.... 그래서 https://www.w3schools.com/howto/howto_js_accordion.asp 여기서 기초적인 연습을 하고 있는데 flex와 grid를 사용하지않더라구요. 위 처럼 기초적인 연습을 할 수 있고, flex grid 쓰는 사이트가 있을까요? 있으시다면 추천 부탁드립니다!!!
yho79555
2024-02-15T06:35:21.818Z
댓글 1
좋아요 0
조회수 349
해결됨
중상급 퍼블리싱을 위한 CSS3의 모든 것
안녕하세요 쌤~ 제가 지금까지 디스플레이 이해도가 낮아서 br 태그를 엄청 썼었는데요, (display 속성 이해도가 없을 경우 생기는 비 웹 표준 코딩)강의를 보고 무릎을 탁 쳤습니다..!! ㅠㅠ 그러다 문득 드는 생각이 있더라고요. 강의에 나온 예문에는 span 태그를 block 속성으로 바꿔서 줄바꿈을 하는 건 이해를 했는데요, h1과 span 이라, 짧은 문장이라 쉽게 이해되는데 밑에 첨부한 사진처럼 p 태그 안에 문단을 바꿔야 하는 장문일때는 줄바꿈을 어떻게 해야 좋을까요?
tnrud2668
2024-02-14T07:37:40.638Z
댓글 1
좋아요 1
조회수 220
미해결
HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
안녕하세요 선생님 강의에서 나오는 이미지 파일은 어디서 다운 받을수 있는지요??????
jejlife3020
2024-02-14T07:37:40.638Z
댓글 1
좋아요 1
조회수 302
해결됨
카페 24 베스트 쇼핑몰 디자인 클론코딩하기 (HTML + CSS)
긴 문자열이나 문단을 입력하면 텍스트 에디터 내에서 한번에 볼 수 없어 조금 불편한 점이 있었는데, <HTML 태그에 대해(2)> 강의 중 1:19~1:21 사이에 사용하신 정렬 단축키가 따로 있으시다면 어떤 것인지 궁금합니다! 좋은 강의 감사합니다~!
김이삭
2024-02-14T04:35:24.509Z
댓글 1
좋아요 0
조회수 581
미해결
HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
a태그들 네개 섹션으로 나누는 .items 부분 혹시 float랑 inline-block으로 나누는 법 말고 flex해서 1씩 나눠도 상관없나요 ??저런 나누는거 나오면 저는 꼭 flex로 하는 버릇이 들었네요...뭐가 더 좋고 답이다~ 그런건 없는건가요?!
예림
2024-02-14T04:31:11.540Z
댓글 2
좋아요 1
조회수 291
미해결
쉽고 빠른 스타일링 Tailwind CSS 기초 가이드
선생님 강의에서 보여주셨던 notion 은 공유되지 않는 학습 자료인가요 ? 아니면 다른 수업에서 받을 수 있는 자료인가요 ?
jinsu0107
2024-02-13T22:44:30.503Z
댓글 1
좋아요 0
조회수 284
해결됨
면접과 취업을 부르는 '퍼블리셔 개인 포트폴리오 홈페이지' 제작
안녕하세요 선생님 현재 제가 질문을 남기는 이 강의와 ' 퍼블리셔 개인 포트폴리오 홈페이지 제작 완벽 가이드(PDF)' 이 강의는 어떠한 차이점이 있는지 내용이 많이 겹치는지 궁금해서 글남깁니다~ 궁금한게 많아 질문을 자주 남기는데 항상 빠르게 답변 해주셔서 정말 감사합니다.
이종주
2024-02-13T15:38:31.920Z
댓글 1
좋아요 2
조회수 261
미해결
CSS Flex와 Grid 제대로 익히기
css 셀렉터 처럼 쓰면 예를 들어 ul.menu 하면 자동으로 html 완성되는 기능입니다. html 작성이 매우 편한거 같아서요! 가르쳐주시면 감사하겠습니다.
권승진
2024-02-13T12:38:33.597Z
댓글 1
좋아요 0
조회수 334
미해결
HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
제가 scss로 강의 듣는데 html에 profile dark 썼는데 scss에는 코드를 어떻게 적어야 할까요? 아래처럼 적었는데 미동도 안해요 ㅜㅠ
tkddnjs1018
2024-02-13T09:51:25.097Z
댓글 1
좋아요 1
조회수 232
미해결
퍼블리셔 개인 포트폴리오 홈페이지 제작 완벽 가이드(PDF)
안녕하세요 강의자료 감사히 잘 읽었습니다 질문이 있는데요.. 여기서 uikit 어떤 컴포넌트를 어떻게 사용하면 좋을까요?
d111
2024-02-13T08:12:56.366Z
댓글 1
좋아요 1
조회수 273
해결됨
모바일 웹 퍼블리싱 포트폴리오 with Figma
선생님 안녕하세요~ 모바일 목업 안에 iframe 넣었을때 세로스크롤의 기능은 살리고 우측 막대 부분만 없애고 싶어서 구글링 해보았는데요.. 구글링 한대로 해보면 우측 막대는 없어지는데 기능도 같이 죽더라구요.. 기능은 살리고 우측 막대만 없애는 방법이 있을까요?
HTML/CSS jquery 모바일-디자인 figma 포트폴리오
이종주
2024-02-13T01:34:46.511Z
댓글 2
좋아요 2
조회수 436
해결됨
구글 애드센스 수익형 워드프레스 블로그 만들기
강사님 안녕하세요! 워프 반응형 설명하실때 PC, 테블릿, 모바일 각각 설정을 다르게 변경해주시는데 저는 테블릿에서 설정을 바꾸면 그게 전체에 적용되어서 각각 설정이 안되고 전체 변경이 됩니다ㅠㅠ 계속 이부분을 설명하시는데 방법이 없어서 질문드립니다...ㅠㅠ 제가 설정을 잘못한걸까요? PC에서 저장하고 테블릿 부분 다르게 변경해도 동일하게 PC에도 해당 설정이 반영됩니다ㅠㅠ
HTML/CSS wordpress php 웹-디자인 반응형-웹
rnrcjs12
2024-02-12T08:30:41.610Z
댓글 1
좋아요 0
조회수 314
미해결
HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
실전 퍼블리싱 제작 part2의 배경이미지 풀스크린 검색창 강의를 듣고 있습니다. input 요소에 높이값을 부여했더니 첨부한 스샷과 같이 text input과 submit input의 위치가 어긋나는데요, 어떤 이유에서 이러는건지 잘 모르겠습니다. CSS의 다른 속성들은 모두 강의 내용과 동일하게 했고, 두 input 요소에 공통으로 높이값만 추가한 상태입니다. 감사합니다
hyoseok BANG
2024-02-12T07:16:09.725Z
댓글 5
좋아요 1
조회수 554
미해결
장고 설계철학으로 시작하는 파이썬 장고 입문
화면과같이 include 부분 강좌와 다르게 저절로 세팅이 되고 서버 실행하면 계속 오류가나는데 어떻게해야하나요ㅜㅜ
동휘김
2024-02-12T05:12:30.040Z
댓글 2
좋아요 0
조회수 260
미해결
처음 만난 리액트(React)
영상보고 코드 똑같이 작성했는데 화면에 아무것도 안 나와요. 리액트 버전 18에서 17로 다운그레이드도 했는데 여전히 아무것도 안 나오네요.
김영제
2024-02-11T16:08:04.163Z
댓글 2
좋아요 1
조회수 914
