묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결웹 게임을 만들며 배우는 React
안녕하세요 제로초님
안녕하세요 제로초님 강의를 보다가 문득 의문이 들어서 질문을 드리려고 합니다. 리액트를 사용할때 보통 html에서 사용을 안하고 js파일에다가 React를 import받아서 사용하는 것으로 알고 있는데 html에서 리액트를 구현하시는 이유를 여쭈어보고 싶습니다. 그리고 위에서 스크립트에서 아래 부분을 가져오시는거 같은데 따라치면 오류가 나서요.. 어디서 가져오시는건지 여쭈어봐도 될까요? <script crossorigin src="https://unpkg.com/react@16/umd/react.developement.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.developement.js"></script>
-
미해결풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
html tag 사용관련 질문 있습니다.
안녕하세요 강사님, 풀스텍 강의 잘 듣고 있습니다. html 마크업 과정을 보다가 질문이 있어서 이렇게 질문 드립니다. 저는 마크업 할때 최대한 html 에서 제공하는 tag를 많이 쓰려고 합니다 ( heading , ul, p, span, img 등등) 강사님께서는 거의 div로 마크업을 하셨는데 다른 이유가 있으신가요? 아니면 개개인의 취향인건지, 현업에서는 div 를 많이 쓴다던지, 이유가 궁금합니다.
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요 제로초님
강의잘듣고있습니다!!!.. 듣는도중 궁금한게 생겼는데 구글링을 해도 잘안나와서 질문드립니다! Button 의 html 태그에서 htmlType이 어떤 역활을 하는지 궁금합니다!
-
미해결반응형 웹사이트 포트폴리오(App Official Landing Website)
선생님 질문에 대한 신속한 답변 감사합니다! 그런데 ㅠㅠ 슬라이더가 작동이 안되고 이미지가 왜 저렇게 되는지 모르겠어요!
원인을 모르겠어요 <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>StarUp Mate : App Official Landing</title> <link rel="icon" href="images/logo-favicon.png"> <!---jquery CDN---> <script src="http:s//code.jquery.com/jquery-3.5.1.min.js"></script> <!--Slick slider--> <link rel="stylesheet" href="js/slick/slick/slick-theme.css"> <link rel="stylesheet" href="js/slick/slick/slick.css"> <script src="js/slick/slick.min.js"></script> <!-- Custom CSS & JS --> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="responsive.css"> <script src="custom.js"></script> </head> <body> <header> <div class="header-inner"> <div class="logo"> <a href="#none"><img src="images/logo.png" alt=""></a> </div> <div class="gnb"> <a href="#none">CEO 인사말</a> <a href="#none">서비스 특징</a> <a href="#none">자주 묻는 질문들</a> <a href="#none">경영비전</a> <a href="#none">사용자 리뷰</a> <a href="#none">앱 사용자 가이드</a> <a href="#none">최신소식</a> </div> </div> </header> <!-- Section : welcome --> <section class="welcome"> <div class="slideshow"> <img src="images/slide-welcome-01.png"> <img src="images/slide-welcome-02.png"> <img src="images/slide-welcome-03.png"> </div> <div class="welcome-heading"> <span>창의적인 아이디어를 만드는 가장 빠른 방법</span> <h1> An idea solution of startup for your <em id="typing"></em> </h1> <p> 스타트업 메이트 앱이 여러분의 최상의 스타트업 구축을 위해 창의적인 아이디어를 제공하는 데 최선을 다하겠습니다. </p> <div class="welcome-btns"> <a href="#none" class="btn start">CEO 시작하기</a> <a href="#none" class="btn guide">사용자 가이드</a> </div> </div> <div class="mouse"> <span class="wheele"></span> </div> </section> <!---.ceo-access---> <section class="ceo-access"> </section> <!---.banner---> <section class="banner"> </section> <!---.feature---> <section class="feature"> </section> <!---.vision---> <section class="vision"> </section> <!---.faq---> <section class="faq"> </section> <!---.review---> <section class="review"> </section> <!---.focus---> <section class="focus"> </section> <!---.guide---> <section class="guide"> </section> <!---.news---> <section class="news"> </section> <footer> </footer> </body> </html> css /* Fontawesome 4.7 */ @import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); /* XEION CDN */ @import url('http://cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css'); /* Web Fonts - Source Sans Pro */ @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;600;700;900&display=swap'); /* font-family: 'Source Sans Pro', sans-serif; */ /* Web Fonts - NoonNoo */ @font-face { font-family: 'NEXON Lv2 Gothic'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv2 Gothic.woff') format('woff'); font-weight: normal; font-style: normal; } /* Reset CSS */ * { box-sizing: border-box; } a { text-decoration: none; color: #222; } button, input { outline: none; } h1,h2,h3,h4,h5,h6 { margin-top: 0; font-weight: normal; line-height: 1.5em; } /* Default CSS */ body { font-family: 'NEXON Lv2 Gothic', sans-serif; font-size: 18px; line-height: 1.7em; margin: 0; background-color: #fff; color: #222; } /*########header#########*/ header{ position: fixed; width:100%; z-index: 100; } .header-inner{ width:1300px; margin: auto; overflow: hidden; padding-top: 30px; padding-bottom: 15px; } .logo{ float: left; } .logo img{ margin-top: -7px; } .gnb{ float: right; } .gnb a{ margin: 10px; font-size: 16px; } /* ################# section : welcome ################# */ .welcome { /* border: 5px solid #000; */ height: 90vh; position: relative; } .slideshow {} .welcome-heading { position: absolute; top: 50%; transform: translateY(-50%);/*수직으로 섹션을 기준으로 정중앙에 옴*/ left: 200px; text-align: center; width: 750px; } .welcome-heading span { font-size: 24px; } .welcome-heading h1 { font-family: 'Source Sans Pro', sans-serif; font-size: 60px; font-weight: 600; line-height: 1.2em; margin-bottom: 30px; margin-top: 15px; } .welcome-heading h1 em { display: block; font-style: normal; color: #eb4d4b; } .welcome-heading p { padding: 0 100px; margin-bottom: 50px; } .welcome-btns {} .btn { display: inline-block; width: 160px; padding: 8px; color: #fff; border-radius: 5px; margin: 5px; transition: 0.5s; } .btn:hover { box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); transform: translateY(-5px); } .btn.start { background-color: #0abde3; } .btn.guide { background-color: #fff; color: #222; } /* Mouse Wheele */ .mouse { border: 2px solid #fff; position: absolute; width: 32px; height: 45px; border-radius: 30px; bottom: 100px; left: 250px; } .wheele { position: absolute; width: 4px; height: 15px; background-color: #fff; border-radius: 5px; left: 12px; top: 10px; animation: wheele 1.5s linear infinite; } @keyframes wheele { 0% { top: 10px; } 50% { top: 20px; } 100% { top: 10px; } } /* ▦▦▦▦▦▦▦▦▦ Slick Custom CSS ▦▦▦▦▦▦▦▦▦ */ .slideshow .slick-arrow { border: 1px solid #000; display: none !important; } .slideshow * { outline: none; } jquery $(function(){ /* Slick Slider - Welcome */ $('.slideshow').slick({ infinite: true, dots: false, autoplay: true, autoplaySpeed: 2000, fade: true, speed: 1000, pauseOnHover: false });
-
미해결기본을 확실히!! HTML의 모든 것
html 수정
안녕하세요, html을 공부하면서 실습하다가 제가 에디터를 메모장으로 쓰고있었는데 브라우저는 이미 저장한상태긴했지만 모르고 메모장을 지워버렸어요.. 이렇게되면 브라우저 수정은 어떻게할수있나요? 그리고 브라우저 저장 후 같은이름으로 텍스트를 저장하면 둘사이가 호환이 안되던데 브라우저 확장자 파일과 텍스트파일(에디터파일)을 호환시키려면 어떻게 저장해야하나요? 메모장을 에디터로 사용하면 수정을 못하나요??
