172만명의 커뮤니티!! 함께 토론해봐요.
미해결
자바 ORM 표준 JPA 프로그래밍 - 기본편
학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) [질문 내용] 안녕하세요. 간단한 내용이지만 조금 고민이 있어서 질문드립니다. 요청을 통해서 받은 데이터를 통해서나 로직상에서 연관관계에 필요한 Entity의 id값을 알고 있는 경우 필요한 Entity를 DB에서 조회하는 과정 없이 id값만 초기화된 Entity를 생성하여 주입하는 방식이 가능한 것으로 알고 있습니다. 이 때, 그렇게 주입된 Entity는 persist된 상태가 아니라는 점인데요. ( cascade 옵션이 적용 안 되었다는 가정 ) 이런 경우에 두 가지 경우의 수를 고려하였습니다. 첫 번째는 연관관계 Entity가 연관관계 설정 외에는 사용될 일이 없는 로직의 경우이고 두 번째는 연관관계에 필요한 Entity가 이후에도 여러 로직에서 사용되는 경우입니다. 두 번째의 경우에는 사실 고민할 것 없이 ID를 이용해 Entity를 생성하는 것이 아닌 SELECT를 통해서 Entity를 조회하여 사용하는 것이 좋은 방법이고 EntityGraph를 맞추는 면에서도 당연히 해주어야 하는 것으로 사료됩니다. 하지만 첫 번째의 경우 굳이 Entity를 ID값을 통해 조회하는 과정이 필요한 지에 대한 의문입니다. 저런 단순한 로직의 경우 굳이 DB와의 정합성을 위해 조회 및 연관관계 편의메소드 등을 이용해서 EntityGraph를 맞춰줄 필요가 있나 싶었습니다. 이런 경우에서 실제 현업에서는 어떤식으로 처리하는 지 궁금합니다. 저렇게 각 상황에 따라 효율을 따져서 다르게 처리하는 지 아니면 ID를 통해 데이터를 조회하는 것은 크게 성능상 문제가 되지 않으니 불필요하더라도 로직의 통일성이나 혹시 모를 사이드 이펙트를 대비해서 조회한 뒤 연관관계 편의 메소드를 통해 EntityGraph까지 맞춰 주는 지 궁금합니다..! 저는 불필요하다고 생각하여 굳이 Entity그래프를 맞춰줄 필요가 없는 경우는 그런 과정을 생략하며 프로젝트를 하고 있었는데, 완성하고 보니 EntityGraph를 맞춰 주는 로직이 단 하나도 없는 걸 알게 되었습니다. 아무래도 복잡한 비즈니스 로직이 없어서 그럴 수도 있겠다는 생각은 들었지만 너무 심한 것 같아 제가 JPA를 제대로 쓰고 있는 게 맞나 싶어 질문드립니다..ㅠㅠ
공부용
2023-11-23T13:27:54.037Z
댓글 1
좋아요 0
조회수 462
미해결
따라하며 배우는 HTML, CSS
코드에서는 Position : fixed; Left : 0; Bottom : 0; 으로 주셨는데, 저는 이렇게 하니까 사이드바가 아래에 붙어요. Bottom 0을 삭제하니까 강의처럼 위쪽에 붙어있어요. 선생님 강의에서는 bottom 0을 줬는데 어떻게 위에 있는거죠? 그리고 색상코드는 6자리 알파벳, 숫자로만 나타낸다고 알고 있는데 212121FF는 뭔가요? 그냥 212121과 다른 점이 뭔지 궁금합니다.
이다경
2023-11-23T13:23:02.209Z
댓글 1
좋아요 0
조회수 378
미해결
초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
안녕하세요 선생님, 같은 방식으로 날짜 대신 오늘 시간까지 "시간"이 롤링되며 카운팅되는 효과로 적용해볼 수 있을까요??
HTML/CSS javascript jquery 인터랙티브-웹
JJJ
2023-11-23T13:02:03.834Z
댓글 1
좋아요 0
조회수 405
미해결
스프링 시큐리티
Cookie 값을 삭제 하며 여러 동작을 해보던 도중, 로그인을 하기 전부터 JSSESSIONID 값이 cookie 에 들어가 있는 것을 확인하였습니다. 처음에는 오류인가 싶어 값을 삭제하고 로그인하였더니, 로그인이 동작하지 않고 그냥 페이지가 reload 된 다음 임의의 JSSESSIONID 값을 가져왔습니다. 왜 reload 할 때마다 JSSESSIONID 값을 가져오는 걸까요? 그리고 왜 JSSESSIONID 값 없이는 로그인 동작 자체가 안 되는 걸까요?
java spring-boot spring-security
정재빈
2023-11-23T04:48:31.928Z
댓글 2
좋아요 0
조회수 501
해결됨
실전! Querydsl
plugins { id 'java' id 'org.springframework.boot' version '3.1.5' id 'io.spring.dependency-management' version '1.1.3' id "com.ewerk.gradle.plugins.querydsl" version "1.0.10" } group = 'study' version = '0.0.1-SNAPSHOT' java { sourceCompatibility = '17' } configurations { compileOnly { extendsFrom annotationProcessor } } repositories { mavenCentral () } dependencies { implementation 'org.springframework.boot:spring-boot-starter-data-jpa' implementation 'org.springframework.boot:spring-boot-starter-web' compileOnly 'org.projectlombok:lombok' runtimeOnly 'com.h2database:h2' annotationProcessor 'org.projectlombok:lombok' testImplementation 'org.springframework.boot:spring-boot-starter-test' implementation 'com.querydsl:querydsl-jpa:5.0.0:jakarta' annotationProcessor "com.querydsl:querydsl-apt: $ { dependencyManagement.importedProperties [ 'querydsl.version' ]} :jakarta" annotationProcessor "jakarta.annotation:jakarta.annotation-api" annotationProcessor "jakarta.persistence:jakarta.persistence-api" testImplementation 'com.querydsl:querydsl-jpa:5.0.0:jakarta' } tasks. named ( 'test' ) { useJUnitPlatform () } clean { delete file ( 'src/main/generated' ) } tasks. named ( 'bootBuildImage' ) { builder = 'paketobuildpacks/builder-jammy-base:latest' } tasks. named ( 'test' ) { useJUnitPlatform () } //querydsl 세팅 시 def querydslDir = " $buildDir /generated/querydsl" querydsl { jpa = true querydslSourcesDir = querydslDir } sourceSets { main.java. srcDir querydslDir } configurations { querydsl. extendsFrom compileClasspath } compileQuerydsl { options.annotationProcessorPath = configurations. querydsl } 인프런에서 질문 & 답변을 보고 gradle 설정했는데도 오류가 계속 발생됩니다. Build and run using : Gradle 로 변경하면 발생 되는 오류 입니다. 오류 : Attempt to recreate a file for type study.querydsl.entity.QHello
Jun
2023-11-23T01:32:57.461Z
댓글 1
좋아요 0
조회수 3103
미해결
비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
터미널에 이렇게만 뜨는데 어떻게 해야할까요? 화면에 잘린 하단에도 특별한건 없습니다
HTML/CSS javascript aws git mysql
밍ㅇ밍
2023-11-22T17:05:36.489Z
댓글 3
좋아요 0
조회수 541
미해결
비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
지금은 마커만 눌르면 해당 정보만 보이는데, 마커를 눌렀을때 html안에 해당 음식점의 상세 페이지 정보를 만들어보려고 하는데.. 너무 막막해서요.. 이럴때는 어찌해야 할지 조금 말씀 부탁드려도 될까요?
HTML/CSS javascript aws git mysql rest-api github
퀀텀코더
2023-11-22T16:52:10.848Z
댓글 1
좋아요 0
조회수 265
해결됨
[코드캠프] 시작은 프리캠프
피그마에서는 번호와 곡명이 붙어 있어 밑에 노래 제목들이 깔끔하게 정렬되어있는데 수업시간에서는 곡명과 번호를 붙이지 않더라구요 이부분은 어떻게 해야 할까요? 강의에서 보면 따로 th부분을 제어하지 않던데, 4개의 열이 차지하는 공간은 어떻게 지정이 되는건지 원리가 궁금합니다!
지 민
2023-11-22T11:15:28.936Z
댓글 2
좋아요 0
조회수 346
해결됨
처음 만난 리액트(React)
안녕하세요 선생님 현재 chapter_03 진행 중인데요, jsx 실습 진행중인데, 제 코드는 이렇구요, jsx는 이렇게 작성하였습니다. 그리고 npm start로 react-app 실행 시 요렇게 한글이 깨지는데요 혹시 해결 방안을 알 수 있을까요?
김현수
2023-11-22T02:45:13.139Z
댓글 1
좋아요 1
조회수 590
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
B유형 세로슬라이드 실습중에 오류가 있어 문의 드립니다. 마크업은 다 맞는 것 같은데 아예 움직이지를 않아요... 오늘 시험인데 갑자기 안되서 너무 속상합니다ㅠㅠ <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>웹디자인기능사(유형B)</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <div class="header-inner"> <header> <div class="header-logo"></div> <div class="navi"></div> </header> </div> <div class="content-inner"> <div class="slide"> <div class="slide-items"> <a class="slide-item" href="#none"><img src="images/slide-01.jpg" alt="slide-01"></a> <a class="slide-item" href="#none"><img src="images/slide-02.jpg" alt="slide-02"></a> <a class="slide-item" href="#none"><img src="images/slide-03.jpg" alt="slide-03"></a> </div> </div> <div class="items"> <div class="news"></div> <div class="banner"></div> <div class="shortcut"></div> </div> </div> <div class="footer-inner"> <footer> <div class="footer-logo"></div> <div class="copyright"></div> <div class="sns"></div> </footer> </div> </div> </body> </html> @charset "utf-8"; body { margin: 0; } .container {} .header-inner { background-color: #eee; display: flex; justify-content: center; } header { border: 1px solid #000; width: 1200px; display: flex; justify-content: space-between; } header > div { border: 1px solid #000; height: 100px; } .header-logo { width: 200px; } .navi { width: 600px; } .content-inner {} .slide { width: 1200px; margin: auto; } .slide > div { border: 1px solid #000; height: 300px; } .items { width: 1200px; display: flex; margin: auto; } .items > div { border: 1px solid #000; height: 200px; } .news { width: 500px; } .banner { width: 350px; } .shortcut { width: 350px; } .footer-inner { background-color: #ddd; display: flex; justify-content: center; } footer { width: 1200px; display: flex; } footer > div { border: 1px solid #000; height: 100px; } .footer-logo { width: 200px; } .copyright { width: 1000px; } .sns { width: 200px; } /* Slide */ .slide { position: relative; height: 300px; font-size: 0; } .slide-items { position: absolute; top: 0; left: 0; } .slide-item {} /* Slide */ // setInterval(콜백함수, 시간) // animate({속성값}, 콜백함수) setInterval(function(){ $('.slide-items').animate({top: '-300px'}, function(){ $('.slide-items').css({top: 0}) $('.slide-item:first-child').appendTo('.slide-items') }) }, 3000)
HTML/CSS jquery 웹-디자인 세로슬라이드 슬라이드오류
shinmile922
2023-11-21T19:47:25.636Z
댓글 2
좋아요 1
조회수 373
미해결
재고시스템으로 알아보는 동시성이슈 해결방법
안녕하세요 강사님 강의를 보고 토이 프로젝트에서 주문 시 재고 감소 및 메뉴 주문량 증가 로직에서 낙관적락 기법을 적용해 보았는데요, 강의에서 해주신 내용 그대로 파사드 패턴 까지 적용을 해보면서 시도했는데 무한 루프가 돌았습니다. hikariCP pool을 40으로 설정해주니 그제서야 해결이 되었는데요, 강의에선 네임드락에서 커넥션풀을 지정해주었는데요 저는 낙관적락인데도 해당 설정을 해서 해결된 이유가 있을까요? @Service @RequiredArgsConstructor public class OrderService { @Transactional public Order orderWithOptimisticLock(Long memberId, LocalDateTime now) { Cart cart = cartRepository.findByMember(memberId); List<CartItem> cartItems = cart.getCartItems(); cartItems.stream() .map(CartItem::getMenu) .forEach(menu -> { decreaseStockWithOptimisticLock(menu.getId(), 1); increaseMenuOrderCountWithOptimisticLock(menu.getId(), 1); }); Money money = calculator.calculateMenus(cart.getMember(), cart.convertToMenus()); Order order = Order.createOrder(cart, money, now); return orderRepository.save(order); } public void decreaseStockWithOptimisticLock(Long menuId, int quantity) { Menu menu = menuRepository.findByIdForOptimisticLock(menuId); menu.decrease(quantity); } public void increaseMenuOrderCountWithOptimisticLock(Long menuId, int quantity) { Menu menu = menuRepository.findByIdForOptimisticLock(menuId); menu.increaseOrderCount(quantity); } } ``` @Component @RequiredArgsConstructor public class OptimisticLockStockFacade { private final OrderService orderService; public Order order(Long memberId, LocalDateTime localDateTime) throws InterruptedException { while (true) { try { return orderService.orderWithOptimisticLock(memberId, localDateTime); } catch (Exception e) { Thread.sleep(50); } } } } ``` public interface JpaMenuRepository extends JpaRepository<Menu, Long> { @NotNull @Lock(LockModeType.OPTIMISTIC) @Query("select m from Menu m where m.id = :id") Optional<Menu> findByIdForOptimisticLock(@NotNull @Param("id") Long id); }
하윤
2023-11-21T13:37:04.672Z
댓글 2
좋아요 0
조회수 647
해결됨
[코드캠프] 시작은 프리캠프
선생님과 똑같이 코드를 입력했는데 계속해서 정의되지 않은 단어라고 뜨면서 코드가 실행되지 않습니다. 이부분에서 뭐가 문제인지 잘 모르겠는데 알려주시면 감사하겠습니다
지 민
2023-11-21T11:01:34.790Z
댓글 2
좋아요 0
조회수 247
미해결
비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
const {studentName} = req.query; const {studentIdx} = req.params; 여기서 req.query와 req.params의 차이가뭔가요?
HTML/CSS javascript aws git mysql rest-api github
퀀텀코더
2023-11-21T09:27:26.024Z
댓글 1
좋아요 0
조회수 245
미해결
비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
들어가서 찾아보고 싶은게 있는데 새소식에 없어져서요..
HTML/CSS javascript aws git mysql rest-api github
퀀텀코더
2023-11-21T09:21:18.656Z
댓글 1
좋아요 0
조회수 257
미해결
자바(Java) 알고리즘 문제풀이 입문: 코딩테스트 대비
앞 문제에서 Collection.sort를 쓰면 문제에서 효율적이지 못하다는 댓글을 봐서 처음부터 Array.sort를 해서 정렬하는 방법을 생각을 못했는데 어떤 문제에선 사용하고 사용하지말고 구분이잘 안되는데 이럴땐 어떻게 하나요...
이주용
2023-11-21T06:45:30.606Z
댓글 1
좋아요 0
조회수 385
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
안녕하세요. 우측고정 네비게이션에서 'Sub-menu' 부분에 높이 200px을 줬는데 크기 늘어나지 않아 문의 드립니다. <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>C2_세로슬라이드, 네비(왼쪽개별우측고정)</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <div class="left"> <header> <div class="header-logo"></div> <div class="navi"> <ul class="menu"> <li> <a class="open-modal" href="#none">협회소개</a> <div class="sub-menu"> <a href="#none">인사말</a> <a href="#none">명인</a> <a href="#none">오시는길</a> </div> </li> <li> <a href="#none">행사안내</a> <div class="sub-menu"> <a href="#none">요리경연대회</a> <a href="#none">전시참가</a> <a href="#none">참가신청</a> </div> </li> <li> <a href="#none">홍보마당</a> <div class="sub-menu"> <a href="#none">축제소식</a> <a href="#none">보도자료</a> <a href="#none">레시피</a> </div> </li> <li> <a href="#none">회원마당</a> <div class="sub-menu"> <a href="#none">Q&A</a> <a href="#none">사진갤러리</a> <a href="#none">공지사항</a> </div> </li> </ul> </div> </header> </div> <div class="right"> <div class="slide"> <div class="slide-items"> <a class="slide-item" href="#none"><img src="images/slide-01.jpg" alt="slide-01"></a> <a class="slide-item" href="#none"><img src="images/slide-02.jpg" alt="slide-02"></a> <a class="slide-item" href="#none"><img src="images/slide-03.jpg" alt="slide-03"></a> </div> </div> <div class="items"> <div class="news"></div> <div class="gallery"></div> <div class="shortcut"></div> </div> <footer> <div class="copyright"></div> <div class="footer-content"> <div class="sns"></div> <div class="family-site"></div> </div> </footer> </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 { text-decoration: none; color: inherit; } /* Entire Layout */ .container { display: flex; } .container > div { border: 1px solid #000; } .left { width: 200px; } .right { width: 800px; } header { position: relative; z-index: 1000; } header > div { border: 1px solid red; } .header-logo { height: 100px; } .navi { height: 400px; } /* Slide */ .slide { position: relative; width: 800px; height: 350px; overflow: hidden; } .slide > div { border: 1px solid #000; height: 350px; } .slide-items { font-size: 0; position: absolute; top: 0; left: 0; } .items { display: flex; } .items > div { border: 1px solid #000; height: 200px; } .news { width: 300px; } .gallery { width: 250px; } .shortcut { width: 250px; } footer { display: flex; } footer > div { border: 1px solid #000; height: 100px; } .copyright { width: 600px; } .footer-content { width: 200px; } .footer-content div { border: 1px solid #000; height: 50px; } .sns {} .family-site{} /* Navigation */ .menu { width: 90%; margin: auto; list-style: none; padding: 0; padding-top: 10px; position: relative; } .menu li { text-align: center; border: 1px solid #000; } .menu li > a { padding: 5px; display: block; border: 1px solid #000; transition: 0.5s; } .menu li:hover > a { background-color: #000; color: #fff; } .sub-menu { display: none; width: 100%; height: 200px; position: absolute; top: 0; left: 100%; } .sub-menu a { padding: 6px; display: block; background-color: #000; color: #fff; transition: 0.5s; } .sub-menu a:hover { background-color: #fff; color: #000; } /* Slide */ // setInterval(콜백함수, 시간) // animate({속성값}, 콜백함수) setInterval(function(){ $('.slide-items').animate({top: '-350px'}, function(){ $('.slide-items').css({top: 0}) $('.slide-item:first-child').appendTo('.slide-items') }) }, 3000) /* Navigation */ $('.menu li').mouseenter(function(){ $(this).children('.sub-menu').stop().slideDown() }) $('.menu li').mouseleave(function(){ $(this).children('.sub-menu').stop().slideUp() })
HTML/CSS jquery 웹-디자인 네비게이션 네비게이션오류 우측고정형
shinmile922
2023-11-21T04:03:37.539Z
댓글 1
좋아요 1
조회수 231
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
안녕하세요. B4 실습 중에 안되는 기능이 있어 문의 드립니다. appendTo 기능이 작동하지 않습니다. 어떻게든 해결 해보려고 클래스네임, 점 하나까지 다 확인 했는데 도저히 모르겠어서 질문 남겨요. 되던게 안되니까 너무 당황스러워요... <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>B4_슬라이드 최종본</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <div class="header-inner"> <header> <div class="header-logo"></div> <div class="navi"></div> </header> </div> <div class="content-inner"> <div class="slide"> <div class="slide-items"> <a class=".slide-item" href="#none"><img src="images/slide-01.jpg" alt="slide-01"></a> <a class=".slide-item" href="#none"><img src="images/slide-02.jpg" alt="slide-02"></a> <a class=".slide-item" href="#none"><img src="images/slide-03.jpg" alt="slide-03"></a> </div> </div> <div class="items"> <div class="news"></div> <div class="gallery"></div> <div class="banner"></div> </div> </div> <div class="footer-inner"> <footer> <div class="footer-content"> <div class="footer-menu"></div> <div class="copyright"></div> </div> <div class="family-site"></div> </footer> </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 { text-decoration: none; color: inherit; } /* Entire Layout */ .container {} .header-inner { background-color: #eee; display: flex; justify-content: center; } header { border: 1px solid #000; display: flex; justify-content: space-between; width: 1200px; } header > div { border: 1px solid #000; height: 100px; } .header-logo { width: 200px; } .navi { width: 600px; } .content-inner {} /* Slide */ .slide { position: relative; width: 1200px; height: 300px; margin: auto; } .slide > div { border: 1px solid #000; } .slide-items { width: 3600px; font-size: 0; position: absolute; top: 0; left: 0; } .items { width: 1200px; display: flex; margin: auto; } .items > div { border: 1px solid #000; height: 200px; } .news { width: 400px; } .gallery { width: 400px; } .banner { width: 400px; } .footer-inner { background-color: #ddd; display: flex; justify-content: center; } footer { display: flex; } footer > div { border: 1px solid #000; height: 100px; } .footer-content { width: 1000px; } .footer-content > div { border: 1px solid #000; height: 50px; } .footer-menu {} .copyright {} .family-site { width: 200px; } /* slide */ // setInterval(콜백함수, 시간) // animate({속성값}, 콜백함수) setInterval(function(){ $('.slide-items').animate({left: '-1200px'}, function(){ $('.slide-items').css({left: 0}) $('.slide-item:first-child').appendTo('.slide-items') }) }, 3000)
HTML/CSS jquery 웹-디자인 appendto오류 jquery오류 슬라이드오류 가로슬라이드
shinmile922
2023-11-19T09:04:59.051Z
댓글 3
좋아요 1
조회수 341
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
애니메이션 효과 animation: slide 10s linear infinite;로 주라고 하셨는데 어떤 강의에선 .animate 속성으로 주라고 하는데 무슨 차이이고 어느 것이 맞습니까?
HL5PFM
2023-11-18T22:47:15.047Z
댓글 1
좋아요 1
조회수 323
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
현재 E1 실습 중에 안되는 부분이 있어 문의 드립니다. CSS에서 'shortcut-01' 이미지 조절 중인데 사이즈가 안줄어들어요.ㅠㅠ 왜이럴까요..? <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>E1_최종본_영상시청</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/header-logo.png" alt="header-logo"></a> </div> <div class="navi"></div> <div class="spot-menu"> <a href="#non3">로그인</a> <span>l</span> <a href="#non3">회원가입</a> </div> </header> </div> <div class="content"> <div class="shortcut"> <a class="shortcut-image" href="#none"><img src="images/shortcut-01.png" alt="shortcut-01"></a> <h3>얼리버드 선착순 할인 이벤트, 신규강의 최대 30% 할인</h3> <p>12월은 사랑의 달~ 코딩웍스에서 여러분께 사랑을 뿌려요~ 12월 개강반을 12월 06일까지 접수하는 분들께는 15%~ 20% 의 얼리버드 할인을 제공합니다.<br>더불어 소중한 리뷰를 꼼꼼히 남겨주시는 분들을 뽑아 더 큰 적립금을 추가지급해 드릴 예정이오니 리뷰도 놓치지 마시고 작성해주세요~^^<br> <b>기간: 2022년 12월 18일~ 12월 25일</b></p> <a href="#none"><img src="images/shortcut-02.png" alt="shortcut-02"></a> </div> <div class="news"></div> <div class="gallery"></div> <div class="banner"> <a href="#none"><img src="images/banner-01.png" alt="banner-01"></a> <a href="#none"><img src="images/banner-02.png" alt="banner-02"></a> <a href="#none"><img src="images/banner-03.png" alt="banner-03"></a> <a href="#none"><img src="images/banner-04.png" alt="banner-04"></a> </div> </div> <div class="right"> <div class="slide"> <div class="slide-image"> <div class="slide-items"> <a class="slide-item" href="#none"><img src="images/slide-e-01.jpg" alt="slide-e-01"></a> <a class="slide-item" href="#none"><img src="images/slide-e-02.jpg" alt="slide-e-02"></a> <a class="slide-item" href="#none"><img src="images/slide-e-03.jpg" alt="slide-e-03"></a> </div> </div> </div> </div> </div> <footer> <div class="footer-logo"> <a href="#none"><img src="images/footer-logo.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> </div> <div class="copyright"> <p>상호 : (주)코딩웍스 | 대표자 : 홍길동 | 개인정보관리책임자 : 성춘향 부장 사업장주소 : 경기도 남양주시 별내동 1234 코딩웍스 빌딩 6층 (주)코딩웍스</p> </div> </div> </footer> </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 { text-decoration: none; color: inherit; } /* Entire Layout */ .container {} .main-content { display: flex; } .main-content > div { border: 1px solid #000; } .left { width: 200px; } .content { width: 400px; } .right { width: calc(100% - 600px); } header {} header > div { border: 1px solid red; } .header-logo { height: 100px; } .navi { height: 400px; } .spot-menu { height: 50px; text-align: center; } .content {} .content > div { border: 1px solid blue; } /* Shortcut */ .shortcut { height: 150px; display: flex; } .shortcut .shortcut-image { height: 80px; } /* News & gallery */ .news { height: 250px; } .gallery { height: 250px; } .banner { height: 150px; display: flex; } .banner img { width: 100% } /* Slide */ .slide { display: flex; } .slide-image { flex: 1; height: calc(100vh - 120px); position: relative; overflow: hidden; } /* Slide Animation */ .slide-items { width: 300%; height: inherit; font-size: 0; position: absolute; } .slide-items a { display: inline-block; height: inherit; width: calc(100% / 3); } .slide-items a img { width: 100%; height: inherit; object-fit: cover; } footer { display: flex; } footer > div { border: 1px solid green; height: 120px; } .footer-logo { width: 200px; } .footer-content { width: calc(100% - 200px); } .footer-content div { border: 1px solid #000; height: 60px; } .footer-link {} .footer-link a:after { content: 'l'; margin-left: 5px; } .footer-link a:last-child::after { display: none; } .copyright {}
HTML/CSS jquery 웹-디자인 e유형 이미지사이즈 이미지사이즈오류
shinmile922
2023-11-18T03:44:09.676Z
댓글 1
좋아요 1
조회수 317
미해결
따라하며 배우는 HTML, CSS
영상 자료를 다운받았는데 1쪽만 보이고 나머지는 보이지가 않습니다.
africa667
2023-11-17T15:49:11.467Z
댓글 1
좋아요 0
조회수 394
