footer
미해결
포트폴리오 사이트 만들고 배포까지! : 웹 개발 입문 활용편
수업을 따라하다 보니 footer 부분에서 footer 윗 부분에 살짝 파랑색 라인이 보입니다. 이걸 없애고 싶으면 어떻게 해야하는 건가요 ?
- HTML/CSS
- javascript
- 포트폴리오
- github-pages
디디
댓글 1
좋아요 0
조회수 257
묻고 답해요
173만명의 커뮤니티!! 함께 토론해봐요.
body 태그 margin: 0;
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
안녕하세요. flex 이용하여 레이아웃 제작 시 body태그에 margin: 0;을 주라고 강의에 나와 있는데, 혹시 보더나 배경색 사용하여 제작할 때도 body 태그에 margin: 0;을 주면 되는걸까요?
- HTML/CSS
- 웹-디자인
면정
댓글 2
좋아요 1
조회수 173
advanced 수업자료 문의
해결됨
웹 애니메이션을 위한 GSAP 가이드 Part.02
Deep Dive섹션 공부할 차례인데, 쌤이 설명해주시는 강의에서의 수업폴더와 제가 다운받은 폴더(파일)이 다릅니다. 제가 다운받은 자료입니다. 전체 다운받아 압축푼 상태인데, deep dive 폴더안에는 이게 전부입니다. 확인 부탁드립니다.
- HTML/CSS
- javascript
- 인터랙티브-웹
- gsap
tax
댓글 1
좋아요 2
조회수 249
사이트 접속이 안돼요
미해결
<M.B.I.T> 테스트 페이지 만들기! with Django
http://mbit.weniv.co.kr/ 사이트 접속이 안돼요
- HTML/CSS
- javascript
- django
이유정
댓글 1
좋아요 0
조회수 260
css full reload 문제가 발생하여 질문드립니다!
미해결
반응형 웹사이트 포트폴리오(Architecture Agency)
<!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를 재설치하였음에도 해결되지 않아서 질문드립니다!
- HTML/CSS
- jquery
- 웹-디자인
- 반응형-웹
ckrnckr12
댓글 3
좋아요 1
조회수 363
태그는 어떻게 골라서 사용하나요?
미해결
HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
<ul class="menu"> <li> <a href=""></a> <div class="sub-menu"> <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <div> <li> <li> <a href=""></a> <div class="sub-menu"> <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <div> <li> </ul> 이런 태그는 어떤기준으로 선택해야할까요?? 직접 만들어보려고 하면 막상 태그를 어떤걸 지정해야할지 모르겠습니다. 서브메뉴 4가지를 저는 한번더 ul 자식요소로 li와 함께 a태그를 같이 쓸줄알았는데 간단하게 div로 묶고 a태그를 사용하시고 상위 메뉴 두개만 li를 사용하셨는데 이런 태그선택의 기준이 궁금합니다. 혼자 만들어도 막상 강의랑 다르니까 헷갈리네요 ㅠ 꼭 리스트목록이라고 ul이나 ol을 사용할 필요가 없는건가요?
- HTML/CSS
- jquery
부드러운 종다리
댓글 1
좋아요 2
조회수 186
settings.json에 올려두신 사진과 동일하게 안뜹니다
미해결
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
처음 세팅중인데 읽기전용이라 떠서 커뮤니티에 뜨는대로 따라했는데 올려두신 사진과 같은 내용이 뜨질않아서 어떻게 세틍을 해야하나 질문드려봅니다..
- HTML/CSS
- javascript
- react
- node.js
- react-native
- 머신러닝
- express
- tensorflow
thswnstn9981
댓글 1
좋아요 0
조회수 444
파일 내 index.html에 대한 오류
미해결
반응형 웹사이트 포트폴리오(Architecture Agency)
<!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 클릭 시 메인페이지 이미지가 표시 되지 않고 모바일로 변경시 사진과 같은 오류 문구와 함께 햄버거 버튼에 적용했던 효과들이 작동되지않습니다.
- HTML/CSS
- jquery
- 웹-디자인
- 반응형-웹
ckrnckr12
댓글 1
좋아요 1
조회수 288
구글 페이지 개선하기 학습 중, 아이콘이 생성 안됩니다
미해결
그림으로 배우는 HTML/CSS, 입문!
안녕하세요. 여지껏 잘 수강하고 있다가, 구글 페이지 개선하기 강의에서 막혀서 질문드립니다. 알려주신대로 구글 머티리얼 주소를 알맞게 입력했는데, 저는 돋보기 아이콘이 안뜨고 계속 영문으로만 나오는데 어떤게 문제일까요 선생님?
- HTML/CSS
ktnals2
댓글 1
좋아요 0
조회수 229
key.svg 이미지
미해결
웹 애니메이션의 새로운 표준, Web Animations API
안녕하세요 !강의를 열심히 따라가고있는 학생입니다:)key.svg 가 데이터 폴더에 있긴한데 강사님이 직접 자르신 키 사진(쇠 모양이없음) 과는 다르던데,저는 어도비 일러스트 유료버전이없어서 그런데 어떻게 해야할까요 ?
- HTML/CSS
- javascript
- 인터랙티브-웹
- frontend
- web-animations-api
Anna Jeon
댓글 1
좋아요 1
조회수 233
모바일 네비게이션 퍼블리싱 - 모바일트리거, GNB 보이기 감추기 부분 해결되지 않아 재 질문 드립니다ㅠㅠ
미해결
반응형 웹사이트 포트폴리오(Architecture Agency)
<!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표시로 변경되지 않습니다 ㅠㅠ 계속 똑같은 질문 드려 죄송합니다
- HTML/CSS
- jquery
- 웹-디자인
- 반응형-웹
ckrnckr12
댓글 1
좋아요 1
조회수 233
모바일 네비게이션 퍼블리싱 - 모바일트리거, GNB 보이기 감추기 질문입니다
미해결
반응형 웹사이트 포트폴리오(Architecture Agency)
<!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로 바뀌지 않습니다 ㅠㅠ
- HTML/CSS
- jquery
- 웹-디자인
- 반응형-웹
ckrnckr12
댓글 2
좋아요 0
조회수 242
그랩마켓 웹 화면 구현하기 코드
미해결
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
섹션 2 HTML & CSS 기본 그랩마켓 웹 화면 구현하기 코드 복사할 수 있을까요? 컴퓨터를 새로 샀는데 굳이 다시 구현 할 필요가 없어서 그렇습니다.
- HTML/CSS
- javascript
- react
- node.js
- react-native
- 머신러닝
- express
- tensorflow
D3vJ30n
댓글 1
좋아요 0
조회수 247
[정보-23강] ES6 class 문법으로 공부하시는 분들!! 화살표 함수로도 시도해보셔요!
미해결
인터랙티브 웹 개발 제대로 시작하기
강의에서 나오는 prototype 말고 class 문법으로 바꿔서 공부하시는 분들 참고하셔요! 🫶 ❤ 화살표함수란 ? 함수를 간결하게 정의할 수 있는 문법으로, 함수가 호출될 때의 this 컨텍스트가 정적으로 결정됨. 주로 콜백 함수나 메서드 정의 시 this 바인딩 문제를 해결하기 위해 사용됨. 정리 Arrow Function 내부에서 this를 사용하면, 함수가 정의된 시점의 외부 컨텍스트를 유지하게 됨 화살표 함수 ver. run = () => { if (this.direction === 'left') { this.xPos += this.speed; } else if (this.direction === 'right') { this.xPos -= this.speed; } this.mainElm.style.left = `${this.xPos}%`; requestAnimationFrame(this.run); }; Bind 메소드 ver. run() { if (this.direction === 'left') { this.xPos += this.speed; } else if (this.direction === 'right') { this.xPos -= this.speed; } this.mainElm.style.left = `${this.xPos}%`; requestAnimationFrame(this.run.bind(this)); }
- HTML/CSS
- javascript
- 인터랙티브-웹
Chaeni Lee
댓글 1
좋아요 1
조회수 229
pdf 파일 질문이요?
미해결
SCSS(SASS)+GRID+FLEX 실전 포트폴리오 퍼블리싱
강의중에 pdf 파일 말씀하시는 건 ...pdf 유료 파일로 나와있는 교재를 말씀하시는것이지요? 구입을 안해서...필요하다면 해야할까요?
- HTML/CSS
- sass
- flex
kwon하늘바람
댓글 1
좋아요 1
조회수 210
모바일 네비게이션 퍼블리싱 ㅡ모바일트리거,GNB 보이기 감추기 부분 다시 수정하여 질문드립니다!
미해결
반응형 웹사이트 포트폴리오(Architecture Agency)
<!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; } 아까 질문드렸던 수강생입니다 추가하여 업로드 하였습니다
- HTML/CSS
- jquery
- 웹-디자인
- 반응형-웹
ckrnckr12
댓글 2
좋아요 1
조회수 232
동적으로 html 생성 후 이벤트 위임 질문 있습니다.
미해결
인터랙티브 웹 개발 제대로 시작하기
안녕하세요. 이벤트 위임 연습하다가 변칙적으로 연습하고 있는데요. 동적으로 html 생성 된 후에 버튼에 ''-active"클래스 추가 하면 실제로 클래스가 추가가 안되네요. 그런데 elem을 consol 창에 찍어보면 "-avtive"클래스가 추가된 요소로 나오는데 이건 무슨 문제일까요? <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>스크립트 연습</title> <style> *, *::before, *::after {margin:0; padding:0; box-sizing:border-box;} h1 {padding:20px 0;} h2 {padding-bottom:20px;} li {list-style:none;} .container {max-width:1000px; margin:0 auto; padding:0 20px; background-color:#f1f1f1;} .wrap {padding:40px; border:1px solid #888;} .wrap + .wrap {margin-top:50px;} .btn-list {display:flex; justify-content:space-between; gap:20px; width:100%; padding:20px; background-color:dodgerblue;} .btn-list li {width:calc(100% / 3);} .btn-list__item {width:100%; padding:10px;} .btn-list__item.-active {background-color:darkkhaki;} </style> </head> <body> <div class="container"> <h1>스크립트 연습</h1> <section class="wrap btn-wrap"> <h2>버튼 연습</h2> <ul class="btn-list"> <!-- <li class="asdf"><button class="btn-list__item"><span>버튼</span> 1버튼</button></li> <li class="asdf"><button class="btn-list__item"><span>버튼</span> 2버튼</button></li> <li class="asdf"><button class="btn-list__item"><span>버튼</span> 3버튼</button></li> --> </ul> </section> <script> window.addEventListener('DOMContentLoaded', initHandler) function initHandler() { buttonListHandler(); } function buttonListHandler() { const btnWrap = document.querySelector('.btn-wrap'); const btnList = document.querySelector('.btn-list'); let currentItem = null; function clickHandler(el) { let elem = el.target; while (!elem.classList.contains('btn-list__item')){ elem = elem.parentNode; // console.log(elem) if(elem.nodeName === 'BODY'){ elem = null; return; } } if(currentItem){ currentItem.classList.remove('-active'); } if(elem.classList.contains('btn-list__item')){ elem.classList.add('-active'); currentItem = elem; } console.log(elem); } btnWrap.addEventListener('click', ()=> { const htmlStr = ` <li><button class="btn-list__item"><span>버튼</span> 1버튼</button></li> <li><button class="btn-list__item"><span>버튼</span> 2버튼</button></li> <li><button class="btn-list__item"><span>버튼</span> 3버튼</button></li> `; btnList.innerHTML = htmlStr; }) btnWrap.addEventListener('click', clickHandler); } </script> </div> </body> </html>
- HTML/CSS
- javascript
- 인터랙티브-웹
김재환
댓글 1
좋아요 0
조회수 294
모바일 네비게이션 퍼블리싱 ㅡ모바일트리거,GNB 보이기 감추기 부분 질문드립니다.
미해결
반응형 웹사이트 포트폴리오(Architecture Agency)
& 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; }; }; 위 코드 적용시 이렇게 임시 보더 박스가 표기 되지 않습니다 ㅠㅠ
- HTML/CSS
- jquery
- 웹-디자인
- 반응형-웹
ckrnckr12
댓글 3
좋아요 1
조회수 277
rotateY()에서 deg에 따른 차이
미해결
인터랙티브 웹 개발 제대로 시작하기
오른쪽 벽에서 transform을 아래와 같이 설정하면 브라우저를 통해 보여지는 길이가 다릅니다. 이유가 뭘까요? transform: rotateY(-90deg) translateZ(400vw);
- HTML/CSS
- javascript
- 인터랙티브-웹
ddd
댓글 1
좋아요 0
조회수 226
실수로 style.css를 지워버렸습니다...
미해결
SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma
실수로 style.css파일을 지워서 다시 만들려고 style.scss에 watch sass를 눌렀는데 css파일이 다시 생기지가 않아요.. 해결 방법이 없을까요...? ㅠㅠ
- HTML/CSS
- javascript
- sass
- jquery
- scss
망고19
댓글 1
좋아요 1
조회수 216
인기 태그
인프런 TOP Writers
주간 인기글
- 🚀 IT 공부는 했는데 왜 아직도 안 될까요? | AI와 함께 실무 중심 IT 모임 🤖 NOESIS
- 🚀 끝까지 만들어 본 적 있나요? | 실서비스 완성 + 수익 창출 모임 💰 catalyst collectiv
- 🚀 끝까지 만들어 본 적 있나요? | 실서비스 완성 + 수익 창출 모임 💰 catalyst collectiv
- 🚀 끝까지 만들어 본 적 있나요? | 실서비스 완성 + 수익 창출 모임 💰 catalyst collectiv
- 🧘♀️ [운동공간] 기획자/디자이너/앱 개발자를 찾습니다 띄띄