inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

공지사항 갤러리가 안먹혀요 ㅠ

미해결

[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드

<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css/style8.css"> </head> <body> <div class="container"> <div class="left"> <header> <div class="header-logo"> <a href="#"><img src="images/logo-header.png" alt=""></a> </div> <div class="navi"> <ul class="menu"> <li> <a href="#">menu</a> <div class="sub-menu"> <a href="#">sub-menu</a> <a href="#">sub-menu</a> <a href="#">sub-menu</a> <a href="#">sub-menu</a> </div> </li> <li> <a href="#">menu</a> <div class="sub-menu"> <a href="#">sub-menu</a> <a href="#">sub-menu</a> <a href="#">sub-menu</a> <a href="#">sub-menu</a> </div> </li> <li> <a href="#">menu</a> <div class="sub-menu"> <a href="#">sub-menu</a> <a href="#">sub-menu</a> <a href="#">sub-menu</a> <a href="#">sub-menu</a> </div> </li> <li> <a href="#">menu</a> <div class="sub-menu"> <a href="#">sub-menu</a> <a href="#">sub-menu</a> <a href="#">sub-menu</a> <a href="#">sub-menu</a> </div> </li> </ul> </div> </header> </div> <div class="right"> <div class="slide"> <div> <a href="#"><img src="images/slide-01.jpg" alt=""></a> <a href="#"><img src="images/slide-02.jpg" alt=""></a> <a href="#"><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="#">공지사항</a> </div> <div class="tab1"> <a href="#">운영위원장 후보자 추천을 받고 있습니다.<b>2020.01.09</b></a> <a href="#">홈커밍데이 진행위원회 결과를 다운로드 받으세요.<b>2020.01.07</b></a> <a href="#">카드결제 무이자 이벤트 한시적 10월 20일까지<b>2019.12.31</b></a> <a href="#">보안강화 시스템 작업 안내 공지<b>2019.12.20</b></a> <a href="#">부여 가을연꽃축제 10주년 콘서트 축제<b>2019.12.20</b></a> </div> </div> </div> <div class="gallery"> <div class="tab-inner"> <div class="btn"> <a href="#">갤러리</a> </div> <div class="tab2"> <a href="#"><img src="images/gallery-01.jpg" alt=""></a> </div> </div> </div> <div class="shortcut"> <a href="#"> <img src="images/shortcut.jpg" alt=""> </a> </div> </div> <footer> <div class="copy">(주)이스타컴퍼니 | 대표자 : 최종윤 | 개인정보관리책임자 : 이주현 부장<br> 사업장주소 : 인천광역시 중구 개항로 6층 (주)이스타컴퍼니</div> <div class="sns"> <div> <a href="#"><img src="images/sns-01.png" alt=""></a> <a href="#"><img src="images/sns-02.png" alt=""></a> <a href="#"><img src="images/sns-03.png" alt=""></a> </div> <div> <select> <option value="">여주군청 홈페이지</option> <option value="">한국관광공사</option> <option value="">여행자보험가입</option> </select> </div> </div> </footer> </div> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/custum8.js"></script> </body> </html> @charset "utf-8"; body{ font-size: 15px; } a{ color: #000; text-decoration: none; } .container{ }.container>div{ height: 650px; float: left;}.left{ width: 200px;}.right{ width: 800px;} header{}header>div{}.header-logo{ height: 100px; line-height: 130px;}.navi{ margin-top: 30px;} .menu{ padding: 0; width: 90%; margin: auto;}.menu li{ list-style: none; text-align: center; }.menu li>a{ border: 1px solid #000; display: block; padding: 5px; transition: 0.5s;}.menu li:hover>a{ background-color: #000; color: #fff;}.sub-menu{ border: 1px solid #000; display: none;}.sub-menu a{ display: block; padding: 5px; transition: 0.5s;}.sub-menu a:hover{ background-color: #000; color: #fff;} .slide{ width: 800px; position: relative; height: 350px; }.slide>div{ font-size: 0;}.slide>div a{ position: absolute; top: 0; left: 0; opacity: 0; animation: slide 10s linear infinite;}.slide>div a:nth-child(1){ animation-delay: 0;}.slide>div a:nth-child(2){ animation-delay: 3.5s;}.slide>div a:nth-child(3){ animation-delay: 7s;} @keyframes slide{ 0%{opacity: 0;} 5%{opacity: 1;} 35%{opacity: 1;} 40%{opacity: 0;} 100%{opacity: 0;}} .items{ overflow: hidden;}.items div{ height: 200px; float: left; box-sizing: border-box;}.news{ width: 300px;} .tab-inner{}.btn{}.btn>a{ border: 1px solid #000; display: inline-block; padding: 5px; width: 130px; text-align: center; border-radius: 5px 5px 0 0;}.tab1, .tab2{ border: 1px solid #000; height: 160px;}.tab1 a{ display: block;}.tab2 img{ width: 100px;} .gallery{ width: 300px;}.shortcut{ width: 200px;}footer{ overflow: hidden;}footer>div{ height: 100px; float: left; box-sizing: border-box;}.copy{ width: 600px; text-align: center; padding-top: 30px;}.sns{ width: 200px;}.sns div{ text-align: center;}.sns div:first-child{ padding-top: 5px; }.sns div:last-child{ text-align: center; line-height: 35px;}

  • HTML/CSS
  • jquery
  • 웹-디자인
기쁜 돌고래 댓글 1 좋아요 0 조회수 279

단축키 관련 문의

미해결

따라하며 배우는 HTML, CSS

19:00 부분 코드가 꺼지는? 비활성화? 시키는 단축키가 있는걸까요~?

  • HTML/CSS
yh 댓글 1 좋아요 0 조회수 412

H2 실행 반응없음 윈도우

미해결

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

안녕하세요 처음 강의를 들을 때 h2 데이터베이스를 설치하여 진행하였을 때는 잘 진행되었는데, 강의를 다시 들으며 h2를 실행시켜보니 갑자기 실행이 되지 않습니다. 환경변수는 잘 설정되어있고 명령 프롬프트로 질문들 검색해서 나온 모든 해결방법을 실행해보았는데, 반응이 없고 h2 console 바로가기를 클릭해도 반응이 없습니다... 백신관련은 제거했습니다. 14.200 말고 최근버젼으로도 도전해봤습니다. 어떻게 해야 해결될까요?ㅠㅠ https://www.inflearn.com/questions/543652/%EC%9C%88%EB%8F%84%EC%9A%B0-h2-console-bat-%EC%8B%A4%ED%96%89-%EC%95%88%EB%90%A8-%ED%95%B4%EA%B2%B0%ED%95%A8 *이 방법도 시도해봣으나 안됩니다 C:\tools\h2\bin>/"h2.bat" '/"h2.bat"'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다.

  • java
  • spring
  • mvc
  • spring-boot
유정 댓글 2 좋아요 0 조회수 1347

정렬 기능이랑 튀어나오는게 무슨 관계인가요?

해결됨

[코드캠프] 시작은 프리캠프

이게 정렬하지 않은 block요소(div)+기본값(row)상태로 body가 아래 튀어나와있고 이게 column값을 줘서 정렬된 상태로 튀어나온 부분이 사라졌습니다. div가 block요소이고 정렬이 안된 row상태이니 위처럼 튀어나오는건 이해할 수 있습니다. 그런데 column을 줘서 수직으로 정렬해도 튀어나오는건 그대로여야하지 않나요? 왜 튀어나온게 들어가는거죠?

  • HTML/CSS
  • javascript
방황하는물고기 댓글 1 좋아요 0 조회수 369

자료 이메일 요청건

미해결

풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]

안녕하세요, 어제부터 본격적으로 잔재미 코딩님의 강의를 수강 중입니다. 공부 중에 강의 자료가 있으면 혼자 복습하는데 좋을 것 같아서 요청드리고자 합니다. 이메일 : minhwa0819@naver.com 확인 감사합니다~

  • HTML/CSS
  • javascript
  • es6
비전공자개발자되기 댓글 1 좋아요 0 조회수 490

Spring Boot 3.X distinct 관련

미해결

실전! 스프링 부트와 JPA 활용2 - API 개발과 성능 최적화

[질문 템플릿] 1. 강의 내용과 관련된 질문인가요? 예 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? 예 3. 질문 잘하기 메뉴얼을 읽어보셨나요? 예 [질문 내용] 주문 조회 V3: 엔티티를 DTO로 변환 - 페치 조인 최적화 Spring Boot 3.2버전에서 실습 중에, distinct 옵션을 사용하지 않고도 distinct 옵션을 넣은 것처럼 Row가 2줄 출력됩니다. 이것저것 코드를 확인하다가 Spring Boot를 2.x 버전으로 내린 후에 다시 확인해보았는데, 그제서야 강의에 나오는 것처럼 중복 데이터 4개가 나옵니다. 혹시 이것 관련해서 jpa에서 업데이트가 된 것인지요..? 검색 능력이랑 문서 능력 찾아보는 능력이 딸려, 한참 찾아보다 여기에 질문합니다 ㅜㅜ 실례가 안된다면 이러한 내용을 어떻게 찾는지도 알게 될 수 있다면 좋을거 같습니다!

  • java
  • spring
  • spring-boot
  • jpa
shovel 댓글 1 좋아요 4 조회수 1924

ArrayList, LinkedList, HashMap 등 및 이들의 메소드들 add(), set() 등에 대해 깊이있게 알고싶습니다...ㅎ

해결됨

나도코딩의 자바 기본편 - 풀코스 (20시간)

안녕하세요, 나도코딩 선생님...ㅎ 어제 나도코딩 자바편에서 남은 나머지 강의인 Thread 부분과 섹션 10. 제네릭스 (Java Collections Framework)를 다 듣고 완강한 다음 복습 중에 궁금증이 생겨 이렇게 질문을 남깁니다. 나도코딩 파이썬 강의를 완강한 이후로 또 다른 강의를 다 끝내고 나니 기분이 매우 좋습니다 ㅎㅎ (1) 우선 add와 set과 관련된 질문입니다. Java documentation을 보면서 java.util.List에서 add는 object를 추가하는 것 외에도, add(int index, object e)를 통해 특정 위치(index)에 특정 객체(object)를 넣기도 가능 하고, set도 마찬가지로 set(int index, object e) 형태로 같은 역할을 수행 하는데, add와 set를 따로 나눈 것은 add는 단순하게 리스트 안에 객체를 넣는 것이 초점인 반면, set는 리스트 안에 들어있는 '기존 데이터들이 가진 순서 변경의 목적' 이라서 그런건가요? (2) 지금까지 제네릭스를 공부하고 제가 이해한 바로는 LinkedList 랑 ArrayList 두 가지 리스트 모두 데이터 순서를 가지고, ArrayList는 데이터를 쓰고 저장하는 것은 알고리즘 시간 복잡도상 O(n)이기 때문에 속도가 느리지만, 읽기(O(1))는 빠른 반면, LinkedList는 데이터를 읽는 속도(O(n))는 느리지만, 리스트 중간에 데이터를 쓰고 저장하는 것(O(1))은 빠르다면, 이 둘의 특성들을 어느 때 쓰는 것이 가장 적합한가요? 또한 ArrayList와 LinkedList를 각각 '메모가 많은 공책', 예전에 있었던 '포털 사이트 실시간 검색어 순위'로 비유해서 개념을 이해하는 것도 괜찮을까요? - 제 스스로 이해를 돕기위해 나름 저만의 비유를 적어봤습니다...ㅎ 메모가 많은 공책 (ArrayList) : 책 한 장안에 많은 메모들을 볼 수 있어서 읽기는 빠르지만, 메모를 쓰려면 최소 6-7장은 넘겨야 한다. 실시간 검색어 순위 (LinkedList) : 순위가 주기적으로 (주로 1시간 단위) 변해서 자료들을 빨리 반영하기는 힘들지만, 실시간 순위인 만큼 빠른 자료 수집 및 추가는 확실하다. (3) HashMap도 또한 일반적으로 어디에 가장 적합 한가요? 이를 테면 제가 원하는 특정 문자에, 특정 정수(Integer) 값을 할당하는 용도로 HashMap을 써도 괜찮을까요? 혹시 몰라 아래처럼 제 나름대로 코드를 적어봤습니다...ㅎ ... // 이미 import java.util.Map; 되어있음. HashMap<String, Integer> gameMoves = new HashMap<>(); gameMoves.put("R", 0); // gameMoves.remove("R"); 이렇게 키도 삭제 가능 gameMoves.put("D", 1); gameMoves.put("L", 2); gameMoves.put("U", 3); System.out.println(gameMoves.size()); // 4 그리고 위의 예시 처럼 remove("R");을 통해 키 값을 없애면 (HashMap gameMoves에 저장된 String), HashMap gameMoves의 value값은 그대로 살아있는가요? 아니면 null로 처리가 되나요? 스스로 공부하면서 얼핏 본 바로는 key값이 사라지더라도 map의 value는 계속해서 쓸 수 있다고 본거 같은데, 이 부분도 확실하게 제 스스로 짚고 넘어가고 싶습니다! 추가적으로 강의를 들으면서 제네릭스 전반적인 개념을 제 나름대로 그림도 그려가면서 이해를 해봤습니다...ㅎ 제대로 이해했는지 알고 싶어서요...ㅎ 앞으로도 강의 많이 찍어주세요!...ㅎ 항상 감사합니다!

  • java
  • 객체지향
  • 컬렉션프레임워크
  • arraylist
  • LinkedList
  • hashmap
  • 제네릭스
댓글 1 좋아요 0 조회수 717

정렬이 제대로 안 돼요

해결됨

[코드캠프] 시작은 프리캠프

싸이월드 만들기 5탄에서 수업을 따라서 코드를 새로 작성하고 있었는데 저는 albumWrapper 부분에서 css를 작성해도 강의 내용과 다르게 나오고 있습니다. 제가 어느 부분이 틀린 건가요? 강의 시간은 16:54 부분입니다.

  • HTML/CSS
  • javascript
김건우 댓글 1 좋아요 0 조회수 772

padding 말고 margin을 이용할 수 없을까요?

해결됨

[코드캠프] 시작은 프리캠프

싸이월드 만들기 1탄 16:48 입니다. .background { width: 1024px; height: 600px; background-image: url("../images/background.png"); padding: 20px 0px 0px 20px; } .outerbox { width: 808px; height: 544px; background-image: url("../images/outerbox.png"); /* margin: 20px 0px 0px 20px; */ } padding을 이용해서 간격을 주었는데 padding 말고 margin을 줄 경우 outerbox만 위에서 떨어지는게 아니라 background도 같이 떨어집니다. 이거 왜 이런걸까요?

  • HTML/CSS
  • javascript
방황하는물고기 댓글 1 좋아요 0 조회수 509

생성메소드

미해결

실전! 스프링 부트와 JPA 활용1 - 웹 애플리케이션 개발

생성메소드에 대해 잘 이해가 안가네요 어떨때 사용하게 되는건가요?

  • java
  • spring
  • 웹앱
  • spring-boot
  • jpa
wxogud3377 댓글 1 좋아요 2 조회수 917

메세지가뜨지 않습니다

해결됨

처음 만난 리액트(React)

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 사진과 같이 뜨고 안에 텍스트가 뜨질 않아서 버전 문제인가 하여 깃허브에 올리신 18버전 코드를 붙여넣어도 텍스트만 안뜹니다..ㅠ...

  • HTML/CSS
  • javascript
  • react
경원 댓글 1 좋아요 0 조회수 718

주문 생성 메서드 createOrder() 질문

미해결

실전! 스프링 부트와 JPA 활용1 - 웹 애플리케이션 개발

== [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예) [질문 내용] 주문 생성 메서드인 createOrder()의 파라미터로 가변인자인 OrderItem...을 사용하셨는데 List를 사용하지 않고 특별히 가변인자를 사용하신 이유가 있을까요?

  • java
  • spring
  • 웹앱
  • spring-boot
  • jpa
박수환 댓글 1 좋아요 0 조회수 629

반납 기능 관련해서 질문드립니다.

미해결

자바와 스프링 부트로 생애 최초 서버 만들기, 누구나 쉽게 개발부터 배포까지! [서버 개발 올인원 패키지]

강사님 안녕하세요. 이번 강의에서 BookService에 returnBook을 만들어주었는데요, 실행을 하면 반납을 했음에도 불구하고, 같은 이름의 사용자가 이미 반납한 책을 또다시 반납해도 오류가 발생하지 않고, 반납에 성공했다고 결과가 나오는 것을 알게되었습니다. 제 생각에는 UserLoanHistory history = userLoanHistoryRepository.findByUserIdAndBookName(user.getId(), request.getBookName()) .orElseThrow(IllegalArgumentException::new); 해당 코드에서 findby부분에is return도 추가하여 userLoanHistoryRepository.findByUserIdAndBookNameAndIsReturn(user.getId(), request.getBookName(), false)로 해주어야 대출중인 책을 반납하는 동작이 한번 이루어지고, 중복반납이 안될거 같은데 혹시 제가 이해를 잘못한건지 궁금합니다. 감사합니다!

  • java
  • spring
  • aws
  • mysql
  • spring-boot
  • jpa
황인태 댓글 1 좋아요 1 조회수 669

QueryDSL 5.0.0 기준으로 강의 내용을 정리했는데 올바르게 이해한 것일까요?

미해결

실전! Querydsl

searchPageSimple() : 조회 쿼리와 카운트 쿼리를 한번에 실행 searchPageComplex() : 조회 쿼리와 카운트 쿼리를 분리 QueryDSL 5.0.0부터는 fetchResults() 와 fetchCount() 를 deprecated 메서드로 공지함에 따라, 강의 내용처럼 searchPageSimple() 과 searchPageComplex() 를 구분해서 구현할 필요 없이 searchPageComplex() 의 방식으로만 구현하면 됨. @Override public Page<MemberTeamDto> searchWithPaging(MemberSearchCond cond, Pageable pageable) { // 데이터 조회 쿼리 (페이징 적용) List<MemberTeamDto> content = queryFactory .select( new QMemberTeamDto( member.id.as("memberId"), member.username, member.age, team.id.as("teamId"), team.name.as("teamName") ) ) .from(member) .leftJoin(member.team, team) .where( usernameEq(cond.getUsername()), teamNameEq(cond.getTeamName()), ageGoe(cond.getAgeGoe()), ageLoe(cond.getAgeLoe()) ) .offset(pageable.getOffset()) .limit(pageable.getPageSize()) .fetch(); // count 쿼리 (조건에 부합하는 로우의 총 개수를 얻는 것이기 때문에 페이징 미적용) Long total = queryFactory .select(member.count()) // SQL 상으로는 count(member.id)와 동일 .from(member) .leftJoin(member.team, team) .where( usernameEq(cond.getUsername()), teamNameEq(cond.getTeamName()), ageGoe(cond.getAgeGoe()), ageLoe(cond.getAgeLoe()) ) .fetchOne(); return new PageImpl<>(content, pageable, total); } 이 때, total 을 아래와 같이 구할 수도 있지만 long total = queryFactory .selectFrom(member) .leftJoin(member.team, team) .where( usernameEq(cond.getUsername()), teamNameEq(cond.getTeamName()), ageGoe(cond.getAgeGoe()), ageLoe(cond.getAgeLoe()) ) .fetch() // 조건에 부합하는 전체 데이터를 조회 (List) .size(); // List의 길이로 total을 구하기 count 함수는 SQL 차원에서 지원하기 때문에 굳이 이렇게 전체 데이터를 받아온 뒤에 애플리케이션 레벨에서 별도로 size() 를 호출해서 구할 필요 없고, 처음부터 카운트 쿼리를 호출하는 것이 나음. 이유는 전체 데이터를 불러오고 나서 size() 로 구하는 방식은 영속성 컨텍스트에 데이터를 전부 받아온 뒤에 개수를 따로 세는 것이기 때문에 불필요하게 메모리를 잡아먹기 때문. total 을 구하는 방식에 대한 내용은 강의에 언급되지 않았기 때문에 제가 따로 검색해보고 내린 결론입니다. 제가 생각한 것이 맞는지 궁금합니다. 이외에도 잘못된 부분이 있다면 지적해주시면 감사하겠습니다.

  • java
  • jpa
이현준 댓글 1 좋아요 18 조회수 2403

안녕하세요. 람다에서 외부변수를 사용하는 Closure관련해 궁금해 질문드려요.

미해결

자바 개발자를 위한 코틀린 입문(Java to Kotlin Starter Guide)

안녕하세요. 먼저 질좋은 강의 만들어주시고 제공해주셔서 감사드려요! 강의중 Closure가 자바와 다르게 final이 아닌 var변수를 람다안에서 값을 변경가능한것까지 이해하였습니다. 다른 궁금증이 하나 생겨서요. Closure가 람다를 진입하기전 변수를 포획해서 진행한다고 하셨는데, 이는 동시성 문제로부터 자유롭나요?

  • java
  • kotlin
  • 객체지향
클래식 댓글 1 좋아요 3 조회수 507

회원가입 폼 기능 추가

해결됨

[코드캠프] 시작은 프리캠프

안녕하세요 이제 마지막 파이널 과제를 하고 있고, 기능 추가를 위하여 고민하는데 어떻게 event 값을 반환해야 할 지 감이 안 와서 여쭤봅니다. 제가 추가하고자 하는 기능의 흐름은 // 1. 핸드폰 번호 작성 시에 알아서 옆으로 커서 넘어가도록 만들기. // 2. 비밀 번호와 비밀 번호 확인이 일치하는 경우에 인증번호 전송 가능해지기. // 3. 전송 누르면 인증 번호가 화면에 표시되고, 3분 카운트가 시작된다. 그리고 인증 완료 버튼이 활성화된다. // 4. 3분이 지나면 인증 완료 버튼이 비활성화된다. 이 과정을 통하고 싶어서 2개의 비밀번호 칸에 각각 함수를 생성하여 비밀번호 값을 받아오게 한 뒤에 sendNum 함수에서 2개의 비밀번호 값을 비교하여 동일한 경우에만 인증번호 전송을 가능하게 하고 싶습니다. 그리고 다른 경우에는 alert를 이용하여 비밀번호를 확인하라는 창을 띄우려고 하는데, 비밀번호 값을 얻어내는 함수 pw1 값 꺼내서 어떻게 sendNum 함수에 넣어야 할 지 잘 모르겠습니다... ㅠㅠ 코드 올리겠습니다. 감사합니당..! <!DOCTYPE html> <html lang="ko"> <head> <title>코드캠프 회원가입</title> <link rel="stylesheet" href="./signup.css" /> <script src="./signup.js" defer></script> </head> <body> <div class="container"> <div class="wrapper"> <div class="wrapper__header">코드캠프 회원가입</div> <div class="wrapper__body"> <div class="body__info"> <input type="email" placeholder="이메일을 입력해 주세요." /> <input type="text" placeholder="이름을 입력해 주세요." /> <input type="password" placeholder="비밀번호를 입력해 주세요." id="pw1" onchange="changeValue(event)" /> <input type="password" placeholder="비밀번호를 다시 입력해 주세요." id="pw2" /> <div class="phone"> <input type="text" class="phone__first" maxlength="3" id="p1" oninput="moveCursorFirst()" /> - <input type="text" class="phone__mid" maxlength="4" id="p2" oninput="moveCursorSec()" /> - <input type="text" class="phone__last" maxlength="4" id="p3" /> </div> </div> <div class="body__certificate"> <div class="certificate__send"> <div class="certificate__num" id="certificate__num">000000</div> <button class="send__num" onclick="sendNum()" id="send__num"> 인증번호 전송 </button> </div> <div class="certificate__complete"> <div class="remaining"> <span id="remaining__min">3</span>: <span id="remaining__sec">00</span> </div> <button class="complete__btn" id="complete__btn" disabled> 인증 완료 </button> </div> </div> <div class="body__addition"> <select name="region"> <!-- selected + disabled 같이 이용하면 된다. --> <option value="" selected disabled>지역을 선택하세요.</option> <option value="gg">경기도</option> <option value="seoul">서울</option> <option value="ic">인천</option> </select> <div class="sex"> <div class="women"> <input type="radio" id="women" name="sex" /> <label for="women">여성</label> </div> <div class="men"> <input type="radio" id="men" name="sex" /> <label for="men">남성</label> </div> </div> </div> </div> <div class="divideLine"></div> <div class="wrapper__footer"> <button class="submit">가입하기</button> </div> </div> </div> </body> </html> // 1. 핸드폰 번호 작성 시에 알아서 옆으로 커서 넘어가도록 만들기. // 2. 비밀 번호와 비밀 번호 확인이 일치하는 경우에 인증번호 전송 가능해지기. // 3. 전송 누르면 인증 번호가 화면에 표시되고, 3분 카운트가 시작된다. 그리고 인증 완료 버튼이 활성화된다. // 4. 3분이 지나면 인증 완료 버튼이 비활성화된다. // 1. 핸드폰 번호 작성 시에 알아서 옆으로 커서 넘어가도록 만들기. const moveCursorFirst = () => { const p1 = document.getElementById("p1"); if (p1.value.length === 3) { document.getElementById("p2").focus(); } }; const moveCursorSec = () => { const p2 = document.getElementById("p2"); if (p2.value.length === 4) { document.getElementById("p3").focus(); } }; // 아직 해결하지 못 함. 비밀번호 가지고 나와야 된다. const changeValue = (event) => { let pw1 = event.target.value; return pw1; }; // 2. 비밀 번호와 비밀 번호 확인이 일치하는 경우에 인증번호 전송 가능해지기. let isStarted = false; const sendNum = () => { // 2. 타이머 실행시키기. let time = 5; let isDisabled = document.getElementById("complete__btn"); if (isStarted === false) { isStarted = true; isDisabled.removeAttribute("disabled"); // 비활성화 끄기. // 1. 6자리 수의 인증 번호 생성하고 화면에 보여주기. let certificateNum = document.getElementById("certificate__num"); let number = String(Math.floor(Math.random() * 1000000)).padStart(6, "0"); certificateNum.innerText = number; let timer = setInterval(function () { // 타이머가 실행되는 경우 if (time >= 0) { const remainingMin = Math.floor(time / 60); const remainingSec = String(time % 60).padStart(2, "0"); // console.log(`${remainingMin}분 ${remainingSec}초`); const min = document.getElementById("remaining__min"); const sec = document.getElementById("remaining__sec"); min.innerText = remainingMin; sec.innerText = remainingSec; time = time - 1; } else { // console.log("타이머가 종료되었습니다."); // 타이머를 종료시키는 경우 isDisabled.setAttribute("disabled", ""); // 비활성화 켜기. clearInterval(timer); isStarted = false; } }, 1000); } else { } };

  • HTML/CSS
  • javascript
xudegloss 댓글 1 좋아요 0 조회수 755

아톰 홈페이지가 안나와요.. 서비스 종료됐다는데

미해결

인터랙티브 웹 개발 제대로 시작하기

오늘 강의 처음듣는데 아톰홈페이지가 안뜹니다 ㅠ 30일 무료 라고 해도 깃허브같은것만뜨는데 찾아보니 서비스가 종료됐대요 얼마전에,, vs code로 해도 상관없는건가요?ㄷㄷ ㅠ - 질문에 대한 답변은 강의자가 하는 경우도 있고, 수강생 여러분들이 해주시는 경우도 있습니다. 같이 도와가며 공부해요! :) - 작성하신 소스코드 자체의 오류보다는, 개념이나 원리가 이해되지 않는 부분을 질문해주시는게 좋습니다. 그대로 따라했는데 소스코드에서 버그가 나는 경우는 99%가 오타에 의한거라서, 완성된 소스랑 찬찬히 비교해보시면 직접 찾으실 수 있을 거예요. 개발자도구 console에 오류로 표시된 부분만 완성 코드에서 복사->붙여넣기를 해보시는 것도 방법입니다. - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

  • HTML/CSS
  • javascript
  • 인터랙티브-웹
oilater 댓글 1 좋아요 0 조회수 624

안녕하세요 회원 가입 과제 수행 중 어려운 부분이 있어서 질문 드립니다

해결됨

[코드캠프] 시작은 프리캠프

과제 진행 상태는 이러합니다. 이번에 강의를 보며 처음 입문하게 되어, 부족한 부분이 너무 많다보니 어떤 부분을 수정하면 좋을지 혼자서는 감이 안잡히더라고요. 제가 보았을 땐 라디오 박스와 체크박스는 너무 미숙해 보이고 폰트 사이즈 수정도 잘 안되더라고요, 다른 부분도 완성도가 좋진 않은 것 같아서 피드백을 여쭙고 싶어요. 좋은 강의 알게되어 잘 배우고 있습니다 감사합니다. <!DOCTYPE html> <html lang="ko"> <head> <title>회원가입과제</title> <link rel="stylesheet" href="./03-homework.css"> </head> <body> <div class="pb1"> <p></p><p></p> <div class="A1"><h2>회원 가입을 위해 <br>정보를 입력해주세요</h2></div><p></p> <input class="B1" style="border-color: #AACDFF;" type="text" placeholder="* 이메일"><br> <input class="B1" type="text" placeholder="* 이름"><br> <input class="B1" type="password" placeholder="* 비밀번호"><br> <input class="B1" type="password" placeholder="* 비밀번호 확인"><br> <div><p></p> <input class="C1" type="radio" name="gender">여성 <input class="C1" type="radio" name="gender">남성 </div><p></p> <input class="D1" type="checkbox">이용약관 개인정보 수집 및 이용, 마케팅 활용 선택에 모두 동의합니다. <p><br></p> <div class="E0"> <button class="E1">가입하기</button> </div> </div> </body> </html> CSS 파일 * { box-sizing: border-box; } body { display: flex; justify-content: center; } .pb1 { width: 670px; height: 960px; border: 1px solid #AACDFF; border-radius: 20px; box-shadow: 7px 7px 39px rgba(0, 104, 255, 0.25); display: flex; flex-direction: column; align-items: center; } .A1 { width: 466px; height: 94px; color: #0068FF; } .B1 { width: 466px; height: 80px; padding-bottom: 40px; border: 0px; border-bottom: 1px solid #CFCFCF; } .C1{ width: 20px; height: 19.95px; border: 1px solid #D2D2D2; } .D1 { width: 419px; height: 20px; padding-bottom: 40px; border: 0px; border-bottom:1px solid #CFCFCF; } .E0 { width: 470px; height: 70px; padding-top: 30px; border: 0px; border-top:1px solid #CFCFCF; } .E1 { width: 470px; height: 75px; border: 2px solid #AACDFF; border-radius: 10px; background-color: white; font-size: large; font-weight: 500; color: rgb(27, 106, 252); }

  • HTML/CSS
  • javascript
jihunpark3 댓글 1 좋아요 1 조회수 535

Scanner, FileReader, BufferedReader 등 각각의 차이점 및 섹션 14. 퀴즈 #13의 호출 순서와 관련된 질문입니다...ㅎ

해결됨

나도코딩의 자바 기본편 - 풀코스 (20시간)

안녕하세요, 나도코딩 선생님...ㅎ 동영상 강의들 중 섹션 14. 입출력과 파일을 보다가 궁금증이 생겨서 질문을 하게 되었습니다...ㅎ (1) 섹션 14. 입출력과 파일을 공부하면서, 파일을 읽는 여러 가지 방법들을 접하고 있습니다. 공부하면서 BufferedReader, FileReader, Scanner등 여러 가지 방법들이 있는데, 이들은 어느 때 쓰이는 것이 가장 좋은가요? 예를 들면, BufferedReader는 큰 용량의 파일을 읽는데 적합하다 던가, 아니면 Scanner는 키보드 입력을 받는 것 외에도 파일을 읽고자 할 때, FileReader와 같은 역할을 한다 이런거요! 만약 어느 한 텍스트 파일을 읽고자 할 때, Scanner를 예로 들면, 이렇게 코드를 적어볼 수 있을까요? 모든 건 이미 import가 있다고 가정하고 작성해봤습니다...ㅎ: ... // 이전 코드 생략 try { File file = new File("testing.txt"); Scanner scanner = new Scanner(file); while(scanner.hasNext()) { System.out.println(scanner.next()); // 여기서 만약에 여러 줄들로 이루어진 텍스트에서 한 글자씩 따오려면, // 이전에 문자열 관련 질문 처럼 scanner.next().charAt을 쓰나요? } scanner.close(); } catch (FileNotFoundException e1) { e1.printStackTrace(); // 예외 처리 1 } catch (IOException e2) { e2.printStackTrace(); // 예외 처리 2 } (2) 섹션 14에 있는 퀴즈 #13과 관련된 질문입니다! 제가 try문 안의 String input; scanner의 호출 스택(순서)을/를 제대로 이해했는지 알고 싶습니다...ㅎ ... // 이전 코드 생략 Scanner scanner = new Scanner(System.in); try (BufferedReader br = new BufferedReader(new FileReader("saying.txt"))) { ... // 퀴즈 시작 및 제목 출력 String quiz; String answer; String input; while (true) { quiz = br.readLine(); answer = br.readLine(); if (quiz == null || answer == null) { break; } System.out.println(" (문제) " + quiz); System.out.println(" (답 입력) "); input = scanner.next(); ... // input.equal(answer), if-else문 생략 } ... } catch (IOException e) { e.printStackTrace(); // 예외 처리 } 여기 이 코드에서, quiz랑 answer는 1줄 1줄 br.readLine();을 통해 단어 및 문장들을 인식하는 반면, 입력하는 답안의 경우에는 우선 try문 안에서 String input;을 선언하고, 대입 연산자 = 를 통해 .next();로 입력을 받은 다음, string으로 선언된 input을 .equal();로 입력받은 값과 정답을 비교하여 최종 결과를 출력하는 건가요? 프로그래밍 언어를 공부하다보니 여러 질문들과 궁금증이 많이 쌓이는데, (특히 최근에 들어선 더 많아졌네요...ㅎ) 그 때마다 제 궁금증을 답글을 통해 잘 해소줘서 진심으로 감사합니다..ㅎ :)

  • java
  • 객체지향
  • 파일
  • file
  • 입출력
  • input
  • output
댓글 1 좋아요 1 조회수 956

../ 을 통한 상위 폴더로의 이동없이 어떻게 <img src="images/icons/logo.png />만으로 사진을 불러오신건가요

미해결

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

../ 을 통한 상위 폴더로의 이동없이 어떻게 <img src="images/icons/logo.png />만으로 사진을 불러오신건가요? 제가 앞에 ../을 붙이지 않았을 경우에는 그림이 제대로 불러와지지 않습니다 <img src="../images/icons/logo.png />를 해야만 정상적으로 사진이 불러와 집니다

  • HTML/CSS
  • javascript
  • react
  • node.js
  • react-native
  • 머신러닝
  • express
  • tensorflow
tostarmk 댓글 1 좋아요 1 조회수 422

인기 태그

인프런 TOP Writers

주간 인기글