172만명의 커뮤니티!! 함께 토론해봐요.
미해결
처음 만난 리액트(React)
안녕하세요 12강 실습코드를 그대로 작성했는데 섭씨온도를 적었을때 화씨온도로 자동으로 변환되어 나타나지 않습니다. 화씨온도를 먼저 적었을때도 마찬가지고요. 코드 한번 봐주실 수 있나요? 감사합니다. Calculator import React, {useState} from "react"; import TemperatureInput from "./Temperatureinput"; function BoilingVerdict(props){ if(props.celsius >= 100){ return <p>물이 끓습니다.</p>; } return <p>물이 끓지 않습니다.</p>; } function toCelsius(fahrenheit){ return ((fahrenheit-32)*5)/9; } function toFahrenheit(celsius){ return (celsius*9)/5+32; } function tryConvert(temperature,convert){ const input = parseFloat(temperature); if(Number.isNaN(input)){ return ""; } const output = convert(input); const rounded = Math.round(output*1000)/1000; return rounded.toString(); } function Calculator(props){ const [temperature, setTemperature] = useState(""); const[scale,setScale]=useState("c"); const handleCelsiusChange = (temperature) => { setTemperature(temperature); setScale("c"); }; const handleFahrenheitChange = (temperature) => { setTemperature(temperature); setScale("f"); }; const celsius = scale === "f" ? tryConvert(temperature, toCelsius):temperature; const fahrenheit = scale === "c" ? tryConvert(temperature, toFahrenheit):temperature; return ( <div> <TemperatureInput scale="c" temperatrue = {celsius} onTemperatureChange={handleCelsiusChange}/> <TemperatureInput scale="f" temperatrue = {fahrenheit} onTemperatureChange={handleFahrenheitChange}/> <BoilingVerdict celsius={parseFloat(celsius)} /> </div> ); } export default Calculator; Temperatureinput const scaleNames = { c:'섭씨', f:'화씨', }; function TemperatureInput(props){ const handleChange = (event) => { props.onTemperatureChange(event.target.value); }; return ( <fieldset> <legend> 온도를 입력해주세요(단위:{scaleNames[props.scale]}); </legend> <input value={props.temperature} onChange={handleChange} /> </fieldset> ); } export default TemperatureInput;
윤혜원
2023-07-02T03:27:55.396Z
댓글 1
좋아요 0
조회수 716
미해결
실습으로 배우는 선착순 이벤트 시스템
분명 현재 없는 상태이고 결과가 자꾸 이상하게 나와서 sout 처리를 잠시 해보았습니다 package com.example.api.service; import com.example.api.domain.Coupon; import com.example.api.repository.CouponCountRepository; import com.example.api.repository.CouponRepository; import org.springframework.stereotype.Service; @Service public class ApplyService { private final CouponRepository couponRepository; private final CouponCountRepository couponCountRepository; public ApplyService(CouponRepository couponRepository, CouponCountRepository couponCountRepository) { this.couponRepository = couponRepository; this.couponCountRepository = couponCountRepository; } public void applyV1(Long userId) { Long count = couponRepository.count(); if(count > 100) { return; } couponRepository.save(new Coupon(userId)); } public void applyV2(Long userId) { Long count = couponCountRepository.increment(); System.out.println(count); if(count > 100) { return; } couponRepository.save(new Coupon(userId)); } } @SpringBootTest class ApplyServiceTest { @Autowired private ApplyService applyService; @Autowired private CouponRepository couponRepository; @Test public void applyOnce() { applyService.applyV1(1L); long count = couponRepository.count(); Assertions.assertEquals(1L, count); } @Test public void 여러명응모V1() throws InterruptedException { int threadCount = 1000; ExecutorService executorService = Executors.newFixedThreadPool(32); CountDownLatch latch = new CountDownLatch(threadCount); for(int i=0; i<threadCount; i++){ long userId = i; executorService.submit(() -> { try { applyService.applyV1(userId); } catch(Exception e) { System.out.println(e); }finally { latch.countDown(); } }); } latch.await(); long count = couponRepository.count(); assertThat(count).isEqualTo(100); } @Test public void 여러명응모V2() throws InterruptedException { int threadCount = 1000; ExecutorService executorService = Executors.newFixedThreadPool(32); CountDownLatch latch = new CountDownLatch(threadCount); for(int i=0; i<threadCount; i++){ long userId = i; executorService.submit(() -> { try { applyService.applyV2(userId); } catch(Exception e) { System.out.println(e); }finally { latch.countDown(); } }); } latch.await(); long count = couponRepository.count(); org.assertj.core.api.Assertions.assertThat(count).isEqualTo(100); } } 그런데 여러명응모V2 test를 실행시에 count를 출력시 다음과 같은 수가 나옵니다. 20003 20011 20012 20013 20015 20016 20017 20018 20020 20022 ??? 한번 할때마다 1000씩 쿠폰의 수가 증가중인데요;;; 조회했을때는 empty라 나오는데 이렇게 되는 연유를 잘 모르갰습니다. 테스트 코드라서 rollback이 되야할거 같은데 그렇지 않는것도 잘 모르겟네요;; ㅠㅠ
java docker spring-boot kafka redis
seonjun Moon
2023-07-02T02:15:58.132Z
댓글 1
좋아요 0
조회수 648
미해결
스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술
test 학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? 예 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? 예 3. 질문 잘하기 메뉴얼을 읽어보셨나요? 예 [질문 내용] test 강의 내용으로 게시판 만들기를 병행하고 있습니다. 이번 강의에서 Spring Data Jpa로 변경을 하였는데 게시글 수정과 같은 수정 기능은 인터페이스인 SpringDataJpaMemberRepository에서 작성하나요? 아니면 Service단에서 Repository의 find를 통해서 수정하도록 작성하나요? SpringDataJpa에서 find, delete는 있는데 수정은 어떻게 이뤄지는지 궁금합니다..d
승민짱!
2023-07-01T13:37:16.083Z
댓글 1
좋아요 0
조회수 550
해결됨
자바 ORM 표준 JPA 프로그래밍 - 기본편
안녕하세요. 김영한 선생님의 강의를 참 잘 보고 있는 학생입니다. SQL 중심적인 개발의 문제점 편에서, 객체지향 프로그래밍에서 객체는 자유롭게 객체 그래프를 탐색할 수 있어야하 지만 SQL로 개발하는 경우에는 처음 실행하는 SQL에 따라 탐색 범위가 결정된다 는 문제가 있다고 말씀하셨습니다. 그리고 엄격한 도메인 주도 설계의 관점에서는 '도메인 객체'와 '엔티티 객체'를 분리 해야 한다고 알고 있습니다. 비즈니스 로직을 다루는 도메인 객체가 JPA 라고 하는 기술에 의존하는 것은 영 즐거운 일은 아니기 때문이죠.. ( https://stackoverflow.com/questions/24703756/having-separate-domain-model-and-persistence-model-in-ddd ) 그렇기 때문에 도메인 객체와 엔티티 객체를 분리하게 된다면 Repository 계층에서 예를 들어 findById 를 했을 경우 엔티티 객체를 도메인 객체로 매핑해서 돌려주어야 합니다. 그런데 이럴 경우, 기존의 SQL로 개발하는 경우와 비슷한 문제가 발생하게 되는 것 같습니다. 매핑을 어디까지해서 돌려주어야 하느냐는 점이죠. Member 를 조회했을 때, 객체 그래프 안에 있는 Category까지 싹싹 다 조회해와서 매핑을 해주기도 곤란한 노릇이고, MemberWithTeam , MemberWithOrderAndOrderItem... 와 같은 객체를 따로 따로 만드는 것도 요상해보입니다. 그렇다고 객체 그래프를 다 끊어놓자니 그것도 객체지향적이지 않은 것 같아보이구요.. 이런 상황에서는 어떤 식으로 도메인 객체를 설계하는지, 엔티티 객체의 매핑은 어떤 방법으로 이루어지는지가 너무 궁금합니다.
Octoping
2023-07-01T08:58:49.963Z
댓글 1
좋아요 1
조회수 908
해결됨
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
javascript 연습문제를 더 풀어보고 싶은데 연습문제만 있는 곳이 있나요?
HTML/CSS javascript react node.js react-native 머신러닝 express tensorflow
kms930322
2023-07-01T02:22:24.977Z
댓글 2
좋아요 0
조회수 652
미해결
Do It! 장고+부트스트랩: 파이썬 웹개발의 정석
안녕하세요! Nginx 적용 강의까지 수강한 이후 개발용 컨테이너를 실행하기 위해 docker-compose -f docker-compose.dev.yml up 명령어를 입력하였는데 다음과 같은 에러가 발생했습니다. 개발용과 배포용 도커 분리하기 에서도 개발용 컨테이너를 실행하면 잘 됐었습니다. 이후 Nginx 적용하기까지 하는데도 강의와 책을 따라가며 잘 진행하여 문제없이 끝마쳤습니다. 왜 이러한 에러가 발생했는지 궁금합니다. +) 혹시나 제 코드에 무엇인가 오타가 있을까봐 수용님의 깃허브에 올라온 코드와 일일히 비교하며 찾아봤지만, 코드에 오타는 발견하지 못하였습니다. 아래 사진은 Docker-Desktop에서 컨테이너와 이미지, 저장소를 캡쳐한 사진입니다.
HTML/CSS javascript python django bootstrap aws docker tdd
wodnr0710
2023-06-30T17:13:39.385Z
댓글 1
좋아요 0
조회수 564
미해결
[웹 개발 풀스택 코스] HTML&CSS 기초
nth-child()에서 만약에 10행이 있다고 가정했을때 5번째 줄과 7번째 줄만 background-color를 넣고 싶다면 어떻게 해야하나요?
박준현
2023-06-30T17:04:28.324Z
댓글 1
좋아요 0
조회수 433
해결됨
비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
안녕하세요 선생님 certbot 설치 후 실행을 하면 오류가 납니다. 어디서부터 다시 해봐야하는지 모르겠습니다 오류내용 Challenge failed for domain hahahagood.shop http-01 challenge for hahahagood.shop Cleaning up challenges Some challenges have failed. IMPORTANT NOTES: - The following errors were reported by the server: Domain: hahahagood.shop Type: dns Detail: no valid A records found for hahahagood.shop ; no valid AAAA records found for hahahagood.shop root@ip-172-31-46-56:/home/ubuntu#
HTML/CSS javascript aws git mysql rest-api github
didwldn97
2023-06-30T09:03:47.008Z
댓글 2
좋아요 1
조회수 2404
미해결
HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
■ 질문 남기실 때 꼭! 참고해주세요. - 먼저 유사한 질문이 있었는지 검색해주세요. - 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다. - HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요. - 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다. 해당 강의 응용하다 막히는 부분이 있어 질문 드립니다. 이 강의에 부분을 메뉴에서도 활용 할 수 있을것 같아 아래와 같이 만들어 보았습니다. HTML <header> <div class="gnb"> <div class="search_menu"> <div class="dropdown"> <div class="nav1 title">MENU1-1</div> <ul class="sub_nav1 sub_nav"> <li><a href="#none">MENUI1-1</a></li> <li><a href="#none">MENUI1-2</a></li> <li><a href="#none">MENUI1-3</a></li> <li><a href="#none">MENUI1-4</a></li> </ul> </div> <div class="dropdown"> <div class="nav2 title">MENU2-1</div> <ul class="sub_nav2 sub_nav"> <li><a href="#none">MENU2-1</a></li> <li><a href="#none">MENU2-2</a></li> <li><a href="#none">MENU2-3</a></li> <li><a href="#none">MENU2-4</a></li> </ul> </div> <div class="dropdown"> <div class="nav3 title">MENU3-1</div> <ul class="sub_nav3 sub_nav"> <li><a href="#none">MENU3-1</a></li> <li><a href="#none">MENU3-2</a></li> <li><a href="#none">MENU3-3</a></li> <li><a href="#none">MENU3-4</a></li> </ul> </div> </div> </div> </header> CSS @import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); * { padding: 0; margin: 0; list-style: none; font-size: 10px; } a{ text-decoration: none; } header .search_menu { background-color: #9c9388; display: flex; } header .selectbox { position: relative; border-right: 1px solid #c9c1b7; } header .selectbox:last-child{ border:0; } header .selectbox .select{ width: 88px; height: 35px; padding:10px 12px; font-size: 1.2rem; } header .selectbox:last-child .select { width: 100px; } .dropdown { width: 8.4rem; cursor: pointer; position: relative; border-right: 1px solid #c9c1b7; } .nav1, .nav2, .nav3 { background-size: 9px; background-color: #9c9388; color: #fff; padding: 1.2rem 1rem;} .nav1::after, .nav2::after, .nav3::after{ content: '\f107'; font-family: fontawesome; position: absolute; right: 10px; font-size: 12px; line-height: 14px; } .sub_nav1, .sub_nav2, .sub_nav3 { position: absolute; list-style: none; padding:0; margin: 0; left: 0; top:100%; width: 100%; display: none; z-index: 100; } .sub_nav1 li a, .sub_nav2 li a, .sub_nav3 li a { color: #fff; display: block; padding: 7px; background: #9c9388; border-bottom: 1px solid #aaa; } .sub_nav1 li a:last-child, .sub_nav2 li a:last-child, .sub_nav3 li a:last-child { border: none; } JS 1 (정상작동) (개별적으로 class를 모두 지정하였습니다.) $('.menu li').click(function(){ $(this).children('.sub_menu').slideDown() }) $('.menu li').click(function(){ $(this).children('.sub_menu').slideUp() }) $('.nav1').click(function(){ $('.sub_nav1').stop().slideToggle() $('.sub_nav2').stop().slideUp() $('.sub_nav3').stop().slideUp() $(this).find('>ul').toggle() }) $('.sub_nav1 li').click(function(){ $(this).parent().stop().slideUp() $('.nav1').text($(this).text()) }) $('.nav2').click(function(){ $('.sub_nav2').stop().slideToggle() $('.sub_nav1').stop().slideUp() $('.sub_nav3').stop().slideUp() // $(this).find('>ul').toggle() }) $('.sub_nav2 li').click(function(){ $(this).parent().stop().slideUp() $('.nav2').text($(this).text()) }) $('.nav3').click(function(){ $('.sub_nav3').stop().slideToggle() $('.sub_nav1').stop().slideUp() $('.sub_nav2').stop().slideUp() // $(this).find('>ul').toggle() }) $('.sub_nav3 li').click(function(){ $(this).parent().stop().slideUp() $('.nav3').text($(this).text()) }) JS 2 (문제의 JS) (JS1와 같은 매커니즘 코드를 줄여 작성했습니다.) //메뉴 토글 $('.title').click(function(){ $(this).siblings('.sub_nav').slideUp() $(this).next().stop().slideToggle() }) //메뉴 text 변경 $('.sub_nav li').click(function(){ $(this).parent().stop().slideUp() $(this).parent().siblings('.title').text($(this).text()) }) 이렇게 만들어서 메뉴1-1을 누르면 2-1과 3-1 이 들어가야하는데 3개가 모두 개별적으로 펼쳐집니다. JS 1 처럼 class를 모두 직접 지정하면 정상적으로 되는데 너무 코드가 지저분해서 간단하게 지정을 하려고 작동을 확인 한 뒤 JS 2를 만들었는데 메뉴 text 변경 되는건 잘 되는데 메뉴 토글에서 막혔습니다. $(this).siblings('.sub_nav').slideUp() 이 부분이 잘못된것 같은데 아무리 고쳐보고 검색해봐도 작동이 되지 않아 이렇게 여쭤 봅니다.
kio4545
2023-06-30T06:06:26.624Z
댓글 2
좋아요 1
조회수 581
미해결
실전! 스프링 부트와 JPA 활용2 - API 개발과 성능 최적화
학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 예 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 예 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) 예 [질문 내용] 그냥 컨트롤러에서 model에 담아서 조회할떄는 무한루프가 안도는데 json으로 반환할떄는 왜 무한로프 도는지가 궁금합니다.
maurizio
2023-06-30T01:52:11.217Z
댓글 2
좋아요 2
조회수 642
미해결
웹 애니메이션을 위한 GSAP 가이드 Part.01
https://productive-printer-b81.notion.site/GSAP-Basic-4c37387fe8254db4a7d14c883f8baa2d 노션 주소가 이거 맞나요? 환경설정 파트 > 수업 자료 라고 되어 있는 거 클릭하면 이런 주소가 나옵니다. .. 제대로 된 주소 찾느라고 다섯개 강의를 다 다시 봤는데... 흠... 진도를 나갈 수가 없어요. ㅠ.ㅠ 확인부탁드립니다.
HTML/CSS javascript 인터랙티브-웹 gsap
Stella
2023-06-29T11:32:17.239Z
댓글 1
좋아요 1
조회수 738
미해결
[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
안녕하세요. 판다님 강의 열심히 듣고 있는 수강생입니다! 결과 부분 진행중인데요~ setTimeout안에 select를 넣어서 qIdx번째 질문에서 클릭한 답이 select 배열데이터에 담기는데 어째서 클릭한게 idx로 담기게 되는걸까요...? ㅠ button을 클릭했을 때 addEventListener로 다음 질문으로 넘어가는건 알겠는데 클릭한 답변이 왜 idx에 담기게 되는지 잘 이해가 안되어서요 ㅜㅜ 그리고 button을 html에 안만들고 js에서 createElement로 만드신 이유가 따로있을까요..?
HTML/CSS javascript bootstrap
qp40202
2023-06-29T07:06:22.784Z
댓글 1
좋아요 0
조회수 413
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
■ 질문 남기실 때 꼭! 참고해주세요. 강사님 저는 왜 확장버튼 누르면 화면처럼 안뜰까요 검색창에 알파벳치면 확장을 가져오는 동안 오류가 발생했습니다.xhr failed 라는 창이 뜨고 엑스 표시로 검색을 해도 강사님처럼 검색이안됩니다 ㅠㅠ뭐가 잘못일까요 ...???
jkjk7088
2023-06-28T12:18:09.916Z
댓글 3
좋아요 1
조회수 430
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
유튜브에도 웹디기능사 합격하기 영상이있는데 인프런강의랑 머가다른지요...? 인프런보다 짧아보이기는 한데 정확히 뭐가 다른지 선생님께 여쭤보고싶어서요 ,,,
jkjk7088
2023-06-28T12:10:08.673Z
댓글 1
좋아요 1
조회수 337
미해결
자바 ORM 표준 JPA 프로그래밍 - 기본편
학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예) [질문 내용] 안녕하세요, 영한님! 영한님 수업을 새겨듣고 있는 수강자입니다! 다름이 아니라, JPA 소개파트의 "1차 캐시와 동일성 보장(15분 30초경)" 에서 말씀하신 동일성이 "각 Entity가 참조하는 메모리 주소가 같지 않아도 값을 통해 같음을 보장"한다는 뜻과 일맥상통한 내용인가요? Java의 equals에 대해서 공부하다가 동일성이란 단어가 동일한 의미로 쓰이는지 궁금해서 여쭈어봐요! 만약에 같은 뜻이라면, "같은 엔티티를 반환한다"는 말을 "참조하는 메모리 주소가 같지는 않고, 값만 같은 엔티티를 반환한다"로 이해해도 될까요?? 질문 들어주셔서 감사합니다. 오늘도 좋은 하루 보내세요!!
윤수정
2023-06-28T08:35:59.913Z
댓글 1
좋아요 0
조회수 660
미해결
HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
■ 질문 남기실 때 꼭! 참고해주세요. - 먼저 유사한 질문이 있었는지 검색해주세요. - 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다. - HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요. - 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다. 다 완성 한 뒤에 그 밑에 div를 이어 붙이려고 하는데 position: absolute; 를 사용한 tab-content 가 공중으로 떠서 영역이 이미지처럼 이렇게 잡힙니다. 다음 div를 일반적인 block 처럼 tab-content 까지 끝난 맨 밑에 이어져서 영역을 잡으려면 어떻게 해야할까요????
kio4545
2023-06-28T05:20:33.202Z
댓글 1
좋아요 1
조회수 425
미해결
면접과 취업을 부르는 '퍼블리셔 개인 포트폴리오 홈페이지' 제작
포트폴리오 다 만들고 현재 구직 중인데 복장에 대해서 준비를 안 했는데 면접 복장에 관해서 정보도 적고 그래서 여기다 한번 질문해 봅니다! 검은 슬랙스 + 티셔츠 정장 청바지 + 티셔츠 그 외
2023-06-27T15:02:42.464Z
댓글 1
좋아요 1
조회수 765
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>A타입</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <header> <div class="header-logo"></div> <div class="navi"> <ul class="menu"> <li> <a href="#none">sub-menu1</a> <div class="sub-menu"> <a href="#none">sub-menu1</a> <a href="#none">sub-menu1</a> <a href="#none">sub-menu1</a> <a href="#none">sub-menu1</a> </div> </li> <li> <a href="#none">sub-menu2</a> <div class="sub-menu"> <a href="#none">sub-menu2</a> <a href="#none">sub-menu2</a> <a href="#none">sub-menu2</a> <a href="#none">sub-menu2</a> </div> </li> <li> <a href="#none">sub-menu3</a> <div class="sub-menu"> <a href="#none">sub-menu3</a> <a href="#none">sub-menu3</a> <a href="#none">sub-menu3</a> <a href="#none">sub-menu3</a> </div> </li> <li> <a href="#none">sub-menu4</a> <div class="sub-menu"> <a href="#none">sub-menu4</a> <a href="#none">sub-menu4</a> <a href="#none">sub-menu4</a> <a href="#none">sub-menu4</a> </div> </li> </ul> </div> </header> <div class="slide"> <div> <a href="#none"><img src="images/slide-01.jpg" alt=""></a> <a href="#none"><img src="images/slide-02.jpg" alt=""></a> <a href="#none"><img src="images/slide-03.jpg" alt=""></a> </div> </div> <div class="items"> <div class="news"> <div class="tab-inner"> <div class="btn"> <a href="#none">공지사항</a> </div> <div class="tab1"> <a class="open-modal" href="#none"><em>공지사항공지사항공지사항공지사항공지사항</em> <b>2023.05.05</b></a> <a href="#none"><em>공지사항공지사항공지사항공지사항공지사항</em> <b>2023.05.05</b></a> <a href="#none"><em>공지사항공지사항공지사항공지사항공지사항</em> <b>2023.05.05</b></a> <a href="#none"><em>공지사항공지사항공지사항공지사항공지사항</em> <b>2023.05.05</b></a> </div> </div> </div> <div class="gallery"> <div class="btn"> 갤러리 </div> <div class="tab2"> <a href="#none"><img src="images/gallery-01.jpg" alt=""></a> <a href="#none"><img src="images/gallery-02.jpg" alt=""></a> <a href="#none"><img src="images/gallery-03.jpg" alt=""></a> </div> </div> <div class="shortcut"></div> </div> <footer> <div class="footer-logo"></div> <div class="copyright"></div> <div class="sns"></div> </footer> </div> <div class="modal"> <div class="modal-content"> <h2>스트리밍 서버 이전으로 서비스 장애</h2> <p>위 내용을 보시면 제법 큰 작업이었음을 알 수 있습니다. <br> 특히 문자셋의 변경에 따라 기존의 DB, data, 웹사이트 솔루션 등의 커스트마이징 등에 상당한 어려움이 있었고, <br> 이에 따른 일부 접속 오류가 있을 수 있었음에 양해를 구합니다.<br> 특히 인터넷익스플로러 11로 접속하셨을 경우 일부 문제은행 목차가 출력되지 않았을 수도 있습니다.<br><br> 서버 이전 작업으로 고객님들께 불편을 드려서 대단히 죄송합니다. 정상 운영되도록 최선을 다하겠습니다. 감사합니다.<br> </p> <a class="close-modal" href="#none">닫기</a> </div> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom.js"></script> </body> </html> @charset "utf-8"; body { color: #000; font-size:15px; background-color: #fff; margin:0; } a { text-decoration: none; color:inherit; } .container {width :1200px; border:1px solid #000; margin:auto;} header {height:100px; border:1px solid red; position:relative;} .slide {height:300px;} .items {height:250px;} footer {height:100px;} /* header */ header > div { height:100px; } .header-logo { border:1px solid #000; width:200px; float:left; } .navi { /* border:1px solid #000; */ width:600px; float:right; margin-right:20px; margin-top:55px; } .menu { } .menu li { list-style: none; float:left; width:25%; } .menu li > a { display: block; padding:5px; background-color: #fff; text-align: center; } .menu li:hover > a { background-color: #000; color: #fff; } .sub-menu { display: none; } .sub-menu a { display:block; padding:5px; background-color: #fff; text-align: center; } .sub-menu a:hover { background-color: #000; color:#fff; } /* slide */ .slide { position:relative; overflow:hidden; } .slide > div { font-size: 0; width:3600px; position:absolute; top:0; left:0; float: left; animation:slide 10s linear infinite; } @keyframes slide { 0% {left:0;} 30% {left:0;} 35% {left:-1200px;} 65% {left:-1200px;} 70% {left:-2400px;} 95% {left:-2400px;} 100% {left:0;} } /* items */ .items > div { height:250px; float:left; box-sizing: border-box; } .news { width:400px; border:1px solid #000; } .btn { display: inline-block; padding:5px; border: 1px solid #000; width:100px; text-align: center; } .tab1 {} .tab1 a {display:block; padding:5px;} .tab1 a em { width:70%; float:left; font-style:normal; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; } .tab1 a b { width:30%; float:right; } .gallery { width:400px; border:1px solid red; } .tab2 { text-align: center; } .tab2 a {} .tab2 img { width:120px; } .shortcut { width:400px; border:1px solid green; } /* footer */ footer > div { height:100px; float:left; box-sizing:border-box; } .footer-logo { width:200px; background-color: #000; } .copyright { width:800px; background-color: aqua; } .sns { width:200px; background-color: green; } /* modal */ .modal{ position:absolute; top:0; left:0; background-color: rgba(0, 0, 0, 0.5); width:100%; height:100%; display: none; } .modal-content { position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); background-color: #fff; height:350px; } .modal-content a { display: block; padding:20px; float:right; border:1px solid #000; } 이미지슬라이드가 1200*300 이 아니라 정사각형으로 나오는데 원인을 모르겠어서 문의합니다^^;;
hyungwoo Choi
2023-06-27T10:45:51.718Z
댓글 1
좋아요 1
조회수 204
미해결
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
배너 슬라이드 기능만 잘 되지 않습니다. 최신 버전 강의 따라 하였습니다....
HTML/CSS javascript react node.js react-native 머신러닝 express tensorflow
밍또
2023-06-27T08:05:29.603Z
댓글 2
좋아요 0
조회수 426
해결됨
나도코딩의 자바 기본편 - 풀코스 (20시간)
안녕하세요! 7강 마무리 퀴즈를 스스로 풀어보며 의문점이 생겨 질문 남깁니다. 저는 이런식으로 name 변수를 선언하고 cook() 메소드에 this.name을 활용했는데, 강의에선 기본 생성자와 name을 매개변수로 하는 생성자를 정의하고 풀어 주셨더라구요! 결과는 같게 나오지만 혹시 생성자를 사용하는게 더 좋은 코딩 방법인지, 제가 한 방식이 결과는 맞지만 논리적 오류가 있는지 궁금합니다. 그리고 강의 잘 듣고 있습니다. 감사합니다!
andy15948
2023-06-27T07:21:12.450Z
댓글 1
좋아요 0
조회수 176
