inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

엔티티 매니저 동시성

미해결

자바 ORM 표준 JPA 프로그래밍 - 기본편

학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) 일반적으로 스프링 컨테이너는 싱글톤 기반으로 동작하기에 빈은 모든 쓰레드가 공유합니다. 그런데@PersistenceContext을 통해 주입 받은 EntityManager는 동시성 문제가 발생하지 않는다고 해서 의문이 생겼습니다. 따라서 관련된 내용을 공부하던 중 아래 질문의 영한님 답변을 봤습니다. https://www.inflearn.com/questions/158967/%EC%95%88%EB%85%95%ED%95%98%EC%84%B8%EC%9A%94-entitymanager%EC%97%90-%EB%8C%80%ED%95%B4-%EA%B6%81%EA%B8%88%ED%95%9C-%EC%A0%90%EC%9D%B4-%EC%9E%88%EC%96%B4-%EC%A7%88%EB%AC%B8-%EB%82%A8%EA%B9%81%EB%8B%88%EB%8B%A4 제가 이해한 바로는 private final EntityManager em;를 통해 주입 받은 엔티티매니저는 싱글톤 빈이지만 일반적인 빈들과는 다릅니다. 공통점 : 일반적인 스프링 빈과 엔티티 매니저는 모두 프록시 객체를 주입받는다. 그리고 이는 모두 싱글톤이다. 차이점 : 일반적인 스프링 빈은 호출될때마다 에플리케이션 전체를 대상으로 해당 빈이 스프링 컨테이너에 등록되어 있는지 찾고 있으면 스프링 컨테이너에서 찾아 반환, 없으면 빈을 생성하고 등록(CGLIB 기술) 반면 엔티티매니저는 이해가 가지 않습니다. 책 581 페이지를 보면 A, B 코드에서 호출한 엔티티 매니저는 서로 다르며 , 582에서 멀티 쓰레드에서 같은 코드에서 호출한 엔티티 매니저는 서로 같습니다. 일반적인 싱글톤 빈들이나 엔티티 매니저 모두 싱글톤이며 프록시 객체를 주입 받는 것 같은데 그 안의 원리들이 조금 다른 것 같은데 이 점이 궁금합니다.

  • jpa
  • JPA
  • java
소니소니 댓글 1 좋아요 0 조회수 654

String 문자열, String[] 배열에서의 .length, .length(), .charAt() 쓰임의 차이점을 알고 싶습니다 :)

해결됨

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

안녕하세요, 다름이 아니라 제가 나도코딩 자바(Java) 기본편을 공부하면서, 배열(Array)에 관해 모르는 것이 생겨서 이렇게 질문을 남깁니다. 일반적으로 배열이 String[] array = {...}; 이렇게 선언 되었을 때, array.length를 이용 해서 배열의 길이를 파악하고, array[0] 처럼 이렇게 인덱스로 값의 위치를 파악 하면서 데이터를 읽는다고 알고 있습니다. 반면에 String sentence = "sentence"; 이런 경우에는 같은 length를 쓰지만 String 클래스의 메소드라서 괄호를 나타낸 sentence.length()로 길이를 파악 하고, "..."; 안 문장의 각 글자 별 위치를 파악할 때는 sentence.charAt()을 쓴다 고 알고 있습니다. 제가 이해한 부분이 혹시 맞을까요? 또한 아래처럼 선언된 String[] 배열에서: String[] Java = { "나는 자바가 좋아요" }; Java 배열의 전체 길이를 파악하고 싶다면, Java.length 으로 적는데, 만약 배열 안 문장 "나는 자바가 좋아요" 의 전체 길이를 알고 싶다면 Java[].length()으로 적고, 배열 안에 들어있는 문장 "나는 자바가 좋아요" 에서 각 낱말의 위치를 파악하고 싶다면, Java[].charAt()를 적으면 되는 건가요? 여기서 Java[].부분에는 배열 index를 적고 (예를 들면 Java[0]), charAt()은 "..." 문장의 각 글자 별 인덱스를 적는 방식으로요. 질문이 조금 많이 길었습니다. 하지만 동시에 그 만큼 제가 또한 열심히 배우고 싶다는 열정으로 봐주셨으면 합니다! 게다가 앞으로 다가올 기말시험에서도 배열의 비중이 꽤 크기도 해서, 정말로 잘 배우고 싶습니다! (해외에서 대학을 다니는 지라 지금 이맘때 쯤이 시험기간입니다 ㅠㅠ) 참 얼마 전에, 자바로 소켓 프로그래밍으로 과제를 해야 했었던 일이 있었는데, 그 때 나도코딩님이 업로드 해주신 섹션 12. (Section 12.) 예외 처리 부분이 상당히 많이 도움 되었습니다. 덕분에 과제에서 나쁘지 않은 점수를 받았습니다. 앞으로도 좋은 강의 잘 부탁하고, 진심으로 감사합니다 :-)

  • java
  • 객체지향
  • 배열
  • oop
  • array
  • 문자열
  • string
댓글 1 좋아요 0 조회수 4416

데이터베이스 다중값

미해결

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

데이터베이스 한 칼럼에 다중 값을 넣으려면 어떻게 해야 할까요? 예를 들어서 월, 화, 수, 목, 금, 토, 일을 체크박스로 만들고 여러 개의 값을 체크하면 그 값이 한칼럼에 다 들어간다고 가정했을 때 어떤 방법을 사용해야 할까요?

  • html/css
  • javascript
  • HTML/CSS
  • express
  • node.js
  • react
  • tensorflow
  • 머신러닝
  • react-native
  • 머신러닝 배워볼래요?
  • nodejs
이태희 댓글 1 좋아요 1 조회수 1248

mysql 비밀번호 재설정

해결됨

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

https://goodteacher.tistory.com/291 위 블로그를 참고해서 비밀번호를 초기화했는데 mysql -u root -p Enter password: ************ ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: YES) 위와 같이 나옵니다. 위 에러 메시지는 비밀번호를 잘못입력했을 때 나오는 걸로 아는데 저 한영 잘못친 것도 없고 numlock도 풀려있어서 제대로 잘 입력했는데 왜 그럴까요ㅠ mysql --version 해보면 mysql ver8.0.27 로 잘 나옵니다

  • spring-boot
  • mysql
  • spring
  • JPA
  • jpa
  • java
  • aws
유은혜 댓글 2 좋아요 1 조회수 16475

React key prop 오류 케이스 나오시는 분들 보세요

미해결

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

존경하는 그랩님 Warning: Each child in a list should have a unique "key" prop 오류 케이스에 대해서 조언좀 구할 수 있을까요? ReactDOM.render 방식이 React 18에서 지원하지 않으면서 오류들을 수정했습니다. //[AS-IS] import ReactDOM from 'react-dom'; ReactDOM.render( <React.StrictMode> <BrowserRouter> <App /> </BrowserRouter> </React.StrictMode>, document.getElementById('root') //[TO-BE] import * as ReactDOM from 'react-dom/client'; const root = ReactDOM.createRoot(document.getElementById("root")); root.render( <React.StrictMode> <App /> </React.StrictMode>); 다만 아래와 같은 오류들이 발생을 하였는데요. 구글링에서 찾아보니 각 엘리먼트에 key값을 주는 것으로 해결하라고 하는데요. - 그렇다면 src > main > index.js 에서 각 엘리먼트들에 key 값을 설정해줘야 하나요? - 각 엘리먼트들에 map 으로 되어있는 함수를 지우고.. (product, index) 형태를 key={product.id}>{product.imageUrl} key={product.id}>{ product.name } 형태로 바꾸어 주어야 하나요? - 조금 어렵게 느껴지네요. 해당 부분처럼 바꾸는게 맞는지 조금 조언 부탁드립니다. 현재 제 깃 레파지토리 참조로 첨부드립니다. 도와주세요 ㅠㅠ https://github.com/promotionX/Grabmarket-clinet

  • html/css
  • react
  • HTML/CSS
  • node.js
  • express
  • react-native
  • 머신러닝
  • tensorflow
  • javascript
  • 머신러닝 배워볼래요?
  • nodejs
promotion 댓글 1 좋아요 1 조회수 1371

싱글톤 질문 드립니다.

해결됨

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

강의 교재의 "스프링은 스프링 컨테이너에 스프링 빈을 등록할 때, 기본으로 싱글톤으로 등록한다(유일하게 하나만 등록해서 공유한다) 따라서 같은 스프링 빈이면 모두 같은 인스턴스다." 이 문장에서 같은 스프링 빈이면 모두 같은 인스턴스라는 말이 하나의 인스턴스로 자원을 공유한다는 의미 같은데 어떤 경우에 싱글톤을 사용해 자원을 공유하는지 궁금합니다.

  • MVC
  • mvc
  • spring-boot
  • spring
  • java
심야 댓글 1 좋아요 1 조회수 525

modal 유튜브 동영상 안들어가요

미해결

최고의 프론트엔드 CSS Frameworks, UIkit

모달 유튜브 동영상 안들어가 져요 iframe으로 퍼가기해서 복사해서넣었는데 동영상이 안들어가지네요~ 다른 유튜브동영상도 마찬가지입니다 왜그런가요 ?? <div id="modal-youtube" uk-modal> <div class="uk-modal-dialog uk-margin-auto-vertical"> <button class="uk-modal-close-outside" type="button" uk-close></button> <iframe width="560" height="315" src="https://www.youtube.com/embed/3adn6-gfbnQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen uk-video></iframe> </div> </div>

  • html/css
  • HTML/CSS
  • 포트폴리오
  • 포트폴리오
비타민걸 댓글 1 좋아요 1 조회수 687

레포지토리 인터페이스 질문 드립니다.

해결됨

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

강의에서 데이터 베이스를 아직 정하지 못해 인터페이스로 추상화 한다고 설명해 주셨는데 인터페이스 말고 추상 클래스를 사용하면 안되나요? 그리고 만약 데이터 베이스를 정했어도 추상화 할 때 인터페이스를 써야 하는지 궁금합니다.

  • spring
  • mvc
  • MVC
  • spring-boot
  • java
심야 댓글 1 좋아요 0 조회수 587

TEST오류

미해결

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

학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) [질문 내용] 여기에 질문 내용을 남겨주세요 회원가입에서 오류가 떠요 aused by: org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'springDataJpaMemberRepository' defined in com.example.hello_spring.repository.SpringDataJpaMemberRepository defined in @EnableJpaRepositories declared on JpaRepositoriesRegistrar.EnableJpaRepositoriesConfiguration: Could not create query for public abstract void com.example.hello_spring.repository.MemberRepository.clearStore(); Reason: Failed to create query for method public abstract void com.example.hello_spring.repository.MemberRepository.clearStore(); No property 'clearStore' found for type 'Member' 이런식으로 뭐가 정의되있다는데 뭐죠 ㅠㅠ

  • spring
  • java
  • mvc
  • spring-boot
  • MVC
댓글 1 좋아요 0 조회수 597

netlify not found 오류

미해결

[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기

사진에 나와있는 것처럼 만든 html, css, js 파일이 모두 들어있는 파일을 드래그 앤 드롭으로 옮겼는데 링크를 클릭하면 404 not found가 뜹니다 public도 되었다고 나옵니다 파일 설정을 잘못한 것일까요? 코드입니다 <meta property="og:url" content="https://lucent-caramel-9913e2.netlify.app" /> <meta property="og:title" content="십이간지 연애유형" /> <meta property="og:type" content="website" /> <meta property="og:image" content="img/image-9.png" /> <meta property="og:description" content="십이간지로 알아보는 연애유형" />

  • html/css
  • HTML/CSS
  • javascript
  • bootstrap
ksoy8n 댓글 1 좋아요 1 조회수 1080

라디오버튼과 체크박스를 커스텀 체크박스로 스타일링 관련 질문 드립니다.

미해결

HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)

■ 질문 남기실 때 꼭! 참고해주세요. HTML을 <label> <input type="checkbox" checked >HTML </label> 이렇게 바꾸면 체크박스용 보더는 나타나는데 폰트 어썸 아이콘이 나타나지 않습니다.폰트어썸 아이콘을 나타나게 하려면 어떻게 해야 하나요? <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>커스텀 체크박스 스타일링(2)</title> <link rel="stylesheet" href="style.css"> </head> <body> <form> <label> <input type="checkbox" checked >HTML </label> <label for="chk2">CSS <input type="checkbox" id="chk2"> </label> <label for="chk3">jQuery <input type="checkbox" id="chk3"> </label> <label for="chk4">UIKit <input type="checkbox" id="chk4" disabled> </label> </form> </body> </html> /* Google Web Fonts CDN */ @import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:300,400,500,700,900&display=swap'); /* Fontawesome 4.7 */ @import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); body { font-family: 'Noto Sans KR', sans-serif; line-height: 1.5em; margin: 0; font-weight: 300; display: flex; justify-content: center; align-items: center; height: 100vh; } a { text-decoration: none; } form input[type=checkbox] { display: none; } form label { display: block; border: 1px solid green; cursor: pointer; } form label:before { content: '\f00c'; font-family: fontawesome; display: inline-block; width: 14px; height: 14px; line-height: 14px; font-size: 13px; color: transparent; border: 1px solid #333; border-radius: 3px; text-align: center; vertical-align: middle; margin-right: 5px; transition: 0.2s; } form input[type=checkbox]:checked + label:before { background-color: crimson; color: #fff; border-color: transparent; } form input[type=checkbox]:not(:disabled) + label:active:before { transform: scale(0); }

  • html/css
  • HTML/CSS
  • jquery
dancoffee 댓글 2 좋아요 1 조회수 1032

hasText 부분 질문있습니다.

해결됨

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

========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예) [질문 내용] 여기에 질문 내용을 남겨주세요. 아래 코드에서 orderStatus 부분은 널로 체크하고 memberName 부분은 hasText로 체크한 이유가 있을까요?? orderSearch.getMemberName() != null 이런식으로 체크하면 안되는지 궁금합니다. if (orderSearch.getOrderStatus() != null) { query = query.setParameter("status", orderSearch.getOrderStatus()); } if (StringUtils.hasText(orderSearch.getMemberName())) { query = query.setParameter("name", orderSearch.ge tMemberName()); }

  • java
  • spring-boot
  • 웹앱
  • 웹앱
  • jpa
  • JPA
  • spring
hw h 댓글 1 좋아요 1 조회수 464

엔티티 클래스 개발2 오류

미해결

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

실행시켰는데 오류가 이렇게 나타납니다 거의 모든 클래스들에서 jakarta가 빨간색으로 표시됩니다 build.gradle과 application.yml도 첨부합니다.

  • java
  • spring
  • 웹앱
  • 웹앱
  • JPA
  • jpa
  • spring-boot
댓글 1 좋아요 0 조회수 352

margin : unset;

해결됨

따라하며 배우는 HTML, CSS

unset을 하게 되면 어떤 margin이 적용되는 건가요?? margin이 없어지는건가요??

  • html/css
  • HTML/CSS
oridori2705 댓글 1 좋아요 0 조회수 623

실무에서 페이징 처리

해결됨

실전! 스프링 데이터 JPA

안녕하세요! 영한님! 강의는 너무나 잘들었습니다!👍👍 강의를 듣고 나서 본격적으로 JPA를 이용한 개발을 진행하려 하는데, 실무에서 적용 시 궁금한 점이 있어서 질문을 남기게 되었습니다. 강의 내용에서 Page 를 활용해서 DB 데이터의 페이징 처리를 할 수 있다는 점에 대해 알려주셔서 굉장히 유용한 방식이라 생각이 듭니다. 이를 실무에서 실제로 적용하기 앞서 고민이 되는 부분은, 페이징이나 정렬과 관련하여 쿼리문을 이용해 처리 를 하는 것과 전제 데이터를 가져와 비즈니스 로직에서 처리 하는 방식 중 어떤 것이 효율 적인지 고민이 되고 검색도 해봤는데 의견이 다 나뉘더라구요. 그래서 영한님께서는 보통 어떤 것을 기준으로 두 가지 방식 중에 선택을 하여 적용을 하시는지 의견을 듣고 싶어서 질문 드리게 되었습니다. 감사합니다!!

  • spring-boot
  • JPA
  • jpa
  • spring
  • java
초콜렛빵 댓글 1 좋아요 0 조회수 761

CSS 부분

해결됨

따라하며 배우는 HTML, CSS

CSS 부분에서 이런식으로 top 0 left 0 또는 right 0 이 추가되어있는데 적용하는 이유를 알 수 있을까요?? 수업내용을 놓친건가해서 다시봤는데 모르겠어서..ㅠㅠ

  • html/css
  • HTML/CSS
oridori2705 댓글 1 좋아요 0 조회수 428

left:calc(100% - 100px) 질문드립니다.

해결됨

[코드캠프] 강력한 CSS

.container { position: relative; width: 100%; height: 104px; /* height:104px 이유 : box-sizing:border-box 설정 때문 */ background: rebeccapurple; border: 2px solid red; } .item { width: 100px; height: 100px; background-color: black; display: flex; justify-content: center; align-items: center; animation-name: moveBox; animation-duration: 2s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; position: absolute; } .item span { color: white; } @keyframes moveBox { from { border-radius: 0; left: 0; } to { border-radius: 50%; left: calc(100% - 100px); } } item에 애니메이션 효과를 넣고 .container에서 범위에 벗어나지 않게 @keyframes moveBox에서 left:calc(100% - 100px)을 했는데 영상 설명에서 .item width 크기가 100px이라고 하셨는데 이해가 잘 되지 않아서 질문드립니다ㅠㅠ

  • html/css
  • HTML/CSS
박종규 댓글 1 좋아요 0 조회수 752

마지막 과제 이후, 여러 궁금증 문의드립니다.

해결됨

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

(1) dom 이용해서 style 지정할 때 document.getElementById('menuGame').style.color= "white"; document.getElementById('menuGame').style.backgroundColor= "white"; 위와 같이 개별로 지정하지 않고 document.getElementById('check').style = 'color: #FFFFFF; background-color: #0068FF;'; 위와 같이 style 에 string으로 여러 속성을 줄 수 있는건 강의를 통해서 알게되었는데요. 구글링을 하다보니 document.querySelector('.class').style.cssText=`color: pink; font-size: 20px;` ' .cssText '라는 걸 사용하면 동일하게 Multi로 style을 줄 수있다고 하네요. 인터넷 검색의 해당 설명을 보고 이해하기로는 기존 강의에서 배운 ' .style ' 까지만 사용하는것과의 차이는 ' .cssText '의 경우 덮어쓰기 개념인 걸로 판단되는데요... 실무 입장에서 어떤 차이가 있을 때 사용하시는지 문의드립니다. (2) html에서 함수 호출 시, 자동완성이 원래 안되는지? 위에 보시는 것 처럼, oninput 에서 함수 호출할 때 따옴표 내에서, 기존 JS 파일에 있는 함수 자동완성이 안되고, 직접 타이핑하여야 되더라구요. css나 html의 경우 여러 extenstion을 설치하여 각 파일에서 자동완성 되는것까지는 했는데 html 파일에서 JS의 함수나 변수? 등은 자동완성이 원래 불가능한건지 문의드립니다. (3) 특정 속성? 자동완성 안됨 일부 속성?은 자동완성이 안되고 소스 내 사용한적이 있다면 "abc" 형태로 자동완성 제안을 해줄 때도 있는데요. 실제로는 사용하게 되는 속성인데도 자동 완성이 안되는 것들이 몇 개 있는 듯 한데요 ex) .value 이런 것들은 실제 사용되는데도 자동완성이 기본적으로 안되는 별도의 이유가 있나요? 특별한 속성이라 그런건지..... 한 번에 여러 질문을 드려서 죄송하지만, 위에 대한 해답을 아시면 답변해주시면 감사하겠습니다.

  • html/css
  • javascript
  • HTML/CSS
Bluemoon 댓글 1 좋아요 0 조회수 336

Escape Sequence에서 Tap 결과값에 대해 질문드려요

미해결

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

강의 영상에서는 \t 한번으로 숫자가 정렬된 것을 볼 수 있었습니다. 하지만 제가 작성하였을때는 정렬이 되지 않습니다. 물론 \t을 2번 진행하게 되면 정상적으로 정렬이 되는 것을 볼 수 있습니다. 강사님 처럼 \t 한번으로 정렬하기 위해서는 어떻게 해야하나요?

  • 객체지향
  • java
  • oop
lunaris0206 댓글 1 좋아요 1 조회수 520

네비 상단

미해결

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

안녕하세요 선생님:) 상단 네비 전체드롭다운에 사이사이 선들을 어떤방법으로 제거해야하나요? <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css/style3.css"> </head> <body> <div class="container"> <header> <div class="header-logo"> <a href="#"><img src="img/logo.png" alt=""></a> </div> <div class="navi"> <ul class="menu"> <li> <a href="#">탑</a> <div class="sub-menu"> <a href="#">블라우스</a> <a href="#">티</a> <a href="#">셔츠</a> <a href="#">니트</a> </div> </li> <li> <a href="#">아우터</a> <div class="sub-menu"> <a href="#">자켓</a> <a href="#">코트</a> <a href="#">가디건</a> <a href="#">머플러</a> </div> </li> <li> <a href="#">팬츠</a> <div class="sub-menu"> <a href="#">청바지</a> <a href="#">짧은바지</a> <a href="#">긴바지</a> <a href="#">레깅스</a> </div> </li> <li> <a href="#">악세서리</a> <div class="sub-menu"> <a href="#">귀고리</a> <a href="#">목걸이</a> <a href="#">반지</a> <a href="#">팔찌</a> </div> </li> </ul> </div> </header> <div class="slide"> <div> <a href="#"><img src="img/slide1.jpg" alt=""></a> <a href="#"><img src="img/slide2.jpg" alt=""></a> <a href="#"><img src="img/slide3.jpg" alt=""></a> </div> </div> <div class="items"> <div class="news"> <div class="tab-inner"> <div class="btn"> <a href="#" class="actvie">공지사항</a> <a href="#">갤러리</a> </div> <div class="tabs"> <div class="tab1"> <a class="open-modal" href="#">3월 재입고 품목을 알려드립니다.<b>2020.03.14</b></a> <a href="#">반품/환불 규정에 대해 알려드립니다.<b>2020.03.14</b></a> <a href="#">S/S 시즌 신규 의류 신상품 안내<b>2020.03.14</b></a> <a href="#">신규회원 대상 할인 이벤트 안내<b>2020.03.14</b></a> <a href="#">신규회원 대상 할인 이벤트 안내<b>2020.03.14</b></a> </div> <div class="tab2"> <img src="img/gallery1.jpg" alt=""> <img src="img/gallery2.jpg" alt=""> <img src="img/gallery3.jpg" alt=""> </div> </div> </div> </div> <div class="banner"> <a href="#"><img src="img/banner_img.jpg" alt=""></a> </div> <div class="shortcut"> <a href="#"><img src="img/shortcut_img.jpg" alt=""></a> </div> </div> <footer> <div class="footer-logo"> <a href="#"><img src="img/logo2.png" alt=""></a> </div> <div class="copy"> COPYRIGHTⓒ by JUST Shop. ALL RIGHTS RESERVED </div> <div class="sns"> <a href="#"><img src="img/sns1.png" alt=""></a> <a href="#"><img src="img/sns2.png" alt=""></a> <a href="#"><img src="img/sns3.png" alt=""></a> </div> </footer> </div> <div class="modal"> <div class="modal-con"> <h3>이벤트 안내</h3> <p>안녕하세요! JUST쇼핑몰입니다. 고객님들의 성원에 보답하는 JUST쇼핑몰이 되고자 신규회원 20% 할인 이벤트를 실시하고 있습니다. 웹과 모바일 가입회원 대상이며, 서비스만족을 위해 꾸준히 노력하겠습니다.</p> <a class="close-madal" href="#">x 닫기</a> </div> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom.js"></script></body></html> @charset "utf-8"; body{ background-color: #fff; color: #333; } a{ text-decoration: none; color: #333; } .container{ width: 1200px; margin: auto; } header{ height: 100px; position: relative; z-index: 1;}header>div{ height: 100px; /* border: 1px solid #000; /}.header-logo{ float: left; width: 200px; line-height: 130px;}.navi{ width: 600px; float: right;} .menu{ / border: 1px solid #000; / padding: 0; list-style: none;}.menu>li{ / border: 1px solid #000; / float: left; width: 25%; box-sizing: border-box; text-align: center; margin-top: 15px;}.menu>li>a{ border: 1px solid #000; display: block; padding: 5px; transition: 0.5s;}.menu>li>a:hover{ background-color: #000; color: #fff;}.sub-menu{ border: 1px solid #000; background-color: #fff; display: none;}.sub-menu>a{ display: block; padding: 5px; transition: 0.5s;}.sub-menu>a:hover{ background-color: #000; color: #fff;} .slide{ position: relative; height: 300px; width: 1200px; / border: 1px solid #000; / overflow: hidden;}.slide>div{ position: absolute; top: 0; left: 0; font-size: 0; animation: slide 10s linear infinite;} @keyframes slide{ 0% {top: 0;} 30% {top: 0;} 35% {top: -300px;} 65% {top: -300px;} 70% {top: -600px;} 95% {top: -600px;} 100% {top: 0;}} .items{ overflow: hidden;}.items>div{ height: 200px; / border: 1px solid #000; / float: left; width: 400px; box-sizing: border-box;}.news{} .tab-inner{ width: 95%; margin: auto; padding: 6px;}.btn{}.btn>a{ border: 1px solid #000; display: inline-block; width: 120px; padding: 5px; border-radius: 5px 5px 0 0; background-color: #ddd; margin-right: -5px; border-bottom: none; margin-bottom: -1px;}.btn>a.actvie{ background-color: #fff;}.tabs{}.tabs>div{ border: 1px solid #000; height: 160px; padding: 0 10px;}.tab1{ }.tab1 a{ border-bottom: 1px solid #000; display: block; padding: 6px;}.tab1 a:last-child{ border-bottom: none;}.tab1 a b{ float: right; font-weight: normal;}.tab2{ display: none; text-align: center;}.tab2 img{ width: 100px; padding-top: 30px;} .banner{}.shortcut{} footer{}footer>div{ height: 100px; / border: 1px solid #000; / float: left; box-sizing: border-box;}.footer-logo{ width: 200px; line-height: 130px;}.copy{ width: 800px; line-height: 100px; text-align: center;}.sns{ width: 200px; line-height: 140px; text-align: center;} .modal{ background-color: #000; position: absolute; / 너비값 잃음 */ top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.2); display: none;}.modal-con{ background-color: #fff; width: 400px; padding: 20px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 15px;}.modal-con h3{ background-color: #000; color: #fff; padding: 5px;}.modal-con p{ line-height: 1.6em;}.modal-con a{ border: 1px solid #000; padding: 5px; float: right;} $('.menu>li').mouseover(function(){ $('.sub-menu').stop().slideDown() }) $('.menu>li').mouseout(function(){ $('.sub-menu').stop().slideUp()}) $('.btn>a:first-child').click(function(){ $('.tab1').show() $('.tab2').hide() $(this).addClass('actvie') $(this).siblings().removeClass('actvie')}) $('.btn>a:last-child').click(function(){ $('.tab2').show() $('.tab1').hide() $(this).addClass('actvie') $(this).siblings().removeClass('actvie')}) $('.open-modal').click(function(){ $('.modal').fadeIn()}) $('.close-madal').click(function(){ $('.modal').fadeOut()})

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

인기 태그

인프런 TOP Writers

주간 인기글