애니메이트 css 질문입니다.
미해결
조코딩의 코딩 기초와 웹 풀스택 개발
애니메이트 css에서class="animate__animated animate__bounce" 따서 불여넣기 했는데 바운스가 안걸립니다. 조코딩님 강의에는 버튼 타입이 걸려있는데 이건 어떻게 적용하는지요,,?
- HTML/CSS
- javascript
- node.js
- web-api
172만명의 커뮤니티!! 함께 토론해봐요.
미해결
조코딩의 코딩 기초와 웹 풀스택 개발
애니메이트 css에서class="animate__animated animate__bounce" 따서 불여넣기 했는데 바운스가 안걸립니다. 조코딩님 강의에는 버튼 타입이 걸려있는데 이건 어떻게 적용하는지요,,?
미해결
실전! Querydsl
[질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) [질문 내용] 여기에 질문 내용을 남겨주세요. q타입을 생성하고 import를 해주었습니다. package study.querydsl; import com.querydsl.jpa.impl.JPAQueryFactory; import org.assertj.core.api.Assertions; import org.junit.jupiter.api.BeforeEach; import org.junit.jupiter.api.Test; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.boot.test.context.SpringBootTest; import org.springframework.transaction.annotation.Transactional; import study.querydsl.entity.Member; import study.querydsl.entity.Team; import javax.persistence.EntityManager; import static study.querydsl.entity.QMember.*; @SpringBootTest @Transactional public class QuerydslBasicTest { @Autowired EntityManager em; JPAQueryFactory queryFactory; @BeforeEach public void before() { Team teamA = new Team("teamA"); Team teamB = new Team("teamB"); em.persist(teamA); em.persist(teamB); Member member1 = new Member("member1", 10, teamA); Member member2 = new Member("member2", 20, teamA); Member member3 = new Member("member3", 30, teamA); Member member4 = new Member("member4", 40, teamA); em.persist(member1); em.persist(member2); em.persist(member3); em.persist(member4); } @Test public void startJPQL() { String qlString = "select m from Member m" + " where m.username = :username"; Member findMember = em.createQuery(qlString, Member.class) .setParameter("username", "member1") .getSingleResult(); Assertions.assertThat(findMember.getUsername()).isEqualTo("member1"); } @Test public void startQuerydsl() { Member findMember = queryFactory .select(member) .from(member) .where(member.username.eq("member1")) .fetchOne(); Assertions.assertThat(findMember.getUsername()).isEqualTo("member1"); } }
미해결
자바 ORM 표준 JPA 프로그래밍 - 기본편
3:58초 경에 findMember.setAge(20)으로 결과가 바뀌면 영속성 컨텍스트에 관리가 되는 거고, 안바뀌면 관리가 되지 않는다라는데 이유가 뭔가요 ? JPA가 DB의 데이터에 접근하고 수정하고 작성,삭제 할 수 있다 = 영속성 컨텍스트가 관리한다 같은 말일까요 ?
미해결
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
git 설치 이후 vscode에서 터미널 변환이 안될때 git 최신버전 설치 완료 vscode 재실행 완료 터미널 1개 추가 후 git bash로 변환시 목록에 안보임
미해결
자바 ORM 표준 JPA 프로그래밍 - 기본편
@OneToMany @JoinColumn(name = "MEMBER_ID") private Order order; @OneToMany @JoinColumn(name = "MEMBER_ID") private List<Order> orders; 두개가 무슨 차이가 있는지 궁금합니다. 일대다 관계라면 컬렉션을 안써도 되지 않나요?
미해결
자바 ORM 표준 JPA 프로그래밍 - 기본편
public static void main(String[] args) { Integer a = Integer.valueOf(10); Integer b = a; a = 20; System.out.println("a = " + a); System.out.println("b = " + b); } =======출력값 ======== a = 20 b = 10 이렇게 하면 값이 변경되는데 PPT에서 변경X라는 말이 무슨 말일까요 ?
미해결
자바 ORM 표준 JPA 프로그래밍 - 기본편
Member와 Team을 예로 생각했을 때 즉시로딩 -> Member만 필요해도 Team과 쿼리문이 같이 나감 지연로딩 -> Member만 불러오고, Team은 프록시 객체로 불러와서, Team이 필요할 때 영속성 컨텍스트에 연결을 요청하고 요청 쿼리문이 나가는 것이 맞나요 ? Member.getTeam().getName()을 1번 수행한다고 했을 때 즉시로딩 (Member + Team 쿼리문 같이)의 성능이 지연로딩 ( Member 쿼리문 따로, Team 쿼리문 따로)보다는 좋지만 강의에서 나온 여러가지 문제로 웬만해서는 지연로딩을 사용하는 것이 더 좋다. 이것이 맞나요?
미해결
HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
prevAll속성은 잘 들어가지는데 그 다음에 넣은 nextAll 속성이 동작을 안하네요.. 코드도 다 똑같이 넣고 오타도 없는데 어디를 수정해야하나요...?
미해결
실전! 스프링 부트와 JPA 활용1 - 웹 애플리케이션 개발
<BookForm> @Getter @Setter public class BookForm { private Long id; private String name; private int price; private int stockQuantity; private String author; private String isbn; } <Controller> @PostMapping("/items/new") public String create(BookForm form){ Book book = new Book(); book.setName(form.getName()); book.setPrice(form.getPrice()); book.setStockQuantity(form.getStockQuantity()); book.setAuthor(form.getAuthor()); book.setIsbn(form.getIsbn()); itemService.saveItem(book); return "redirect:/"; } <Service> @Service @RequiredArgsConstructor @Transactional(readOnly = true) public class ItemService { private final ItemRepository itemRepository; public void saveItem(Item item){ itemRepository.save(item); } public Item findOne(Long itemId){ return itemRepository.findOne(itemId); } public List<Item> findAll(){ return itemRepository.findAll(); } } <Repository> @Repository @RequiredArgsConstructor @Slf4j public class ItemRepository { private final EntityManager em; public void save(Item item){ if(item.getId() == null){ log.info("item={}", item); em.persist(item); //신규등록 }else{ em.merge(item); } } public Item findOne(Long id){ return em.find(Item.class, id); } public List<Item> findAll(){ return em.createQuery("select i from Item i", Item.class) .getResultList(); } } <Log> 2023-04-21 15:08:16.380 INFO 7536 --- [nio-8080-exec-2] j.jpashop2.repository.ItemRepository : item=Book(author=qwe, isbn=1234) <Test> 로그에 찍히는거 보면 값이 다 전달이 되고 테스트 코드에서도 성공으로 떠서 저장이 되야 될거 같은데 h2 db에 가면 값이 저장이 안되어 있네요 아예 디비랑 연동이 안되나 싶었는데 멤버는 정상적으로 회원가입이 되는데 아이템만 저장이 안되네요 뭐가 문제일까요... ddl-auto 는 create로 되어있구요 h2 db 버전은 1.4.2 입니다
미해결
[리뉴얼] React로 NodeBird SNS 만들기
제가 다른게시물 보고 https://www.digitalocean.com/community/tutorials/how-to-install-mysql-on-ubuntu-20-04 이거까지 했는데 계속 새로운 비밀번호 입력 하라고 뜨네요 ㅠㅠ 이런 경우 어떻게 해야할까요 비밀번호도 보안수준에 맞게 했는데 계속 뜨네요 ㅠㅠ
미해결
자바 ORM 표준 JPA 프로그래밍 - 기본편
ORDERS와 ORDER_ITEM의 관계는 하나의 주문 안에, 주문된 여러가지 아이템(book,album,movie등)이 있을 수 있기 때문에 1:N인 것 이 맞나요 ? OrderItem과 Item의 관계가 잘 이해 가지 않아서 찾아보다가 https://www.inflearn.com/course/lecture?courseSlug=ORM-JPA-Basic&unitId=21699&category=questionDetail&tab=community&q=805804 이 답변을 보고 헷갈리는 부분이 있는데요. Book을 n번 주문할 수 있기 때문에 1:N이라고 하셨는데 이 말은 즉, Book이라는 아이템 안에서도 주문된 여러가지 책(일본 책, 독일 책, 한국책) 이 있을 수 있기 때문에 1:N이라는 말일까요? 어떤 Member가 어떤 주문을 했는지 Order를 참고하는 것과 어떤 Order가 무엇을 구매했는지 Order_Item을 참고하는 것이 같은 맥락이라고 생각하는데 전자는 잘못된 설계고 후자는 괜찮은 설계인 이유는 무엇일까요?
미해결
자바 ORM 표준 JPA 프로그래밍 - 기본편
public class Team2 { @Id @GeneratedValue @Column(name = "TEAM_ID") private int id; private String name; @OneToMany @JoinColumn(name = "MEMBER_ID") private List<Member> members = new ArrayList<>(); } public class Member2 { @Id @GeneratedValue() private Long id; @Column(name = "name") private String username; @ManyToOne(mappedBy = "members") private Team team; } 강의를 듣다가 외래키를 Team에 두면 안되는 것인가? 하고 혼자 코드를 작성해보았는데요. @ManyToOne은 mappedBy옵션을 지원하지 않는 걸로 봐서 1:N에서 N쪽이 외래키가 있어야하고, 연관관계의 주인이 되어야하는 것 같은데 연관관계의 주인이 되는 외래키는 어떤 방식으로 설정해주나요 ?
해결됨
자바(Java) 알고리즘 문제풀이 입문: 코딩테스트 대비
안녕하세요 선생님 다름이 아니라 제가 작성한 코드가 정답처리가 되었는데 이 코드는 정답이 되면 안되는 코드가 아닌가 해서 여쭤보고 싶어서 질문글 남깁니다. 예를들면 첫번째 문제에서는 CBA 순서로 무조건 짜야하지만 제 코드에서 str1 은 꼭 순서를 지켜야 하는 값이고 str2는 C의 순서를 알 수 없는데 정답처리가 되어서 제가 작성한 코드가 제대로 정답이 맞는건지 궁금해서 질문글을 남깁니다!
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>푸른마을</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <div class="main-content"> <div class="left"> <header> <div class="header-logo"> <a href="#none"><img src="images/logo-header.png" alt="header logo"></a> </div> <div class="navi"> <ul class="menu"> <li><a href="#none">OnSale</a></li> <li><a href="#none">기획전</a></li> <li><a href="#none">푸른마을 레시피</a></li> <li><a href="#none">매장안내</a></li> <div class="sub-back"> <div class="mega-menu"> <div class="sub-menu"> <a href="#none">할인행사</a> <a href="#none">덤증정</a> </div> <div class="sub-menu"> <a href="#none">봄 먹거리</a> <a href="#none">여름 먹거리</a> <a href="#none">가을 먹거리</a> <a href="#none">겨울 먹거리</a> </div> <div class="sub-menu"> <a href="#none">메인요리</a> <a href="#none">밑반찬</a> <a href="#none">간식</a> <a href="#none">브런치</a> </div> <div class="sub-menu"> <a href="#none">신규매장</a> <a href="#none">추천매장</a> <a href="#none">공지사항</a> </div> </div> </div> </ul> </div> <div class="spot-menu"> <a href="#none">로그인</a> <span>|</span> <a href="#none">회원가입</a> </div> </header> </div> <div class="right"> <div class="slide"> <div class="slide-image"> <div class="slide-image-inner"> <a href="#none"><img src="images/slide-01.jpg" alt="slide1"></a> <a href="#none"><img src="images/slide-02.jpg" alt="slide2"></a> <a href="#none"><img src="images/slide-03.jpg" alt="slide3"></a> </div> </div> <div class="banner"> <a href="#none"><img src="images/banner-01.jpg" alt="banner1"></a> <a href="#none"><img src="images/banner-02.jpg" alt="banner2"></a> <a href="#none"><img src="images/banner-03.jpg" alt="banner3"></a> </div> </div> <div class="items"> <div class="shortcut"> <img class="shortcut-image" src="images/shortcut-01.jpg" alt="shortcut image"> <div class="shortcut-content"> <h2>얼리버드 선착순 할인 이벤트, 신규강의 최대 30% 할인</h2> <p> 12월은 사랑의 달~ 코딩웍스에서 여러분께 사랑을 뿌려요~<br> 12월 개강반을 12월 06일까지 접수하는 분들께는 15%~ 20% 의 얼리버드 할인을 제공합니다.<br> 더불어 소중한 리뷰를 꼼꼼히 남겨주시는 분들을 뽑아 더 큰 적립금을 추가지급해 드릴 예정이오니 리뷰도 놓치지 마시고 작성해주세요~^^<br> 기간: 2022년 12월 18일~ 12월 25일 </p> </div> <a href="#none"><img src="images/shortcut-02.png" alt="shortcut link"></a> </div> <div class="news-gallery"> <div class="tab-inner"> <div class="btn"> <a class="active" href="#none">공지사항</a> <a href="#none">갤러리</a> </div> <div class="tabs"> <div class="tab1"> <a class="open-modal" href="#none">스트리밍 서버 이전 작업으로 2시간 서비스 중지<b>2022.12.20</b></a> <a href="#none">얼리버드 선착순 할인 이벤트 최대 50% 할인<b>2022.10.13</b></a> <a href="#none">내 집 마련의 꿈을 꿈이 아닌 현실로 만드는 진짜 방법<b>2022.11.31</b></a> <a href="#none">외국인과 영어로 네이티브처럼 대화하는 노하우<b>2022.08.09</b></a> <a href="#none">월 500만원 매출을 내는 블로그 운영하는 노하우<b>2022.07.07</b></a> </div> <div class="tab2"> <a href="#none"><img src="images/gallery-01.jpg" alt="gallery1"><span>체스키크룸로프성</span></a> <a href="#none"><img src="images/gallery-02.jpg" alt="gallery2"><span>럭셔리 범선 선셋</span></a> <a href="#none"><img src="images/gallery-03.jpg" alt="gallery3"><span>거제 바람의언덕</span></a> <a href="#none"><img src="images/gallery-04.jpg" alt="gallery4"><span>연천 덴마크 가평</span></a> <a href="#none"><img src="images/gallery-05.jpg" alt="gallery5"><span>담양 메타프로방스</span></a> <a href="#none"><img src="images/gallery-06.jpg" alt="gallery6"><span>잘츠카머쿠트</span></a> </div> </div> </div> </div> </div> </div> </div> <footer> <div class="footer-logo"> <a href="#none"><img src="images/logo-footer.png" alt="footer logo"></a> </div> <div class="footer-content"> <div class="footer-link"> <a href="#none">회사소개</a> <a href="#none">찾아오시는길</a> <a href="#none">개인정보처리방침</a> <a href="#none">이용약관</a> <a href="#none">고객지원</a> <a href="#none">제휴문의</a> </div> <div class="copyright"> 상호 : (주)코딩웍스 | 대표자 : 홍길동 | 개인정보관리책임자 : 성춘향 부장 사업장주소 : 경기도 남양주시 별내동 1234 코딩웍스 빌딩 6층 (주)코딩웍스 </div> </div> </footer> </div> <div class="modal"> <div class="modal-content"> <h2>스트리밍 서버 이전으로 서비스 장애</h2> <p> 스트리밍 서버 이전 작업으로 2시간 서비스 중지됩니다.<br> 주요 작업 내용은 아래와 같습니다.<br> <br> 1. 서버 이전에 따른 DNS 이전으로 기존 호스팅 서비스 대체<br> 2. 문자셋을 utf-8로 변경 후 모바일 등에 대처하기 위해 미리 조치<br> 3. 스트리밍 서버 CDN과 연동 후 멀티미디어 이러닝 서비스가 제공<br> <br> 위 내용을 보시면 제법 큰 작업이었음을 알 수 있습니다.<br> 특히 문자셋의 변경에 따라 기존의 DB, data, 웹사이트 솔루션 등의 커스트마이징 등에 상당한 어려움이 있었고, 이에 따른 일부 접속 오류가 있을 수 있었음에 양해를 구합니다.<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 { margin: 0; background-color: #fff; color: #333; font-size: 15px; } a { color: #333; text-decoration: none; } .container {} .main-content { display: flex; } .main-content > div { /* border: 1px solid black; */ /* height: 800px; */ } .left { width: 200px; } .right { flex: 1; } header { position: relative; z-index: 10; } header > div { /* border: 1px solid red; */ } .header-logo { height: 100px; display: flex; align-items: center; } .navi { height: 200px; } /* Navigation */ .menu { list-style: none; padding: 0; width: 90%; margin: auto; margin-top: 10px; position: relative; } .menu li { text-align: center; background-color: #fff; } .menu li > a { border: 1px solid #000; display: block; padding: 5px; transition: 0.5s; } .menu li:hover > a { background-color: #000; color: #fff; } .sub-back { background-color: rgba(0, 0, 0, 0.5); position: absolute; top: 0; left: 100%; width: calc(100vw - 208px); z-index: 1000; display: none; } .mega-menu {} .sub-menu { height: 32px; display: flex; align-items: center; gap: 15px; margin-left: 15px; } .sub-menu a { padding: 5px; transition: 0.5s; color: #fff; } .sub-menu a:hover { background-color: #000; } .spot-menu { height: 50px; text-align: center; } .spot-menu a { color: blue; } .spot-menu a:hover { text-decoration: underline; } .slide { position: relative; } .slide > div { /* border: 1px solid blue; */ } .slide-image { height: 400px; } .slide-image-inner { font-size: 0; height: inherit; overflow: hidden; position: relative; } .slide-image-inner a { height: inherit; position: absolute; top: 0; left: 0; animation: slide 10s linear infinite; visibility: hidden; } .slide-image-inner a:nth-child(1) { animation-delay: 0s; } .slide-image-inner a:nth-child(2) { animation-delay: 3.5s; } .slide-image-inner a:nth-child(3) { animation-delay: 7s; } .slide-image-inner a img { height: inherit; width: 100%; object-fit: cover; } @keyframes slide { 0% { opacity: 0; } 5% { opacity: 1; visibility: visible; } 35% { opacity: 1; } 40% { opacity: 0; visibility: hidden; } 100% { opacity: 0; } } .banner { width: 150px; height: 300px; position: absolute; top: 0; right: 10px; } .banner a img { width: 150px; border-radius: 10px; margin: 5px 0; } .items {} .items > div { /* border: 1px solid green; */ } .shortcut { height: 200px; display: flex; align-items: center; justify-content: space-around; } .shortcut .shortcut-image { height: 150px; border-radius: 30px; } .news-gallery { height: 250px; } /* News & Gallery */ .tab-inner { width: 95%; margin: auto; margin-top: 25px; } .btn {} .btn a { border: 1px solid #000; display: inline-block; width: 100px; text-align: center; padding: 5px; border-radius: 5px 5px 0 0; border-bottom: none; margin-right: -6px; margin-bottom: -1px; background-color: #ccc; } .btn a.active { background-color: #fff; } .tabs {} .tab1 { /* display: none; */ border: 1px solid #000; height: 170px; box-sizing: border-box; padding: 10px 15px; } .tab1 a { display: block; padding: 5px; border-bottom: 1px solid #000; } .tab1 a:last-child { border-bottom: none; } .tab1 a b { float: right; font-weight: normal; padding-right: 50px; } .tab2 { border: 1px solid #000; height: 170px; text-align: center; box-sizing: border-box; padding-top: 10px; display: none; } .tab2 a { display: inline-block; text-align: center; } .tab2 a img { height: 130px; border-radius: 10px; margin: 0 55px; } .tab2 a span { display: block; } footer { display: flex; height: 120px; align-items: center; } footer > div { /* border: 1px solid red; */ } .footer-logo { width: 200px; } .footer-content { flex: 1; } .footer-content div { /* border: 1px solid red; */ /* height: 60px; */ padding: 10px 15px; } .footer-link {} .copyright {} .footer-link a { color: blue; } .footer-link a::after { content: "|"; margin-left: 5px; } .footer-link a:last-child::after { display: none; } .footer-link a:hover { text-decoration: underline; } .modal { background-color: #00000060; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; display: none; } .modal-content { background-color: #fff; width: 500px; padding: 20px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .close-modal { float: right; border: 1px solid #000; padding: 5px 10px; } .modal-content h2 { text-align: center; } $('.menu').mouseenter(function(){ $('.sub-back').stop().fadeIn() }) $('.menu').mouseleave(function(){ $('.sub-back').stop().fadeOut() }) $('.btn a:first-child').click(function(){ $('.tab1').show() $('.tab2').hide() $(this).addClass('active') $(this).siblings().removeClass('active') }) $('.btn a:last-child').click(function(){ $('.tab2').show() $('.tab1').hide() $(this).addClass('active') $(this).siblings().removeClass('active') }) $('.open-modal').click(function(){ $('.modal').fadeIn() }) $('.close-modal').click(function(){ $('.modal').fadeOut() })
미해결
조코딩의 코딩 기초와 웹 풀스택 개발
ㅠㅠㅠ
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
이번 2023년 1차 실기 시험 준비하면서 강의를 듣고 너무 도움이 많이 됐고 덕분에 시험도 잘 마무리 할수 있었습니다 DE 타입이 나올까 조마조마했지만 다행이 A타입이 나왔습니다 제자리뿐만 아니라 감독관님자리에서도 모든 기능이 구현되고 탭키도 작동하고 하는걸 확인까지 했습니다 왼쪽 슬라이드/ 메뉴슬라이드다운/ 모달레이어팝업 / 전체레이아웃 ( 모든 배치 완료 세밀한 조정에서 부족하지만 처음 봤을때 다 제자리에 위치해 있었습니다 ) 모든 기능이 다 구현이 되고 레이아웃도 됐는데요 근데 어디서 잘못을 해야 54점이 나올까요?? 답답한 마음에 글 남겨 봅니다 모든 기능이 구현되는데 뭘 잘못을 해야 48점을 감점 받는걸까요 ㅠㅠ
미해결
자바 ORM 표준 JPA 프로그래밍 - 기본편
둘 다 null을 허가하지 않는 다는 의미로 쓰이는 것 같은데 어떤 차이가 있는 건가요 ? @EnumType 애노테이션을 제거하고 멤버를 추가해도 @EnumType.Ordinal 옵션을 적용 한 것처럼 Integer로 컬럼을 만들고 user = 0, admin=1 으로 잘 저장하던데 @EnumType은 어떤 역할을 하는 것인가요? EnumType.String이 필수로 써야할만큼 EnuType.Ordinal은 안좋은 옵션같은데 Default가 String이 아니라 Ordinal인 거는 따로 무슨 이유가 있는 건가요 ?
미해결
자바 ORM 표준 JPA 프로그래밍 - 기본편
1차 캐시, 쓰기지연, 더티체킹(스냅샷), 지연로딩 영속성 컨텍스트의 특징이 이정도인 거 같은데 더티체킹은 엔티티(객체)를 컬렉션에서 관리하듯이 도와줘서 수정측면에서 도움이 많이 되는 것 같긴 한데 1차캐시나 쓰기지연 로딩은 디비에 데이터 몇 번 덜 접근한다고 해서 큰 차이 없을 것 같은데 성능적인 측면에서 많이 도움 되나요? 실무를 해본 적이 없어서 제가 잘 모르는 것일까요 ?
미해결
자바 ORM 표준 JPA 프로그래밍 - 기본편
DB 접근 2편이나 활용1편에서는 Gradle을 사용해서application.properties를 통해 h2를 설정하고 build.gradle을 통해서 라이브러리를 받아왔던 것 같은데 이번 강의에서는 xml파일들을 사용해서 상당히 어색한데요. 최근에 Gradle을 많이 사용한다면 xml로 설정하는 방법을 따로 공부할 필요는 없을까요?
미해결
초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
알려주신 수업예제로 웹사이트 만들어도 되는건가요?