묻고 답해요
164만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결[C#과 유니티로 만드는 MMORPG 게임 개발 시리즈] Part7: MMO 컨텐츠 구현 (Unity + C# 서버 연동 기초)
강사님 질문드립니다
지금은 화살이 위아래로 논타겟팅으로 구현되었는데 타겟팅 스킬이나 나중에 기획이 바껴서 화살이 타겟팅된 적에게만 나가는 방식으로 구현하려면 vector3int 를 vector3로 바꿔서 구현해야하나요?? 즉 대각선에 있는적도 타겟팅이 된다면 공격이된다는 식으로 구현하려면 어떤식으로 해야할지 힌트부탁드립니다.
-
해결됨mongoDB 기초부터 실무까지(feat. Node.js)
arrayFilters 질문
안녕하세요! 항상 강의 잘듣고 있습니다. 감사합니다. Blog.updateMany( {}, { 'comments.$[element].user.name': name }, { arrayFilters: [{ 'element.user._id': userId }] }, ) 위 코드에서는 모든 blog를 대상으로 arrayFilters를 수행한다고 이해했는데요, 제가 이해가 가지 않는 부분은 왜 조건을 {} (빈 객체)로 설정했는지 입니다. {"comments.user._id" : userId}로 조건을 건다면 모든 blog 중에서 comments의 해당 userId가 존재하는 blog만을 대상으로 arrayFilters를 수행해서 좀 더 효율적이라고 생각하는데 이 부분에 대해서 설명 부탁드립니다. 감사합니다 :)
-
미해결스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술
validateDuplicatedName() 관련 질문 드립니다. - 자답 추가!!
회원가입 시 이름 중복 확인하는 메소드 안에서 IllegalAccessException 을 try/catch 문 쓰지 않고 작성을 하셨는데 하신 것을 보고 따라서 try/catch문 쓰지 않고 throw new IllegalAccessException을 하니 error: unreported exception IllegalAccessException; must be caught or declared to be thrown 이라는 에러가 발생합니다. 혹시 어떠한 원인인지 아실까요? 자바 버전은 오라클에서 다운받은 11입니다. ----------------------------------- 자답 추가합니다 ㅠㅠ IllegalAccessException 가 아니고 IllegalStateException으로 적었어야 했네요 ㅠㅠ 하.... 덕분에 강의안을 처음부터 천천히 복습하고 좋았습니다 ^^ ㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎ 다들 화이팅!
-
미해결초보를 위한 쿠버네티스 안내서
docker-compose up -d 친 후 발생한 오류에 대해 질문드려요.
안녕하세요, 강의 잘 보고 있습니다:) macOS에서 실습 진행 중 쿠버네티스 기본 실습 > 실습하기 > 3:40 부분에서 저는 영상대로 결과가 나오지 않고 오류가 보고됐습니다. 아래가 터미널에 뜬 오류 내용인데 길어서 일부만 가져왔습니다! Traceback (most recent call last): File "docker-compose", line 3, in <module> File "compose/cli/main.py", line 80, in main File "compose/cli/main.py", line 189, in perform_command File "compose/cli/command.py", line 60, in project_from_options File "compose/cli/command.py", line 152, in get_project File "compose/cli/docker_client.py", line 41, in get_client File "compose/cli/docker_client.py", line 170, in docker_client File "docker/api/client.py", line 197, in __init__ File "docker/api/client.py", line 221, in _retrieve_server_version docker.errors.DockerException: Error while fetching server API version: ('Connection aborted.', ConnectionRefusedError(61, 'Connection refused')) [49553] Failed to execute script docker-compose 구글링 해보니 도커가 running 상태가 아니라서 뜬 오류 같더군요. 실제로 명령줄에 docker info 라고 명령어를 치니 아래 같은 결과가 나왔습니다. Client: Context: default Debug Mode: false Plugins: app: Docker App (Docker Inc., v0.9.1-beta3) buildx: Build with BuildKit (Docker Inc., v0.5.1-docker) scan: Docker Scan (Docker Inc., v0.5.0) Server: ERROR: Cannot connect to the Docker daemon at unix:///var/run/docker.sock. Is the docker daemon running? errors pretty printing info 선생님께서도 제가 위에서 겪은 오류는 docker가 running 상태가 아닌 것이 원인이라고 보시나요? 그렇다면 선생님 영상에서는 따로 나오지 않았지만 docker를 실행하는 명령어를 아서 치셨기 때문에 3:40 부분에서 정상 작동이 된 건가요? 너무 궁금합니다 ㅠㅠ
-
해결됨뉴욕 프로덕트 디자이너가 알려주는, 입문자를 위한 UX디자인 개론
좋은 UI, 안 좋은 UI 사례
안녕하세요. 도서 사이트 예스24와 리디북스의 UI를 비교해봤습니다. BAD : YES24 먼저 안 좋은 UI의 예로 예스24 사이트를 들 수 있는데요. 상세 페이지 하나에 너무 많은 정보가 나타나는 걸 볼 수 있습니다. 같은 정보가 중복되는 건 물론 4개가 넘는 광고 배너와 이벤트 창, 네비게이션 바의 웹진, 추천도서 등 불필요한 요소가 시각적인 피로를 줍니다. 또 구매 정보와 구매 시 참고사항 (책 정보) 이 함께 있고 각각의 간격도 너무 멀어 산만한 느낌을 줍니다. 가장 혼란스러운 점은 네 개의 CTA 버튼입니다. 색상만 다른 네 개의 버튼이 함께 있어서 어떤 버튼이 메인인지 알기 힘들고 '바로 구매' 와 '원클릭 구매'는 버튼명도 비슷해서 두 개의 기능에 어떤 차이가 있는지 가늠하기 어렵습니다. GOOD : RIDIBOOKS 예스24와 비교했을 때 비교적 정돈된 환경을 보여줍니다. 구매 정보와 책 정보를 뚜렷이 구분해서 묶어놓은 부분이 눈에 띄고 키 컬러를 사용한 메인 버튼이 한 눈에 들어와 사용자가 다음 행동을 이어가는 데 혼란을 주지 않습니다. 과도한 정보없이 인기 책 정도를 네비게이션으로 보여주는 점이 예스24와 다르고, 또 '좋아요' 버튼을 눌렀을 때 바로 피드백이 나타나는 점도 예스24 ('좋아요' 버튼 클릭시 블로그 생성으로 넘어감), 네이버 책 ('좋아요' 버튼의 기능은 하트 색깔 바꾸기 정도, 위시리스트 기능은 사라지고 버튼만 남음) 등의 서비스와 차이를 보이는 부분입니다.
-
해결됨실전! 스프링 부트와 JPA 활용1 - 웹 애플리케이션 개발
gradlew 실행이 안됩니다
gradlew clean build했는데 오류가 납니다. 테스트가 실패했다고 뜨는것 같은데 왜 실패한지 모르겠습니다 FAILURE: Build failed with an exception. * What went wrong: Execution failed for task ':test'. > There were failing tests. See the report at: file:///C:/Users/mj751/Documents/javaStudy/jpashop/build/reports/tests/test/index.html * Try: Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights. * Get more help at https://help.gradle.org BUILD FAILED in 18s 7 actionable tasks: 7 executed
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
안녕하세요 깃허브 업로드 관련 질문드립니다.
안녕하세요! 이번에 강의 수강시작한 학생입니다. 다름이 아니라 혹시 강의중 공부했던 코드들 깃허브에 올려도 괜찮을까요? 깃허브에 올려서 틈틈히 복기하고싶은 목적입니다!
-
미해결작정하고 장고! Django로 Pinterest 따라만들기 : 바닥부터 배포까지
화면 관련 질문입니다.
제가 현재 mariadb까지 연동하는 강좌를 수강하였는데 이렇게 한쪽으로 몰리는 현상이 해결되지 않았습니다. static과 media 설정을 다했는데 왜 이런지 알려주시면 감사하겠습니다.
-
미해결홍정모의 따라하며 배우는 C++
[6:35] 반환값 최적화에 대해서 질문 있습니다
안녕하세요? 반환값 최적화에 대해 궁금한 점이 있어서 질문 드립니다. 해당 시간 화면을 보면, release 모드로 바꿔주었을때 call-by-value임에도 불구하고 doSomething 함수에 있는 temp 인스턴스와 main 함수에 있는 result 인스턴스의 주소가 서로 동일함을 확인할 수 있었습니다. 혹시 반환값 최적화는 1. release 모드로 바꿀 때 2. 초기화가 되는 대상이 '클래스'일 때 이 두가지를 반드시 포함해야만 반환값 최적화가 되는 건가요? 항상 영상 잘 보고 있습니다. 감사드립니다.
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
mysql Sequelize Database error 질문
안녕하세요 제로초님 어제 꽤나 많은 질문을 했던 수강생입니다.. 금일 EC2부터 다시 진행해봐도 같은 문제가 생겨 로그인을 불러오는 라우터에서 해당 에러를 발견했습니다. 혹시 이 문제로 로그인을 불러오지 못하는 걸까 싶어 질문을 남겼습니다.. Unknown column 'NaN' in 'on clause' 라는 에러인데.. 아래 부분은 mysql 접속해서 알아본 users 데이터입니다. 아래는 로그인 상태 불러오기 라우터에서 req.user 에 대한 콘솔내용입니다. 그리고 unbuntu back에서 ls하면 mysql 파일이 빨간색으로 떠야 정상인가요? mysql 설치했는데 안보여서요! ls, ls -al로 해도 안보이네요;; --- 저는 로그인 불러오는 라우터에 섬네일도 같이 찾아올 수 있도록 작업을 했습니다. 이 부분에서 문제가 있었는지 if문으로 유저의 섬네일 이미지가 있으면 다 가져오고 아니면 유저 정보만 가져오도록 하니까 유저 정보만 가져오네요... 하지만 아직 작은 문제들이있네요... 더 알아보도록 하겠습니다!
-
미해결
수료증 이름변경
수료증 발급 시 이름을 변경할 수 있나요??? - 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
-
미해결[백문이불여일타] 데이터 분석을 위한 고급 SQL 문제풀이
개별 쿼리 연결 시
강사님 안녕하세요. 해당 문제 답을 SELECT city, length(city) length_city FROM station ORDER BY length_city, city LIMIT 1; SELECT city, length(city) length_city FROM station ORDER BY length_city DESC, city LIMIT 1 라고 UNION 없이 적으셨는데 쿼리가 돌아가서 놀랐어요. 저는 개별 쿼리를 연결하려면 UNION이 꼭 필요하다고 생각했거든요. 그럼 쿼리 연결할 때 UNION이 꼭 필요한 경우는 언제인가요?? 그냥 세미콜론 하나로 연결 가능하다면 UNION은 왜 존재하는지 혼란스럽습니다 ;_;
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
사이트에서 연결할수 없다고 떠요 ㄷ
일단 말씀하신대로 코드를 따라갔고 vs코드를 껏다가 다시 켜서 node index.js로 실행한 결과 good bye라는 것은 잘 반환이 되는데 url 뒤에 /products라고 붙여보면 아래와 같은 흰화면이 나타납니다...
-
미해결[개정판] 파이썬 머신러닝 완벽 가이드
랜덤 포레스트 오류와 관련한 질문입니다
fit하는 과정에서 문제가 생긴 것 같고 몇달 전 저와 같은 질문을 하신분이 계셨는데 그분에게 답변해주신 것을 보고 따라해보려해도 해결이 안돼서 질문 남깁니다 어떤식으로 해결해야할 지 설명해주시면 감사하겠습니다 ㅜㅜ!from sklearn.model_selection import GridSearchCV params = { 'n_estimators':[100], 'max_depth' : [6, 8, 10, 12], 'min_samples_leaf' : [8, 12, 18 ], 'min_samples_split' : [8, 16, 20] } # RandomForestClassifier 객체 생성 후 GridSearchCV 수행 rf_clf = RandomForestClassifier(random_state=0, n_jobs=-1) grid_cv = GridSearchCV(rf_clf , param_grid=params , cv=2, n_jobs=-1 ) grid_cv.fit(X_train ) print('최적 하이퍼 파라미터:\n', grid_cv.best_params_) print('최고 예측 정확도: {0:.4f}'.format(grid_cv.best_score_))--------------------------------------------------------------------------- UnicodeEncodeError Traceback (most recent call last) <ipython-input-45-a4ef1b9de222> in <module> 10 rf_clf = RandomForestClassifier(random_state=0, n_jobs=-1) 11 grid_cv = GridSearchCV(rf_clf , param_grid=params , cv=2, n_jobs=-1 ) ---> 12 grid_cv.fit(X_train , y_train,encoding='UTF-8') 13 14 print('최적 하이퍼 파라미터:\n', grid_cv.best_params_) C:\ProgramData\Anaconda3\lib\site-packages\sklearn\utils\validation.py in inner_f(*args, **kwargs) 61 extra_args = len(args) - len(all_args) 62 if extra_args <= 0: ---> 63 return f(*args, **kwargs) 64 65 # extra_args > 0 C:\ProgramData\Anaconda3\lib\site-packages\sklearn\model_selection\_search.py in fit(self, X, y, groups, **fit_params) 777 verbose=self.verbose) 778 results = {} --> 779 with parallel: 780 all_candidate_params = [] 781 all_out = [] C:\ProgramData\Anaconda3\lib\site-packages\joblib\parallel.py in __enter__(self) 728 def __enter__(self): 729 self._managed_backend = True --> 730 self._initialize_backend() 731 return self 732 C:\ProgramData\Anaconda3\lib\site-packages\joblib\parallel.py in _initialize_backend(self) 738 """Build a process or thread pool and return the number of workers""" 739 try: --> 740 n_jobs = self._backend.configure(n_jobs=self.n_jobs, parallel=self, 741 **self._backend_args) 742 if self.timeout is not None and not self._backend.supports_timeout: C:\ProgramData\Anaconda3\lib\site-packages\joblib\_parallel_backends.py in configure(self, n_jobs, parallel, prefer, require, idle_worker_timeout, **memmappingexecutor_args) 492 SequentialBackend(nesting_level=self.nesting_level)) 493 --> 494 self._workers = get_memmapping_executor( 495 n_jobs, timeout=idle_worker_timeout, 496 env=self._prepare_worker_env(n_jobs=n_jobs), C:\ProgramData\Anaconda3\lib\site-packages\joblib\executor.py in get_memmapping_executor(n_jobs, **kwargs) 18 19 def get_memmapping_executor(n_jobs, **kwargs): ---> 20 return MemmappingExecutor.get_memmapping_executor(n_jobs, **kwargs) 21 22 C:\ProgramData\Anaconda3\lib\site-packages\joblib\executor.py in get_memmapping_executor(cls, n_jobs, timeout, initializer, initargs, env, temp_folder, context_id, **backend_args) 40 _executor_args = executor_args 41 ---> 42 manager = TemporaryResourcesManager(temp_folder) 43 44 # reducers access the temporary folder in which to store temporary C:\ProgramData\Anaconda3\lib\site-packages\joblib\_memmapping_reducer.py in __init__(self, temp_folder_root, context_id) 529 # exposes exposes too many low-level details. 530 context_id = uuid4().hex --> 531 self.set_current_context(context_id) 532 533 def set_current_context(self, context_id): C:\ProgramData\Anaconda3\lib\site-packages\joblib\_memmapping_reducer.py in set_current_context(self, context_id) 533 def set_current_context(self, context_id): 534 self._current_context_id = context_id --> 535 self.register_new_context(context_id) 536 537 def register_new_context(self, context_id): C:\ProgramData\Anaconda3\lib\site-packages\joblib\_memmapping_reducer.py in register_new_context(self, context_id) 558 new_folder_name, self._temp_folder_root 559 ) --> 560 self.register_folder_finalizer(new_folder_path, context_id) 561 self._cached_temp_folders[context_id] = new_folder_path 562 C:\ProgramData\Anaconda3\lib\site-packages\joblib\_memmapping_reducer.py in register_folder_finalizer(self, pool_subfolder, context_id) 588 # semaphores and pipes 589 pool_module_name = whichmodule(delete_folder, 'delete_folder') --> 590 resource_tracker.register(pool_subfolder, "folder") 591 592 def _cleanup(): C:\ProgramData\Anaconda3\lib\site-packages\joblib\externals\loky\backend\resource_tracker.py in register(self, name, rtype) 189 '''Register a named resource, and increment its refcount.''' 190 self.ensure_running() --> 191 self._send('REGISTER', name, rtype) 192 193 def unregister(self, name, rtype): C:\ProgramData\Anaconda3\lib\site-packages\joblib\externals\loky\backend\resource_tracker.py in _send(self, cmd, name, rtype) 202 203 def _send(self, cmd, name, rtype): --> 204 msg = '{0}:{1}:{2}\n'.format(cmd, name, rtype).encode('ascii') 205 if len(name) > 512: 206 # posix guarantees that writes to a pipe of less than PIPE_BUF UnicodeEncodeError: 'ascii' codec can't encode characters in position 18-20: ordinal not in range(128)
-
미해결대세는 쿠버네티스 (초급~중급편)
쿠버네티스 실습중 네트워킹 질문
쿠버네티스 Getting started - Kubernetes - 실습 강의 부분을 듣고 있는데 docker 이미지를 run 하고 브라우저에 어떤 IP와 포트번호를 입력해야 hello.js 파일을 볼 수 있을까요? 설치는 내PC + VirtualBox (Network: NatNetwork + Port Forwarding)을 그대로 따라했습니다!
-
미해결자바 ORM 표준 JPA 프로그래밍 - 기본편
cascade, orphanRemoval 질문입니다.
[우선 제가 이해한게 맞나요?] cascade - 부모 엔티티 삭제시 연결된 자식엔티티도 삭제됨. orphanRemoval - 부모 엔티티에서 자식 컬렉션 삭제시 자식 엔티티가 삭제됨 [질문] CascadeType.ALL, orphanRemoval = true 적용하고 부모 엔티티에서 자식 컬렉션의 특정 엔티티를 remove(0)했는데요 해당 번째 자식 엔티티(0)만 삭제 되는줄 알았는데 어째서 인지 부모 엔티티까지 삭제 되더라구요... 이유를 알 수 있을까요? public class Item { @OneToMany(mappedBy = "item", cascade = CascadeType.ALL, orphanRemoval = true) private List<ItemEnergy> itemEnergies = new ArrayList<>(); public void changeItemEnergies(List<ItemEnergy> itemEnergies) { if (itemEnergies != null) { this.itemEnergies.remove(0); // this.itemEnergies.addAll(itemEnergies); // this.itemEnergies = itemEnergies; // for (ItemEnergy itemEnergy : itemEnergies) { // itemEnergy.setItem(this); // } } } }
-
미해결스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술
main 함수 실행 버튼
안녕하세요. 프로젝트를 열고 HelloSpringApplication.java의 main함수를 실행시키고 싶은데 함수 좌측에 실행버튼이 안뜹니다. Configurations에서 Application을 추가하여 main class를 지정하려고해도 해당 main 함수를 찾을 수 없습니다.(아래사진) 아무설정 없이 기본으로 사진과 같이 settings.gradle의 해당프로젝트를 run하면 아래와 같이 출력됩니다. 실행설정을 어떻게 해야할까요? rootProject.name = 'hello-spring' 오후 3:46:51: Executing task ' --scan --scan --scan'... > Task :help Welcome to Gradle 6.8.3. To run a build, run gradle <task> ... To see a list of available tasks, run gradle tasks To see a list of command-line options, run gradle --help To see more detail about a task, run gradle help --task <task> For troubleshooting, visit https://help.gradle.org BUILD SUCCESSFUL in 922ms 1 actionable task: 1 executed Publishing a build scan to scans.gradle.com requires accepting the Gradle Terms of Service defined at https://gradle.com/terms-of-service. Do you accept these terms? [yes, no] yes Gradle Terms of Service accepted. Publishing build scan... A network error occurred. A valid SSL connection could not be established. This is likely due to the server presenting an invalid or untrusted certificate. Please consult the following URL for more information: https://gradle.com/help/plugin-ssl If you require assistance with this problem, please report it via https://gradle.com/help/plugin and include the following information via copy/paste. ---------- Gradle version: 6.8.3 Plugin version: 3.5 Request URL: https://scans-in.gradle.com/scans/publish/gradle/3.5/token Request ID: a5cf95a0-2899-469e-9927-20c63a7a403f Exception: javax.net.ssl.SSLHandshakeException: sun.security.validator.ValidatorException: PKIX path building failed: sun.security.provider.certpath.SunCertPathBuilderException: unable to find valid certification path to requested target ---------- 오후 3:47:05: Task execution finished ' --scan --scan --scan'.
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
관계설정관련질문입니다
안녕하세요. 제로초님 관계설정관련해서 문의가 있어서 찾아왔어요~😄😄 상황!! - 기존에 Post라는 모델이 있습니다. - 임시저장기능을 위해 TempPost 모델을 만드려고 합니다. ℹ️ 임시저장 관련설명 case1: 임시저장 사용않고 바로 posts 테이블에 저장할수있다. case2: posts 테이블모델에 저장 없이 임시저장만 할 수도 있다. case3: posts에 저장된 정보가 있는데, 미완된 최신수정본만 임시저장할 수 있다.(posts는 이전정보: 게시를 위해필요, tempPosts는 최신정보:미완이므로 게시하면 안됨) case4. 임시저장된 글을 posts테이블에 최종 저장시 해당글은 tempposts테이블에서 삭제된다. 즉 임시글은 posts에 참조가 없을 수도 있고(case2) 있을 수 있습니다(case3). 이런경우에도 관계를 설정해야하는건가요? 정답은 이것이다 딱 이런걸 원하는건 아니구요. 그냥 일반적인경우 어떤방식으로 할지가 궁금해서요~ 항상 강의 잘 보고 있습니다. 감사드려요~
-
미해결실전! 스프링 부트와 JPA 활용1 - 웹 애플리케이션 개발
HomeController 에서는 @GetMapping 이아닌 @RequestMapping를 사용하신 특별한 이유가 있나요?
Note: This annotation can be used both at the class and at the method level. In most cases, at the method level applications will prefer to use one of the HTTP method specific variants @GetMapping, @PostMapping, @PutMapping, @DeleteMapping, or @PatchMapping. 들여다보니 이런내용이 있길래 궁금해서 물어봤습니다. 대부분의 경우가 아닌 사례가 있는가싶어서 물어보았습니다. 감사합니다.
-
해결됨HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
확장선택자와 함께 가상클래스 checked 실전 퍼블리싱 06(탭 콘텐츠 - Slide) 질문
질문 디게 많네요.... 오래전에 해서 대부분 까먹었어요 원래 도저히 모르면 그냥 강의보면서 새로 만드는데 왜 안되는지 궁금해가지고 남깁니다.. html은 강사님과 똑같고요 구조는. css에서 문제가 있는거 같은데 왜 두번째 버튼을 누르면 세번째도 선택되고 세번째 버튼을 누르면 버튼 불은 안들어오는데 첫번째 슬라이드로 가지네요ㅠㅠ body { margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh; } .inner { width: 100%; height: 340px; position: relative; text-align: center; } input[name=tabmenu] { display: none; } .slide { position: relative; width: 300px; height: 300px; margin: 0 auto; overflow: hidden; } .slide-inner { position: absolute; top: 0; left: 0; width: 900px; font-size: 0; transition: 0.5s; } a { width: 300px; height: 300px; background-color: rgba(128, 128, 128, 0.24); display: inline-block; } .slide-inner a:nth-of-type(2) { background-color: pink; } .slide-inner a:nth-of-type(3) { background-color: purple; } input[id=tab1]:checked ~ .btn label[for=tab1], input[id=tab2]:checked ~ .btn label[for=tab2], input[id=tab2]:checked ~ .btn label[for=tab3] { background: crimson; } input[id=tab1]:checked ~ .slide .slide-inner { left: 0; } input[id=tab2]:checked ~ .slide .slide-inner { left: -300px; } input[id=tab3]:checked ~ .sldie .slide-inner { left: -600px; } .btn label { display: inline-block; width: 20px; height: 20px; background-color: lightgray; cursor: pointer; margin-top: 20px; border-radius: 50%; }