혹시 브레이킹 포인트 잡는법 자세히 알려주실 수 있나요?

안녕하세요 강사님 항상 좋은 강의와 피드백 감사드립니다 다름이 아니라 이번에 강의 중 '회원가입' 테스트를 그대로 따라 코딩하였으나 실행에 오류가 뜹니다. 관련하여 사진과 오류글을 그대로 올려보니 한 번 확인해주시면 감사하겠습니다! java.lang.IllegalStateException: Failed to load ApplicationContext at org.springframework.test.context.cache.DefaultCacheAwareContextLoaderDelegate.loadContext(DefaultCacheAwareContextLoaderDelegate.java:132) at org.springframework.test.context.support.DefaultTestContext.getApplicationContext(DefaultTestContext.java:124) at org.springframework.test.context.web.ServletTestExecutionListener.setUpRequestContextIfNecessary(ServletTestExecutionListener.java:190) at org.springframework.test.context.web.ServletTestExecutionListener.prepareTestInstance(ServletTestExecutionListener.java:132) at org.springframework.test.context.TestContextManager.prepareTestInstance(TestContextManager.java:244) at org.springframework.test.context.junit4.SpringJUnit4ClassRunner.createTest(SpringJUnit4ClassRunner.java:227) at org.springframework.test.context.junit4.SpringJUnit4ClassRunner$1.runReflectiveCall(SpringJUnit4ClassRunner.java:289) at org.junit.internal.runners.model.ReflectiveCallable.run(ReflectiveCallable.java:12) at org.springframework.test.context.junit4.SpringJUnit4ClassRunner.methodBlock(SpringJUnit4ClassRunner.java:291) at org.springframework.test.context.junit4.SpringJUnit4ClassRunner.runChild(SpringJUnit4ClassRunner.java:246) at org.springframework.test.context.junit4.SpringJUnit4ClassRunner.runChild(SpringJUnit4ClassRunner.java:97) at org.junit.runners.ParentRunner$4.run(ParentRunner.java:331) at org.junit.runners.ParentRunner$1.schedule(ParentRunner.java:79) at org.junit.runners.ParentRunner.runChildren(ParentRunner.java:329) at org.junit.runners.ParentRunner.access$100(ParentRunner.java:66) at org.junit.runners.ParentRunner$2.evaluate(ParentRunner.java:293) at org.springframework.test.context.junit4.statements.RunBeforeTestClassCallbacks.evaluate(RunBeforeTestClassCallbacks.java:61) at org.springframework.test.context.junit4.statements.RunAfterTestClassCallbacks.evaluate(RunAfterTestClassCallbacks.java:70) at org.junit.runners.ParentRunner$3.evaluate(ParentRunner.java:306) at org.junit.runners.ParentRunner.run(ParentRunner.java:413) at org.springframework.test.context.junit4.SpringJUnit4ClassRunner.run(SpringJUnit4ClassRunner.java:190) at org.junit.runner.JUnitCore.run(JUnitCore.java:137) at com.intellij.junit4.JUnit4IdeaTestRunner.startRunnerWithArgs(JUnit4IdeaTestRunner.java:69) at com.intellij.rt.junit.IdeaTestRunner$Repeater.startRunnerWithArgs(IdeaTestRunner.java:33) at com.intellij.rt.junit.JUnitStarter.prepareStreamsAndStart(JUnitStarter.java:221) at com.intellij.rt.junit.JUnitStarter.main(JUnitStarter.java:54) Caused by: org.springframework.beans.factory.BeanDefinitionStoreException: Failed to parse configuration class [jpabook.jpashop.JpashopApplication]; nested exception is org.springframework.context.annotation.ConflictingBeanDefinitionException: Annotation-specified bean name 'memberRepository' for bean class [jpabook.jpashop.repository.MemberRepository] conflicts with existing, non-compatible bean definition of same name and class [jpabook.jpashop.domain.MemberRepository] at org.springframework.context.annotation.ConfigurationClassParser.parse(ConfigurationClassParser.java:189) at org.springframework.context.annotation.ConfigurationClassPostProcessor.processConfigBeanDefinitions(ConfigurationClassPostProcessor.java:331) at org.springframework.context.annotation.ConfigurationClassPostProcessor.postProcessBeanDefinitionRegistry(ConfigurationClassPostProcessor.java:247) at org.springframework.context.support.PostProcessorRegistrationDelegate.invokeBeanDefinitionRegistryPostProcessors(PostProcessorRegistrationDelegate.java:311) at org.springframework.context.support.PostProcessorRegistrationDelegate.invokeBeanFactoryPostProcessors(PostProcessorRegistrationDelegate.java:112) at org.springframework.context.support.AbstractApplicationContext.invokeBeanFactoryPostProcessors(AbstractApplicationContext.java:746) at org.springframework.context.support.AbstractApplicationContext.refresh(AbstractApplicationContext.java:564) at org.springframework.boot.SpringApplication.refresh(SpringApplication.java:771) at org.springframework.boot.SpringApplication.refresh(SpringApplication.java:763) at org.springframework.boot.SpringApplication.refreshContext(SpringApplication.java:438) at org.springframework.boot.SpringApplication.run(SpringApplication.java:339) at org.springframework.boot.test.context.SpringBootContextLoader.loadContext(SpringBootContextLoader.java:123) at org.springframework.test.context.cache.DefaultCacheAwareContextLoaderDelegate.loadContextInternal(DefaultCacheAwareContextLoaderDelegate.java:99) at org.springframework.test.context.cache.DefaultCacheAwareContextLoaderDelegate.loadContext(DefaultCacheAwareContextLoaderDelegate.java:124) ... 25 more Caused by: org.springframework.context.annotation.ConflictingBeanDefinitionException: Annotation-specified bean name 'memberRepository' for bean class [jpabook.jpashop.repository.MemberRepository] conflicts with existing, non-compatible bean definition of same name and class [jpabook.jpashop.domain.MemberRepository] at org.springframework.context.annotation.ClassPathBeanDefinitionScanner.checkCandidate(ClassPathBeanDefinitionScanner.java:349) at org.springframework.context.annotation.ClassPathBeanDefinitionScanner.doScan(ClassPathBeanDefinitionScanner.java:287) at org.springframework.context.annotation.ComponentScanAnnotationParser.parse(ComponentScanAnnotationParser.java:132) at org.springframework.context.annotation.ConfigurationClassParser.doProcessConfigurationClass(ConfigurationClassParser.java:296) at org.springframework.context.annotation.ConfigurationClassParser.processConfigurationClass(ConfigurationClassParser.java:250) at org.springframework.context.annotation.ConfigurationClassParser.parse(ConfigurationClassParser.java:207) at org.springframework.context.annotation.ConfigurationClassParser.parse(ConfigurationClassParser.java:175) ... 38 more

지금까지 따라오면서 안 되는게 너무 많습니다. 폴더 복붙해서 실행해도 에러납니다.. 예제 소스라도 그대로 실행하면서 보고 싶은데 예제 소스 복붙해서 실행하고 싶어도 그 마저도 잘 안됩니다. . 강의 듣기가 너무 힘듭니다.  임포트 방법 알려주시면 감사하겠습니다. 아래는 그냥 import 해서 넣었을때 상황입니다. 임포트 하면 자바 15라 8로 빌드패스랑 facets 8로 수정해도 동일합니다.

  for (let k = 0; k < 4; k++) {         //이동하는 4가지경우         const nx = i + dx[k];         const ny = j + dy[k];         if (nx >= 0 && ny >= 0 && arr[i][j] <= arr[nx][ny]) {           //4가지 경우 비교해서 하나라도 안맞으면           flag = 0;           break; // break하고 봉우리 아니라는 표시해줌         }      } 위코드 if문 안에서요 nx 의 범위가 out of range 하지 않기 위해서 따로 설정을 해준다고 하셨는데 이부분이 제대로 이해가 가지 않습니다 nx = [-1, 0]으로 기존 배열에 없는 부분이 된다고 하더라도 undefined가 되고 if문은 실행되지 않음으로서 그냥 무시하고 오류가 발생하지 않아야 하는게 아닌가 해서요 따로 밑에 경우처럼 코드를 만들어봤는데요 이 같은 경우는 범위를 벗어나더라도 오류가 발생하지 않아요 이유가 뭔가요? let arr = [1, 2, 3]; for (let i = 4; i < 5; i++) {   if (0 < arr[i]) {     console.log("dd");   } }

안녕하세요 선생님. df.a 와 df["a"]  output 이 똑같은데 혹시 다르게 사용하는것인가요?

안녕하세요!! 현재 next 버전이 11이 나온 것 같던데.. 이걸로 해도 되는 건가요? 10은 가능하다고 본 것 같은데.. ㅠ ㅠ

저는 FactoryBean인터페이스를 상속하지 않고 @Component로 등록해서, 내부에 resourceMap을 반환하는 메소드를 하나 만들면 된다고 생각했습니다. FactoryBean을 상속받으면 어떠한 장점이 있어서 구현하신건지 궁금합니다

3-4연속부분수열에서 i가 증가할 수록 j루프에서 반복 횟수가 줄어드는 경우에도  o(n2)이 되는 이유가 궁금합니다! 그리고 sum==m   인경우에는 sum-=arr[lt]를 하면 당연히  sum보다 작아지니까 sum+=arr[rt]-arr[lt]를 바로 해주면 한단계가 줄어들지 않나요! sum이 m보다 같을때도 클때랑 마찬가지로 sum-=a[lt]를 해준뒤 다시 sum<m 에 걸려서 sum+=arr[rt]를 하는 이유가 궁금합니다! 코드를 간단하게 해주야해서 그런건가요! 그리고 원소에  m보다 큰 수가 포함되어있는 경우 lt를 증가시키다보면 lt보다 rt가 커지지 않나요..!!?

안녕하세요 선생님 강의 잘 보고있습니다. Oriented Bounding Box라는 충돌처리가 궁금한데 검색을해봐도 시원하게 해결이 되지않아서 질문드립니다. 혹시 이 강좌에 OBB설명이 있나요? 없다면 간단하게라도 설명해주실수 있을까요? 링크라도 상관없습니다 한창 바쁘실텐데 죄송합니다 ㅠ 너무 궁금해서요..

왜 index.html파일로 열면 안되고.. lite-server로 실행시키면 되는건지.. 흐름이 이해가 안되네요 ㅠㅠ 답변부탁드립니다..!

안녕하세요 강의를 추천받아서 듣게 되었습니다. 혹시 블로그에 제가 강의를 들으면서 공부한 내용을 요약하고 정리해서 출처를 밝히고 포스팅을 하려고 하는데 혹시 가능할까요?? 가능하지 않다고 하시면 저만 개인적으로 확인할 수 있도록 비공개글로 올리겠습니다!!!😀😀😀

안녕하세요  이제 강의 정주행 하려고 하는데요 !  혹시 강의에 ssr 도 진행이 되는걸까요 ?   강의 들으면서 저는 next js로 진행해도 상관없을까요 ? 

#include <stdio.h> #include <algorithm> #include <vector> using namespace std; int main(){ int n, sum=0, cnt=0; int startPoint=1, endPoint=0; vector< vector<int> > results; scanf("%d",&n); //연산부 while(startPoint<(n/2)+1){ for(int i=startPoint; i<n; i++){ sum = sum + i; endPoint = i; if(sum>n){ sum=0; startPoint++; break; } if(sum==n){ vector<int>result; //시작지점부터 끝지점까지 자연수 추가 for(int q=startPoint; q<=endPoint; q++){ if(q==endPoint) { result.push_back(endPoint); result.push_back(n); } else { result.push_back(q); } } results.push_back(result); sum=0; startPoint++; cnt++; break; } } } //출력부 for(int i=results.size()-1; i>=0; i--){ for(int q=0; q<results[i].size(); q++){ printf("%d",results[i][q]); if(q==results[i].size()-1){ break; } else if(q==results[i].size()-2){ printf(" = "); } else { printf(" + "); } } printf("\n"); } printf("%d",cnt); return 0; }

this.$store.getters.fetchedNews; 이렇게 getters fetchedNews 함수 접근하면 이런 에러나오는 데 원인을 모르겠습니다. ㅠㅠ 추가로 깃허브 권한 부탁드립니다. sjwow77@gmail.com

안녕하세요! 선생님 강의 잘 보고 있습니다. 강의를 보며 MyBatis로 개발된 프로젝트에 JPA를 적용해보고 있는데요. change 라는 메소드를 도메인객체에 작성하신 부분에 질문이 있습니다. 기존 프로젝트에서는 update 나 휴면계정처리 같은 메소드를 모두 dao에 배치했었는데 JPA를 적용하는 과정에서 update, 휴면계정처리 또는 로그인 상태 확인 과 같은 메소드는 어디에 배치하는 것이 좋을지 헷갈리기 시작합니다. 질문이 미시적인데요. 결과적으로 domain, repository, service, controller 에 배치되는 로직의 기준에 대해 팁을 알고 싶습니다. 맞는 말인지는 모르겠지만 예시를 들자면 아래와 같이요. ex) repository에는 DB에 접속이 꼭 필요한 메소드만 작성한다.

안녕하세요 선생님 pretrained 모델 관련 질문이 있습니다. 수업에서 사용했던 faster rcnn, mask rcnn의 pretrained  모델에 대해서 궁금증이 생겼는데요. backbone모델이랑 .pth모델을 처음부터 학습하면 학습 소요시간이 어느정도 되나요? ex) .pth모델 -> mask_rcnn_r101_fpn_1x_coco_20200204-1efe0ed5.pth 또한 pretrained 모델을 사용하여 전이 학습을 하면 데이터셋의 크기가 계속 커져도 수용이 가능할지 궁금합니다. 극단적인 예시로 pretrained 모델에 이미지 1억장 이상 학습을 시켜도 성능이 계속해서 좋아질까요?

안녕하세요 선생님 수강하다가 궁금증이 생겨서 질문드립니다. pascal VOC 데이터셋, 코코 데이터셋 등 대부분의 데이터셋에서 .jpg확장자를 사용하는데요, 굳이 .png를 사용하지 않고 .jpg를 사용하는 이유가 있나요?

안녕하세요. 강사님 강의 잘 듣고 있습니다. 현재 실습 중 유효성 검사를 할 때 boot에서 유효성 검사가 되지 않습니다. 현재 문제인 부분은 Name에 min=2의 유효 검사를 추가했으나, Name의 길이가 1인 a만 입력해도 추가가 되는 상황입니다. 상태 코드 : 201 pox.xml User.java UserController.java dependancy 리스트

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> <!-- Page Scroll Effects JS & CSS --> <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"> <!-- Smooth Scrolling --> <script src="js/jquery.scrollTo.min.js"></script> <!-- Slick.js --> <script src="js/slick/slick.min.js"></script> <link rel="stylesheet" href="js/slick/slick-theme.css"> <link rel="stylesheet" href="js/slick/slick.css"> <!-- 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="none"> <div class="container"><!-- container --> <!-- ########## section ########## --> <section class="cd-section visible" id="home"><!-- ########## Section: 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: home end--> <section class="cd-section" id="about"><!-- ########## Section: 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: about end--> <section class="cd-section" id="project"><!-- ########## Section: project ########## --> <div> <div class="content"> <div class="project-inner"><!-- project-inner--> <!-- input type=radio 버튼은 안보임 --> <input type="radio" name="tabmenu" id="tab1" checked> <!-- checked: 기본을 넣은 레디오만 체크로 보이게함 --> <input type="radio" name="tabmenu" id="tab2"> <input type="radio" name="tabmenu" id="tab3"> <div class="tabs"><!-- tabs --> <div class="tab"><!-- tab1 --> <div class="project-info" data-text="01"><!-- project-info--> <!-- 사용자정의속성 data-text:"보여지는 텍스트"--> <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><!-- project-info end--> <div class="project-photo"><!--project-photo1--> <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"><!-- tab2 --> <div class="project-info" data-text="02"><!-- project-info--> <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><!-- project-info end--> <div class="project-photo"><!--project-photo2--> <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"><!-- tab3--> <div class="project-info" data-text="03"><!-- project-info--> <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><!-- project-info end--> <div class="project-photo"><!--project photo3--> <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><!-- tabs end--> <div class="btn"><!-- btn --> <label for="tab1"></label> <label for="tab2"></label> <label for="tab3"></label> </div> </div><!-- project-inner end--> </div> </div> </section><!-- Section: project end--> <section class="cd-section" id="plan"><!-- ########### Section: 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"><!-- ########## Section: 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"><!-- ########## Section: 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"><!--########## Contact ########## --> <div class="content"> <div class="contact-inner"><!--Contact Inner--> <div class="contact-feature"><!--Contact feature--> <div class="contact-form"><!--Contact-form--> <h3><b>Contact</b>Us</h3> <p>Feel free to ask for details, dont’save any questions. </p> <form class="send-box"><!--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> <!-- <input type="button" value="send message"> input type은 가상태그 못하니까 버튼태그사용--> <button>send message</button> </form> </div> <div class="contact-info"><!--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><!--Contact end--> <header><!-- ########## Header ########## --> <div class="gnb-inner"><!-- gnb-inner --> <div class="logo"><!-- logo--> <a href="#none"><img src="images/logo.png" alt="logo"></a> </div> <div class="gnb"><!-- gnb --> <div class="menu"><!-- 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><!-- gnb end --> <div class="trigger"><!--toggle button: active 추가는 responsive.css 제어는 jquery --> <span></span> <span></span> <span></span> </div><!-- trigger end--> </div><!-- gnb-inner end--> </header><!-- Header end --> </div><!-- container end --> <!-- Container end --> <a href="#" class="gototop"><!-- ########## gototop ########## --> <img src="images/gototop.png" alt=""> </a><!--a="#"" 문서의가장 탑상단!--> <a href="#" class="btn_hiring"><!-- ########## btn-hiring ########## --> <i class="fas fa-comment-dots"></i> Hiring</a> <nav><!-- ########## 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> <!-- nav end --> </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"><!-- project-detail 마진없애려고 추가 --> <div class="header"><!-- 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"><!-- article 1 --> <div class="center-parent"> <div class="center-child"> <h2></h2> <p></p> </div> </div> <div class="photo"> </div> </article> <article class="hiring-info"><!-- article 2 --> <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"><!-- article 3 --> <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"><!-- article 4 --> <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><!-- "" before로 넣으려고 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; } }

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