묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결파이썬 플라스크(Flask) 기반 웹 개발 및 업무 자동화 서비스 활용
<p>태그에 대해서 더 정확한 설명이 좀 필요합니다.
33:00 쯤에 <p>태그가 개행이라서<input>태그와 나눠진다고 설명을 하셨는데 <h>태그로 해도 개행이 되서 더 정확한 <p>태그의 설명이 필요 할 거 같습니다.
-
미해결실습으로 배우는 AWS 핵심 서비스
태그를 추가하면 좋은데~ 부분인데요. 태그가 하는 기능이 무엇인가요?
AWS에서 가끔 무엇인가 만들때 태그를 추가하는 부분이 있었는데, 이부분이 어떻게 작용하는지 그리고 보통 어떤 태그를 추가하는지? 아마 제 예상으로는 태그를 붙여놓으면 나중에 구분하기 쉬워서 그런 것 일까요? 예를 들어 개발 A팀의 - a라는 태그를 붙이면 그 사용자를 인식하기 더 쉬운것인가요?
-
미해결작정하고 장고! Django로 Pinterest 따라만들기 : 바닥부터 배포까지
탬플릿 태그에 관하여..
안녕하세요~ 궁금한게 있어 질문을 남깁니다. 강의를 듣다보면, {% %}로 감싸서 사용하는 탬플릿 태그들이 종종 나오는 것 같은데요, 예를들어 {% if user.is_authenticated %} 이런 태그들은 장고에서 재공하는 태그인건가요? if문 뒤에 나오는 user.is_authenticated 이런 내용은 미리 알고있지 않으면 사용하기 쉽지 않을 것 같은데 어디 정리가 되어있는 문서가 있거나, 참고할 만한 곳이 있을까요?
-
해결됨반응형 웹사이트 포트폴리오(App Official Landing Website)
.access-right img{ display: block; float:right; }하면 화면이 이상하게 나와요 어디를 잘못쳐서 그런걸까요?
코드는 <!DOCTYPE html> <head> <meta charset="UTP-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>StarUp Mate : App Offical Landing</title> <link rel="icon" href="images/logo-favicon.png"> <!-- jQuery CDN--> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <!--Slick Slider--> <link rel="stylesheet" href="js/slick/slick-theme.css"> <link rel="stylesheet" href="js/slick/slick.css"> <script src="js/slick/slick.min.js"></script> <!--Custom CSS & JS--> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/responsive.css"> <script src="script/custom.js"></script> </head> <body> <!--Header--> <header> <div class="header-inner"> <div class="logo"> <a href="#"><img src="images/logo.png" alt=""></a> <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> </div> </header> <!--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 </h1> <em> Business strategy Organization Management Business Innovation </em> <p> 스타트업 메이트 앱이 여러분의 최상의 스타트업 구축을 위해 창의적인 아이디어를 제공하는 데 최선을 다하겠습니다. </p> </div> </section> <!--ceo-access--> <section class="ceo-access"> <div class="ceo-inner"> <div class="ceo-inner"> <div class="ceo-content"> <div class="ceo-left"> <img src="images/quotation-mark.svg" alt=""> <h3>3 Pre-made Solutions for your Startup Business</h3> <p>창의적인 아이디어를 가장 빠르게 창출할 수 있는 최고의 앱 솔루션을 제공합니다. 여러분의 스타트업을 더욱 성장시키기 위해 온 힘을 다할 것이며 STARTUP MATE 라는 이름답게 항상 동반자가 되겠습니다. 감사합니다.</p> <span>앤드류 - 스타트업 메이트 대표이사</span> </div> <div class="ceo-right"> <div class="ceo-msg"> <h3>Application Downloads<big>30,000+</big></h3> <p>스타트업메이트는 앱 다운로드 30,000명 이상의 앱 사용자의 충분한 피드백을 통해 검증된 서비스를 제공합니다.</p> </div> <div class="ceo-photo"> <img src="images/icon-face-ceo.jpg" alt=""> </div> </div> </div> </div> </div> <div class="access-inner"> <div class="access-content"> <div class="access-left"> <h2>언제나 어디서나 즐겁고 편리한 액세스 스타트업 CEO들의 커뮤니티</h2> <p>언제나 어디서나. 즐겁고 편리한 액세스가 가능합니다. 회원 가입은 쉽고 간단합니다. 무료 회원 가입 후 로그인하시면 업데이트 된 스타트업 메이트의 서비스를 받으실 수 있습니다.</p> <div class="btn-download"> <a href=""><img src="images/btn-appstore.png" alt=""></a> <a href=""><img src="images/btn-playstore.png" alt=""></a> </div> </div> </div> <div class="access-right"> <img src="images/access-mockup.png" alt=""> </div> </div> </section> <!--banner--> <section class="banner"> <div class="banner-inner"> <div class="banner-content"> <input type="radio" name="tabmenu" id="tab1" checked> <input type="radio" name="tabmenu" id="tab2"> <input type="radio" name="tabmenu" id="tab3"> <div class="tab-btn"> <label for="tab1"> <em><img src="images/banner-icon-01.png" alt=""></em> <span>CEO를 위한 경영 전략을 위한 더 쉽은 방법</span> </label> <label for="tab2"> <em><img src="images/banner-icon-02.png" alt=""></em> <span>개선된 검색 필터로 효율적인 전략 수립</span> </label> <label for="tab3"> <em><img src="images/banner-icon-03.png" alt=""></em> <span>CEO 오프라인 커뮤니티 활동 지원</span> </label> </div> <div class="tabs"> <div class="tab tab1"> <h2>Fast management strategy</h2> <p>어떤 상황에서든 기업의 리더는 불황기 생존 방안은 물론이고 미래에 성장할 수 있는 전략을 반드시 찾아야 합니다.</p> </div> <div class="tab tab2"> <h2>Efficient search filter</h2> <p>스타트업 메이트는 비즈니스 모델 캔버스를 통해 가장 효율적인 경영전략 수립 방안을 스타트업 CEO에게 제시합니다.</p> </div> <div class="tab tab3"> <h2>CEO Community Activities</h2> <p>기업이 디지털과 물리적인 요소를 통합하여 비즈니스 모델을 변화시키는 새로운 방향을 정립하기 위한 오프라인 활동을 지원합니다.</p> </div> </div> </div> </div> </section> <!--feature--> <section class="feature"> <div class="feature-inner"> <div class="headline-share"> <h1>스타트업 CEO 커뮤니티</h1> <p> 스타트 업 비즈니스 발전을 위한 다양한 서비스를 제공합니다. </p> <div class="feature-content"> <div class="feature-mockup"> <img src="images/feature-mockup-01.png" alt=""> </div> <div class="feature-about"> <img src="images/feature-mockup-02.png" alt=""> <h2></h2> <p></p> </div> </div> <div class="feature-content"> <div class="feature-about"> <img src="" alt=""> <h2></h2> <p></p> </div> <div class="feature-mockup"> <img src="images/icon-num-01.png" alt=""> </div> </div> <div class="feature-content"> <div class="feature-mockup"> <img src="images/feature-mockup-03.png" alt=""> </div> <div class="feature-about"> <img src="" alt=""> <h2></h2> <p></p> </div> </div> </div> </div> </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></footer> </body> </html> css는 *{ box-sizing: border-box; } a{ text-decoration: none; color: #222; } button, input { outline:none; } h1,h2,h3,h4,h5{ margin-top: 0; font-weight: normal; line-height: 1.5em; } /* header */ .header {} .header-inner{ border: 1px solid #000; 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; } /* welcome */ .welcome{ border: 5px soild #000; height:90vh; position:relative; } .slideshow{width: 1300px; margin: auto;} .slideshow img{width: 1300px; height:auto; margin:0 auto;} .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; } .welcome-heading p{} .welcome-btn{} .welcome-btns .btn{} .btn.start {} .btn.guide {} /*################SECTION ceo-access##############*/ .ceo-access{} .ceo-inner{ width:1300px; margin:auto; } .ceo-content{ overflow: hidden; border:1px solid #eee; padding: 50px 0; } .ceo-content > div{ float:left; width: 50%; } .ceo-left{padding-right: 50px;} .ceo-left h3{font-weight: bold;} .ceo-left img{ width:30px; filter: invert(39%) sepia(95%) saturate(475%) hue-rotate(116deg) brightness(95%) contrast(101%); } .ceo-right{text-align: center;} .ceo-right > div{ float: left; padding: 20px; } .ceo-msg{width:60%;} .ceo-msg h3{ font-size: 28px; color:#009b72; } .ceo-msg h3 big{ display: block; } .ceo-photo{width: 40%;} .ceo-photo img{ border-radius: 15px; width: 100%; } .access-inner{ width:1300px; margin:auto; } .access-content{ padding-top: 50px; padding-top: 80px; } .access-content > div{ float: left; width: 50%; } .access-left{ padding-right: 50px; } .access-right{ text-align: center; } .access-right img{ display: block; float:right; } .btn-download{ margin-top: 30px; } /*##############banner##############*/ .banner { /*background: linear-gradient(to right, #69acfe, #6eaefd);*/ background: url(../images/wave-line.png) no-repeat center right 100px, linear-gradient(to right, #69acfe, #6eaefd); background-size: 80px } .banner-inner { width:1300px; margin:auto; } .banner-content { overflow: hidden; padding:40px 0; } .banner-content > div{ float: left; width: 50%; } input[name=tabmenu]{display:none;} .tab-btn {} .tab-btn label { border: 1px solid red; width: 30%; display: inline-block; text-align: center; margin: 5px; cursor: pointer; } .tab-btn label em{ background-color: #fff; display: inline-block; width: 110px; height: 110px; border-radius: 50%; text-align: center; padding-top: 20px; } .tab-btn label em img{ width: 60px; filter: invert(72%) sepia(23%) saturate(6765%) hue-rotate(188deg) brightness(101%) contrast(99%); } .tab-btn label span{ display: block; margin-top: 10px; } .tabs{ border: 1px solid #000; } .tab{ display: none; color: #fff; padding-top: 20px; padding-left: 50px; } .tab h2{ font-size: 32px; font-weight: bold; } /*###############checked funtion##################*/ input[id=tab1]:checked ~ .tabs .tab1, input[id=tab2]:checked ~ .tabs .tab2, input[id=tab3]:checked ~ .tabs .tab3{ display: block; } input[id=tab1]:checked ~ .tab-btn label[for=tab1] em, input[id=tab2]:checked ~ .tab-btn label[for=tab2] em, input[id=tab3]:checked ~ .tab-btn label[for=tab3] em { background-color: #34495e; } input[id=tab1]:checked ~ .tab-btn label[for=tab1] em img, input[id=tab2]:checked ~ .tab-btn label[for=tab2] em img, input[id=tab3]:checked ~ .tab-btn label[for=tab3] em img{ filter: invert(); } input[id=tab1]:checked ~ .tab-btn label[for=tab1] span, input[id=tab2]:checked ~ .tab-btn label[for=tab2] span, input[id=tab3]:checked ~ .tab-btn label[for=tab3] span{ color: #34495e; } /*##################feature#################*/ /*##################vision#################*/ /*##################faq#################*/ /*##################review#################*/ /*##################focus#################*/ /*##################guide#################*/ /*##################news#################*/ 선생님 하다보니 자꾸 실수해서 그런거 같은데... 어디가 잘못되서 저런 화면이 나오는 걸까요... 코딩 다된 완성본도 주시면 안될까요? 주실수 있으시다면 ghgh3036@gmail.com으로 보내주시면 안되나요?
