묻고 답해요
164만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결[C++과 언리얼로 만드는 MMORPG 게임 개발 시리즈] Part4: 게임 서버
event 관련 질문 있습니다.
동일한 내용으로 동일한 코드를 쳤는데 디버그로 cpu 점유율 확인시 저는 똑같이 8% 가 나오는데 혹시 어떤 부분에서 이러한 차이가 나는지 알 수 있을까요? mutex m; queue<int32> q; HANDLE handle; void Producer() { while (true) { { unique_lock<mutex> lock(m); q.push(100); } ::SetEvent(handle); this_thread::sleep_for(10000ms); } } void Consumer() { while (true) { ::WaitForSingleObject(handle, INFINITY); unique_lock<mutex> lock(m); if (q.empty() == false) { int32 data = q.front(); q.pop(); cout << data << endl; } } } int main() { handle = ::CreateEvent(NULL/*보안속성*/, FALSE/*bManualReset*/, FALSE/*bInitialState*/, NULL); thread t1(Producer); thread t2(Consumer); t1.join(); t2.join(); ::CloseHandle(handle); }
-
해결됨10주완성 C++ 코딩테스트 | 알고리즘 코딩테스트
2309 난쟁이 문제
http://boj.kr/38b4e63c5ae843bea191263fef5b34ba저는 이렇게 문제를 풀어보았는데요제 vscode에서는 출력값이 잘 나오는데 어떤 부분이 틀린건지 모르겠어서 질문 남깁니다 ㅠㅠ
-
미해결실전! Querydsl
sqlFunction 대체문?
@Test public void sqlFunction() throws Exception{ String result = queryFactory .select(Expressions.stringTemplate("function('replace', {0}, {1}, {2})", member2.username, "member", "M")) .from(member2) .fetchFirst(); System.out.println("result = " + result); } @Test public void sqlFunctionAlternate() throws Exception{ queryFactory .update(member2) .set(member2.username,replace("member","member","M")) .execute(); List<Member2> result = queryFactory .selectFrom(member2) .fetch(); System.out.println("result = " + result); }위 예제를 아래처럼 만들어봤는데 모든 엔티티들의 username=M 으로 나옵니다. 어떻게 하면 sqlFunction 사용하지않고 같은 결과를 만들수 있을까요>
-
미해결스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술
.\gradlew build 오류 관련 질문
학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요.1. 강의 내용과 관련된 질문을 남겨주세요.2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요.(자주 하는 질문 링크: https://bit.ly/3fX6ygx)3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요.(질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG)질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요.=========================================[질문 템플릿]1. 강의 내용과 관련된 질문인가요? (예/아니오)2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오)3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오)[질문 내용]여기에 질문 내용을 남겨주세요.다른 공부하는 분들도 겪는 에러인데 저 같은 경우에도 구글링과 질문글들을 통해 해결해보려 환경변수, intellij 내의 설정 모두 체크 했지만 안됐었습니다. 그런데 아래 링크를 통해https://breakcoding.tistory.com/394sourceCompatibility = '11'를 지우고 해보니 성공하였습니다. 그래서 질문은 gradle 파일에서 저 라인을 지워도 괜찮은건가요??아니라면 어떻게 하는게 맞을까요? 도와주세요..ㅠㅠ
-
미해결피그마로 콘텐츠 디자인하기
강의를 시작할때 컨텐츠 준비가 왜이런가요?
어떻게 저 오토레이아웃하기전 텍스트를 어떻게 만들었는지를 보여줘야지 이런식으로 하면 어떻게 수업을 따라가나요?
-
미해결자바스크립트 알고리즘 문제풀이 입문(코딩테스트 대비)
++과 +=1 의 성능상 차이가 있나요?
function solution(s, t) { let answer = 0; for(let i of s){ if(i===t) answer ++; / +=1과 ++의 차이점은 뭘까? } return answer; } 안녕하세요 강사님섹션1-10 문자찾기 문제에서 answer ++를 쓰셨는데, answer +=1과 answer ++의 차이점이 혹시 성능상 차이가 있을까요??
-
미해결자바스크립트 알고리즘 문제풀이 입문(코딩테스트 대비)
이렇게 풀어도 될까요?
function solution(nums) { for (let i = 0; i < nums.length - 1; i++) { let key = i + 1; for (let j = i; j >= 0; j--) { if (nums[key] < nums[j]) { [nums[key], nums[j]] = [nums[j], nums[key]]; key--; } } } return nums; }
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
2가지 질문 드려요
01.children이 무엇인지 알려주시거나 알 수 있는 링크를 전달해 주실 수 있으신지요?AppLayout.propTypes = { children: PropTypes.node.isRequired,}; 02.위와 같이 쓸 때 마침표(.)가 무엇을 의미하는지, 마침표 다음에 오는 PropTypes나 node나 isRequired이 무엇을 의미하는지 알 수 있을까요?
-
미해결스프링 배치
H2 DATABASE
h2 DATABASE 연결은 강의 챕터 어디에서 설명이 나와있나요? mysql은 연결해서 yml 작성하다가 h2는 내용에없는데 제가 못본것 같아서 여쭤봅니다
-
미해결처음 만난 리액트(React)
List and Key
실습을 하고 전부 확인을 해보니 warning이 하나가 남아있는데 이건 아무리 잡아도 사라지지를 않아서 질문 남겨봅니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
페이지네이션 isActive
안녕하세요. 페이지네이션 포트폴리오 리뷰 강의를 참고해서 현재 활성화된 페이지를 표현하는 부분을 구현했는데, 활성화된 페이지를 클릭하는 부분에서 1~10페이지까지는 각 페이지별로 클릭하면 활성화 표시가 잘 되는데 11페이지로 넘어가면 12페이지부터 클릭하면 활성화 표시가 사라집니다. 어떤 부분이 문제일까요?다음 페이지 클릭 시, 11페이지는 활성화12페이지 클릭 시, 활성화된 페이지 표시 사라짐
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
antd적용 후 새로고침 or 서버 재시작시 에러가 납니다.
서버 켜져있는 상태에서 antd.css 임포트 시키고, 태그들도 <Menu.Item>으로 묶어주었습니다. 저장하면 css가 잘 적용되어 나오는데 그 후, 새로고침이나서버 재시작하면 아래와 같이 에러가 표기됩니다.react 버전이 문제인지 잘 모르겠습니다.. useContext ... 현재 hooks 사용한 부분은 없는데 왜 이런 문구가 나오는지 모르겠습니다 ㅠㅠ 혹시몰라 작성한 모든 코드들은 맨 아래에 첨부합니다.현재 사용하고 있는 버전은 아래와 같습니다.[브라우저에 표시되는 에러]Server ErrorTypeError: Cannot read properties of null (reading 'useContext')This error happened while generating the page. Any console logs will be displayed in the terminal window.Call StackObject.useContextfile:///Users/jeondaewon/WebstormProjects/react-nodebird/node_modules/react/cjs/react.development.js (1618:21)<unknown>file:///Users/jeondaewon/WebstormProjects/react-nodebird/node_modules/antd/lib/menu/index.js (43:24)renderWithHooksfile:///Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5658:16)renderForwardReffile:///Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5842:18)renderElementfile:///Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6005:11).... [터미널 에러 로그] Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:1. You might have mismatching versions of React and the renderer (such as React DOM)2. You might be breaking the Rules of Hooks3. You might have more than one copy of React in the same appSee https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.error - TypeError: Cannot read properties of null (reading 'useContext') at Object.useContext (/Users/jeondaewon/WebstormProjects/react-nodebird/node_modules/react/cjs/react.development.js:1618:21) at /Users/jeondaewon/WebstormProjects/react-nodebird/node_modules/antd/lib/menu/index.js:43:24 at renderWithHooks (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5658:16) at renderForwardRef (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5842:18) at renderElement (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6005:11) at renderNodeDestructiveImpl (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11) at renderNodeDestructive (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14) at renderContextConsumer (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5906:3) at renderElement (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6023:11) at renderNodeDestructiveImpl (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11) at renderNodeDestructive (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14) at finishClassComponent (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5688:3) at renderClassComponent (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5696:3) at renderElement (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5943:7) at renderNodeDestructiveImpl (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11) at renderNodeDestructive (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14) at renderNode (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6259:12) at renderChildrenArray (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6211:7) at renderNodeDestructiveImpl (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6141:7) at renderNodeDestructive (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14) at renderNode (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6259:12) at renderHostElement (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5642:3) at renderElement (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5952:5) at renderNodeDestructiveImpl (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11) at renderNodeDestructive (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14) at renderIndeterminateComponent (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5785:7) at renderElement (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7) at renderNodeDestructiveImpl (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11) at renderNodeDestructive (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14) at renderIndeterminateComponent (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5785:7) at renderElement (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7) at renderNodeDestructiveImpl (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11) at renderNodeDestructive (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14) at renderIndeterminateComponent (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5785:7) at renderElement (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7) at renderNodeDestructiveImpl (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11) at renderNodeDestructive (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14) at renderIndeterminateComponent (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5785:7) at renderElement (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7) at renderNodeDestructiveImpl (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11) at renderNodeDestructive (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14) at renderNode (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6259:12) at renderChildrenArray (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6211:7) at renderNodeDestructiveImpl (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6141:7) at renderNodeDestructive (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14) at renderElement (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5971:9) at renderNodeDestructiveImpl (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11) at renderNodeDestructive (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14) at renderNode (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6259:12) at renderChildrenArray (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6211:7) { page: '/'} [소스코드]
-
미해결10주완성 C++ 코딩테스트 | 알고리즘 코딩테스트
자바스크립트 큐
안녕하세요 큰돌님.혹시 C++로 코테를 연습하다가급하게 JS로 코테를 봐야할 때 큐는 어떻게 해야 할까요? 따로 자료구조가 없어서..직접 구현하는 코드를 외워야 하나요?
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
서버 오류일까요..?
계속 서버를 껏다 켯다 합니다. 그러면 적용된게 보입니다.조그만 코드가 달라져도 적용이 안되어서 껏다 켯다 반복해야하는데.. ctrl+c 로 끄고 npm run dev 매번 이렇게 해야하나요ㅜㅜ
-
미해결프로그래밍 시작하기 : 파이썬 입문 (Inflearn Original)
파일 전송 부탁합니다.
sub파일이 어디에 있는지 모르겠네요 다른분들도 이메일로 받는 것 같아서 요청합니다ok9957@gmail.com
-
미해결15일간의 빅데이터 파일럿 프로젝트
부록_실무로 배우는 빅데이터 기술-확장하기(유튜브 강의)
부록_실무로 배우는 빅데이터 기술-확장하기(유튜브 강의)강의 교안 PPT를 받고 싶습니다제공 가능한지 문의드립니다
-
미해결한큐에 끝내는 해커톤 입문_아두이노와 웹
영상외 강의자료는 없나요
영상외 강의자료는 없는지 궁금합니다.
-
미해결라즈베리파이 IoT 프로그램과 클라우드 입문 과정
와이파이 연결 안됨
추가 세팅 이전에는 와이파이가 잘잡혔는데 추가 세팅 이후에는 와이파이를 계속 못잡고 연결이 안됩니다. SD 카드를 포맷하고 다시 실행했을때 또한 추가세팅 이후에는 와이파이 연결이 안되네요.. 이유가 뭔지 알고싶습니다
-
미해결스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술
index.html vs hello-static.html
static 폴더에 index.html , hello-static.html 두개의 html파일이 있는데 localhost:8080을 입력 했을 때 index.html이 뜨는 이유가 뭔가요?왜 index.html이 우선적으로 뜨나요?
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
position과 input 입력 가능여부의 관계에 대해 질문드리고 싶습니다
■ 질문 남기실 때 꼭! 참고해주세요.- 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다.선생님 안녕하세요혹시 교안의 코드가 아닌 코드를 질문드려도 괜찮으실까요?Daily UI #007 | Settings (codepen.io)다른 사이트의 코드를 활용해보는 중인데, 이해가 어려운 부분이 있어서 가르쳐주시면 감사하겠습니다질문을 받아주시면 정말 감사하겠습니다소스코드는 맨 아래에 있습니다 1번째로 드리고 싶은 질문입니다왜 보라색 표시를 한 input text 코드에 입력이 안되는지그리고 position absolute를 해제해야만 input text가 입력이 되는지 그 이유가 너무 궁금해서 질문드리게 되었습니다 2번째로 드리고 싶은 질문입니다탭 버튼으로 다른 창으로 이동을 할 때,방금 전에 position:absolute 를 해제하니, 입력양식들이 아래로 밀려 내려갔습니다.혹시 position:absolute를 유지해도 input text 가 입력되게 하는 방법 또는position:absolute를 해제해도 원래 위치를 유지시키는 방법을 가르쳐주시면 정말 감사하겠습니다아래는 소스코드입니다<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <link rel="stylesheet" href="./style.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css"> <style> @import url("https://fonts.googleapis.com/css?family=Nunito:400,900|Montserrat|Roboto"); body { background: linear-gradient(to right, #3fb6a8, #7ed386); } .container { background: #ffffff; width: 540px; height: 420px; margin: 0 auto; position: relative; margin-top: 10%; box-shadow: 2px 5px 20px rgba(119, 119, 119, 0.5); } .logo { float: right; margin-right: 12px; margin-top: 12px; font-family: "Nunito Sans", sans-serif; color: #3dbb3d; font-weight: 900; font-size: 1.5em; letter-spacing: 1px; } .CTA { width: 80px; height: 40px; right: -20px; bottom: 0; margin-bottom: 90px; position: absolute; z-index: 1; background: #7ed386; font-size: 1em; transform: rotate(-90deg); transition: all 0.5s ease-in-out; cursor: pointer; } .CTA h1 { color: #ffffff; margin-top: 10px; margin-left: 9px; } .CTA:hover { background: #3fb6a8; transform: scale(1.1); } .leftbox { float: left; top: -5%; left: 5%; position: absolute; width: 15%; height: 110%; background: #7ed386; box-shadow: 3px 3px 10px rgba(119, 119, 119, 0.5); } nav a { list-style: none; padding: 35px; color: #ffffff; font-size: 1.1em; display: block; transition: all 0.3s ease-in-out; } nav a:hover { color: #3fb6a8; transform: scale(1.2); cursor: pointer; } nav a:first-child { margin-top: 7px; } .active { color: #3fb6a8; } .rightbox { float: right; width: 65%; height: 100%; } .profile, .payment, .subscription, .privacy, .settings { transition: opacity 0.5s ease-in; position: absolute; width: 70%; } h1 { font-family: "Montserrat", sans-serif; color: #7ed386; font-size: 1em; margin-top: 20px; margin-bottom: 20px; } h2 { color: #777777; font-family: "Roboto", sans-serif; width: 80%; text-transform: uppercase; font-size: 8px; letter-spacing: 1px; margin-left: 2px; } td { font-family: "Montserrat", sans-serif; color: #777777; font-size: 1em; margin-top: 40px; margin-bottom: 35px; } /* td { color: #777777; font-family: "Roboto", sans-serif; width: 80%; text-transform: uppercase; font-size: 8px; letter-spacing: 1px; margin-left: 2px; } */ input { border-width: 1px; border-style: solid; border-image: linear-gradient(to right, #3fb6a8, rgba(126, 211, 134, 0.5)) 1 0%; border-top: 0; width: 80%; font-family: "Montserrat", sans-serif; font-size: 0.7em; padding: 7px 0; color: #070707; } p { border-width: 1px; border-style: solid; border-image: linear-gradient(to right, #3fb6a8, rgba(126, 211, 134, 0.5)) 1 0%; border-top: 0; width: 80%; font-family: "Montserrat", sans-serif; font-size: 0.7em; padding: 7px 0; color: #070707; } span { font-size: 0.5em; color: #777777; } .btn { float: right; font-family: "Roboto", sans-serif; text-transform: uppercase; font-size: 10px; border: none; color: #3fb6a8; } .btn:hover { text-decoration: underline; font-weight: 900; } /* input { border: 1px solid #dddddd; font-family: "Roboto", sans-serif; padding: 2px; margin: 0; } */ .privacy h2 { margin-top: 25px; } .settings h2 { margin-top: 25px; } .noshow { opacity: 0; } footer { position: absolute; width: 20%; bottom: 0; right: -20px; text-align: right; font-size: 0.8em; text-transform: uppercase; letter-spacing: 2px; font-family: "Roboto", sans-serif; } footer p { border: none; padding: 0; } footer a { color: #ffffff; text-decoration: none; } footer a:hover { color: #7d7d7d; } </style> <body> <div class="container"> <div id="logo"><h1 class="logo">hulu</h1> <div class="CTA"> <h1>Get $10</h1> </div> </div> <div class="leftbox"> <nav> <a id="profile" class="active"><i class="fa fa-user"></i></a> <a id="payment"><i class="fa fa-credit-card"></i></a> <a id="subscription"><i class="fa fa-tv"></i></a> <a id="privacy"><i class="fa fa-tasks"></i></a> <a id="settings"><i class="fa fa-cog"></i></a> </nav> </div> <div class="rightbox"> <div class="profile"> <h1>Payment Info</h1> <table> <tr> <td width="30%" align="center">이름</td> <td width="50%"><input type="text" id="name" name="name" placeholder="이름" style="padding-left: 10px; z-index:90"></td> </tr> <tr> <td align="center">이메일</td> <td><input type="text" id="email" placeholder="이메일" style="padding-left: 10px;"></td> </tr> </table> </div> <!-- <div class="payment noshow"> <h1>Payment Info</h1> <h2>Payment Method</h2> <p>Mastercard •••• •••• •••• 0000 <button class="btn">update</button></p> <h2>Billing Address</h2> <p>1234 Example Ave | Seattle, WA <button class="btn">change</button></p> <h2>Zipcode</h2> <p>999000</p> <h2>Billing History</h2> <p>2018<button class="btn">view</button></p> <h2>Redeem Gift Subscription </h2> <p><input type="text" placeholder="Enter Gift Code"></input> <button class="btn">Redeem</button></p> </div> --> <div class="subscription noshow"> <h1>Your Subscription</h1> <h2>Payment Date</h2> <p>05-15-2018 <button class="btn">pay now</button></p> <h2>Your Next Charge</h2> <p>$8.48<span> includes tax</span></p> <h2>Hulu Base Plan</h2> <p>Limited Commercials <button class="btn">change plan</button></p> <h2>Add-ons</h2> <p>None <button class="btn">manage</button></p> <h2>Monthly Recurring Total </h2> <p>$7.99/month</p> </div> <!-- <div class="privacy noshow"> <h1>Privacy Settings</h1> <h2>Manage Email Notifications<button class="btn">manage</button></h2> <p></p> <h2>Manage Privacy Settings<button class="btn">manage</button></h2> <p></p> <h2>View Terms of Use <button class="btn">view</button></h2> <p></p> <h2>Personalize Ad Experience <button class="btn">update</button></h2> <p></p> <h2>Protect Your Account <button class="btn">protect</button></h2> <p></p> </div> --> <div class="settings noshow"> <h1>Account Settings</h1> <h2>Sync Watchlist to My Stuff<button class="btn">sync</button></h2> <p></p> <h2>Hold Your Subscription<button class="btn">hold</button></h2> <p></p> <h2>Cancel Your Subscription <button class="btn">cancel</button></h2> <p></p> <h2>Your Devices <button class="btn">Manage Devices</button></h2> <p></p> <h2>Referrals <button class="btn">get $10</button></h2> <p></p> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <script type="text/javascript"> /*active button class onclick*/ $('nav a').click(function(e) { e.preventDefault(); $('nav a').removeClass('active'); $(this).addClass('active'); if(this.id === !'payment'){ $('.payment').addClass('noshow'); } else if(this.id === 'payment') { $('.payment').removeClass('noshow'); $('.rightbox').children().not('.payment').addClass('noshow'); } else if (this.id === 'profile') { $('.profile').removeClass('noshow'); $('.rightbox').children().not('.profile').addClass('noshow'); } else if(this.id === 'subscription') { $('.subscription').removeClass('noshow'); $('.rightbox').children().not('.subscription').addClass('noshow'); } else if(this.id === 'privacy') { $('.privacy').removeClass('noshow'); $('.rightbox').children().not('.privacy').addClass('noshow'); } else if(this.id === 'settings') { $('.settings').removeClass('noshow'); $('.rightbox').children().not('.settings').addClass('noshow'); } }); </script> </body> </html> 읽어주셔서 감사합니다