질문 & 답변 - 인프런 | 커뮤니티

묻고 답해요

164만명의 커뮤니티!! 함께 토론해봐요.

인프런 TOP Writers

미해결
반응형 웹사이트 포트폴리오(Architecture Agency)

모니터크기,해상도 따라서 라이브화면이 넘 다르게 보여요~

PC 레이아웃 서브페이지(project detail)-#01 안녕하세요, 쌤~답변 넘 도움되었어요 감사드립니다. ^^ 쌤수업이 넘 좋아서 하나씩 다 듣고 포폴로 활용하려구해요. 현재 pc페이지 다 완성했는데, 맥북13.3/21인치 모니터 두개 라이브 화면이 너무 달라서 문의드립니다 ㅜㅜ 1. hiring 모달페이지 img 아래 margin-bottom: 30px준거 때문에 project detail 페이지 사진 사이가 떠서 margin-bottom:0 줘야하는데요. 맥북 13.3에서 라이브로보면 캡쳐와 같이 안맞아요. 하지만 21인치 모니터에서는 맞게 붙어 있습니다. 왜그런건가요? 혹시해서 hiring-photo img에 추가로 height: 100%를 주니 맥북에서도 사진 모서리가 맞아보이는데 비율도 통통하고..원래는 width만 주셨쟎아요. 또한, 13.3맥북에서는 headign h1도 2줄로 내려가게 되는데 실제 작업시 사양에따라 내려가게 냅두나요? 2. 전체적으로 문제가 라이브는 큰모니터로보고 코딩만 맥북13.3인치로하다가 피시끝나서 맥북으로 라이브 제대로보니 다른 섹션들 모두 마진탑이나 버튼들이 사진등이 짤리거나 겹쳐 있습니다..어떻게 해야할까요? 쌤수업 코딩은 똑같이 하고 큰모니터에서는 정상으로 보인다고해도 작은맥북에서 깨져보여서요. 맥북 해상도는 1280*600 으로 쓰고 있고 최대 1680으로 바꾸면 큰모니터처럼 거의 비슷하게 보이지만 그래도 마진등이 붙어있는등 또 눈아파서 볼수없구요. 13.3은 보통 노트북사이즈인데…작은해상도문제인건지… 3. 혹시 모든사이즈, 패딩 마진을 피시에서부터 %로 안줘서 그렇다고도 하는데 어떻게 pc페이지 정리를 해야할까요? 나중에 피시를 바꾸기넘 어렵다고 하던데 혹시 모바일 변환영상에서 피시를 %로 바꾸시나요? 알려주세용~ 미리 감사드립니다. ^^ 사진: 13.3 맥북에서 캡쳐한 모달, 섹션 페이지들. 사진: 21인치 모니터에서 정상적으로 보이는 캡쳐 index.html <!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> <link rel="icon" href="images/favicon.png"> <script src="https://kit.fontawesome.com/a69c137eb6.js" crossorigin="anonymous"></script> <script src="js/jquery-2.1.4.js"></script>  <script src="./js/velovity/modernizr.js"></script> <script src="./js/velovity/velocity.min.js"></script> <script src="./js/velovity/velocity.ui.min.js"></script> <script src="./js/velovity/main.js"></script> <link rel="stylesheet" href="./js/velovity/velocity.css">  <script src="js/jquery.scrollTo.min.js"></script>  <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">  <script src="custom.js"></script> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="responsive.css"> </head>  <body data-hijacking="on" data-animation="none"> <div class="container">  <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 CodingWorks<i class="fas 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> <section class="cd-section" id="about"> <div> <div class="content"> <div class="about-inner"> <div class="about-items"> <div class="item"> <img src="images/careers-main-01.png" alt="career01"> <span> <h3>Together we can make an impact</h3> <p> Design Works the excitement of an entrepreneurial environment with the stability of an established practice. Principals and senior leadership work side-by-side with junior designers to create innovative, workable designs. </p> </span> </div> <div class="item"> <img src="images/careers-main-02.png" alt="career02"> <span> <h3>We’re always looking for talent</h3> <p> If you don’t see an open position that fits your talents, send us your resume. We’re always looking for smart, self-starters and will reach out to you if something becomes available. </p> </span> </div> <div class="item"> <img src="images/careers-main-03.png" alt="creer03"> <span> <h3>Fellowship</h3> <p>Every summer we offer a Fellowship to a select group of students in architecture, planning and landscape architecture. Read about our 2019 Fellowship winners and learn more about what the Fellowship has to offer.</p> </span> </div> </div> </div> </div> </div> </section> <section class="cd-section" id="project"> <div> <div class="content"> <div class="project-inner">  <input type="radio" name="tabmenu" id="tab1" checked>  <input type="radio" name="tabmenu" id="tab2"> <input type="radio" name="tabmenu" id="tab3"> <div class="tabs"> <div class="tab"> <div class="project-info" data-text="01">  <h3>Project : Glass Wall Architecture</h3> <p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. In ipsum consequuntur cum ad, eum deserunt atque est corporis iusto temporibus a dignissimos asperiores fugit! Saepe nemo ab molestiae facilis doloribus, corrupti quod, maxime mollitia odio tenetur deleniti suscipit optio rem? </p> <ul> <li><b>Area</b> : 1670 m2</li> <li><b>Completed Date </b>: September 2018</li> <li><b>Architect</b> : Andrew Yu</li> </ul> <div class="detail"> <div><span>225</span> WORKING DAY</div> <div><span>320</span> MEMBERS</div> <div><span>3M</span> BUDGET</div> </div> <a class="view-project" href="">view project<i class="fas fa-long-arrow-alt-right"></i></a> </div> <div class="project-photo"> <img src="images/project-main-01-01.jpg" alt=""> <img src="images/project-main-01-02.jpg" alt=""> <img src="images/project-main-01-03.jpg" alt=""> <img src="images/project-main-01-04.jpg" alt=""> </div> </div> <div class="tab"> <div class="project-info" data-text="02"> <h3>Project : Hallway of Architecture</h3> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea molestiae quae quas eligendi dicta vel fugiat, tempore amet eveniet assumenda quis, quidem ullam, in velit laborum nihil autem culpa rerum quaerat commodi unde eius quisquam. Provident perferendis quisquam doloribus magni neque dicta et eum vero. </p> <ul> <li><b>Area</b> : 2345 m2</li> <li><b>Completed Date </b>: April 2019</li> <li><b>Architect</b> : Robert Matteus</li> </ul> <div class="detail"> <div><span>321</span> WORKING DAY</div> <div><span>420</span> MEMBERS</div> <div><span>8M</span> BUDGET</div> </div> <a class="view-project" href="">view project<i class="fas fa-long-arrow-alt-right"></i></a> </div> <div class="project-photo"> <img src="images/project-main-02-01.jpg" alt=""> <img src="images/project-main-02-02.jpg" alt=""> <img src="images/project-main-02-03.jpg" alt=""> <img src="images/project-main-02-04.jpg" alt=""> </div> </div> <div class="tab"> <div class="project-info" data-text="03"> <h3>Project : Outside Stairs Architecture</h3> <p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. In ipsum consequuntur cum ad, eum deserunt atque est corporis iusto temporibus a dignissimos asperiores fugit! Saepe nemo ab molestiae facilis doloribus, corrupti quod, maxime mollitia odio tenetur deleniti suscipit optio rem? </p> <ul> <li><b>Area</b> : 1200 m2</li> <li><b>Completed Date </b>: May 2020</li> <li><b>Architect</b> : Christine Jung</li> </ul> <div class="detail"> <div><span>132</span>WORKING DAY</div> <div><span>202</span>MEMBERS</div> <div><span>5M</span>BUDGET</div> </div> <a class="view-project" href="">view project<i class="fas fa-long-arrow-alt-right"></i></a> </div> <div class="project-photo"> <img src="images/project-main-03-01.jpg" alt=""> <img src="images/project-main-03-02.jpg" alt=""> <img src="images/project-main-03-03.jpg" alt=""> <img src="images/project-main-03-04.jpg" alt=""> </div> </div> </div> <div class="btn"> <label for="tab1"></label> <label for="tab2"></label> <label for="tab3"></label> </div> </div> </div> </div> </section> <section class="cd-section" id="plan"> <div> <div class="content"> <div class="plan-inner"> <div class="plan-feature"> <div class="plan-info"> <div class="plan-heading"> <h2>Planning<br> For the Next Project</h2> <hr class="bar"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam temporibus error numquam animi quas architecto doloribus hic accusantium, officia accusamus fugiat quae rem reprehenderit repellat placeat vel, perspiciatis quia harum fugit eligendi nam. Fuga praesentium pariatur temporibus, natus, explicabo expedita quaerat magnam aliquid similique autem iure iste. Officiis repellat, repellendus. </p> </div> <div class="plan-photo"> <img src="images/plan-main-01.jpg"> </div> </div> <div class="history-info"> <h2>History</h2> <hr class="bar"> <div class="history-slider"> <div> <h4>The Project <br>of Architect for the <span>2013</span></h4> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos eveniet modi totam ratione dolores accusantium sapiente cupiditate ipsum, non repudiandae! </p> </div> <div> <h4>The Project <br>of Architect for the <span>2014</span></h4> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos eveniet modi totam ratione dolores accusantium sapiente cupiditate ipsum, non repudiandae! </p> </div> <div> <h4>The Project <br>of Architect for the <span>2015</span></h4> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos eveniet modi totam ratione dolores accusantium sapiente cupiditate ipsum, non repudiandae! </p> </div> <div> <h4>The Project <br>of Architect for the <span>2016</span></h4> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos eveniet modi totam ratione dolores accusantium sapiente cupiditate ipsum, non repudiandae! </p> </div> <div> <h4>The Project <br>of Architect for the <span>2017</span></h4> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos eveniet modi totam ratione dolores accusantium sapiente cupiditate ipsum, non repudiandae! </p> </div> <div> <h4>The Project <br>of Architect for the <span>2018</span></h4> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos eveniet modi totam ratione dolores accusantium sapiente cupiditate ipsum, non repudiandae! </p> </div> <div> <h4>The Project <br>of Architect for the <span>2019</span></h4> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos eveniet modi totam ratione dolores accusantium sapiente cupiditate ipsum, non repudiandae! </p> </div> <div> <h4>The Project <br>of Architect for the <span>2020</span></h4> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos eveniet modi totam ratione dolores accusantium sapiente cupiditate ipsum, non repudiandae! </p> </div> </div> </div> </div> </div> </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>2020<br>Architecture Award<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 class="view-awards" href="https://architectureprize.com/" target="_blank">View the awards</a> </div> </div> <div class="victory-jump"> <img src="images/victory-jump.png" alt="victory"> </div> </div> </div> </div> </section> <section class="cd-section" id="location"> <div> <div class="content"> <div class="location-inner"> <div class="feature"> <div class="office"> <div class="headquarters"> <b>CREATIVE DESGIN GROUP</b> <h2>Headquarters</h2> <p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Minima alias voluptatibus aspernatur accusamus sapiente esse quo iure voluptatem laudantium, tempore libero reprehenderit voluptate ipsam eum error mollitia sunt ducimus autem? </p> <span> Address : Address: 309, New Cavendish St, EC1Y 3WK / Tel : 0800 214 5252 </span> </div> <div class="customer"> <b>THE PERFECT WAY</b> <h2>Customer Service</h2> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem laboriosam accusamus tenetur dolore temporibus explicabo odio sint ullam officia porro. Amet eos molestiae omnis tenetur culpa iste non dignissimos expedita! </p> <span>Address : 11 Fifth Ave - New York, US / Tel : 0800 809 3400</span> </div> </div> <div class="service"> <div class="service-item"> <i class="fas fa-leaf"></i> <h3>Built and natural contexts</h3> <p> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nihil in ipsum suscipit nobis sint totam. </p> </div> <div class="service-item"> <i class="fas fa-bullseye"></i> <h3>Landscape design</h3> <p> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nihil in ipsum suscipit nobis sint totam. </p> </div> <div class="service-item"> <i class="fas fa-cube"></i> <h3>Every building site unique </h3> <p> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nihil in ipsum suscipit nobis sint totam. </p> </div> </div> </div> </div> </div> </div> </section> <section class="cd-section" id="contact"> <div class="content"> <div class="contact-inner"> <div class="contact-feature"> <div class="contact-form"> <h3><b>Contact</b>Us</h3> <p>Feel free to ask for details, dont’save any questions. </p> <form class="send-box"> <label>Email<span>*</span></label> <input type="email"> <label>Subject<span>*</span></label> <input type="text"> <label>Message<span>*</span></label> <textarea cols="30" rows="10"></textarea>  <button>send message</button> </form> </div> <div class="contact-info"> <h4>Our <b>Office</b></h4> <ul> <li>Address : Address: 309, New Cavendish St, EC1Y 3WK</li> <li>Phone : 0800 214 5252</li> <li>Email : designworks@designworks.com</li> </ul> <h4>Business <b>Hours</b></h4> <ul> <li><i class="far fa-clock"></i>Monday - Friday : 9am to 5pm</li> <li><i class="far fa-clock"></i>Saturday : 9am to 2pm</li> <li><i class="far fa-clock"></i>Sunday : Closed</li> </ul> <h4>Get in <b>Touch</b></h4> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa debitis delectus fugit minus! Rem, quod rerum! Reiciendis sed doloremque totam natus! Consequatur voluptas reprehenderit, error excepturi nulla dolores odit fugit eaque! Laboriosam placeat consequuntur incidunt est autem quos harum labore expedita, nulla aperiam? Atque corrupti perferendis illum, sit ad distinctio?Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero illum culpa numquam nobis fugiat corporis officia saepe soluta id distinctio?</p> </div> </div> </div> </div> </section> <header> <div class="gnb-inner"> <div class="logo"> <a href="#none"><img src="images/logo.png" alt="logo"></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" alt=""> </a> <a href="#" class="btn_hiring"> <i class="fas 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> Project-detail.html <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Project01: Design works</title> <script src="https://kit.fontawesome.com/a69c137eb6.js" crossorigin="anonymous"></script> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="responsive.css"> </head> <body> <div class="modal project-detail"> <div class="header"> <div class="header-inner"> <div class="modal-display">+ Project Descriptions #01 </div> </div> </div> <div class="hiring-main project-detail"> <div class="hiring-heading"> <span>project</span> <h1>We design complete environments</h1> </div> </div> <article class="hiring-info"> <div class="center-parent"> <div class="center-child"> <h2></h2> <p></p> </div> </div> <div class="photo"> </div> </article> <article class="hiring-info"> <div class="photo"><img src="images/project-main-01-02.jpg" alt=""> </div> <div class="center-parent"> <div class="center-child"> <h2>Today it is busily, loudly rebounding. </h2> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. At iure labore cupiditate soluta rerum dolor itaque cumque molestias perferendis et odit, nulla veritatis eligendi rem unde accusamus? Sit voluptatum iste esse eveniet dolorem, beatae ab totam harum id explicabo quisquam tenetur repellendus libero eius aperiam? Eum explicabo voluptate optio possimus perspiciatis ea ipsum eos molestiae ut ducimus, tempora esse maxime, quis sunt ipsam aliquid delectus omnis, corrupti error hic! Iure magni natus nisi tenetur! Ipsum esse, molestias </p> </div> </div> </article> <article class="hiring-info"> <div class="center-parent"> <div class="center-child"> <h2>invisible city was a space of cybernetic</h2> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. A voluptate quod impedit consequuntur enim aliquam, debitis libero, sapiente ab, suscipit porro modi omnis mollitia? Praesentium asperiores voluptates accusamus. Vitae quae nulla exercitationem quod necessitatibus doloribus temporibus consequatur doloremque molestias assumenda, ducimus modi eum sint libero reiciendis a deleniti repudiandae magni? Dicta omnis odio autem eius, excepturi tempore rerum? </p> </div> </div> <div class="photo"><img src="images/project-main-01-03.jpg" alt=""> </div> </article> <article class="hiring-info"> <div class="photo"><img src="images/project-main-01-04.jpg" alt=""> </div> <div class="center-parent"> <div class="center-child"> <h2>This work-network shared in Zoom-mode</h2> <p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Laudantium temporibus sunt esse earum tempore deleniti provident est aut molestiae, quidem qui deserunt fuga tenetur veritatis, incidunt dolores commodi iste. Dolores earum voluptates rem saepe, voluptatum voluptatibus, praesentium deserunt, sapiente nulla nam veniam distinctio odit rerum accusamus delectus molestias esse temporibus dicta nemo. </p> </div> </div> </article> <article class="hiring-slogan project-slogan"> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione fugit magnam quidem reprehenderit cumque soluta quam? Dignissimos reiciendis eum distinctio inventore odio. Reprehenderit laborum illum dolore accusamus doloremque at sed. </p> </article> </div> </body> </html> style.css /* 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:wght@100;200;300;400&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; padding: 0; } a { text-decoration: none; } /* ################### Default CSS ################### */ body { font-family: 'Montserrat', sans-serif; color: #222; font-size: 15px;/*상대적으로 늘어나니 em*/ 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; /*position fixed 인라인됨*/ width: 100%; top: 0; left: 0; z-index: 10; } .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; } .gnb a {} .menu { display: none; } .slogan { font-size: 18px; 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 rgba(0, 0, 0, 0.4); transition: 0.5s; } .fa-comment-dots{ transform: rotateY(180deg); margin-right: 5px; } .btn_hiring:active{/*버튼 누르면 작아지는 액티브 가상클래스*/ transform: scale(0); } /* ################### Home ###################### */ .home-inner{ background-color: #fff; height: 100%; } /* 애니메이션: slideup 1 */ .welcome-text{ font-family: 'Source Sans Pro', sans-serif; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 50px; font-weight: 300; text-align: center; line-height: 1.2em; /* display: none; */ animation: slideup 2s 0s linear; /* animation: 이름 시간 시작시간 스타일 반복 */ animation-fill-mode: both; /*처음으로 돌아가지 많고 끝내라*/ } .welcome-text span{ font-size: 26px; display: block; } .welcome-text span i{ color: red; margin-left: 3px; } /* 애니메이션: overlay 2 */ .home-inner:before{ /* display: none; */ content:''; background-color: #000; position: absolute; /*before는 인라인이라서 블록이나 앱솔루트해서 인라인블록만들어야한다 */ width: 10%; /* 초기상태 */ height: 100%; top: 0; left: 0; animation: overlay 1s 2s ease-in-out BOTH; /* 1번 welcome 글자 2초뒤에 시작해야하니까 dealy: 2s*/ } /* 애니메이션: opacity-image 3*/ .opacity-image{ background: url(images/section-bg-01.jpg) no-repeat center center/cover; height: 100%; opacity: 0; /*처음상태 0 임*/ animation: opacity-image 1s 2.5s ease-in both; /*dealy: 시작시간인데 앞에거 다 더하면 3초지만 겹치게 하려면 0.5 빠르게.*/ } .home-heading{ /* display: none; */ position: absolute; top: 50%; /* 이렇게 중간 %잡는게 맞으나, 아래 애니메이션 reveal span에 넣으니 가로가 흔들린다. 그래서 가로는 px로 고정한다.(x, left) */ /* left: 40%; transform: translate(-50%, -50%); */ left: 300px; transform: translateY(-50%); } /* 애니메이션: reveal 4 */ .home-heading span{ display: block; font-size: 115px; font-weight: 600; color:#fff; width: 0; overflow: hidden; /*span 0으로 해서 줄이고 글자는 나와있으니 오버플로우 히든으로 가린다?*/ animation: reveal 1s 3s ease-in-out both; /*아래 시간 다 더하고 좀빨리교차*/ } /* span 글자 각각 딜레이 시간차 주기 */ .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 */ @keyframes slideup { 0%{ opacity: 0; margin-top: 50px; } 20%{ opacity: 1; margin-top: 0; } 80%{ opacity: 1; margin-top: 0; } 100%{ opacity: 0; margin-top: 0; } } @keyframes overlay { 0%{ width: 0; left: 0; /* 애니메이션은 같은 위치만 가능하니 left변하면 안됨*/ } 50%{ width: 100%; left: 0; } 100%{ width: 0; left:100%; /* right: 0와 같은얘기. */ } } @keyframes opacity-image{ 0%{ opacity:0; } 100%{ opacity: 1; } } @keyframes reveal { 0%{ width: 0; } 100%{ width: 100%; } } /* ################### Section : About ################### */ .about-inner{ /*background 한줄쓰기: color url no-repeat position/size*/ background: #0dace3 url(images/line-drawing.png) no-repeat right bottom; height: 100%; position: relative;; /* background-color: #0dace3; */ /* background-size: 80%; */ /* background: blue; 이렇게치면 위에거를 덮어버리므로 반드시 -color */ } .about-items{ /* border: 1px solid #000; */ width: 50%; position: absolute; /* mobile 은 사용못함 */ top: 50%; left: 100px; transform: translateY(-50%); /*y - 위로 올라감*/ } .item{ overflow: hidden; /* float준 부모를 해제 */ /* clear: both; */ color:#fff; margin-bottom: 30px; } .item img{ height: 120px; float: left; margin-right: 20px; filter:invert(1); /* img에 색상필터 넣을떄 filter, (1)은100% */ } .item span{ transition: 0.5s; } .item span h3{ font-size: 28px; font-weight: 500; margin: 0; letter-spacing: -1px; /*자간*/ } .item span p{ overflow: hidden; /* float떄문에 글자가 아래로 밀린경우*/ font-size: 18px; } .item:hover h3{ /*item에 호버하면 img, h3변한다(자식만가능)*/ color: #000; } .item:hover img{ filter:invert(0); /*원래 흰색이였으므로 필터0으로 제거한다*/ } /* ################## Section: project #############*/ .project-inner{ height: 100%; overflow: hidden; background-color: #fff; border: 1px solid #ddd; } .tabs{ height: 100%; width: 300%; /*탭3개를 가져야하니까 */ transition: 0.5s; } .tab{ height: 100%; float: left; width: 33.3333%; } .tab>div{ height: 100%; float: left; } .project-info{ width: 25%; } .project-photo{ width: 75%; overflow: hidden; } /* 속성선택자 [] */ /* radio 꺼줘야함 */ input[name=tabmenu] { display: none; } /* ### label ### */ .btn{ position: absolute; left:0; bottom: 30px; width: 25%; /* project-info가 25%였으니까 똑같이 25%로 맞추면 딱참*/ text-align: center; /* 라벨 중앙배치- 인라인블럭이니 가능함*/ } /* 동그란 버튼부분*/ .btn label{ cursor: pointer; width: 6px; height: 6px; background-color:#000; border-radius: 50%; display: inline-block; margin: 8px; position: relative; transition: 0.5s; } .btn label:before { content: ''; display: inline-block; border: 1px solid transparent; width: 18px; height: 18px; border-radius: 50%; position: absolute; left: -6.5px; top: -6.5px; } /* 테두리 hover해서 보일때 */ .btn label:hover:before{ border: 1px solid #aaa; } input[id="tab1"]:checked ~ .btn label[for="tab1"]:before, input[id="tab2"]:checked ~ .btn label[for="tab2"]:before, input[id="tab3"]:checked ~ .btn label[for="tab3"]:before { border: 1px solid #aaa; } /* 라벨 누르면 각각 tab 3개가 왼쪽으로 움직이게 만든다*/ input[id="tab1"]:checked ~ .tabs { margin-left: 0; } input[id="tab2"]:checked ~ .tabs{ margin-left: -100%; } input[id="tab3"]:checked ~ .tabs{ margin-left: -200%; } /* ### project info ### */ .project-info{ padding: 50px; position: relative; } .project-info h3{ font-size: 20px; position: relative; /* 가상태크 숫자가 아래로 안내려가서 얘한테 렐러티브 주면 이게 우선함(위에있음)*/ } .project-info p{ font-size: 16px; line-height: 1.5em; } .project-info ul{ line-height: 2em; margin: 30px 0; /* 나중에 문단마진줄떄, 중간에 상하를 한번에 주자.*/ } .project-info ul li{ } /* > unicode로 html보다 css에 폰트오썸 대신한다. */ .project-info ul li:before{ content: '\f105'; font-family: fontawesome; margin-right: 10px; } .detail{ margin-bottom: 50px; } /* inlineblock애는 약간의 마진이 있어서 밀려내려간다.. */ .detail div{ display: inline-block; /*정교한 가로배치: float:left, 대략배치:display: block; */ text-align: center; width: 32.5%; color: #999; } .detail div span{ /* span은 인라인블럭이라 block줘서 상하배치*/ display: block; font-size: 36px; font-weight: bold; color: #000; margin-bottom: 10px; } /* button */ .view-project{ background-color:#3f3f3f; color: #fff; text-transform: uppercase; font-size: 13px; /* padding: 10px 50px; a 는 인라인: 마진상하 x 패딩 0 */ transition: 0.5s; width: 200px; display: inline-block; padding: 10px; text-align: center; } .view-project:hover{ background-color: #000; } .view-project .fa-long-arrow-alt-right { transition: 0.5s; } .view-project:hover .fa-long-arrow-alt-right { margin-left: 30px; /* 0에서 30픽셀 이동하는것 a가 늘어나는것은 패딩만 줘서이므로 위드를 줘야함 */ } /* ### 상단 3개의 각각숫자 가상태그+사용자정의속성 사용 ### */ .project-info:before{ content: attr(data-text); font-size: 130px; color: #ddd; position: absolute; /*z-index:-1이 안된이유: absolute이 relative보다 순위낮음. */ top: -10px; left: 10px; } .project-photo img{ width: 100%; } /* ################# Section : plan ##################*/ .plan-inner { background-color: #1d1b24; height: 100%; } .plan-feature { width: 80%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .plan-feature > div { height: 300px; color: #bbb; } .plan-info {} .plan-info > div { float: left; } .plan-heading { width: 70%; padding-right: 50px; } .plan-heading h2, .history-info h2{ color: #fff; margin: 0; } .plan-heading p { font-size: 16px; line-height: 1.6em; } .plan-photo { width: 30%; } .plan-photo img { height: 265px; } .plan-heading hr.bar, .history-info hr.bar { background-color: dodgerblue; display: inline-block; } .history-slider div { outline: none; } .history-slider div h4 { color: #fff; font-size: 20px; font-weight: normal; margin: 0; line-height: 1.5em; } .history-slider div h4 span { color: dodgerblue; } .history-slider div p { font-size: 16px; line-height: 1.5em; } /* Slick.js Custom CSS */ .history-slider .slick-arrow { display: none !important; } .history-slider .slick-dots li button:before { color: #fff; font-size: 40px; } .history-slider .slick-dots li { margin: 0; } /* ################### Section : awards winner ################## */ .awards-inner{ height: 100%; /*부모에 높이를 100%줘야 자식이 float 플롯됐을떄 높이를 줄수있음!! */ border: 1px solid #ddd; } .awards-inner >div{ /* awards-inner안에 자식div 2개만 해당되므로 >div */ float: left; width: 50%; height: 100%; position: relative; } .about-awards{ background-color: #000; color: #fff; } .about-heading{ position: absolute; /*absolute 인라인블럭-길이높이 가지지만 딱 컨텐츠만큼 줄어든다 */ top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; width: 70%; } hr.bar{ width: 50px; height: 4px; border: none; /*hr은 보더였다..ㅋ*/ background-color: crimson; margin: 30px auto;/* 위아래30 가로중앙 auto*/ } .about-heading p{ color: #999; font-size: 16px; line-height: 1.5em; } /* A button */ .view-awards{ color: #bbb; border: 1px solid #bbb; padding: 5px 15px; border-radius: 20px; transition: 0.5s; /*hover*/ /* margin-top: 200px; 마진상하가 안되니까 인라인임 p테그에서 내리거나*/ display: inline-block; margin-top: 20px; } .view-awards:hover{ /*호버시 색상변화, ** 보더가 안보여야하는데 none으로하면 픽셀이빠져서 화면이 흔들림, 투명으로해야 */ background-color: #31c0ce; color:#fff; /* border: none; */ border-color: transparent; } .victory-jump{ background-color: #fff; } .victory-jump img{ position: absolute; top: 50%; left:50%; transform: translate(-50%, -50%); width: 80%; } /* ################### Section : Location ################### */ .location-inner{ background: url(images/background-location.jpg) no-repeat center center; /*background 안나오는이유: 크기줘야쟎이*/ height: 100%; } .location-inner:before{ content:''; /*before, after content:'' 로시작, 인라인이되므로 크기줘도안보인다. position: absoulte/display inline-block 줘서 인라인블럭화한다*/ background-color:rgba(0,0,0,0.85); width: 100%; height: 100%; /* display: inline-block; */ position: absolute; } .feature{ width: 70%; position: absolute; top:50%; left: 50%; transform: translate(-50%, -50%); color: #ddd; } .feature>div{ / float: left; } .office{ width: 60%; padding-right: 100px; } .service{ width: 40%; } .office b{ font-weight: normal; } .office h2{ /*h2는 마진0줘야한다*/ color: #1db1f0; font-weight: 500; margin: 0; margin-top: 5px; } .office p{ font-size: 16px; line-height: 1.5em; } .office span{color: #fff;} .customer{ margin-top: 40px; } /* Service */ .service{} .service-item{ margin-bottom: 20px; } .service-item .fas{ color: #1db1f0; font-size: 40px; }/*fontawesome 인라인임*/ .service-item h3{ color: #fff; font-size: 22px; margin: 0; margin-top: 10x; } /* ### 섹션 하나씩 닫자. ### */ /* ////////////////// Section: contact ///////////////// */ .contact-inner { background-color: #fff; height: 100%; /* border: 5px solid red; */ } .contact-feature { width: 70%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .contact-feature > div { float: left; width: 50%; padding: 20px; } .contact-form{} .contact-form h3{ font-size: 30px; font-weight: normal; margin: 0; } .contact-form h3 b{} .send-box{} .send-box label{ display: block; font-weight: bold; font-size: 16px; margin: 10px 0; margin-top: 20px; } .send-box label span{ color: crimson; font-weight: normal; } .send-box input[type=email], [type=text],textarea{ border: 1px solid #ccc; padding: 10px; width: 100%; border-radius: 3px; outline: none; transition: 0.5s; } .send-box input[type=email]:hover, [type=text]:hover, textarea:hover{ border: 1px solid #0088cc; box-shadow: 0 0 5px #0088cc; } .send-box input[type=email]:focus, [type=text]:focus, textarea:focus { background-color: #eee; } .send-box button{ background-color: #0088cc; color: #fff; text-transform: uppercase; border:none; padding: 11px 20px; border-radius: 3px; cursor: pointer; transition: 0.5s; margin-top: 10px; } .send-box button:hover { background-color: #000; } .contact-info{} .contact-info h4{ font-weight: normal; font-size: 20px; margin: 0; } .contact-info ul{ /*ul,li왼쪽 정렬은 ul에 패딩0을 줬음*/ } .contact-info ul li{ line-height: 2em;/* body:15px * 2em = 30px */ } .contact-info ul li:last-child{ color: #0088cc; } .contact-info i{ margin-right: 5px; } .contact-info p{ line-height: 1.5em; } /* ############# Subpage : Hiring ############## */ .modal{ } /* header */ .header{ position:fixed; /*인라인블럭되서 줄어드니까 다시 100%줘야한다. */ width: 100%; background-color: #fff; z-index: 1; } .header-inner{ width: 95%; margin: auto; height: 90px; line-height: 90px; border-bottom: 1px solid #ddd; } .modal-display{ font-size: 16px; font-family: 'Source Sans Pro', sans-serif; } /* main */ .hiring-main{ height: 600px; position: relative; } .hiring-heading{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; width: 100%; } .hiring-heading span{ text-transform: uppercase; font-weight: bold; font-size: 20px; position: relative; } .hiring-heading span:before, .hiring-heading span:after { content: ''; height: 2px; width: 50px; position: absolute; top: 50%; } .hiring-heading span:before{ right: 120%; } .hiring-heading span:after{ left: 120%; } .hiring-heading h1{ font-size: 100px; font-weight: 200; margin: 0; margin-top: 40px; } .hiring-info{ overflow: hidden; margin-bottom: 30px; } .hiring-info >div{ width: 50%; height: 600px; float: left; } .center-parent{ position: relative; } .center-child{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 78%; } .center-child h2{ font-size: 36px; font-weight: normal; } .center-child p{ font-size: 22px; line-height:1.5; font-weight: 300; } .photo img{ width: 100%; } .hiring-slogan{ padding: 100px 0; } .hiring-slogan p{ font-size: 32px; font-weight: 200; text-align: center; width: 70%; margin: auto; position: relative; } .hiring-slogan p:before{ content:',,'; /* 쌍따옴표 ,, 콤마 두개로한다*/ font-family: 'Overpass', sans-serif; font-size: 200px; position: absolute; color: #ddd; transform: rotate(180deg); top:-82%; left:-7%; } .hiring-contact ul{ display: inline-block; /*50%하면 안된다. 인라인블럭에 마진이 있음*/ width: 49%; font-size: 20px; font-weight: 300; } .hiring-contact ul li{ line-height: 2; } .hiring-contact ul li:first-child { font-weight: 400; } .hiring-contact ul li:last-child { color: dodgerblue; font-size: 18px; } .sns{} .sns a{ font-size: 15px; color: #000; width: 30px; height: 30px; display: inline-block; border-radius: 50%; text-align: center; line-height: 30px; margin: 2px; position: relative; transition: 0.5s; /* transform: scale(0.2);초기가 0이면 클릭을 못하므로 호버는 before에줌. */ } .sns a:hover { color:#fff; } .sns a:before{/* 배경동그라미 만들고 높이는 부모에게 있으니까 y축은 냅두고 x축만 중간만들면됨. */ content:''; position: absolute;/*가상태그는 인라인블록 만들어야함, 부모에 꼭 렐러티브*/ background-color: red; width: inherit; height: inherit; border-radius: 50%; z-index: -1; left: 50%; transform: translateX(-50%) scale(0);/*transform 반드시 한줄에*/ transition: 0.5s; } .sns a:hover:before{/*x축 위치 유지하면서 스케일1로 한다.*/ transform: translateX(-50%) scale(1); } .sns a:nth-child(1):before{ background-color: #3B5999; } .sns a:nth-child(2):before{ background-color: #56ACEE; } .sns a:nth-child(3):before{ background-color: #00C300; } .sns a:nth-child(4):before{ background-color: #E4405F; } .sns a:nth-child(5):before{ background-color: #CD201F; } .sns a:nth-child(6):before{ background-color: #00AFF0; } /* Sunpage: Project-detail 01 */ .hiring-main.project-main{ background: url(images/project-modal-main-01.jpg)no-repeat center center/cover; height: 100vh; } .hiring-main.project-main .hiring-heading { color: #fff; animation: slidedown 1s linear both; transition: 0.5s; } .hiring-main.project-main .hiring-heading h1{ font-size: 70px; margin: 0; margin-top: 30px; } .project-detail .hiring-info{ margin-bottom: 0; } .project-detail .project-slogan p:before{ left: -70px; } /* animation: Slidedown */ @keyframes slidedown{ 0%{ opacity: 0; margin-top: -50px; } 100%{ opacity: 1; margin-top: 0; } }

Jennifer oh · 2021.06.22 · 반응형 웹사이트 포트폴리오(Architecture Agency)

투표점수

2

조회수

918

답변

1
미해결
자바스크립트 알고리즘 문제풀이 입문(코딩테스트 대비)

안녕하세요 하나 여쭤볼게 있습니다.

공주 구하기 문제에서 코드 작성 중 for(let i=1; i<k; i++) queue.push(queue.shift()); 이 부분에서 let i = 1 왜 1부터 시작인가요?? 0부터 시작해야 배열 맨앞부터 할 수 있는거 아닌가요?

gkdmsdl0727 · 2021.06.22 · 자바스크립트 알고리즘 문제풀이 입문(코딩테스트 대비)

투표점수

1

조회수

142

답변

1
미해결
[C++과 언리얼로 만드는 MMORPG 게임 개발 시리즈] Part4: 게임 서버

LockGuard하는 부분에서 예외가 발생하는 에러가납니다..

ㅇㅇㅇㅇㅇㅇㅇㅇㅇ 분명히 똑같은 코드인데 Launch 함수내의 락가드 잡는 부분에서 예외가 발생하네요... 후....뭐가 문제인가요 빌드는 되는데 아무것도 출력이 안되는 상태라 이상해서 디버깅해보니 이렇습니다.

essenger M · 2021.06.22 · [C++과 언리얼로 만드는 MMORPG 게임 개발 시리즈] Part4: 게임 서버

투표점수

0

조회수

385

답변

5
미해결
[C#과 유니티로 만드는 MMORPG 게임 개발 시리즈] Part3: 유니티 엔진

static에 관해서 질문이 있습니다.

강의를 보면서 C#에 대한 이해를 최대한 하면서 공부를 하고있는데요. 마이크로소프트 공식 문서와 기타 책들도 참고하면서 하고 있는데 static 한정자가 유니티에서 쓰일 때 좀 다른점이 있는 것 같아서 질문드립니다. 이것저것 테스트해보았는데도 의문점이 풀리지 않는 부분들이 있어서요.. 첫번째 질문은 - Part1,2에서 진행했던 콘솔앱같은경우, 다른 클래스에서 static한정자를 사용해서 필드변수등을 만들었을 때, 그냥 program의 Main에서 타클래스에서 선언한 static 필드변수를 new 키워드도 사용하지 않고 그대로 가져다가 사용할 수 있었습니다. 실제로 결과는 0, 100이 찍힌걸로 보아 new Class1을 하지 않았음에도 분명 어딘가에 메모리상에 Class1 클래스가 만들어져서 존재하고 myValue라는 값도 존재한다는 의미로 받아들였는데 일단 이부분의 이해가 맞는지 궁금합니다. 두번째로 - 위와 같은 방법으로 유니티에서도 실험을 해보았는데, 일단 디버그 안에서 TestManager.Instance로 바로 접근이 가능했지만, a의 값을 가져오는거에는 실패를 한게 어째서인지 모르겠고 그다음에 위에 Instance.a가 널래퍼런스 오류라서 TestManager를 새로 만든 뒤에 tm에서 a를 가져왔지만 그값이 100이 아닌 0인 이유도 모르겠습니다. (왜 TestManager의 Start안에서 초기화하는 부분이 실행이 안됐는지) a 자체를 static으로 하지 않아서 그런가 싶어서 int a에도 static을 붙여보았는데 그렇게하면 TestManaget.Instance.a가 아닌 TestManager.a로 바로 접근이 가능했습니다만, 싱글톤 패턴을 사용하는 방법에선 Instance를 사용해서 접근하는게 목적인 것 같아서 의미가 없는게 아닌가요? 세번째로 강의를 보면 Init()함수에서 Instance가 null이라면 찾아서 넣어주는 작업을 하는데, 애초에 new키워드를 쓰지 않고도 이미 Managers.Instance에 접근이 가능하다는 것 자체가 이미 Managers라는 어딘가에 존재하는 클래스를 가져왔다고 생각되는데, 왜 Instance = 자기자신으로 바로 가져오지 못하고 null상태로 존재할 수 있는지가 궁금합니다. 메모리상에 존재하지 않는다면 애초에 Managers.Instance에 접근자체를 할 수 없던가, 그렇지않다면 Instance를 찾은시점에 Instance타입자체가 Managers이므로 자기자신을 선택할 수 있어야하는게 아닌가요? 마지막으로 static키워드 자체가 유일성을 보장받는다는게 핵심이고, 그것덕분에 그냥 Managers.~~~방식으로 접근할 수 있다는부분에서, 결국 Managers 스크립트가 컴포넌트의 형태로 씬 어딘가에 존재해야만 가져다가 쓸 수 있다면 반대로 Managers 스크립트가 붙은 오브젝트가 하나가 아닌 여러개 존재할 때, Managers안의 Instance의 유일성은 보장받지 않는게 아닌가요? 만약 Managers를 가지고있는 복수의 게임오브젝트가 존재할 경우, Managers.Instance로 뭔가에 접근한다면 어떤 게임오브젝트의 Managers에 접근하는건가요? 그리고 Managers 자체가 복수로 존재하는거 자체가 가능한게 잘못 된 것 같은데 정작 Managers를 가진 게임오브젝트를 복제하고 실행해봐도 아무 문제가 없어보여서 질문드립니다. 혼자 공부하느라 최대한 이것저것 다 찾아보고 하면서 공부하고 있는데 static과 싱글톤 개념이 약간 이해가 어려워서 염치불구하고 질문드립니다...ㅜㅜ

Hyun · 2021.06.22 · [C#과 유니티로 만드는 MMORPG 게임 개발 시리즈] Part3: 유니티 엔진

투표점수

0

조회수

396

답변

1
해결됨
스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술

에러(o.s.b.d.LoggingFailureAnalysisReporter)

안녕하세요! 질문이 있어 글을 씁니다! 처음에 run을 할때 이런 에러가 뜹니다! 다른 부분은 에러가 안뜨는데요!ㅠㅠㅠ 검색해보면 해결방법 : resources의 application.properties에 다음 문장 추가 spring.autoconfigure.exclude=org.springframework.boot.autoconfigure.jdbc.DataSourceAutoConfiguration 를 하라고 떠서 그렇게 해도 뜨네요!ㅠㅠㅠㅠ 어떻게 하면 될까요?ㅠㅠ

sumeen99 · 2021.06.22 · 스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술

투표점수

1

조회수

12.3k

답변

2
미해결

스프링부트 로그 설정에러 관련 조언 부탁드립니다 ㅠ

안녕하세요!. 아래와 같이 로그(1. logback-spring.xml)를 설정해서 이용하고 있습니다. 기존에 잘 돌아가서, 다른 프로젝트에서도 그대로 카피해서 사용을 하고 있는데요. 유독 특정 프로젝트에서 해당 로그설정 파일을 이용할경우, 아래 첨부한 콘솔 내용(2.콘솔)만 출력되고 로깅이 안됩니다... 구글링을해도 답이 나오지않아 혹시 아시는 분 있을까 하여 글을 남겨봅니다 ㅠ 1. logback-spring.xml <?xml version="1.0" encoding="UTF-8"?><configuration> <property name="LOGS_ABSOLUTE_PATH" value="./logs" /> <appender name="STDOUT" class="ch.qos.logback.core.ConsoleAppender"> <layout class="ch.qos.logback.classic.PatternLayout"> <Pattern>[%d{yyyy-MM-dd HH:mm:ss}:%-3relative][%thread] %-5level %logger{32} - %msg%n</Pattern> </layout> </appender> <appender name="FILE" class="ch.qos.logback.core.rolling.RollingFileAppender"> <file>${LOGS_ABSOLUTE_PATH}/logback.log</file> <encoder> <pattern>[%d{yyyy-MM-dd HH:mm:ss}:%-3relative][%thread] %-5level %logger{32} - %msg%n</pattern> </encoder> <rollingPolicy class="ch.qos.logback.core.rolling.TimeBasedRollingPolicy"> <fileNamePattern>${LOGS_ABSOLUTE_PATH}/logback.%d{yyyy-MM-dd}.%i.log</fileNamePattern> <timeBasedFileNamingAndTriggeringPolicy class="ch.qos.logback.core.rolling.SizeAndTimeBasedFNATP"> <maxFileSize>10MB</maxFileSize> </timeBasedFileNamingAndTriggeringPolicy> <maxHistory>30</maxHistory> </rollingPolicy> </appender>  <root level="INFO"> <appender-ref ref="STDOUT" /> <appender-ref ref="FILE" /> </root>    </configuration> 2. console {spring.resources.cache.period=0, spring.resources.chain.cache=false} 2021-06-22 18:23:04,559 restartedMain ERROR Error processing element appender ([configuration: null]): CLASS_NOT_FOUND 2021-06-22 18:23:04,574 restartedMain ERROR Unknown object "property" of type org.apache.logging.log4j.core.config.Property is ignored: try nesting it inside one of: ["Appenders", "Loggers", "Properties", "Scripts", "CustomLevels"]. 2021-06-22 18:23:04,577 restartedMain ERROR Unknown object "root" of type org.apache.logging.log4j.core.config.LoggerConfig is ignored: try nesting it inside one of: ["Appenders", "Loggers", "Properties", "Scripts", "CustomLevels"]. . ____ _ __ _ _ /\\ / ___'_ __ _ _(_)_ __ __ _ \ \ \ \ ( ( )\___ | '_ | '_| | '_ \/ _` | \ \ \ \ \\/ ___)| |_)| | | | | || (_| | ) ) ) ) ' |____| .__|_| |_|_| |_\__, | / / / / =========|_|==============|___/=/_/_/_/ :: Spring Boot :: (v2.4.0)

henry · 2021.06.22

투표점수

0

조회수

842

답변

0
미해결
Git과 GitHub 시작하기

push 오류에 대해 문의 드립니다.

오늘 처음 깃허브 push 를 해보는데, 이상하게 push 버튼만 누르면 에러 메세지가 뜨는 것도 아닌데, 그냥 계속 빙글빙글 돌기만 합니다.수 분을 그렇게 돌기만해서 취소하고, local (git bash) 방법을 찾아서 해보는데 거기에서도 git push origin master 라고 치면 더이상 화면 변경없이 그냥 그대로 있습니다.오류 메세지가 떠야 뭐가 잘못인지 확인이라도 할텐데, 아무것도 뜨지 않아서 어디서 잘못된건지도 알수가 없네요. 강사님의 소스트리 화면과 비교해보자면, 강사님의 push 대상은 master 로 뜨는데, 저는 main 으로 뜹니다. 그게 달라요. 그걸 master로 바꾸고 싶어도 바꿔지지 않고요. 어떻게 하면 좋을지 조언 부탁 드립니다.

조sinai · 2021.06.22 · Git과 GitHub 시작하기

투표점수

0

조회수

343

답변

0
미해결
스프링 MVC 1편 - 백엔드 웹 개발 핵심 기술

Interface와 Abstract class 의 차이점

안녕하세요, 강의 잘 듣고 있습니다. 강의에서 이끌어 주시는대로 따라가다가 생각을 해봤습니다. - ControllerV1 은 추상적 형태이고, MemberFormControllerV1. MemberSaveControllerV1, MemberListControllerV1 는 구체적 형태이다. - 추상적 형태를 나타내는 방법에는 Interface와 Abstract class 가 존재한다. 아래와 같은 의문이 들었습니다. - 현재 상황에서 Abstract class 를 사용하지 않고 Interface 를 사용한 이유가 뭔가요? - 만약 Interface 를 사용한 특별한 이유가 있다면, 어떤 상황에서 Abstract class 또는 Interface 를 선택하는게 옳을까, 판단하는 근거를 간략하게나마 말씀해주시면 감사하겠습니다. 좋은 하루 되세요 !

포닥 · 2021.06.22 · 스프링 MVC 1편 - 백엔드 웹 개발 핵심 기술

투표점수

7

조회수

8.72k

답변

3
미해결
Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex

깃헙 404 에러

삭제된 글입니다

trism0401 · 2021.06.22 · Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex

투표점수

1

조회수

60

답변

1
미해결

우아하게 앤서블 질문입니다!

엔서블 환경 구축하고 known_hosts에 키파일 확인도 했는데 ymal 파일을 ping을 한 다음에만 동작하고 또 시간 지나면 yaml 파일이 실행이 안 됩니다... 혹시 방법 없을까요??

마이티 · 2021.06.22

투표점수

0

조회수

302

답변

0
해결됨
코딩은 실전이다! - Git알못을 위한 깃린이코스(Git, Github 실습위주)

슬랙 초대해주세요

hjin9445@gmail.com 부탁드립니다!

무무 · 2021.06.22 · 코딩은 실전이다! - Git알못을 위한 깃린이코스(Git, Github 실습위주)

투표점수

1

조회수

178

답변

1
미해결
예제로 배우는 스프링부트 입문

안녕하세요 질문입니다.

그대로 따라해도 /test1, /test2 가면 화이트라벨 에러 뜨는데 이유를 모르겠습니다. ``` plugins { id 'org.springframework.boot' version '2.5.1' id 'io.spring.dependency-management' version '1.0.11.RELEASE' id 'java' id 'war' } group = 'com.study' version = '0.0.1-SNAPSHOT' sourceCompatibility = '1.8' repositories { mavenCentral() } dependencies { implementation 'org.springframework.boot:spring-boot-starter-web' providedRuntime 'org.springframework.boot:spring-boot-starter-tomcat' testImplementation 'org.springframework.boot:spring-boot-starter-test' implementation 'javax.servlet:jstl' implementation 'org.apache.tomcat.embed:tomcat-embed-jasper' } test { useJUnitPlatform() } ``` ------- <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <% out.println("Hello World"); %> </body> </html> -------- <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <% out.println("Hello World (sub)"); %> </body> </html> ---------- package com.study.springboot; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody; @Controller public class MyController { @RequestMapping("/") public @ResponseBody String root() throws Exception{ return "JSP in Gradle"; } @RequestMapping("/test1") // localhost:8081/test1 public String test1() { return "test1"; // 실제 호출 될 /WEB-INF/views/test1.jsp } @RequestMapping("/test2") // localhost:8081/test2 public String test2() { return "sub/test2"; // 실제 호출 될 /WEB-INF/views/sub/test2.jsp } } ----------- server.port=8081 # JSP 설정 spring.mvc.view.prefix=/WEB-INF/views/ spring.mvc.view.suffix=.jsp

Solioquies · 2021.06.22 · 예제로 배우는 스프링부트 입문

투표점수

0

조회수

251

답변

2
미해결
[백문이불여일타] 데이터 분석을 위한 중급 SQL

UNION 해커랭크 문제풀이 6분30초 부분

안녕하세요,강의 정말 잘 듣고 있습니다. 질문드릴 부분은 GROUP BY를 두번 해주는 개념이 머릿속에 잘 잡히지 않아서요GROUP BY를 두번 해줫다는건, X에 먼저 GROUP BY를 한 상태에서 Y에도 GROUP BY를 걸어주는 종속적인? 개념인가요? 아니면 X에 한번 GROUP BY를 걸어주고, Y에도 한번 걸어주는 그런 느낌인가요?그리고 거기에 COUNT(*)해준것은 정확히 무엇을 카운팅 해주는 건가요?

함문주 · 2021.06.22 · [백문이불여일타] 데이터 분석을 위한 중급 SQL

투표점수

3

조회수

203

답변

1
미해결
CSS Flex와 Grid 제대로 익히기

안녕하세요 footer 관련 질문 드립니다 !

footer에서 width 가 줄어들어서 width:100%채워주셨는데 왜 줄어든걸까여 ? 줄어든 이유를 모르겠습니다 그럼 그 전에는 안 줄어든건가요 ?! 윗 컨텐츠 영역에서는 20% 60% 20% 이렇게 총 100%가 채워졌을텐데 footer 부분에서도 따로 width 값을 명시해줘야한다는 말씀이신건가요 ? 만약 이 말이 맞다면 그 전에는 왜 정상 작동됐는지 궁금합니다 !

hm_stom · 2021.06.22 · CSS Flex와 Grid 제대로 익히기

투표점수

0

조회수

166

답변

1
미해결
Slack 클론 코딩[실시간 채팅 with React]

setting/ts폴더 복붙해도 에러가 납니다

양질의 강의 정말 잘 보고 있습니다 하지만 에러로 진행을 하지 못하고 있습니다 첫 강의부터 코드를 따라서 타이핑한 결과 > sleact-ts-front@1.0.0 build > cross-env TS_NODE_PROJECT=\"tsconfig-for-webpack-config.json\" NODE_ENV=production webpack [webpack-cli] Unable load 'C:\Users\nogo0\#code\LearnSlackClone\front\webpack.config.ts' [webpack-cli] Unable to use specified module loaders for ".ts". [webpack-cli] ⨯ Unable to compile TypeScript: error TS5083: Cannot read file 'C:\tsconfig-for-webpack-config.json'. [webpack-cli] Cannot find module 'typescript-node/register' from 'C:\Users\nogo0\#code\LearnSlackClone\front' [webpack-cli] Cannot find module 'typescript-register' from 'C:\Users\nogo0\#code\LearnSlackClone\front' [webpack-cli] Cannot find module 'typescript-require' from 'C:\Users\nogo0\#code\LearnSlackClone\front' [webpack-cli] Cannot find module 'sucrase/register/ts' from 'C:\Users\nogo0\#code\LearnSlackClone\front' [webpack-cli] Cannot find module '@babel/register' from 'C:\Users\nogo0\#code\LearnSlackClone\front' [webpack-cli] Please install one of them npm ERR! code 2 npm ERR! path C:\Users\nogo0\#code\LearnSlackClone\front npm ERR! command failed npm ERR! command C:\Windows\system32\cmd.exe /d /s /c cross-env TS_NODE_PROJECT=\tsconfig-for-webpack-config.json\ NODE_ENV=production webpack npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\nogo0\AppData\Local\npm-cache\_logs\2021-06-22T08_10_13_340Z-debug.log C:\Users\nogo0\#code\LearnSlackClone\front>npm run build > front@1.0.0 build > cross-env TS_NODE_PROJECT="tsconfig-for-webpack-config.json" webpack asset app.js 4.13 KiB [emitted] (name: app) ../../../#code/LearnSlackClone/front/client.tsx 39 bytes [not cacheable] [built] [code generated] [1 error] ERROR in ../../../#code/LearnSlackClone/front/client.tsx Module build failed (from ../../../#code/LearnSlackClone/front/node_modules/babel-loader/lib/index.js): Error: Cannot find module 'C:\Users\nogo0\#code\LearnSlackClone\front\node_modules\babel-loader\lib\index.js' Require stack: - C:\Users\nogo0\#code\LearnSlackClone\front\node_modules\loader-runner\lib\loadLoader.js - C:\Users\nogo0\#code\LearnSlackClone\front\node_modules\loader-runner\lib\LoaderRunner.js - C:\Users\nogo0\#code\LearnSlackClone\front\node_modules\webpack\lib\NormalModule.js - C:\Users\nogo0\#code\LearnSlackClone\front\node_modules\webpack\lib\NormalModuleFactory.js - C:\Users\nogo0\#code\LearnSlackClone\front\node_modules\webpack\lib\Compiler.js - C:\Users\nogo0\#code\LearnSlackClone\front\node_modules\webpack\lib\webpack.js - C:\Users\nogo0\#code\LearnSlackClone\front\node_modules\webpack\lib\index.js - C:\Users\nogo0\#code\LearnSlackClone\front\node_modules\webpack-cli\lib\webpack-cli.js - C:\Users\nogo0\#code\LearnSlackClone\front\node_modules\webpack-cli\lib\bootstrap.js - C:\Users\nogo0\#code\LearnSlackClone\front\node_modules\webpack-cli\bin\cli.js - C:\Users\nogo0\#code\LearnSlackClone\front\node_modules\webpack\bin\webpack.js at Function.Module._resolveFilename (node:internal/modules/cjs/loader:925:15) at Function.Module._load (node:internal/modules/cjs/loader:769:27) at Module.require (node:internal/modules/cjs/loader:997:19) at require (C:\Users\nogo0\#code\LearnSlackClone\front\node_modules\v8-compile-cache\v8-compile-cache.js:159:20) at loadLoader (C:\Users\nogo0\#code\LearnSlackClone\front\node_modules\loader-runner\lib\loadLoader.js:19:17) at iteratePitchingLoaders (C:\Users\nogo0\#code\LearnSlackClone\front\node_modules\loader-runner\lib\LoaderRunner.js:182:2) at runLoaders (C:\Users\nogo0\#code\LearnSlackClone\front\node_modules\loader-runner\lib\LoaderRunner.js:397:2) at NormalModule.doBuild (C:\Users\nogo0\#code\LearnSlackClone\front\node_modules\webpack\lib\NormalModule.js:646:3) at NormalModule.build (C:\Users\nogo0\#code\LearnSlackClone\front\node_modules\webpack\lib\NormalModule.js:791:15) at C:\Users\nogo0\#code\LearnSlackClone\front\node_modules\webpack\lib\Compilation.js:1242:12 front (webpack 5.24.2) compiled with 1 error in 67 ms npm ERR! code 1 npm ERR! path C:\Users\nogo0\#code\LearnSlackClone\front npm ERR! command failed npm ERR! command C:\Windows\system32\cmd.exe /d /s /c cross-env TS_NODE_PROJECT=tsconfig-for-webpack-config.json webpack npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\nogo0\AppData\Local\npm-cache\_logs\2021-06-22T08_11_20_386Z-debug.log ------------------------------------------------------- 위와 같은 에러가 발생하였고 갈피를 잡을수없어서 제로초님 깃허브를 참고하여 setting/ts폴더를 통쨰로 복붙하고 기존에 있던 node_modules, package-lcok.json을 삭제하고 npm i로 모두 재설치 했습니다 그럼에도 불구하고 아래같은 에러가 뜨는데 혹시 제가 빠뜨린 부분이 있을까요?

angryduck · 2021.06.22 · Slack 클론 코딩[실시간 채팅 with React]

투표점수

1

조회수

578

답변

2
미해결
자바 스프링부트 활용 웹개발 실무용

eclipse.ini파일이 없어요.. 그리고 저는 MariaDB안에...HeidiSQL이 있는데..

제목 그대로에요.. eclipse.ini파일 설정 바꾸는 데서부터 못하고 있고, MariaDB인데.. 전 HeidiSQL로 깔려있는데, 사용할수 있을까요? 도와주세요!

이성은 / 학생 / 경영학과 · 2021.06.22 · 자바 스프링부트 활용 웹개발 실무용

투표점수

0

조회수

338

답변

1
미해결
비전공자를 위한 진짜 입문 올인원 개발 부트캠프

웹에서 product card를 눌렀을때 모두 똑같은 화면으로 나옵니다

농구공, 축구공,키보드 누르면 모두 이렇게 똑같이 뜹니다. 이 화면은 id =2로 넣은 축구공을 눌렀을 떄의 화면입니다. 코드를 봤을때는 서버는 1일때만 요청했으니 축구공과 키보드를 누러면 안돼는데 다 똑같이 뜨네요 뭐가 오류일까요

조은택 · 2021.06.22 · 비전공자를 위한 진짜 입문 올인원 개발 부트캠프

투표점수

1

조회수

278

답변

5
미해결
빠르게 git - 핵심만 골라 배우는 Git/Github

git push -u origin main 관련 문의드립니다.

처리 시간 문제라고 하기에는 몇시간이 지나도 오류 메시지나 성공 메시지가 뜨지 않습니다. bash 창을 종료하려고 하면 아래와 같은 창이 뜹니다. 용량 문제일까 싶어 노트북 초기화 + 인터넷 랜선 연결을 했는데도 문제가 해결되지 않습니다. 이런 경우 어떻게 해결해야할까요?

gyeonghni · 2021.06.22 · 빠르게 git - 핵심만 골라 배우는 Git/Github

투표점수

1

조회수

303

답변

2
미해결
비전공자를 위한 진짜 입문 올인원 개발 부트캠프

안녕하세요 강의 잘 듣고 있습니다 다름이 아니라 안 되는게 있어서 질문을 드립니다.

Request URL: http://localhost:8080/products Request Method: POST Status Code: 200 OK Remote Address: [::1]:8080 Referrer Policy: strict-origin-when-cross-origin Response HeadersView source Access-Control-Allow-Origin: * Connection: keep-alive Content-Length: 50 Content-Type: text/html; charset=utf-8 Date: Tue, 22 Jun 2021 07:41:03 GMT ETag: W/"32-M3FXDluQXEAVLv+t1yb0yasB290" Keep-Alive: timeout=5 X-Powered-By: Express Request HeadersView source Accept: application/json, text/plain, */* Accept-Encoding: gzip, deflate, br Accept-Language: ko-KR,ko;q=0.9,en-US;q=0.8,en;q=0.7 Connection: keep-alive Content-Length: 146 Content-Type: application/json;charset=UTF-8 Host: localhost:8080 Origin: http://localhost:3000 Referer: http://localhost:3000/ sec-ch-ua: " Not;A Brand";v="99", "Google Chrome";v="91", "Chromium";v="91" sec-ch-ua-mobile: ?0 Sec-Fetch-Dest: empty Sec-Fetch-Mode: cors Sec-Fetch-Site: same-site User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.114 Safari/537.36 Request Payloadview source {name: "키보드", description: "그랩이 사용하던 키보드입니다", seller: "그랩", price: 50000,…} description: "그랩이 사용하던 키보드입니다" imageUrl: "uploads\\keyboard1.jpg" name: "키보드" price: 50000 seller: "그랩" 정상적으로 나오는거 같은데 정작 프리뷰에 가면 아래와 같이 오류가 뜹니다. 상품 업로드 중에 문제가 생겼습니다. import {Form, Divider, Input, InputNumber, Button, Upload} from 'antd'; import axios from 'axios'; import { useState } from 'react'; import { API_URL } from '../config/constants'; import './index.css' function UploadPage() { const [imageUrl, setImageUrl] = useState(null); const onSubmit = (values) => { axios.post(`${API_URL}/products`, { name: values.name, description: values.description, seller: values.seller, price: parseInt(values.price), imageUrl: imageUrl, }) .then((result) => { console.log(result); }); }; const onChangeImage = (info) =>{ if(info.file.status === 'uploading') { return; } if(info.file.status === 'done') { const response = info.file.response; const imageUrl = response.imageUrl; setImageUrl(imageUrl); } } return ( <div id = "upload-container"> <Form name = "상품 업로드" onFinish={onSubmit}> <Form.Item name="upload"label={<div className="upload-label">상품 사진</div>}> <Upload name = "image" action={`${API_URL}/image`} listType="picture" showUploadList= {false} onChange={onChangeImage} > { imageUrl ?( <img id="upload-img" src={`${API_URL}/${imageUrl}`} alt="image" /> ): ( <div id="upload-img-placeholder"> <img src="/images/icons/camera.png" alt="이미지" /> <span>이미지를 업로드해 주세요.</span> </div> )} </Upload> </Form.Item> <Divider /> <Form.Item label={<div className="upload-label" >판매자 명</div> } name = "seller" rules={[{required:true, message:"판매자 이름을 입력해 주세요."}]} > <Input className="upload-name" size = "large" placeholder="이름을 입력하세요" /> </Form.Item> <Divider/> <Form.Item name="name" label={<div className="upload-label">상품 이름</div>} rules={[{required:true, message:"상품 이름을 입력해 주세요."}]} > <input className="upload-name" size="large" placeholder="상품 이름을 입력해주세요." /> </Form.Item> <Divider/> <Form.Item name="price" label={<div className="upload-label">상품 가격</div>} rules={[{required:true,message:"상품 가격을 입력해 주세요"}]} > <InputNumber defaultValue={0} className="upload-price" size="large" /> </Form.Item> <Divider/> <Form.Item name="description" label={<div className="upload-label">상품 소개</div>} rules={[{required:true,message:"상품 소개를 입력해 주세요."}]} > <Input.TextArea size="large" id="product-description" showCount maxLength={300} placeholder="상품 소개를 적어주세요." /> </Form.Item> <Form.Item> {/* htmlType은 꼭 설정을 해줘야 한다. */} <Button id = "submit-button" size="large" htmlType = "submit" > 문제 등록하기. </Button> </Form.Item> </Form> </div> ) } export default UploadPage; 코드 입니다시작 할 때 config라는 폴더가 없어서 따로 만들고 한거 외엔 다 똑같이 했다고 생각을 했는데 이렇게 오류가 나오네요..

Kay potato · 2021.06.22 · 비전공자를 위한 진짜 입문 올인원 개발 부트캠프

투표점수

1

조회수

664

답변

7
미해결
실전 리액트 프로그래밍

action에서 배열 state를 불러올 수 있는 방법이 있을까요?

안녕하세요. createReducer 사용해서 구현하던 중 문제가 발생하여 문의 드립니다. state에 배열을 넣은 뒤, action에서 필요한 일이 있어 불러오려고 했더니 값이 없다고 뜨더라구요. 예를 들어서 const INITIAL_STATE = { test: [1, 2, 3] } ... [Types.SetTest]: (state, action) => { console.log(state.test) } 이런 식으로 했는데 로그에 [Proxy, Proxy, Proxy, Proxy] 이렇게 뜨고 값을 가져올 수가 없었습니다. 혹시 어떻게 해야 state 값을 가져올 수 있을까요?

wanjin.lee · 2021.06.22 · 실전 리액트 프로그래밍

투표점수

0

조회수

327

답변

1

인기 태그

주간 인기글