묻고 답해요
164만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결[초급편] 안드로이드 커뮤니티 앱 만들기(Android Kotlin)
개복치님 안녕하세요
개복치님 안녕하세요.개복치님이 올려주신 왕초보~초보 앱만들기를 전부 수강하고 몇번더 만들어본결과 강의를 안보고도 강의에 나오는 모든 기능을 안보고 구현할수있게되었습니다.어느정도 이제 기초는 잡힌거같고해서 저만의 토이 프로젝트를 만들어볼려고합니다.헬스와 관련된 커뮤니티를 만들어볼려고하는데,로고 이미지나 ui같은 것들이 어느정도 괜찮은걸 찾으면 디자인도 나름 깔끔할거라고 생각이듭니다. 개복치님이 초보편에서 쓰신 이미지들은 직접 만드신건가요 아니면 어느사이트에서 받아오신건가요 퀄리티가 매우 좋던데 사이트에서 구하셨으면 좋은 사이트 하나 추천해주시면 감사하겠습니다.그리고 당연히 서버는 firebase로 대체를 해야되겠죠??실제 firebase로 앱을 출시할때 다른 서버를 구축한 앱보다 많이 성능이 안좋겠죠?실제로 많은 사람들이 firebase로 앱을 출시하는지도 궁금하고,마냐게 서버를 만들어서 실제 내 앱의 연결을 시켜줄때 firebase를 연결했을때 처럼 서버의 데이터 불러오기 데이터 저장하기의 코딩들은 많이 유사하겠죠? 아니면 firebase에서 데이터 저장 불러올때보다 좀더 쉽거나 개복치님의 개발경험으로 말씀해주시면 감사하겠습니다.깊게 새겨듣겠습니다.
-
미해결UIKit - iOS14 실무 가이드 <iOS앱 진짜 개발자 되기>
viewWillAppear ,viewDidLoad
setting App 5강 42분 안녕하세요 강의 너무 잘듣고있습니다 공부 하다가 궁금한게 있어 질문드립니다 강의 중에 "setting "이 viewDidLoad에 들어가면 general로 들어갔다 나온 이후 없어지게되서 화면이 보일때마다 호출되는 viewWillAppear에 등록하것은 이해가 됩니다! 그런데 왜 들어갔다 나오면 설정이 풀리는것인지 잘 모르겠습니다 즉 navigationBar = true로 설정후 들어가서 general에 들어갔다오면 false로 변경되는건가요 아니면 아예 실행이 안되는것인가요 그렇다면 다른 navigationBar를 제외한 viewDidLoad에 있는 코드들은 어떻게 실행되는건가요? 메모리에 올라갔다가 메모리를 제거하지 않는이상 계속 유지되는 상태인데 왜 navigationBar에 영향을 주는지 잘 모르겠습니다 detail들어갔다 와도 유지 되어야하는것 아닌가요? (저도 강사님이 하시는대로 해서 실행은 됐는데 궁금해서 여쭤봅니다 ㅎㅎㅎ)
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
해시태그 수정
안녕하세요. 사용자 전체의 Hashtag = [a,b,c,d,e,f,g] user1 의 hashtag = [a,b,c] 라고 가정을 하겠습니다. 이때 user1의 해시태그를 수정하고 싶은데 제가 생각하기로는 경우의 수가 아래와 같이 다섯 개가 나오는데요. 1. 추가하기만 하는 경우 // [a,b,c,] + 어떤 값 ( 이 경우는 findOrCreate에서 다 처리가능) 2. 지우기만 하는 경우 // [a,b] 3. 지우고 전체 해시태그에 이미 있는 태그 추가하는 경우 // [a,g] 4. 지우고 전체 해시태그에 없는 태그 추가하는 경우 // [a,k] 5. 3과 4가 합쳐진 경우 // [a,b,g,k] 알고리즘이나 데이터베이스에 기본적인 배경지식도 없어서 그냥 궁금해서 질문드립니다 .. 이정도면 간단한 거겠지만, 아래 질문에만 답변주시면 제가 더 공부해서 해보겠습니다 Q. 보통 belongstomany 테이블을 다룰 때 이렇게 복잡한 건가요?
-
미해결[C#과 유니티로 만드는 MMORPG 게임 개발 시리즈] Part3: 유니티 엔진
오류
. 강의를 보면서 UL/UI_Button.cs를 지우고 수업자료를 다운 받아서 원래 있던자리에 UI_Button 스크립트를 넣었더니 이런 오류가 나옵니다. 어떻게 해야 하나요??
-
해결됨스프링 MVC 2편 - 백엔드 웹 개발 활용 기술
@ModelAttribute 질문 있습니다.
안녕하세요 영한님 강의 정말 잘 보고 있습니다!! 다름이 아니라 MemberController의 addForm 메서드 파라미터를 @ModelAttribute("member") Member member 위와 같이 받으신 이유가 단순히 아래와 같이 Model을 파라미터로 받아서 직접 추가하는 것과 같은 효과를 내기 때문인가요? @GetMapping("/add") public String addForm(Model model) { model.addAttribute("member", new Member()); return "members/addMemberForm"; }
-
미해결리눅스 커널 해킹. A부터 Z까지
input-test driver실행법..
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 사진과 같이 V4bel님 github에서 익스 파일을 mediafire에 넣고 ./start.sh 를 실행하고 url을 입력해줬습니다. 근데 rootfs.>~~~/exp파일이 없다고 나오네용ㅠㅠ음...커널문제를 처음 접해봐서 먼저 익스코드 실행해보고 플래그까지 본 다음 첨부터 다시 풀어보고 싶은데 문제 어떻게 실행해서 커널 부팅할 수 있을까요?
-
미해결[C++과 언리얼로 만드는 MMORPG 게임 개발 시리즈] Part4: 게임 서버
질문 드립니다.
spinlock 수업에서 설명해주신 내용처럼 이번 강의 예제의 경우에도 두개의 쓰레드가 서로 동시에 락을 걸어서 데드락상황이 발생할 수 있는건가요? 그래서 실제 사용시에는 CAS처리를 해줘야 하는건지 문의드립니다.
-
미해결따라하며 배우는 도커와 CI환경 [2023.11 업데이트]
제가 이해한 내용이 맞는지 궁금합니다.
제가 이해한 내용이 맞는지 궁금합니다. 아래 과정을 따라 실행됩니다. docker client에서 "docker run kakaotalk"을 실행한다. 명령어 그대로 docker server로 전송한다. 이미지 cache 저장소에서 찾든, Docker Hub에서 가져오든 이미지를 가져온다. 가져온 이미지를 통해 컨테이너를 생성할 때, 파일 스냅샷의 카카오톡 실행 파일을 컨테이너의 하드디스크에 적재하고, 명령어를 컨테이너로 전달한다. 컨테이너를 실행하면 받아온 명령어로 실행된다. 이러한 궁금증이 생겼습니다. 이미지 cache 저장소는 디스크에 위치하나요? 이미지에 있는 파일 스냅샷을 컨테이너 하드 디스크에 옮긴다고 하셨는데, 이것은 데이터 "복사"를 의미하는 건지, "이동"을 의미하는 건지 궁금합니다. 만약 "이동"을 의미한다면, 기존의 이미지에는 데이터 수정이 발생하고, 다음에 똑같은 컨테이너를 생성하려고 할 때, 다시 이미지를 받아와서 생성하는 방식인가요? 잘못된 내용이 있는지 확인해주시면 감사하겠습니다. 강의 잘 듣고 있습니다. 감사합니다!!:)
-
미해결자바(Java) 알고리즘 문제풀이 입문: 코딩테스트 대비
문제가 이해가 안되는 것 같습니다.
문제에서 A학생이 멘토 B학생이 멘티라면 A학생은 M번의 수학테스트에서 모두 B학생보다 등수가 앞서야 한다고 나와있는데 테스트케이스에서 (4,2) 쌍은 3번째 시험에서 짝이 안맞지 않나요? 3번째 쌍에서 4번학생은 2등 2번 학생은 1등. 3 4 1 2 4 3 2 1 3 1 4 2
-
미해결Google 공인! 텐서플로(TensorFlow) 개발자 자격증 취득
웹캠 대신 폰카는 안되는 건가요?
질문1. 집에 웹캠이 없는데 폰으로 셀카등록까지 한 다음에 컴퓨터로 옮겨와서 그 다음 절차를 할 순 없는 건가요? 질문2. 집에 카메라 달린 노트북은 있으나 성능이 그닥입니다. 노트북으로 셀피까지 진행하고 그 다음 데스크탑으로 넘어와서 진행하는 것도 가능한가요?
-
미해결자바(Java) 알고리즘 문제풀이 입문: 코딩테스트 대비
런타임 에러
테스트 케이스에서는 오류가 안나는데 채점을 하면 런타임 에러가 나오네요... 강사님과 코드를 좀 다른방식으로 작성해서 비교가 불가능합니다. 코드 한 번만 봐주시면 감사하겠습니다. import java.util.Scanner; public class Main { public static void main(String[] args) { Scanner sc = new Scanner(System.in); int n = sc.nextInt(); int[][] arr = new int[n][5]; int[] same = new int[n]; boolean[] check = new boolean[n]; for(int i = 0; i < n; i++) { for(int j = 0; j < 5; j++) { arr[i][j] = sc.nextInt(); } } int cnt = 0; for(int i = 0; i < n; i++) { for(int j = 0; j < 5; j++) { for(int k = 0; k < n; k++) { if(arr[i][j] == arr[j][k]) check[k] = true; } } for(int l = 0; l < n; l++) { if(check[l] == true) cnt++; check[l] = false; } same[i] = cnt; cnt = 0; } int max = same[0]; int tmp = 0; for(int i = 1; i < n; i++) { if(max < same[i]) { max = same[i]; tmp = i; } else if(max == same[i]) tmp = tmp < i ? tmp : i; } System.out.println(tmp); } }
-
해결됨작정하고 장고! Django로 Pinterest 따라만들기 : 바닥부터 배포까지
Get method로 바뀌지 않습니다
views.py의 조건문에서 request.method == "POST": 가 항상 true로 성립하는 것 같아요 https://github.com/synodical/pinterest_django.git 에 16강까지의 제 코드가 있습니다
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
리트윗 시 존재하지 않는 게시글입니다 오류가 발생합니다
제로초님 리트윗하는 부분에서 게시글이 존재하지 않는다는 에러가 계속 발생하고 있습니다. 본인 게시글이나 다른 사용자 게시글 모두 리트윗 시 동일하게 게시글이 존재하지 않는다고 RETWEET_FAILURE가 나타나고 있습니다.. saga의 post부분, routes의 post 모두 동일하게 작성되어 있는데 const post = await Post.findOne({where: { id: req.params.postIfd },include: [{model: Post,as: 'Retweet',}],}); 이 부분에서 에러가 발생하는 것 같습니다. 로그창에 Executing (default): SELECT `id`, `email`, `nickname`, `password`, `createdAt`, `updatedAt` FROM `Users` AS `User` WHERE `User`.`id` = 2 LIMIT 1; Executing (default): SELECT `Post`.`id`, `Post`.`content`, `Post`.`createdAt`, `Post`.`updatedAt `, `Post`.`UserId`, `Post`.`RetweetId`, `Retweet`.`id` AS `Retweet.id`, `Retweet`.`content` AS ` Retweet.content`, `Retweet`.`createdAt` AS `Retweet.createdAt`, `Retweet`.`updatedAt` AS `Retwee d` FROM `Posts` AS `Post` LEFT OUTER JOIN `Posts` AS `Retweet` ON `Post`.`RetweetId` = `Retweet`.`id` WHERE `Post`.`id` = 'undefined'; POST /post/undefined/retweet 403 3.353 ms - 39 이렇게 찍히는데 게시글 id가 undefined가 되고 있는데 어디 부분을 수정해봐야 할까요..?
-
미해결R프로그래밍 기초 다지기
for문이랑 if문 강의에서 나온 "/n"에 대해서 질문드립니다
강의를 듣다가 "/n" 설명이 반복해서 들어봐도 이해가 잘 안가서요. 우선 print를 쓰지 않고 cat을 굳이 사용하는 이유가 있는지가 궁금합니다. 강의에서의 for문 안에 if문의 값을 출력할때 print를 사용해서 출력을 하면 1,3,5,7,9가 행마다 값이 하나씩 출력이 되는데 cat을 썼을때는 13579가 한 줄로 나열이 되어서 출력이 되는 현상을 보았는데, 이를 행마다 값이 하나가 되게끔 하기 위해서 "/n"을 쓰신건가요? enter의 의미로 사용이 된다고 설명을 해주셨는데 이게 무슨 뜻인지도 잘 이해가 안갑니다.
-
미해결스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술
강의 예제 코드에서 자동 주입 질문입니다.
안녕하세요. 좋은 강의 만들어주셔서 감사합니다. 생성자에 @Autowired 를 붙이지 않아도 생성자가 1개뿐일 때 자동주입된다고 말씀해주셨는데요. 저는 DataSource 가 자동주입된다는 것으로 이해했습니다. 궁금한 점은 SpringConfing.java 에서 "return new JdbcTemplateMemberRepository(this.dataSource); " 에서 dataSource 를 파라미터로 전달했으니 스프링의 자동주입이 아니라는 생각이 들어서 질문 드립니다.. 감사합니다..
-
미해결[개정판 2023-11-27] Spring Boot 3.x 를 이용한 RESTful Web Services 개발
UserRepository interface로 선언시 실행 프로세스 설명 부탁드리겠습니다.
안녕하세요 선생님 궁금한점이 있어 질문드립니다. mybatis에서의 로직은 Dao를 interface로 생성하고 mapper.xml랑 mapping하여 dao의 구현부(?)로 설정하여 bean을 생성하는 로직인것으로 아는데 JPA에서는 어떻게 동작하는것일까요?? userRepository를 interface로 생성하여서 구현부없이 bean 생성시 에러가 발생하지 않나요? 내부적으로 구현부가 따로 있는것일까요? 설명좀부탁드리겠습니다.
-
미해결설계독학맛비's 실전 Verilog HDL Season 1 (Clock부터 Internal Memory까지)
유튜브 16강에 대해 질문드립니다~
안녕하세요 항상 영상 감사히 보고 있습니다~ 유튜브 강의에 대한 질문을 여기에 올려도 될지 모르겠네요.. 유튜브에 올려져 있는 FPGA 16강에서 궁금한 점이 생겨 이렇게 글을 남깁니다. vitis에서 malloc 함수를 통해 동적 메모리 할당을 하셨는데 기본적으로 할당된 heap size는 그보다 작게 배정이 되어있는 것 같습니다. size 조정없이 사용해도 문제 될 여지가 없을까요?~
-
미해결Slack 클론 코딩[실시간 채팅 with React]
원본 사이트에서 소스 코드는 어떻게 가져오시는 건가요?
강의 초반에도 말씀하셨었는데 실제 slack에서 html과 css를 가져오신다고 들었어요. 제로초님이 가져오신 소스코드 말고 실제로 제가 브라우저의 개발자 도구를 사용해서 소소코드를 직접 가져와 클론해보고 싶은데요. 어떻게 가져올 수 있나요? 실제 웹사이트 주소는 https://slack.com/get-started#/create 여기인데요. 저 페이지에서 html은 어떻게 가져와야 하는지, 어떤 css는 다운로드 해와야 하고, 어떤 css는 css-in-js로 가져와야 하는 것인지 궁금합니다! 또 편리하게 복사해오는 방법이 있다면 그것도 알려주세요!
-
미해결Slack 클론 코딩[실시간 채팅 with React]
styled 관련 질문입니다!
styled로 작성하는 것이 한 컴포넌트에 css를 미리 입히는 방식인데, 만약 한 컴포넌트의 css가 동적으로 바뀌어야 할 때라면 어떻게 해야하나요? 예를 들어, 어떤 웹사이트에서 theme기능을 구현하려 할 때, 같은 컴포넌트라더라도 theme마다 다른 스타일로 보여져야 할 때가 있을텐데요. 이런 경우에는 어떻게 해야할까요?
-
해결됨반응형 웹사이트 포트폴리오(Architecture Agency)
선생님 project 섹션 2개로 늘렸는데 2개의 섹션중 하나만 checked가 적용됩니다. 이럴땐 어떻게해야할까요?
<!-- work : responsive --> <section class="cd-section" id="works1"> <div> <div class="content"> <article class="work_inner"> <input type="radio" name="tabmenu" id="tab1" checked /> <input type="radio" name="tabmenu" id="tab2" /> <input type="radio" name="tabmenu" id="tab3" /> <input type="radio" name="tabmenu" id="tab4" /> <input type="radio" name="tabmenu" id="tab5" /> <input type="radio" name="tabmenu" id="tab6" /> <div class="r_tabs"> <div class="tab"> <div class="work_info" data-text="01"> <h3>WORK<span>_반응형</span></h3> <ul> <li><b>Topic</b> : Food</li> <li><b>Name of work</b> : <span>육쌈냉면</span></li> <li><b>Tool</b> : Visual Studio Code / Figma</li> </ul> <div class="detail"> <div><span>21.04</span>Completed Date</div> <div><span>100%</span>Contribution</div> </div> <a href="detail_yookssam.html" class="viewmore" >VIEW MORE <i class="fas fa-arrow-right"></i ></a> </div> <div class="work_pic"> <div class="r_pic1"></div> <div class="r_pic2"></div> </div> </div> <div class="tab"> <div class="work_info" data-text="02"> <h3>WORK<span>_반응형</span></h3> <ul> <li><b>Topic</b> : Fashion</li> <li> <b>Name of work</b> : <span>메종 마르지엘라</span> </li> <li><b>Tool</b> : Visual Studio Code / Figma</li> </ul> <div class="detail"> <div><span>21.01</span>Completed Date</div> <div><span>100%</span>Contribution</div> </div> <a href="detail_mm.html" class="viewmore" >VIEW MORE <i class="fas fa-arrow-right"></i ></a> </div> <div class="work_pic"> <div class="r_pic3"></div> <div class="r_pic4"></div> </div> </div> <div class="tab"> <div class="work_info" data-text="03"> <h3>WORK<span>_반응형</span></h3> <ul> <li><b>Topic</b> : Cosmetics</li> <li><b>Name of work</b> : <span>시드물</span></li> <li><b>Tool</b> : Visual Studio Code / Figma</li> </ul> <div class="detail"> <div><span>21.04</span>Completed Date</div> <div><span>100%</span>Contribution</div> </div> <a href="detail_sidmool.html" class="viewmore" >VIEW MORE <i class="fas fa-arrow-right"></i ></a> </div> <div class="work_pic"> <div class="r_pic5"></div> <div class="r_pic6"></div> </div> </div> <div class="tab"> <div class="work_info" data-text="04"> <h3>WORK<span>_반응형</span></h3> <ul> <li><b>Topic</b> : Art</li> <li><b>Name of work</b> : <span>성남아트센터</span></li> <li><b>Tool</b> : Visual Studio Code / Figma</li> </ul> <div class="detail"> <div><span>21.04</span>Completed Date</div> <div><span>100%</span>Contribution</div> </div> <a href="detail_seongnam.html" class="viewmore" >VIEW MORE <i class="fas fa-arrow-right"></i ></a> </div> <div class="work_pic"> <div class="r_pic7"></div> <div class="r_pic8"></div> </div> </div> <div class="tab"> <div class="work_info" data-text="05"> <h3>WORK<span>_반응형</span></h3> <ul> <li><b>Topic</b> : Products</li> <li><b>Name of work</b> : <span>자코모</span></li> <li><b>Tool</b> : Visual Studio Code / Figma</li> </ul> <div class="detail"> <div><span>21.03</span>Completed Date</div> <div><span>100%</span>Contribution</div> </div> <a href="detail_jacomo.html" class="viewmore" >VIEW MORE <i class="fas fa-arrow-right"></i ></a> </div> <div class="work_pic"> <div class="r_pic9"></div> <div class="r_pic10"></div> </div> </div> <div class="tab"> <div class="work_info" data-text="06"> <h3>WORK<span>_반응형</span></h3> <ul> <li><b>Topic</b> : Fashion</li> <li><b>Name of work</b> : <span>반스</span></li> <li><b>Tool</b> : Visual Studio Code / Figma</li> </ul> <div class="detail"> <div><span>21.04</span>Completed Date</div> <div><span>100%</span>Contribution</div> </div> <a href="detail_vans.html" class="viewmore" >VIEW MORE <i class="fas fa-arrow-right"></i ></a> </div> <div class="work_pic"> <div class="r_pic11"></div> <div class="r_pic12"></div> </div> </div> </div> <div class="btn"> <label for="tab1"><!-- tab1 --></label> <label for="tab2"><!-- tab2 --></label> <label for="tab3"><!-- tab3 --></label> <label for="tab4"><!-- tab4 --></label> <label for="tab5"><!-- tab5 --></label> <label for="tab6"><!-- tab6 --></label> </div> </article> </div> </div> </section> <!-- work : adaptive --> <section class="cd-section" id="works2"> <div> <div class="content"> <article class="work_inner"> <input type="radio" name="tabmenu" id="tab10" checked /> <input type="radio" name="tabmenu" id="tab11" /> <input type="radio" name="tabmenu" id="tab12" /> <input type="radio" name="tabmenu" id="tab13" /> <div class="a_tabs"> <div class="tab"> <div class="work_info" data-text="01"> <h3>WORK<span>_적응형</span></h3> <ul> <li><b>Topic</b> : Place</li> <li><b>Name of work</b> : <span>쌈지길</span></li> <li><b>Tool</b> : Visual Studio Code / Figma</li> </ul> <div class="detail"> <div><span>20.12</span>Completed Date</div> <div><span>100%</span>Contribution</div> </div> <a href="detail_ssamzi.html" class="viewmore" >VIEW MORE <i class="fas fa-arrow-right"></i ></a> </div> <div class="work_pic"> <div class="a_pic1"></div> <div class="a_pic2"></div> </div> </div> <div class="tab"> <div class="work_info" data-text="02"> <h3>WORK<span>_적응형</span></h3> <ul> <li><b>Topic</b> : Person</li> <li><b>Name of work</b> : <span>데이비드 간디</span></li> <li><b>Tool</b> : Visual Studio Code / Figma</li> </ul> <div class="detail"> <div><span>21.12</span>Completed Date</div> <div><span>100%</span>Contribution</div> </div> <a href="detail_gandy.html" class="viewmore" >VIEW MORE <i class="fas fa-arrow-right"></i ></a> </div> <div class="work_pic"> <div class="a_pic3"></div> <div class="a_pic4"></div> </div> </div> <div class="tab"> <div class="work_info" data-text="03"> <h3>WORK<span>_적응형</span></h3> <ul> <li><b>Topic</b> : Cosmetics</li> <li><b>Name of work</b> : <span>조 말론 코오롱</span></li> <li><b>Tool</b> : Visual Studio Code / Figma</li> </ul> <div class="detail"> <div><span>20.11</span>Completed Date</div> <div><span>100%</span>Contribution</div> </div> <a href="detail_jm.html" class="viewmore" >VIEW MORE <i class="fas fa-arrow-right"></i ></a> </div> <div class="work_pic"> <div class="a_pic5"></div> <div class="a_pic6"></div> </div> </div> <div class="tab"> <div class="work_info" data-text="04"> <h3>WORK<span>_적응형</span></h3> <ul> <li><b>Topic</b> : Food</li> <li><b>Name of work</b> : <span>하겐다즈</span></li> <li><b>Tool</b> : Visual Studio Code / Figma</li> </ul> <div class="detail"> <div><span>21.03</span>Completed Date</div> <div><span>100%</span>Contribution</div> </div> <a href="detail_haagan.html" class="viewmore" >VIEW MORE <i class="fas fa-arrow-right"></i ></a> </div> <div class="work_pic"> <div class="a_pic7"></div> <div class="a_pic8"></div> </div> </div> </div> <div class="btn"> <label for="tab10"><!-- tab1 --></label> <label for="tab11"><!-- tab2 --></label> <label for="tab12"><!-- tab3 --></label> <label for="tab13"><!-- tab4 --></label> </div> </article> </div> </div> </section> /* ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ section : works */ .work_inner { height: 100%; border: 2px solid #ddd; overflow: hidden; } /* 속성선택자 */ input[name="tabmenu"] { display: none; } .btn { /* border: 2px solid #000; */ position: absolute; left: 0px; bottom: 100px; width: 30%; text-align: center; } .btn label { cursor: pointer; width: 5px; height: 5px; border-radius: 50%; background-color: #000; display: inline-block; margin-right: 15px; position: relative; } .btn label::before { content: ""; display: inline-block; border: 1px solid transparent; width: 15px; height: 15px; border-radius: 50%; position: absolute; left: -6px; top: -6px; transition: 0.3s; } .btn label:hover::before { border: 1px solid #aaa; } /* 반응형 */ input[id="tab1"]:checked ~ .btn label[for="tab1"]::before, input[id="tab2"]:checked ~ .btn label[for="tab2"]::before, input[id="tab3"]:checked ~ .btn label[for="tab3"]::before, input[id="tab4"]:checked ~ .btn label[for="tab4"]::before, input[id="tab5"]:checked ~ .btn label[for="tab5"]::before, input[id="tab6"]:checked ~ .btn label[for="tab6"]::before { border: 1px solid #222; } input[id="tab1"]:checked ~ .r_tabs { margin-left: 0; } input[id="tab2"]:checked ~ .r_tabs { margin-left: -100%; } input[id="tab3"]:checked ~ .r_tabs { margin-left: -200%; } input[id="tab4"]:checked ~ .r_tabs { margin-left: -300%; } input[id="tab5"]:checked ~ .r_tabs { margin-left: -400%; } input[id="tab6"]:checked ~ .r_tabs { margin-left: -500%; } /* 적응형 */ input[id="tab10"]:checked ~ .btn label[for="tab10"]::before, input[id="tab11"]:checked ~ .btn label[for="tab11"]::before, input[id="tab12"]:checked ~ .btn label[for="tab12"]::before, input[id="tab13"]:checked ~ .btn label[for="tab13"]::before { border: 1px solid #222; } input[id="tab10"]:checked ~ .a_tabs { margin-left: 0; } input[id="tab11"]:checked ~ .a_tabs { margin-left: -100%; } input[id="tab12"]:checked ~ .a_tabs { margin-left: -200%; } input[id="tab13"]:checked ~ .a_tabs { margin-left: -300%; } .r_tabs { width: 600%; height: 100%; /* border: 2px solid green; */ transition: 0.5s; } .r_tabs .tab { height: 100%; /* width: 100%; 로 하면 안되는이유 : 300의 100을 받아오는거임 그래서 300으로 생각하기 때문에 걍 300의 3등분이라 생각해서 33.3333을 써줘야하는 것 */ width: calc(100% / 6); float: left; } .a_tabs { width: 400%; height: 100%; /* border: 2px solid green; */ transition: 0.5s; } .a_tabs .tab { height: 100%; /* width: 100%; 로 하면 안되는이유 : 300의 100을 받아오는거임 그래서 300으로 생각하기 때문에 걍 300의 3등분이라 생각해서 33.3333을 써줘야하는 것 */ width: 25%; float: left; } .tab > div { /* border: 2px solid yellow; */ height: 100%; float: left; }