안녕하세요.강의를 통해 많은 도움을 받고 있습니다.!다름이 아니라, 17강 - 11분20초 부분에서 "작업의 결과를 모을 때는 하나의 thread에서만 동작하게 됩니다. 예를 들자면 2번 thread 하나에서만 비동기 반복문이 동작하게 되는거에요" 라고 설명을 해 주셨는데제가 이해한 바로는 'Swift Concurrency는 thread관점에서 벗어나서, Task라는 작업의 단위를 기준으로 비동기 관리를 한다' 라고 이해하고 있습니다.때문에, "비동기 반복문에서도 await을 통해 비동기 결과를 받고 있는데, 이 때 특정 thread에 고정된다는 것이 보장 될 수 있는건가?" 하는 궁금증이 생겨서 질문드립니다!만약 하나의 thread에 고정되어 있다면, group을 통해서 결과가 넘어오게 될 때, 자식 Task중 과도하게 오래걸리는 작업이 있다고 가정하면 비동기 반복문이 실행되는 특정 thread가 계속 blocking되는건가? 하는 의문이 들어서요,,,! 

학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요!먼저 유사한 질문이 있었는지 검색해보세요.서로 예의를 지키며 존중하는 문화를 만들어가요.인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.안녕하세요 스타트업에서 nodejs를 기반으로 백엔드 개발 중인 2년차 개발자 입니다.개인적으로 java보다 js, python을 더 좋아하고, 최근에는 레일즈 개발자 친구를 알게되어 ruby 언어와 rails의 프레임워크에 관심이 많이 생겼습니다. 처음 개발을 배울 때 rails를 했다면 웹 개발 생태계를 더 이해하기 쉬웠겠다는 생각에 강의도 신청하게 되었습니다!그런데 레일즈를 사용해서 서비스를 시작했던 곳들이 생각보다 적지 않은데, 지금은 스프링 기반으로 바뀐 것 같아 그 이유가 궁금합니다.레일즈가 대규모 서비스에 힘들다거나 느리다는 말이 다 편견이라고 생각하고, 카카오도 천만 유저 당시에도 레일즈로 운영되었다고 들었는데 지금은 대부분 스프링을 택한 것 같아서요.스프링의 이점이 커서인지, 우리나라 특성 상 레일즈 개발자 채용이 힘들어선지, 아니면 다른 이유가 있는지 궁금합니다. 그리고 개인적인 경험으로, ‘당근도 초기에는 성장이 먼저라 코드는 엉망이었다 나중에 개발자 새로 뽑아서 다시 만든거다’라는 얘기도 들었는데 전혀 공감이 안 되었고, 개발자로 일하는 동안 하나의 프레임워크에 묶이지 않고 다양한 경험을 해보고 싶은데 우리나라는 너무 스프링만 도입하는 것 같아 강의와 관련은 없지만 질문 드립니다!

utf-8에서 맨 앞에 1의 개수를 확인하고 이 데이터는 몇 바이트짜리구나. 라고 알 수 있다고 하셨잖아요.그럼 빅엔디안에서는 시작하는 바이트의 값을 보고 확인 할 수 있는데, 리틀엔디안에서는 어디가 시작하는 바이트인지 명확하지 않게 되는거 같아요.내가 사용하는 시스템(윈도우, 리눅스)?에 따라 내부적을 알아서 작동하는건가요? 10으로 시작하지 않는 바이트를 찾아서 이게 '시작바이트구나' 하고 여기서부터 거꾸로 읽어들이는 식인가요?

 강의 너무 잘 듣고 있습니다!강의를 듣고 앱을 만들어보고 apk, aab파일로 뽑아서 앱을 실행할 경우 간헐적으로 아래와 같이 버튼이 잘리고 텍스트가 사라지는 현상이 일어납니다. 텍스트가 사라지지 않는 버튼은 텍스트를 감싸는 패딩?이 사라져서 엄청 작아지곤 합니다. 이게 항상 그러는게 아니라 간헐적으로 이러는데 혹시 이런 현상을 경험해보신적이 있으시면 해결 방법 공유해주시면 감사하겠습니다 ㅠㅜ 구글링이나 ai한테 물어봐도 해결이 잘 안 되서 쉽지 않네요 ㅠ덕분에 플러터 실력이 많이 늘고 있습니다!! 감사합니다.

매출총이익이 사업의 존폐와 너무나도 큰 관련성이 있을때도, 그로스 방정식을 우선시해야하는 이유에 대해 묻고 싶습니다.저도 직감적으로는 "돈"이 목표가 아닌 "특정 퍼널"을 집중하는 것이 당연히 일의 기획과 실행 및 팀의 성과에도 더 좋은 영향이 있을 거라 생각하는 데요.다만, 2~3년 정도 된 초기 스타트업의 경우 "돈을 벌지 못 하면 살아남지 못 하는 시기"가 필수적으로 존재하는 것 같습니다.이로 인해 "돈(매출, 매출총이익, 순이익 등)"을 목표로 잡지 않을 경우에 아래와 같은 리스크가 걱정됩니다1. 특정 퍼널을 개선했지만, 돈에 미미한 영향이 있다2. 특정 퍼널을 개선했지만, 돈에 영향이 거의 없다.3. 1번과 2번과 같이 시행착오 좋다. 다만, 시행착오가 계속 되면 회사가 망할 수도 있다.혹시, 이런 리스크에 대해 어떻게 생각하는 지 여쭤보고 싶습니다. 내부적으로는, "돈"을 목표로 하고 현재는 [모든 퍼널들을 종합적으로 지켜보면서 종합적으로 닥치는 대로 일하는 시기] 일수도 있지 않을까? 하는 물음표가 많이 나오는 상황입니다

소리만 나오고 영상이 안나오는데, 이건 인프런 문제인가요?

이론 자료 파일은 받을 수 없나요?

분명 경로랑 다 맞게 한 뒤에 마지막에 봇 실행을 하려고 하면 에러뜨면서 없는 경로라고 떠요

안녕하세요.코드가 업데이트되는 부분이 풀버전이 아니고 변경된 부분들이 폴더 단위로 자료가 올라오는것 같습니다. 이에 따라 코드를 병합할때,Merge tool을 사용해야되는 것인지?아니면 동일 폴더별로 복사 갱신을 하는 것인지 궁금하여 질문드립니다.

스핀락에서 스레드1이 나오자마자 다시 들어가는 경우는 불가능한가요?? 딱 마침 스레드2보다 먼저 CPU를 선점할 수도 있는거 아닌가요? 계속 돌려봐도 0이 나오네요. 타이밍이 좋게 한 놈이 반복해서 들어갈 수도 있는 구조 아닌가 궁금합니다.

안녕 킬구횽. 정성 가득한 강의 감사한 마음으로 공부하고 있다. 고맙다.다름이 아니라, 해당 작전에서 설명한대로 TransactionManager을 분리해서 사용하고 있었는데, 이때 이해가 가지 않는 상황이 있다.글이 조금 길어서, 요약을 먼저 하겠다.요약비즈니스용 트랜잭션 매니저(JPA)과 메타데이터용 트랜잭션 매니저(JDBC)을 분리한 경우, UnexpectedRollbackException이 발생한 후에 OptimisticLockingFailureException까지 추가로 발생한다.그러나 트랜잭션 매니저를 분리하지 않은 경우, UnexpectedRollbackException은 발생하지만 OptimisticLocking 예외는 발생하지 않는다.이유가 궁금하다.상황 설명다음은 @Configuration 클래스다. @Bean @Primary @ConfigurationProperties("spring.datasource.service") public DataSource dataSource() { return DataSourceBuilder.create() .type(HikariDataSource.class) .build(); } @Bean @BatchDataSource @ConfigurationProperties("spring.datasource.batch") public DataSource batchDataSource() { return DataSourceBuilder.create() .type(HikariDataSource.class) .build(); } @Bean @Primary public PlatformTransactionManager transactionManager(EntityManagerFactory entityManagerFactory) { return new JpaTransactionManager(entityManagerFactory); } @Bean @BatchTransactionManager public PlatformTransactionManager batchTransactionManager(@BatchDataSource DataSource dataSource) { return new JdbcTransactionManager(dataSource); }다음은 job을 구성하는 (잘못 작성된) tasklet이다. 트랜잭션 전파 속성은 Propagation.REQUIRED를 사용하고 있다.class TestTasklet implements Tasklet{ private final TestRepository testRepository; @Override public RepeatStatus execute(StepContribution contribution, ChunkContext chunkContext) throws Exception { try{ // testRepository의 @Transactional method 호출 // but @Transactional method에서 RuntimeException을 throw } catch(RuntimeException e){ // sucess process logic } return RepeatStatus.FINISHED; }위 코드에서, 예외를 캐치하는 것으로 예외를 처리한 것은 나의 실수였다.런타임 예외를 던지는 트랜잭션은 rollback-only 마킹 처리되어 해당 트랜잭션이 커밋될 수 없었기 때문이다.  이해가 가지 않는 지점은 지금부터다. 이를 설명하기 위해 내가 파악한 흐름을 정리해봤다. 오류가 있을 수 있다. (비즈니스: JPA / 메타 데이터: JDBC) 트랜잭션 매니저를 분리하는 경우TransactionTemplate의 execute 메서드 실행 doInTransaction 메서드 실행 시작 TestTasklet의 execute메서드의 실행 * transaction from JPAexecute메서드 내부에서 런타임 예외가 발생하는 트랜잭션 메서드 호출 -> 트랜잭션에 rollback-only 마킹됨내부적으로 정상 처리하였으므로 RepeatStatus.FINISHED 반환StepExecution update (version 1 -> version 2) 커밋 * 메타데이터용 DB 커넥션 사용하는 것을 확인함doInTransaction 메서드 실행 완료TransactionTemplate의 execute 메서드에서 커밋 시도 * transaction from JPAUnexpectedRollbackException발생 * rollback-only 마킹으로 인함롤백 시작version 1 -> version 2로 StepExecution update 시도이때 다음 예외가 발생한다.OptimisticLockingFailureException: Attempt to update step execution id=4 with wrong version (1), where current version is 2 반면, 트랜잭션 매니저를 분리하지 않으면 OptimisticLocking 예외가 발생하지 않는데,왜 OptimisticLocking 예외가 발생하지 않는지 궁금하다. (비즈니스, 메타 데이터: JPA ) 트랜잭션 매니저를 분리하지 않는 경우TransactionTemplate의 execute 메서드 실행 doInTransaction 메서드 실행 시작TestTasklet의 execute메서드의 실행execute메서드 내부에서 런타임 예외가 발생하는 트랜잭션 메서드 호출 -> 트랜잭션에 rollback-only 마킹됨내부적으로 정상 처리하였으므로 RepeatStatus.FINISHED 반환StepExecution update (version 1 -> version 2) 커밋doInTransaction 메서드 실행 완료TransactionTemplate의 execute 메서드에서 커밋 시도UnexpectedRollbackException 발생롤백 시작version 1 -> version 2로 StepExecution update 시도OptimisticLock 예외가 터지지 않고 정상적으로 버전 업데이트가 완료된다.이때 OptimisticLocking 예외가 발생하지 않았다는 것은, 현재 stepExecution의 버전이 1이라는 것으로 받아들여진다.의문인 점은, StepExecution update (version 1 -> version 2)이 커밋되는 것을 디버깅을 통해 확인했는데, 어째서 롤백 시점에서 stepExecution의 버전이 1이냐는 것이다.무언가 엔티티 매니저와 관련이 있는 것 같은데, 잘모르겠다.도움이 될까하여, 로그 일부를 첨부한다.트랜잭션 매니저 분리하는 경우2025-07-27T22:16:13.626+09:00 TRACE 141032 --- [server] [ main] o.s.jdbc.core.StatementCreatorUtils : Setting SQL statement parameter value: column index 1, parameter value [28], value class [java.lang.Long], SQL type unknown 2025-07-27T22:16:13.626+09:00 TRACE 141032 --- [server] [ main] o.s.t.i.TransactionInterceptor : Completing transaction for [org.springframework.batch.core.repository.support.SimpleJobRepository.update] 2025-07-27T22:16:13.626+09:00 DEBUG 141032 --- [server] [ main] o.s.jdbc.support.JdbcTransactionManager : Initiating transaction commit 2025-07-27T22:16:13.626+09:00 DEBUG 141032 --- [server] [ main] o.s.jdbc.support.JdbcTransactionManager : Committing JDBC transaction on Connection [HikariProxyConnection@33286612 wrapping org.postgresql.jdbc.PgConnection@6ae1d5f1] 2025-07-27T22:16:13.627+09:00 DEBUG 141032 --- [server] [ main] o.s.jdbc.support.JdbcTransactionManager : Releasing JDBC Connection [HikariProxyConnection@33286612 wrapping org.postgresql.jdbc.PgConnection@6ae1d5f1] after transaction 2025-07-27T22:16:13.627+09:00 DEBUG 141032 --- [server] [ main] o.s.jdbc.support.JdbcTransactionManager : Resuming suspended transaction after completion of inner transaction 2025-07-27T22:16:13.627+09:00 DEBUG 141032 --- [server] [ main] o.s.orm.jpa.JpaTransactionManager : Initiating transaction commit 2025-07-27T22:16:13.627+09:00 DEBUG 141032 --- [server] [ main] o.s.orm.jpa.JpaTransactionManager : Committing JPA transaction on EntityManager [SessionImpl(858762286<open>)] 2025-07-27T22:16:13.630+09:00 INFO 141032 --- [server] [ main] o.s.batch.core.step.tasklet.TaskletStep : Commit failed while step execution data was already updated. Reverting to old version. 2025-07-27T22:16:13.630+09:00 DEBUG 141032 --- [server] [ main] o.s.orm.jpa.JpaTransactionManager : Closing JPA EntityManager [SessionImpl(858762286<open>)] after transaction 2025-07-27T22:16:13.630+09:00 DEBUG 141032 --- [server] [ main] o.s.batch.repeat.support.RepeatTemplate : Handling exception: org.springframework.transaction.UnexpectedRollbackException, caused by: org.springframework.transaction.UnexpectedRollbackException: Transaction silently rolled back because it has been marked as rollback-only 2025-07-27T22:16:13.631+09:00 DEBUG 141032 --- [server] [ main] o.s.batch.repeat.support.RepeatTemplate : Handling fatal exception explicitly (rethrowing first of 1): org.springframework.transaction.UnexpectedRollbackException: Transaction silently rolled back because it has been marked as rollback-only 2025-07-27T22:16:13.633+09:00 ERROR 141032 --- [server] [ main] o.s.batch.core.step.AbstractStep : Encountered an error executing step switchAliasTargetStep in job addressIndexingJob분리하지 않는 경우2025-07-27T22:18:22.239+09:00 TRACE 114800 --- [server] [ main] o.s.jdbc.core.StatementCreatorUtils : Setting SQL statement parameter value: column index 1, parameter value [8], value class [java.lang.Long], SQL type unknown 2025-07-27T22:18:22.240+09:00 TRACE 114800 --- [server] [ main] o.s.t.i.TransactionInterceptor : Completing transaction for [org.springframework.batch.core.repository.support.SimpleJobRepository.update] 2025-07-27T22:18:22.240+09:00 DEBUG 114800 --- [server] [ main] o.s.orm.jpa.JpaTransactionManager : Initiating transaction commit 2025-07-27T22:18:22.240+09:00 DEBUG 114800 --- [server] [ main] o.s.orm.jpa.JpaTransactionManager : Committing JPA transaction on EntityManager [SessionImpl(707576293<open>)] 2025-07-27T22:18:22.241+09:00 INFO 114800 --- [server] [ main] o.s.batch.core.step.tasklet.TaskletStep : Commit failed while step execution data was already updated. Reverting to old version. 2025-07-27T22:18:22.242+09:00 DEBUG 114800 --- [server] [ main] o.s.orm.jpa.JpaTransactionManager : Closing JPA EntityManager [SessionImpl(707576293<open>)] after transaction 2025-07-27T22:18:22.242+09:00 DEBUG 114800 --- [server] [ main] o.s.batch.repeat.support.RepeatTemplate : Handling exception: org.springframework.transaction.UnexpectedRollbackException, caused by: org.springframework.transaction.UnexpectedRollbackException: Transaction silently rolled back because it has been marked as rollback-only 2025-07-27T22:18:22.242+09:00 DEBUG 114800 --- [server] [ main] o.s.batch.repeat.support.RepeatTemplate : Handling fatal exception explicitly (rethrowing first of 1): org.springframework.transaction.UnexpectedRollbackException: Transaction silently rolled back because it has been marked as rollback-only 2025-07-27T22:18:22.246+09:00 ERROR 114800 --- [server] [ main] o.s.batch.core.step.AbstractStep : Encountered an error executing step switchAliasTargetStep in job addressIndexingJob

강의를 한 번 수강했던 수강생입니다.반년전 듣고 실습을 안해서 까먹어서 다시 들어볼려고 하는데 어떤 게 업데이트 된 건지 알 수 있을까요? 기존에 커리큘럼별 강의 제목은 같은데 업데이트 된 건가요? 아니면 새로 찍으신 강의가 별도로 올라와있는건가요?

분명 동일한 URI를 적어줬는데도 불구하고 계속 ECR 로그인이 되지 않네요...그전 강의까지는 모두 오류없이 진행했습니다. 도커 데스크탑도 실행된 상태인데도 오류가 나네요.

 👾[Layered] 포토샵 기초 찍먹해볼 사람 모여라! 포토샵, 한 번쯤 배워보고 싶었는데 막막하셨던 분들 주목! 👀Layered에서 포토샵 처음 해보는 분들을 위한 왕초보반을 열었어요!부담없이 가볍게 시작할 수 있도록 신생아 수준의 눈높이로 가르쳐드리니 방학에 심심할 때 포토샵 기본적인 개념 '찍먹'해본다 생각하고 오시면 됩니다 :)  🎨 강의 커리큘럼1. 포토샵 알아가기 : 개념부터 차근차근🐢2. 포토샵 다가가기 : 설치부터 천천히👾3. 포토샵 관심갖기 : 기본적인 기능탐색🔎4. 포토샵 친해지기 : 간단한 실습하기🖼 🗓일정 및 장소- 일정 : 주 1-2회, 1달 간 진행 (서로 스케줄 조율하여 유동적으로 진행)- 장소 : 홍대, 신촌, 서울대입구 등 서울 내 스터디룸이나 카페 💁‍♀모집 안내- 모집 대상: 서울 및 수도권 대학 재학생 및 휴학생 (포토샵 초보 대환영!)- 모집 인원: 10명 내외(1대1 진행)- 신청 방법: 아래 폼으로 신청https://smore.im/form/9UG7hO8RwX* 궁금한 점은 인스타 DM(@layered.lab)으로 편하게 물어보세요! 💲수강료현재 디자인 교육 기반의 소규모 컴퓨터 학원 오픈을 준비 중이며 정식 운영 전 실제 수업을 진행해보며 커리큘럼을 보완하고,수강생분들의 반응과 피드백을 통해 더 나은 강의 방식과 흐름을 설계하기 위한 사전 테스트 과정입니다. 즉, 정식 수업 전 ‘파일럿 클래스’의 일환으로 진행되는 무료 수업이에요!정식 개강 전이기 때문에, 여러분의 솔직한 피드백과 리뷰가 저에게 큰 도움이 됩니다🙏*음료비는 개인 부담입니다!  포토샵, 어렵다고 생각하지 말고 Layered에서 가볍게 시작해봐요! 이번 방학 때 같이 포토샵이랑 조금 더 친해져보기🤩  ⚠본 수업은 어떠한 정치, 종교 단체와 관련이 없으며 순수 교육의 목적만 있음을 밝힙니다. 

안녕하세요 강의 듣고있는 학생입니다. 혹시 다운로드 파일에 있는 아이콘이나 폰트들취업용 개인 포트폴리오 웹사이트 만들때 사용해도 될까요?

안녕하세요 취업폭격기 제로미니 입니다.정규과정을 신청하신분은 Zeromini-lab 권한, Zeromini Git Hub 취업자료 권한 신청 관련하여디스코드 (제로미니 IT취업 공부방) [초대장] 을 통해 '취업폭격기 제로미니'에게 다이렉트 메시지를 남겨주시면내용을 안내해드리도록하겠습니다!안녕하세요 제로미니님.깃 권한 신청하겠습니다.또한, 디스코드 초대 링크가 유효하지 않다고 표시됩니다. 혹시 해결이 가능할까요?저도 들어가고 싶습니다!

13. jpa reader,writer 까지만 보고 질문드립니다.JpaPagingItemReader, JpaItemWriter를 사용해서 JPA 기반으로 DB에 직접 접근해 처리할때, Writer나 Processor에서 복잡한 비즈니스 로직이 필요한 경우에는 어떻게 설계하는 것이 좋은지 궁금합니다.만약 주문을 처리하는 배치가 있다고 했을 때배치 작업에서 주문을 조회 (JpaPagingItemReader-Entity 리턴)writer에서주문 상태 변경주문 내역 추가배송 테이블에 적재 등 여러 도메인을 걸치는 비즈니스 로직 수행 필요이렇게 되면 reader에서 조회한 것을 processor에서 command와 같은 객체로 변환해서 writer에서는 service 로직을 호출하는 것이 좋을까요?

어디서 강의 교안을 pdf로 다운받을 수 있는지 문의 드립니다. 

<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>A1~A4레이아웃 연습</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <header> <div class="logo"></div> <div class="manu"></div> </header> <div class="silde"> <div></div> </div> <div class="items"> <div class="news"> <div class="tab-inner"> <div class="btn"> <a href="#none" class="active">공지사항</a> <a href="#none">갤러리</a> </div> <div class="tabs"> <div class="tab1"> <a class="open">SNS 발송 서비스 개선작업<b>2020.01.09</b></a> <a href="#none">휴대폰 인증 서비스 개선 작업<b b>2020.01.07</b></a> <a href="#none">카드사 부분 무이자 할부 이벤트<b>2019.12.31</b></a> <a href="#none">올엣 시스템 작업 안내<b>2019.12.20</b></a> <a href="#none">휴대폰 결제 시스템 작업 안내<b>2019.12.20</b></a> </div> <div class="tab2"> <a href="#none"><img src="image/1.jpg" alt="garllery1"></a> <a href="#none"><img src="image/2.jpg" alt="garllery2"></a> <a href="#none"><img src="image/3.jpg" alt="garllery3"></a> </div> </div> </div> </div> <div class="banner"></div> <div class="nav"></div> </div> <footer> <div class="copy"> <div class="copy2"></div> <div class="copy3"></div> </div> <div class="logo2"></div> </footer> <div class="model"> <div class="model-content"> <h1>SNS비회원주문하기 종료 안내</h1> <p>안녕하세요. JUST 쇼핑몰 MD 홍길동입니다. 안타깝게도 SNS비회원 주문하기 서비스가 한달 뒤 종료될 예정입니다. 회원가입 없이 SNS계정을 이용해 그동안 제품주문을 하실수 있었는데, 금번 강화된 개인정보보호법 시행령 제 9조 (부칙 3조)에 의거, SNS를 이용한 상품 주문/결제등이 근래에 많은 보안잇슈로 문제가 되고 있음에 따라 KISAS의 권고조치의 일환으로 했습니다. 따라서, 한달뒤인 2019.03.10 이후 모든 비회원 고객님들께서는 회원가입으로 전환 후 실명인증이 되어야 하며, 이는 모든 쇼핑몰/오픈마켓등의 전자상거레서비스의 공통된 사함이라는 점을 안내드립니다. </p> <a class="close-model">X 닫기</a> </div> </div> </div> <script src="js/jquery-1.12.4.js"></script> <script src="js/costom.js"></script> </body> </html>  .container{ border: 1px solid #111; width: 1200px; margin: auto; } header{ width: 1200px; height: 100px; background-color: #222; } header div{ height: 100px; } .logo{ width: 170px; background-color: #333; float: left; } .manu{ width: 700px; background-color: #444; float: right; } .silde{ height: 300px; background-color: #555; } .items{ /* height: 200px; */ overflow: hidden; } .items>div{ display: inline-block; height: 200px; float: left; } .news{ width: 400px; background-color: #666; } .tab-inner{ margin: 5px 10px; } .btn{ } .btn .active{ background-color: #fff; } .btn a{ width: 100px; height: 50px; background-color: #888; border: 1px solid #000; display: inline-block; text-align: center; color: #111; text-decoration: none; box-sizing: border-box; padding: 13px 0; border-radius: 5px 5px 0 0; margin-left: -5px; border-bottom: none; cursor: pointer; } .tabs{ background-color: #fff; height: 145px; border: 1px solid #000; margin-left: -5px; margin-top: -1px; } .tab1 a.open{ cursor: pointer; } .tab1 a{ color: #000; text-decoration: none; box-sizing: border-box; border-bottom: 1px solid #000; display: block; margin: 3px; } .tab1 a:last-child{ border-bottom: none; } .tab1 a b{ float: right; font-weight: normal; } .tab2{ display: none; } .tab2 a{ box-sizing: border-box; display: inline-block; padding: 17px 0; margin-left: 10px } .tab2 img{ width: 110px; } .banner{ width: 400px; background-color: #777; } .nav{ width: 400px; height: 200px; background-color: #888; } footer{ height: 100px; background-color: #999; } footer> div{ float: left; height: 100px; } .copy{ width: 1030px; } .copy> div{ width: 1030px; height: 50px; } .copy2{ background-color: #444; } .copy3{ background-color: #777; } .logo2{ width: 170px; background-color: #222; } .model{ position: absolute; left: 0; top: 0; background-color: #00000028; width: 1200px; height: 700px; margin: 7px; display:block; display: none; } .model-content{ position: absolute; left: 50%; top: 50%; background-color: #fff; width: 500px; height: 400px; border: 1px solid #000; transform: translate(-50%,-50%); box-sizing: border-box; } .model-content h1{ color: #fff; background-color: #000; width: 450px; display: inline-block; text-align: center; margin: 25px; } .model-content p{ line-height: 26px; text-shadow: 0 0 3px #0000003d; text-align: center; } .close-model{ background-color: #000; width: 90px; height: 40px; display: inline-block; float: right; color: #fff; text-align: center; box-sizing: border-box; margin: 12px; padding: 6px; cursor: pointer; }$('.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').click (function(){ $('.model').fadeIn() }) $('.close-model').click (function(){ $('.mode1').fadeOut() })코드를 보내드립니다

<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>A1~A4레이아웃 연습</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <header> <div class="logo"></div> <div class="manu"></div> </header> <div class="silde"> <div></div> </div> <div class="items"> <div class="news"> <div class="tab-inner"> <div class="btn"> <a href="#none" class="active">공지사항</a> <a href="#none">갤러리</a> </div> <div class="tabs"> <div class="tab1"> <a class="open">SNS 발송 서비스 개선작업<b>2020.01.09</b></a> <a href="#none">휴대폰 인증 서비스 개선 작업<b b>2020.01.07</b></a> <a href="#none">카드사 부분 무이자 할부 이벤트<b>2019.12.31</b></a> <a href="#none">올엣 시스템 작업 안내<b>2019.12.20</b></a> <a href="#none">휴대폰 결제 시스템 작업 안내<b>2019.12.20</b></a> </div> <div class="tab2"> <a href="#none"><img src="image/1.jpg" alt="garllery1"></a> <a href="#none"><img src="image/2.jpg" alt="garllery2"></a> <a href="#none"><img src="image/3.jpg" alt="garllery3"></a> </div> </div> </div> </div> <div class="banner"></div> <div class="nav"></div> </div> <footer> <div class="copy"> <div class="copy2"></div> <div class="copy3"></div> </div> <div class="logo2"></div> </footer> <div class="model"> <div class="model-content"> <h1>SNS비회원주문하기 종료 안내</h1> <p>안녕하세요. JUST 쇼핑몰 MD 홍길동입니다. 안타깝게도 SNS비회원 주문하기 서비스가 한달 뒤 종료될 예정입니다. 회원가입 없이 SNS계정을 이용해 그동안 제품주문을 하실수 있었는데, 금번 강화된 개인정보보호법 시행령 제 9조 (부칙 3조)에 의거, SNS를 이용한 상품 주문/결제등이 근래에 많은 보안잇슈로 문제가 되고 있음에 따라 KISAS의 권고조치의 일환으로 했습니다. 따라서, 한달뒤인 2019.03.10 이후 모든 비회원 고객님들께서는 회원가입으로 전환 후 실명인증이 되어야 하며, 이는 모든 쇼핑몰/오픈마켓등의 전자상거레서비스의 공통된 사함이라는 점을 안내드립니다. </p> <a class="close-model">X 닫기</a> </div> </div> </div> <script src="js/jquery-1.12.4.js"></script> <script src="js/costom.js"></script> </body> </html> $('.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').click (function(){ $('.model').fadeIn() }) $('.close-model').click (function(){ $('.mode1').fadeOut() }) .container{ border: 1px solid #111; width: 1200px; margin: auto; } header{ width: 1200px; height: 100px; background-color: #222; } header div{ height: 100px; } .logo{ width: 170px; background-color: #333; float: left; } .manu{ width: 700px; background-color: #444; float: right; } .silde{ height: 300px; background-color: #555; } .items{ /* height: 200px; */ overflow: hidden; } .items>div{ display: inline-block; height: 200px; float: left; } .news{ width: 400px; background-color: #666; } .tab-inner{ margin: 5px 10px; } .btn{ } .btn .active{ background-color: #fff; } .btn a{ width: 100px; height: 50px; background-color: #888; border: 1px solid #000; display: inline-block; text-align: center; color: #111; text-decoration: none; box-sizing: border-box; padding: 13px 0; border-radius: 5px 5px 0 0; margin-left: -5px; border-bottom: none; cursor: pointer; } .tabs{ background-color: #fff; height: 145px; border: 1px solid #000; margin-left: -5px; margin-top: -1px; } .tab1 a.open{ cursor: pointer; } .tab1 a{ color: #000; text-decoration: none; box-sizing: border-box; border-bottom: 1px solid #000; display: block; margin: 3px; } .tab1 a:last-child{ border-bottom: none; } .tab1 a b{ float: right; font-weight: normal; } .tab2{ display: none; } .tab2 a{ box-sizing: border-box; display: inline-block; padding: 17px 0; margin-left: 10px } .tab2 img{ width: 110px; } .banner{ width: 400px; background-color: #777; } .nav{ width: 400px; height: 200px; background-color: #888; } footer{ height: 100px; background-color: #999; } footer> div{ float: left; height: 100px; } .copy{ width: 1030px; } .copy> div{ width: 1030px; height: 50px; } .copy2{ background-color: #444; } .copy3{ background-color: #777; } .logo2{ width: 170px; background-color: #222; } .model{ position: absolute; left: 0; top: 0; background-color: #00000028; width: 1200px; height: 700px; margin: 7px; display:block; display: none; } .model-content{ position: absolute; left: 50%; top: 50%; background-color: #fff; width: 500px; height: 400px; border: 1px solid #000; transform: translate(-50%,-50%); box-sizing: border-box; } .model-content h1{ color: #fff; background-color: #000; width: 450px; display: inline-block; text-align: center; margin: 25px; } .model-content p{ line-height: 26px; text-shadow: 0 0 3px #0000003d; text-align: center; } .close-model{ background-color: #000; width: 90px; height: 40px; display: inline-block; float: right; color: #fff; text-align: center; box-sizing: border-box; margin: 12px; padding: 6px; cursor: pointer; }