질문이 있습니다!
해결됨
웹 애니메이션을 위한 GSAP 가이드 Part.02
파트2 강의를 들을때도 gsap유료버전을 구매하지 않아도 수업을 다 따라갈수 있나용?
- HTML/CSS
- javascript
- 인터랙티브-웹
- gsap
hiems1103
댓글 1
좋아요 1
조회수 508
묻고 답해요
172만명의 커뮤니티!! 함께 토론해봐요.
기초 트위닝 질문
해결됨
웹 애니메이션을 위한 GSAP 가이드 Part.01
기초 트위닝 진행중인데 <div class="orange"></div>라고 적었을때 애니메이션이 작동을 안해요 ㅠㅠ <div class="orange">22</div> 이런식으로 태그 안에 내용이 있을때만 작동을 하는데 왜그러는 걸까용...
- HTML/CSS
- javascript
- 인터랙티브-웹
- gsap
hiems1103
댓글 1
좋아요 1
조회수 395
연관관계 메서드와 CASCADE의 관계
미해결
실전! 스프링 부트와 JPA 활용1 - 웹 애플리케이션 개발
//==연관관계 메서드==// 가 주석으로 달린 메서드들이 연관관계에 있는 객체에 값을 넣어줄 때 반대편에도 자동으로 값을 넣어주는 역할을 하는 메서드가 맞나요? 이렇게 따로 메서드를 구현해주는 이유가 있나요? CASCADE 옵션을 사용하면 어차피 알아서 다 해주지 않나요 ?? 기본편에서 설명해주셨다고 했는데 어떤 강의를 다시 수강해보면 될까요 ? 지연로딩에서 ***ToMany의 디폴트는 Lazy고, ***ToOne의 디폴트는 Eager인 이유가 ***ToMany같은 경우 하나만 불러와도 기본적으로 수많은 값이 따라오기 때문에 스프링 측에서 Lazy로 해놓았고, (Member의 Order을 조회하면 수많은 Order이 자동으로 따라오기 때문에 디폴트가 Lazy) ***ToOne의 경우 객체 하나만 조회하면 쿼리문을 하나밖에 더 날리지 않기 때문에 Eager로 해놓았지만, 실무에서는 테이블 전체를 조회할 때가 있기 때문에 디폴트값인 Eager를 쓰지 않고 Lazy를 사용한다 이게 맞을까요? (Order하나만 조회하면 Member 1개만 따라오기때문에 디폴트가 Eager지만, select o from Order o 와 같은 쿼리문으로 Order를 전체 조회했을 때는 Order에 따른 멤버가 전부 따라오므로 그냥 Lazy 옵션을 준다) 이렇게 이해했는데 맞을까요?
- java
- spring
- 웹앱
- spring-boot
- jpa
댓글 1
좋아요 0
조회수 668
엔티티와 테이블 설계 및 Category 클래스 질문입니다
미해결
실전! 스프링 부트와 JPA 활용1 - 웹 애플리케이션 개발
기본편에서 관계에 따른 연관관계 설정하는 방법은 공부했는데, 위와 같은 기능 목록을 보고 기능목록을 보고 위와 같이 어떤 도메인을 써야 할지, 도메인끼리 1:N인지, N:N인지, 1:1인지 단방향인지, 양방향인지(실무에서는 N:N과 양방향은 지양하라고 하셨지만) 등 도메인 모델과 테이블 설계가 어렵다면 무엇을 참고하는 것이 좋을까요 ? ( 영한님이 분석해 놓은 회원 엔티티와 회원 테이블을 보고 코드를 작성할 순 있는데 스스로 회원 엔티티와 테이블을 분석하기가 너무 어렵습니다.) Category 클래스 안에서 스스로 일대다 관계를 맺고 있는데 이것은 무엇을 위해 만든건가요 ?
- java
- spring
- 웹앱
- spring-boot
- jpa
댓글 1
좋아요 0
조회수 1048
Category - Item 관계
미해결
실전! 스프링 부트와 JPA 활용1 - 웹 애플리케이션 개발
카테고리 : 과일, 빨강, 노랑 // 아이템 : 사과, 배, 체리 이렇게 존재할 때 ================== 과일 -> 사과 배 체리 빨강 -> 사과 체리 노랑 -> 배 ================== 사과 -> 과일 빨강 배 -> 과일 노랑 체리 -> 과일 빨강 ================== 사과(아이템)같은 경우 과일과 빨강이라는 카테고리에 속해있고, 과일(카테고리)같은 경우 사과 배 체리라는 아이템이 속해있기 때문에 다대다 관계가 맞나요?
- java
- spring
- 웹앱
- spring-boot
- jpa
댓글 1
좋아요 0
조회수 429
static/index.html 은 Mapping을 안해줬는데도 되는 이유가 무엇인가요 ?
미해결
실전! 스프링 부트와 JPA 활용1 - 웹 애플리케이션 개발
@GetMapping("/") public String index() { return "index"; } 이런 소스 없이 자동으로 localhost:8080 들어가면 Index.html로 연결되는 이유가 무엇일까요?
- java
- spring
- 웹앱
- spring-boot
- jpa
댓글 1
좋아요 0
조회수 1173
애니메이트 css 질문입니다.
미해결
조코딩의 코딩 기초와 웹 풀스택 개발
애니메이트 css에서class="animate__animated animate__bounce" 따서 불여넣기 했는데 바운스가 안걸립니다. 조코딩님 강의에는 버튼 타입이 걸려있는데 이건 어떻게 적용하는지요,,?
- HTML/CSS
- javascript
- node.js
- web-api
콩룡
댓글 1
좋아요 0
조회수 425
첫번째 querydsl테스트 코드 에서 nullpointexception이 터졌습니다
미해결
실전! 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"); } }
- java
- jpa
- querydsl
최형택
댓글 2
좋아요 0
조회수 448
영속성 컨텍스트 질문입니다.
미해결
자바 ORM 표준 JPA 프로그래밍 - 기본편
3:58초 경에 findMember.setAge(20)으로 결과가 바뀌면 영속성 컨텍스트에 관리가 되는 거고, 안바뀌면 관리가 되지 않는다라는데 이유가 뭔가요 ? JPA가 DB의 데이터에 접근하고 수정하고 작성,삭제 할 수 있다 = 영속성 컨텍스트가 관리한다 같은 말일까요 ?
- java
- jpa
댓글 1
좋아요 0
조회수 389
안녕하세요 git 설치 오류입니다.
미해결
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
git 설치 이후 vscode에서 터미널 변환이 안될때 git 최신버전 설치 완료 vscode 재실행 완료 터미널 1개 추가 후 git bash로 변환시 목록에 안보임
- HTML/CSS
- javascript
- react
- node.js
- react-native
- 머신러닝
- express
- tensorflow
Jaesung Seo
댓글 1
좋아요 0
조회수 720
일대다 관계에서의 값타입 질문입니다.
미해결
자바 ORM 표준 JPA 프로그래밍 - 기본편
@OneToMany @JoinColumn(name = "MEMBER_ID") private Order order; @OneToMany @JoinColumn(name = "MEMBER_ID") private List<Order> orders; 두개가 무슨 차이가 있는지 궁금합니다. 일대다 관계라면 컬렉션을 안써도 되지 않나요?
- java
- jpa
댓글 1
좋아요 0
조회수 534
Integer 타입 질문입니다
미해결
자바 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라는 말이 무슨 말일까요 ?
- java
- jpa
댓글 1
좋아요 0
조회수 700
즉시로딩과 지연로딩의 성능 차이에 대해 궁금합니다.
미해결
자바 ORM 표준 JPA 프로그래밍 - 기본편
Member와 Team을 예로 생각했을 때 즉시로딩 -> Member만 필요해도 Team과 쿼리문이 같이 나감 지연로딩 -> Member만 불러오고, Team은 프록시 객체로 불러와서, Team이 필요할 때 영속성 컨텍스트에 연결을 요청하고 요청 쿼리문이 나가는 것이 맞나요 ? Member.getTeam().getName()을 1번 수행한다고 했을 때 즉시로딩 (Member + Team 쿼리문 같이)의 성능이 지연로딩 ( Member 쿼리문 따로, Team 쿼리문 따로)보다는 좋지만 강의에서 나온 여러가지 문제로 웬만해서는 지연로딩을 사용하는 것이 더 좋다. 이것이 맞나요?
- java
- jpa
댓글 1
좋아요 0
조회수 414
별점주기 첫번째에서 nextAll이 적용안됩니다.
미해결
HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
prevAll속성은 잘 들어가지는데 그 다음에 넣은 nextAll 속성이 동작을 안하네요.. 코드도 다 똑같이 넣고 오타도 없는데 어디를 수정해야하나요...?
- HTML/CSS
- jquery
gm021716
댓글 2
좋아요 1
조회수 314
상품 등록
미해결
실전! 스프링 부트와 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 입니다
- java
- spring
- 웹앱
- spring-boot
- jpa
댓글 1
좋아요 1
조회수 687
Item - OrderItem 관계 및 양방향관계?
미해결
자바 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을 참고하는 것이 같은 맥락이라고 생각하는데 전자는 잘못된 설계고 후자는 괜찮은 설계인 이유는 무엇일까요?
- java
- jpa
댓글 1
좋아요 1
조회수 955
외래키의 위치?에 관해 질문입니다.
미해결
자바 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
- jpa
댓글 1
좋아요 0
조회수 585
정답오류가 있는것 같습니다.
해결됨
자바(Java) 알고리즘 문제풀이 입문: 코딩테스트 대비
안녕하세요 선생님 다름이 아니라 제가 작성한 코드가 정답처리가 되었는데 이 코드는 정답이 되면 안되는 코드가 아닌가 해서 여쭤보고 싶어서 질문글 남깁니다. 예를들면 첫번째 문제에서는 CBA 순서로 무조건 짜야하지만 제 코드에서 str1 은 꼭 순서를 지켜야 하는 값이고 str2는 C의 순서를 알 수 없는데 정답처리가 되어서 제가 작성한 코드가 제대로 정답이 맞는건지 궁금해서 질문글을 남깁니다!
- java
- 코딩-테스트
hong090992
댓글 1
좋아요 0
조회수 511
HTML 유효성 검사에서 오류가 나옵니다.
미해결
[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() })
- HTML/CSS
- jquery
- 웹-디자인
bimil1121
댓글 1
좋아요 1
조회수 498
인프런은 질문을 안받아주시나요?
미해결
조코딩의 코딩 기초와 웹 풀스택 개발
ㅠㅠㅠ
- HTML/CSS
- javascript
- node.js
- web-api
조현성
댓글 1
좋아요 0
조회수 609
인기 태그
인프런 TOP Writers
- 정현섭 8
- 닉네임 5
- eggmun(문성진) 4
- 박영준 4
- 김보노 3
- Like me black 3
- 꿈이 있는 자유 3
주간 인기글
- 🚀 IT 공부는 했는데 왜 아직도 안 될까요? | AI와 함께 실무 중심 IT 모임 🤖 NOESIS
- 🚀 IT 공부는 했는데 왜 아직도 안 될까요? | AI와 함께 실무 중심 IT 모임 🤖 NOESIS
- 🚀 끝까지 만들어 본 적 있나요? | 실서비스 완성 + 수익 창출 모임 💰 catalyst collectiv
- 🚀 IT 공부는 했는데 왜 아직도 안 될까요? | AI와 함께 실무 중심 IT 모임 🤖 NOESIS
- 🚀 끝까지 만들어 본 적 있나요? | 실서비스 완성 + 수익 창출 모임 💰 catalyst collectiv