묻고 답해요
164만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결Vue.js 끝장내기 - 실무에 필요한 모든 것
vue-til-server npm 버전
node 버전을 10.16.3으로 변경 후 npm run dev로 빌드하면 해당 Npm 버전을 지원하지 않는다는 에러가 뜹니다. 지금 2회차 수강인데 전에는 잘 되었던 부분입니다. 해결 방법이 무엇인지 문의드려요
-
미해결시스템엔지니어가 알려주는 리눅스 실전편 Bash Shell Script
스크립트 부분 올려주실수 있으신가요~?
스크립트 부분 올려주실수 있으신가요~?
-
해결됨스프링 MVC 1편 - 백엔드 웹 개발 핵심 기술
서블릿 컨테이너, was가 헷갈립니다.
안녕하세요 강의 잘 듣고 있습니다. 그런데 WAS,서블릿 컨테이너, 서블릿 객체가 헷갈려서 질문드립니다. 강의 중, 서블릿 컨테이너는 톰캣처럼 서블릿을 지원하는 WAS라고 하셨습니다. 더불어, 다른 학생의 질문에 대한 영한님의 답변 중 "request 객체를 만들어서 서블릿에 넘겨주는 것은 서블릿 컨테이너의 역할입니다. response도 마찬가지로 서블릿 컨테이너가 합니다. 그리고 서블릿 컨테이너가 서블릿을 호출해주는 것이지요." 라고 하셨습니다. 그런데 그림에서는 request,response 객체를 생성하고 서블릿 객체를 호출하는 "웹 애플리케이션 서버(WAS)"와 서블릿 객체를 생성하고 관리하는 "서블릿 컨테이너"로 나뉘어져 있네요. 그림에서 "WAS"와 "서블릿 컨테이너"가 사실 같은 큰 서블릿 컨테이너인데 역할에 따라 구분해놓으신건가요??
-
해결됨게임 프로그래머 취업 전략 가이드
루키스님 추가질문입니다.
밑의 내용과 조금 이어지는 내용인데, 2년제 전문대 출신입니다. 컴퓨터공학 / 알고리즘 이런건 완전 모르는 초보이고 그상태에서 코딩만 시작한 코린이인데요.. 넥슨 같은 규모가 조금 큰 대기업에 신입으로 입사지원하게 될 경우 코딩테스트를 어떤식으로 난이도는 어떻게 진행되게 되나요?
-
미해결실전! 스프링 부트와 JPA 활용2 - API 개발과 성능 최적화
DTO 조회 방식 질문있습니다!
안녕하세요! 강의 너무 잘 듣고 있습니다! 강의를 듣다가 DTO 조회 방식에 대해 헷갈리는 부분이 있어 질문드립니다. DTO 조회 방식은 엔티티가 아니기 때문에 지연로딩이나 페치 조인을 사용할 수 없다고 알고있습니다. 그럼 DTO 조회 방식은 단순히 DB에서 데이터를 가져와서 DTO의 필드에 값을 채워주는 방식이고, 이 때, 엔티티에는 값을 따로 할당하지 않는건가요?? 그렇다면 영속성 컨텍스트에도 DB에서 조회한 데이터가 들어가지 않나요?
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
서버에 추천 알고리즘을 삽입해보고 싶어서 질문드립니다.
제가 클라이언트에서 userNumber 을 서버로 보내고 이를 서버의 index.js 에서 받아 위의 하이라이트 되어있는 코드의 2번째 줄에 넣어주고 싶은데 이를 어떡게 해야할지 잘 모르겠어서 질문 드립니다. 계속 시도를 해봐도 userNumber 이 undefine 되어있다고만 나오고 있습니다. 또한 POST로 보내줘야할 경로도 어떻게 설정해야할지 잘 모르겠습니다. 강의내용과 연관이 없는 내용이라 질문드리기 조심스러웠지만 해당 문제가 일주일 넘게 저를 괴롭히고 있는데 너무 답답하고 따로 물어볼 곳이 없어서 질문드리게 되었습니다. 답변해주신다면 정말 감사하겠습니다.
-
미해결비전공자를 위한 개발자 취업 올인원 가이드 [통합편]
클론코딩(강의x) 포트폴리오 질문입니다.~
어떤 기능을 처음부터 끝까지 혼자 만드는 연습을 해보려 합니다.한 사이트를 정하고 해당 사이트 UI만 보고 기능을 구현하려 해요. 처음부터 혼자 만들어 보고 깃헙으로 포트폴리오 작성할 예정입니다. 예를들어오늘의집 사이트의 상품목록, 카테고리, 상품등록기능을 구현하거나페이스북 사이트 로그인, 회원가입 기능을 구현해보려 합니다. 이 방식으로 진행한 경험이 취업에 도움이 될까요?? 올려주신 자료 '당신의 클론 코딩은 왜 실패하는가?' 에 클론코딩이란 기존 웹사이트를 밑바닥부터 만들어가는 강의라고 설명하고 있네요. 그리고 다른 클론코딩 관련 글에서도 '클론코딩 = 강의' 라는 뉘앙스인것 같습니다. 저는 강의를 보면서 하려는건 아니고 기획과 디자인만 기존 웹사이트를 참고하고 해당 기능은 혼자 만들어 보려합니다.그리고 해당 결과물을 포트폴리오로 써볼까하는데 도움이 될까요??
-
미해결시스템엔지니어가 알려주는 리눅스 실전편 Bash Shell Script
안녕하세요 강사님, 제안 하나 드려도 될까요?
안녕하세요 강사님 vagrant 세팅하면서 문의사항이 많은데, 능동적인 수강자가 아닐 경우엔, 세팅하다 안되는 과정에서 포기하시는 분도 있을듯 하여 제안 한가지 드립니다. 현재 서버세팅 과정에서 나타나는 문제점들이 대략 다 나온걸로 보이는데, 이를 강의중 한 파트로 추가 업로드를 해주시는게 어떠실까요~? 이렇게 된다면 문제해결에 쏟을 시간 대신 강의수강에 더 집중할수 있지 않을까하여 글 남겨봅니다. 감사합니다.
-
미해결
강의 자료 요청 드립니다.
Azure 기초 (AZ-900) 과목을 수강하고 있는데 PPT 자료 (강의 자료) 를 다운로드 받는 곳이 없습니다. 강의 자료를 요청 드립니다. 감사합니다.
-
해결됨it 취업을 위한 알고리즘 문제풀이 입문 (with C/C++) : 코딩테스트 대비
퀵 정렬 함수를 모르면 애초에 스스로 푸는 게 불가능한 문제였나요?
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 문제를 읽고 스스로 푸는 과정에서 정렬을 사용하면 좋겠다싶어서 여태껏 배운 삽입정렬, 버블정렬, 선택정렬을 사용해서 a, b배열을 정렬을 해봤는데 5번째에서 c배열을 진입하기도 전에 Time_Limit이 떠버렸습니다. 그런데 본 강의에서는 처음보는 퀵 정렬 함수를 이용하시더라구요ㅠ 애초에 이제껏 배웠던 정렬을 이용해서 푸는게 불가능 한 문제였더라면 코드를 작성하기 전 단계에서 퀵 정렬 함수를 미리 알려주셨으면 더 좋았을듯 합니다.
-
미해결파이썬 알고리즘 문제풀이 입문(코딩테스트 대비)
코딩테스트 공부방법
안녕하세요 코딩테스트 공부중인 직장인인데... 해당 문제들을 푸는데 현재 3번 풀고있는데 1번은 그래도 풀었는데 2번은 문제 이해안되서 못풀고 넘기고 3번문제 중간 N개 입력하는 것까진 구현 했는데 세개의 합을 구하는 리스트를 만드는 방법은 생각조차 안나더라구요 6월중에 모집할 부트캠프 코딩테스트 합격 목표로 잡고있는데 모르면 코드 보고 이해하고 다시 써보고 넘겨서 푸는게 좋을까요 아니면 될때까지 어떠한 시간이 걸리든 푸는게 좋을까요 추천 부탁드립니다.
-
미해결마케터를 위한 구글 애널리틱스 실무
강의북 요청드립니다~!
안녕하세요!PDF 강의북 요청드립니다. 감사합니다.
-
미해결스프링 배치
청크 배치 관련 write commit 및 rollback 관련 질문있습니다.
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 청크 프로그램으로 itemReader 에서 데이터를 조회 한후에 itemWriter로 데이터를 보낸후 데이터를 insert 처리를 합니다. 보통 청크 사이즈가 5이라고 하면 리드를 10건 했다면 write는 5건 단위로 커밋 및 롤백하는것으로 알고있는데요 만약에 리드를 10건으로 entity로 했고 entity안에 리스트 엔티티로 데이터가 1000건 있다면 write 할때는 어떤식으로 commit 및 롤백 처리 되나요? 기존 대로 5건씩 처리 되는건가요? customerItemWriter를 이용하여 리스트로 받고 for문을 이용하여 insert 및 update 합니다. for문으로 entity를 청크 사이즈 만큼 5건을 읽는데 entity에 list가 있어서 또 for 문으로 1000건을 돌려서 insert나 update 처리해야 되는경우입니다 public class TranPayObjectDto { private String clamUniqNo; private String fromDate; private String toDate; private String custId; private String isAuto; private String cmsServiceFlag; private List<NhcmsPayDto> nhcmsPayDto; private List<AutoBillAddDto> autoBillAddDto; } 1000건이 한번에 commit 되는건가요? 5건씩 commit 되는 건가요? 아니면 다른 방법으로 해야되는지 문의합니다 만일 1000건이 한번에 commit된다면 500건 단위로 강제로 commit하거나 rollback 할수 있는 방법이 있을까요? 아 제가 jdbcTemplate로 for문으로 돌려서 사용하는데 혹시 건 단위로 commit 되는건가요? 제가 좀 헷갈려서요 ... 만일 건 단위로 한다면 500건씩 묶어서 할수 있는 방법이 있나요?
-
미해결모의해킹 실무자가 알려주는, SQL Injection 공격 기법과 시큐어 코딩 : PART 1
MSSQL 설치과정 PHP 연동 오류입니다!
PHP 연동과정중에, 접속시 오류 발생되었습니다 MSSQL 오류해결방법으로 ntwdblib.dll 까지 바꿔보았지만 해결이 안되었습니다
-
미해결Python 엑셀 프로그래밍 - with xlsxwriter
파이썬으로 엑셀 암호걸기
파이썬으로 엑셀파일에 암호를 걸고싶은데 방법을 모르겠습니다. 엑셀 파일에 암호를 거는 코드를 알려주세요. 엑셀 파일을 클릭하면 비밀번호를 입력해야 파일을 열 수 있게 만들고 싶습니다.
-
미해결지금 당장 성과내기, 페이스북 퍼포먼스 마케팅 실습
강의자료 열람
안녕하세요. 성과지표 등 강의자료는 어디에서 다운받을 수 있나요?
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기
server쪽 npm install안됩니다 ㅠㅠ
server의 package.json 파일을 npm install 했을시, 아래와 같은 오류가 발생합니다. github에 기재되어 있던 node와 npm버전이 달라서 저의 node, npm버전에 맞게 package.json을 다음과 같이 수정했습니다. "node": "16.14.2", "npm": "8.5.0" 게시판을 둘러보면서 저와 같은 문제로 npm install이 안된분의 글을 보고 파이썬 역시 설치한 상태입니다. 하지만 다음과 같은 오류로 npm install이 진행되고 있지 않습니다. 혹시 아시는 분이 있으시다면 알려주세요 !!! npm ERR! code 1 npm ERR! path C:\Users\diddm\Downloads\boilerplate-mern-stack-master (2)\boilerplate-mern-stack-master\node_modules\bcrypt npm ERR! command failed npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c node-pre-gyp install --fallback-to-build npm ERR! Failed to execute 'C:\Program Files\nodejs\node.exe C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js configure --fallback-to-build --module=C:\Users\diddm\Downloads\boilerplate-mern-stack-master (2)\boilerplate-mern-stack-master\node_modules\bcrypt\lib\binding\bcrypt_lib.node --module_name=bcrypt_lib --module_path=C:\Users\diddm\Downloads\boilerplate-mern-stack-master (2)\boilerplate-mern-stack-master\node_modules\bcrypt\lib\binding --napi_version=8 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v93' (1) npm ERR! node-pre-gyp info it worked if it ends with ok npm ERR! node-pre-gyp info using node-pre-gyp@0.14.0 npm ERR! node-pre-gyp info using node@16.14.2 | win32 | x64 npm ERR! node-pre-gyp WARN Using needle for node-pre-gyp https download npm ERR! node-pre-gyp info check checked for "C:\Users\diddm\Downloads\boilerplate-mern-stack-master (2)\boilerplate-mern-stack-master\node_modules\bcrypt\lib\binding\bcrypt_lib.node" (not found) npm ERR! node-pre-gyp http GET https://github.com/kelektiv/node.bcrypt.js/releases/download/v3.0.8/bcrypt_lib-v3.0.8-node-v93-win32-x64-unknown.tar.gz npm ERR! node-pre-gyp http 404 https://github.com/kelektiv/node.bcrypt.js/releases/download/v3.0.8/bcrypt_lib-v3.0.8-node-v93-win32-x64-unknown.tar.gz npm ERR! node-pre-gyp WARN Tried to download(404): https://github.com/kelektiv/node.bcrypt.js/releases/download/v3.0.8/bcrypt_lib-v3.0.8-node-v93-win32-x64-unknown.tar.gz npm ERR! node-pre-gyp WARN Pre-built binaries not found for bcrypt@3.0.8 and node@16.14.2 (node-v93 ABI, unknown) (falling back to source compile with node-gyp) npm ERR! node-pre-gyp http 404 status code downloading tarball https://github.com/kelektiv/node.bcrypt.js/releases/download/v3.0.8/bcrypt_lib-v3.0.8-node-v93-win32-x64-unknown.tar.gz npm ERR! gyp info it worked if it ends with ok npm ERR! gyp info using node-gyp@8.4.1 npm ERR! gyp info using node@16.14.2 | win32 | x64 npm ERR! gyp info ok npm ERR! gyp info it worked if it ends with ok npm ERR! gyp info using node-gyp@8.4.1 npm ERR! gyp info using node@16.14.2 | win32 | x64 npm ERR! gyp info find Python using Python version 3.10.4 found at "C:\Users\diddm\AppData\Local\Programs\Python\Python310\python.exe" npm ERR! gyp ERR! find VS npm ERR! gyp ERR! find VS msvs_version not set from command line or npm config npm ERR! gyp ERR! find VS VCINSTALLDIR not set, not running in VS Command Prompt npm ERR! gyp ERR! find VS could not use PowerShell to find Visual Studio 2017 or newer, try re-running with '--loglevel silly' for more details npm ERR! gyp ERR! find VS looking for Visual Studio 2015 npm ERR! gyp ERR! find VS - not found npm ERR! gyp ERR! find VS not looking for VS2013 as it is only supported up to Node.js 8 npm ERR! gyp ERR! find VS npm ERR! gyp ERR! find VS ************************************************************** npm ERR! gyp ERR! find VS You need to install the latest version of Visual Studio npm ERR! gyp ERR! find VS including the "Desktop development with C++" workload. npm ERR! gyp ERR! find VS For more information consult the documentation at: npm ERR! gyp ERR! find VS https://github.com/nodejs/node-gyp#on-windows npm ERR! gyp ERR! find VS ************************************************************** npm ERR! gyp ERR! find VS npm ERR! gyp ERR! configure error npm ERR! gyp ERR! stack Error: Could not find any Visual Studio installation to use npm ERR! gyp ERR! stack at VisualStudioFinder.fail (C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:122:47) npm ERR! gyp ERR! stack at C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:75:16 npm ERR! gyp ERR! stack at VisualStudioFinder.findVisualStudio2013 (C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:363:14) npm ERR! gyp ERR! stack at C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:71:14 npm ERR! gyp ERR! stack at C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:384:16 npm ERR! gyp ERR! stack at C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\util.js:54:7 npm ERR! gyp ERR! stack at C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\util.js:33:16 npm ERR! gyp ERR! stack at ChildProcess.exithandler (node:child_process:406:5) npm ERR! gyp ERR! stack at ChildProcess.emit (node:events:526:28) npm ERR! gyp ERR! stack at maybeClose (node:internal/child_process:1092:16) npm ERR! gyp ERR! System Windows_NT 10.0.19044 npm ERR! gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\node_modules\\node-gyp\\bin\\node-gyp.js" "configure" "--fallback-to-build" "--module=C:\\Users\\diddm\\Downloads\\boilerplate-mern-stack-master (2)\\boilerplate-mern-stack-master\\node_modules\\bcrypt\\lib\\binding\\bcrypt_lib.node" "--module_name=bcrypt_lib" "--module_path=C:\\Users\\diddm\\Downloads\\boilerplate-mern-stack-master (2)\\boilerplate-mern-stack-master\\node_modules\\bcrypt\\lib\\binding" "--napi_version=8" "--node_abi_napi=napi" "--napi_build_version=0" "--node_napi_label=node-v93" npm ERR! gyp ERR! cwd C:\Users\diddm\Downloads\boilerplate-mern-stack-master (2)\boilerplate-mern-stack-master\node_modules\bcrypt npm ERR! gyp ERR! node -v v16.14.2 npm ERR! gyp ERR! node-gyp -v v8.4.1 npm ERR! gyp ERR! not ok npm ERR! node-pre-gyp ERR! build error npm ERR! node-pre-gyp ERR! stack Error: Failed to execute 'C:\Program Files\nodejs\node.exe C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js configure --fallback-to-build --module=C:\Users\diddm\Downloads\boilerplate-mern-stack-master (2)\boilerplate-mern-stack-master\node_modules\bcrypt\lib\binding\bcrypt_lib.node --module_name=bcrypt_lib --module_path=C:\Users\diddm\Downloads\boilerplate-mern-stack-master (2)\boilerplate-mern-stack-master\node_modules\bcrypt\lib\binding --napi_version=8 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v93' (1) npm ERR! node-pre-gyp ERR! stack at ChildProcess.<anonymous> (C:\Users\diddm\Downloads\boilerplate-mern-stack-master (2)\boilerplate-mern-stack-master\node_modules\node-pre-gyp\lib\util\compile.js:83:29) npm ERR! node-pre-gyp ERR! stack at ChildProcess.emit (node:events:526:28) npm ERR! node-pre-gyp ERR! stack at maybeClose (node:internal/child_process:1092:16) npm ERR! node-pre-gyp ERR! stack at Process.ChildProcess._handle.onexit (node:internal/child_process:302:5) npm ERR! node-pre-gyp ERR! System Windows_NT 10.0.19044 npm ERR! node-pre-gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\diddm\\Downloads\\boilerplate-mern-stack-master (2)\\boilerplate-mern-stack-master\\node_modules\\node-pre-gyp\\bin\\node-pre-gyp" "install" "--fallback-to-build" npm ERR! node-pre-gyp ERR! cwd C:\Users\diddm\Downloads\boilerplate-mern-stack-master (2)\boilerplate-mern-stack-master\node_modules\bcrypt npm ERR! node-pre-gyp ERR! node -v v16.14.2 npm ERR! node-pre-gyp ERR! node-pre-gyp -v v0.14.0 npm ERR! node-pre-gyp ERR! not ok
-
미해결구글 스프레드시트로 배우는 업무 자동화(직장인 코딩)
강의 자료 부탁드립니다.
안녕하세요. 강의자료 부탁드립니다. 감사합니다.
-
해결됨스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술
maven 으로 해도 되나요?
[질문 템플릿]1. 강의 내용과 관련된 질문인가요? (예/아니오)2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오)3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오)[질문 내용]회사에서는 maven을 사용하는데 gradle로 강의를 들으면 실무에 사용하는데 지장이 있을까요?? 아님 강의를 maven으로 프로젝트를 생성해서 만들어도 되나요??
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
checkbox, radio 버튼 - label 작동 안됨
save-forgot-login클래스의 checkbox를 작동시킬 때, label을 클릭하면 작동했다가 원래 상태로 돌아가게 되네요. 그리고 체크박스 이미지 부분은 클릭할 때 작동 자체가 안되네요.. (input 의 display:block을 해제하고 클릭해보면 제대로 작동됨) 이유가 뭔지 알고싶습니다. ( receive-email-login 클래스의 radio부분도 마찬가지로, 작동했다가 원래 상태로 바로 돌아갑니다 ㅠ) [ HTML ] <section> <form action="" class="login"> <button class="container"> <h1> Login Accounts </h1> <div class="user-login"> <!-- 이것이 로그인 뿐만 아니라, 이외에 등등 많이 사용될 수 있음. 따라서 재활용을 위해 class이름을 field로 저장해놓는 것 좋음 --> <span class="field"> User email <input type="email" class="email" placeholder="Type your email"> </span> <span class="field"> User Password <input type="password" class="password" placeholder="Type your password"> </span> </div> <div class="save-forgot-login"> <label for="save-email"><input type="checkbox" id="save-email" checked><em></em> Save your email </label> <a href="#none">forgot password? </a> </div> <div class="receive-email-login"> <span>Would you like to receive event emails?</span> <!-- checkbox가 아니라,radio임. --> <label><input type="radio" name="event" checked><em></em> Yes </label> <label><input type="radio" name="event"><em></em> No</label> </div> <input type="button" class="login-btn" value="LOGIN"> <div class="or-login"> Or Login using <div class="sns-login-icon"> <a href="#none"><i class="xi-google"></i></a> <a href="#none"><i class="xi-facebook"></i></a> <a href="#none"><i class="xi-naver"></i></a> <a href="#none"><i class="xi-kakaotalk"></i></a> </div> </div> <div class="signup-info"> <span>Have not account yet?</span> <a href="#none">SIGN UP</a> </div> </div> </form> </section> [ CSS ] /* font-family: 'Noto Sans KR', sans-serif */ /* Montserrat */ /* Fredoka */ /* Source Sans Pro */ @import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@300;400;500;600;700&family=Montserrat:wght@400;500&family=Noto+Sans+KR:wght@100;300;400;500&family=Source+Sans+Pro:wght@200;300;400&display=swap'); /* XEION CDN */ @import url('http://cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css'); /* Fontawesome 4.7 */ @import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); body{ margin:0; width: 100%; height: 100vh; color: #222; line-height: 1.5em; font-weight: 300; display: flex; justify-content: center; align-items: center; text-align: center; background: url("../[Final]-CSS 섹션 UI 디자인 - 커스텀 체크박스 로그인 폼/images/background.png") no-repeat center center; background-size: cover; } a{ text-decoration: none; color: #222; text-align: center; } *{ box-sizing: border-box; font-family: 'Noto Sans KR', sans-serif; } h1,h2,h3,h4,h5,h6{ margin:0; } /* input, button에 기본적으로 outline없애주기 */ input, button{ outline:none; } section{} /* container */ .container{ width: 420px; background-color: #fff; border-radius: 10px; padding:50px; font-size: 14px; border:none; box-shadow: 0 0 20px rgba(0, 0, 0, 0.155); } /* container heading */ .container h1{ font-size: 40px; } /* user-login */ .user-login{ text-align: left; margin-top:30px; } .user-login .field{ display: block; margin-top:20px; font-family: Fredoka; font-weight: 500; } input[type=email], input[type=password]{ display: block; border:none; margin-top:5px; width: 100%; padding:7px; border-bottom:1px solid #ccc; position: relative; padding-left:30px; } /* input 앞에 이미지 넣는 방법 */ input[type=email]{ background:url("../[Final]-CSS 섹션 UI 디자인 - 커스텀 체크박스 로그인 폼/images/icon-user.png") no-repeat center left 3px; } input[type=password]{ background:url("../[Final]-CSS 섹션 UI 디자인 - 커스텀 체크박스 로그인 폼/images/icon-password.png") no-repeat center left 3px; } input[type=email]::placeholder, input[type=password]::placeholder{ color: #aaa; transition: 0.35s; visibility: visible; } input[type=email]:focus::placeholder, input[type=password]:focus::placeholder{ opacity: 0; /* 완벽하게 하려면 visibility를 넣어주는 것이 좋지만, 꼭 넣어줄 필요는 없음. */ visibility: hidden; } /* save-forgot-login */ .save-forgot-login{ margin:30px 0; overflow: hidden; } .save-forgot-login label{ float: left; } .save-forgot-login input[id=save-email]{ display: none; } .save-forgot-login label{ cursor: pointer; } /* 인접해있는 em을 선택한다 (어디에 인접해있는 것인지를 명시할 필요 존재) */ .save-forgot-login input[id=save-email] + em{ background: url("../[Final]-CSS 섹션 UI 디자인 - 커스텀 체크박스 로그인 폼/images/icon-checkbox.png") no-repeat; display: inline-block; width: 18px; height: 18px; background-position: left center; vertical-align: middle; margin-top: -2px; margin-right: 5px; } .save-forgot-login input[id=save-email]:checked + em{ background-position: right center; } .save-forgot-login a{ float: right; } /* receive-email-login */ .receive-email-login{} .receive-email-login span{ display: block; margin-bottom: 10px; } /* .receive-email-login input[type=radio]{display: none;} */ .receive-email-login label{ margin:7px; } /* .rdo-yes em, .rdo-no em{ display: inline-block; width: 18px; height: 18px; background-position:left center; vertical-align: middle; margin-right: 5px; background-image: ("../[Final]-CSS 섹션 UI 디자인 - 커스텀 체크박스 로그인 폼/images/icon-radio.png"); } */ /* .rdo-yes.active em, .rdo-no.active em{ background-position: right center; } */ input[name=event]{ display: none; } input[name=event] + em{ background: url("../[Final]-CSS 섹션 UI 디자인 - 커스텀 체크박스 로그인 폼/images/icon-radio.png") no-repeat; background-position: left center; width: 18px; height: 18px; display: inline-block; margin-right: 5px; transform: translateY(3px); z-index: 1; } input[name=event]:checked + em{ background-position: right center; } /* login-btn */ .login-btn{ width: 270px; padding:10px; background: radial-gradient(circle 248px at center, #16d9e3 0%, #30c7ec 47%, #46aef7 100%); color: #fff; border-radius: 20px; margin: 20px; border:none; cursor: pointer; } /* or-login */ .or-login{ font-size: 14px; } .sns-login-icon{ padding-top:5px; padding-bottom: 10px; } .sns-login-icon a{ display: inline-block; width: 40px; height: 40px; border-radius: 50%; background-color: gray; margin:5px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.155); transition: 0.5s; } .sns-login-icon a:nth-child(1){ background-color: #dd4b39;} .sns-login-icon a:nth-child(2){ background-color: #3b5999;} .sns-login-icon a:nth-child(3){ background-color: #25D366;} .sns-login-icon a:nth-child(4){ background-color: #ffdc00;} .sns-login-icon a i{ font-size: 25px; line-height: 40px; color: #fff; } .sns-login-icon a:hover{ transform: rotateY(360deg); } /* signup-info */ .signup-info{} .signup-info span{ /* a태그에 display:block을 하면, 클릭 가능한 크기가 block만큼 나오게 됨*/ display: block; } .signup-info a{ font-weight: 500; } .signup-info a:hover{ text-decoration: underline; }