묻고 답해요
164만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결이미지 관리 풀스택(feat. Node.js, React, MongoDB, AWS)
로그인 안했는데 isPublic에 따라 setMyImages를 하는 이유가 있나요?
client\src\context\ImageContext.js 에서 로그인이 안된 상태에서도 isPublic에 따라 setMyImages를 하도록 되있는데 로그인 안한 상태에서는 /images 요청만 날리 개인 사진 보기 버튼이 있지도 않은데 setMyImages는 의미가 없지 않나요? useEffect(() => { setImageLoading(true) axios .get(imageUrl) // .then((result) => setImages((prevData) => [...prevData, ...result.data])) .then((result) => isPublic ? setImages((prevData) => [...prevData, ...result.data]) : setMyImages((prevData) => [...prevData, ...result.data]), ) .catch((err) => { console.error(err) setImageError(err) }) .finally(() => setImageLoading(false)) }, [imageUrl, isPublic]) useEffect(() => { if (me) { setTimeout(() => { axios .get('/users/me/images') .then((result) => setMyImages(result.data)) .catch((err) => console.error(err)) }, 0) } else { setMyImages([]) setIsPublic(true) } }, [me])
-
미해결이미지 관리 풀스택(feat. Node.js, React, MongoDB, AWS)
처음 시작할때 무한 스크롤이 안되요
안녕하세요 질문이 있습니다. 이미지가 20개 이상이고 15번째 이미지가 ref로 참조되고 있는데도 추가로 이미지를 불러오지 못하는 이유가 무엇일까요? https://github.com/node-hyun/file-attach-dropzone https://github.com/node-hyun/file-attach-dropzone/blob/main/client/src/components/ImageList.js
-
미해결Flutter 응용 - 공공 API를 활용한 앱 만들기 (MVVM 패턴)
MethodChannel 에 관해서 질문이요..
메소드채널을 사용해서 네이티브 통신을 할 수밖에 없는 상황인데요, iOS와 안드로이드 지식이 필수더라구요. 근데 이 부분을 공부하는데 있어서 모든 것들을 공부하는 건 시간낭비같고, 스위프트와 코틀린의 기본문법 만 익히면 되지않을까 생각하는데, 어떤가요?
-
미해결뉴욕 프로덕트 디자이너가 알려주는, 입문자를 위한 UX디자인 개론
[UX/UI]-Good vs Bad 과제 제출합니다.
안녕하세요,에릭님 사용자 친화적인 UX/UI를 설계하기위해 노력중인 3년차기 기획자입니다. 이번과제로 두 채용(원티드,사람인) 사이트를 비교해봤습니다. 취업사이트에는 2가지 유형(구직자,구인기업) 사용자가 존재하나 구직자 기준으로 좋은 UX/UI를 평가했습니다. ===================================================================== 1.멘탈모델과 컨셉모델 사용자(구직자)가 원하는 멘탈모델: 지원하고싶은 기업을 찾거나 취업에 도움이되는 콘텐츠를 기대 [Bad:사람인] ->요약:전체적으로 메인화면이 자체 상품의 고객인 구인 기업 위주로 사이트 컨셉이 설정되어 아쉬움 ->사람인에서 컨셉모델:기업 상품 판매를 향상하기 위한 페이지 정렬 ->공고 소개시 구직자에게는 노출될 필요성이 낮은 상품의 명칭표시(플레티넘,상품소개..) /(첫 화면만 약 500개기업 노출) ->개선 방향:(1) 첫화면에 표시되는 기업의 수 최소화 (2) 사용자(구직인)이 더 사이트에 오래 머물 수 있도록 도움이 되는 콘텐츠 강조 [Good:원티드] ->요약:메인화면의 구직자 중심의 콘텐츠를 제공하고 있다는 느낌이 듦 >원티드 컨셉모델:구직자에게 도움이되는 개인별 맞춤 공고 및 콘텐츠 제공 ->친절한 마이크로카피와 공고와 콘텐츠 간의 영역 구분 (Wanted 합격예측 성장) 배치가 직관적 ->한 페이지의 표시되는 콘테츠의 양도 많지 않으며,이미지 중심으로 노출되어 정보의 전달력이 효과적 ->원티드 AI 기반으로 지원자의 서류 합격 가능성을 수치료 표현해 ‘입사지원’에대한 CTA 유도 2.일관성 [사람인] ->웹(PC):채용공고 페이지내 상세 검색 조건(지역,경력등)변경시 최싱단으로 스크롤 업 후 변경 가능 ->모바일(IOS):상단 상세검색을 고정해 스크롤 다운시에도상세검색 조건 변경 가능 ->개선방향:웹화면에서도 상세 검색조건을 변경 가능하도록 변경해 웹/모바일에 일관된 경험 제공필요 [원티드] ->웹/모바일과 전체 페이지 구성이 동일 ->웹/앱 모두 스크롤 다운 후에도 상단에 검색 조건을 변경 가능해 사용자 친화적인 UX 제공 글자수세기 / 맞춤법 검사 내용 입력 3.전체 UX/UI 생각[사람인]한 페이지의 제공하는 정보가 많아 강조 되어야 할 정보가 눈에 들어오지 않습니다. 필요한 정보를 찾기 어렵다 보니 페이지에서 이탈률도 높아질 것으로 생각됩니다. 무엇보다 첫 화면에 4~500개가 되는 기업을 표시하는 것은 두 사용자 유형(구인 기업 좋지 않아 보입니다. [원티드] 심플한 IA(홈/탐색/커리어상장)와 적당한 콘텐츠 배치로 정보 확인에대한 직관성이 높았습니다. 서비스의 방향에대한 선택과 집중이 사용자 친화적인 UX환경을 만든것 같습니다. 원티드는 사람인과 달리 스타트업 중심의 채용공고를 집중으로 제공하고 있습니다. . 메인 타깃 연령 층이2~30층이다보니 텍스트가 아닌 이미지 중심으로 정보를 전달하고 콘텐츠 제공 방식 또한 개인 맞춤형으로 제공하고있다는 생각이 들었습니다.
-
미해결모든 개발자를 위한 HTTP 웹 기본 지식
@ResponseBody 사용할 경우 뷰리졸버 사용할 수 있는 법이요 !!
안녕하세요!! @ResponseBody 관련해 질문드려요 1 @ResponseBody 사용할 경우 , 뷰리졸버를 거치지 않고 return 타입이 String이면 data가 화면에 출력되잖아요 ! 근데 해당 data를 뷰리졸버 화면을 거쳐서 그 화면에 data를 뿌려주고 싶은데 방법이 없을까요? 자바스크립트를 사용하지 않는 방법으로요!
-
미해결웹 게임을 만들며 배우는 React
webpack.config.js에서 devServer 프로퍼티 질문이 있습니다.
output: { path: path.join(__dirname, "dist"), filename: "app.js", publicPath: "/dist/", }, devServer: { publicPath: "/dist/", hot: true, }, 이렇게 하고 패키지도 전부 정상적으로 설치했는데 자꾸 다음과 같은 에러가 뜹니다 혹시 무엇이 문제일가요?ㅠㅠ [webpack-cli] Invalid options object. Dev Server has been initialized using an options object that does not match the API schema. - options has an unknown property 'publicPath'. These properties are valid: object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, setupExitSignals?, static?, watchFiles?, webSocketServer? }
-
미해결React 기반 Gatsby로 기술 블로그 개발하기
tsconfig.json 파일에서 구성 파일에서 입력을 찾을 수 없다는 오류가 발생합니다.
tsconfig.json 생성하고 들여다보자마자 구성 파일에서 입력을 찾을 수 없다는 오류가 뜹니다.. 이럴 경우 해결책이 어떻게 될까요?? 구글링을 해봐도 해결책을 찾을 수 가 없습니다.
-
해결됨FreeRTOS 프로그래밍
TASKMAN 실습 중 이해가 안되는 것이 있습니다.
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요. TASKMAN 프로젝트 실습 중 이해가 안되는 내용이 있어서 질문 올립니다. 동일한 Priority를 가지는 Task1과 Task2 생성하고 3초 딜레이 후에 Task2의 Priority를 올리는 코드를 작성하여 결과를 보았습니다. configUSE_TIME_SLICING 은 1, configUSE_PREEPTION 은 1로 설정해놓은 상태여서, 예상되는 결과로는 약 3초정도 Task1과 Task2가 스위칭되면서 실행되다가 3초후엔 Task2만 실행될 것으로 예상을 하였습니다. 그런데 예상과 다르게 3초정도 지나니까 아예 정지를 해버리더군요. FreeRTOS 매뉴얼을 읽어보아도 별 문제 없이 제가 예상한대로 돌아가야할 것 같은데, 왜 이러는지 이해가 안됩니다. 사진은 01_TASKMAN 프로젝트의 TaskMain 함수의 내용 일부입니다. 확인 부탁 드립니다. 감사합니다.
-
미해결웹 게임을 만들며 배우는 React
babel 세팅에 에러가 발생합니다.
npx webpack 으로 설치하는데 Module build failed (from ./node_modules/babel-loader/lib/index.js): 라는 에러가 발생합니다. asset app.js 2.29 KiB [emitted] (name: app) ./client.jsx 39 bytes [built] [code generated] [1 error] ERROR in ./client.jsx Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Unknown option: .pluguns. Check out https://babeljs.io/docs/en/babel-core/#options for more information about options. at throwUnknownError (/Users/mac/Desktop/React/minigame/node_modules/@babel/core/lib/config/validation/options.js:133:27) at /Users/mac/Desktop/React/minigame/node_modules/@babel/core/lib/config/validation/options.js:118:5 at Array.forEach (<anonymous>) at validateNested (/Users/mac/Desktop/React/minigame/node_modules/@babel/core/lib/config/validation/options.js:94:21) at validate (/Users/mac/Desktop/React/minigame/node_modules/@babel/core/lib/config/validation/options.js:85:10) at loadPrivatePartialConfig (/Users/mac/Desktop/React/minigame/node_modules/@babel/core/lib/config/partial.js:80:50) at loadPrivatePartialConfig.next (<anonymous>) at /Users/mac/Desktop/React/minigame/node_modules/@babel/core/lib/config/partial.js:149:25 at Generator.next (<anonymous>) at step (/Users/mac/Desktop/React/minigame/node_modules/gensync/index.js:261:32) word-relay-setting (webpack 5.51.1) compiled with 1 error in 226 ms 도와주세요 ㅠㅠ
-
미해결스프링 핵심 원리 - 기본편
회원 클래스 다이어그램 질문있습니다!
회원 클래스 다이어그램에서, 왜 MemberRepository 인터페이스를, MemberService의 인터페이스가 아닌 구현체인 MemberServiceImpl가 참조하는 구조로 설계된건가요? MemberService도 구현체보다 인터페이스를 사용하는게 더 '역할과 구현의 분리'를 잘 지키는게 아닌가요?
-
미해결실전! 스프링 부트와 JPA 활용1 - 웹 애플리케이션 개발
category table
category 에서 child를 만들고 parent를 만드는 이유를 알 수 있을까요?? 그리고 child랑 parent의 의미를 정확히 알고 싶습니다... 간단한 예시를 들어 설명해 주실수 있으실까요?
-
해결됨웹 게임을 만들며 배우는 React
webpack dev server option 이 invalid 하답니다.
package.json { "name": "webpackbasic", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build":"webpack serve --env development" }, "author": "", "license": "ISC", "dependencies": { "react": "^17.0.2", "react-dom": "^17.0.2" }, "devDependencies": { "@babel/core": "^7.15.0", "@babel/preset-env": "^7.15.0", "@babel/preset-react": "^7.14.5", "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3", "babel-loader": "^8.2.2", "react-refresh": "^0.10.0", "webpack": "^5.50.0", "webpack-cli": "^4.8.0", "webpack-dev-server": "^4.0.0" } } webpack.config.js const path = require("path"); const refreshWebpack = require("@pmmmwh/react-refresh-webpack-plugin"); module.exports = { name:"word-relay-setting", mode:"development", devtool:"eval", resolve:{ extensions:['.js','.jsx'] }, entry:{ app:['./client'] }, module: { rules:[{ test: /\.jsx?/, loader: 'babel-loader', options: { presets: [ ['@babel/preset-env',{ targets:{ browsers:['> 1% in KR'] }, debug:true }], '@babel/preset-react' ], plugins: [ '@babel/plugin-proposal-class-properties', 'react-refresh/babel' ], } }], }, plugins:[ new refreshWebpack() ], output:{ path:path.join(__dirname,"dist"), filename:'app.js', publicPath:'/dist/', }, devServer:{ hot:true } } 오류 내용 어디가 문제인걸까요? 그리고 항상 질문한거 답변해주셔서 감사합니다.
-
해결됨빠르게 git - 핵심만 골라 배우는 Git/Github
pull request 질문드립니다.
안녕하세요! 좋은 강의 덕분에 git에 대해 많이 배워가는 중입니다! pull request를 날리는 과정에 대해 궁금한 점이 생겨 질문 남기게 되었습니다. fork, clone, 로컬에서 새로운 branch 생성 후 코드 작성 및 commit 생성 과정까지 모두 끝낸 후, 그 사이에 다른 협업자에 의해 협업 대상 repository에 변경사항이 생긴다면(새로운 내용이 업데이트된다면) 어떻게 처리해야하는지 알 수 있을까요?
-
미해결몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]
totalNum
let totalNum = 0; if(pageNum > 0){ //pageNum 이 0보다 크면 계속 빼줘. pageNum --; }else{ //0보다 작아지면 totalNum 을 넣어줘. pageNum = totalNum -1; //-1 } pageSetFunc(); 여기서 사용된 totalNum이 뭔가요?ㅜㅜ totalNum이 0이라면 왜 -1을 만들어 주나요??
-
미해결[파이토치] 실전 인공지능으로 이어지는 딥러닝 - 기초부터 논문 구현까지
라벨
커스텀 폴더에 있는 이미지를 사용하는 과정입니다. 마지막 셀 2개를 보시면 trainset에 label이 0과1 인 이미지가 2개 들어가 있는 것을 알수 있습니다. 하지만 iter를 사용하여 돌려보면 tensor([0]) 이라고만 뜨고 나머지 라벨 1인 결과는 보여주지 않습니다. 여러번 실행 해봐도 0밖에 나오지않고 다음것을 보여주지 않는데 무슨 문제인가요?
-
미해결데브옵스(DevOps)를 위한 쿠버네티스 마스터
kubeadm init 에러 두번째
kubeadm ini 했을때 에러가 첫번째는 /etc/kubernetes/manifests/ 아래에 있는 yaml 파일을 삭제하니 아래 에러는 처리됬습니다. -------------------- [ERROR FileAvailable--etc-kubernetes-manifests-kube-apiserver.yaml]: /etc/kubernetes/manifests/kube-apiserver.yaml already exists [ERROR FileAvailable--etc-kubernetes-manifests-kube-controller-manager.yaml]: /etc/kubernetes/manifests/kube-controller-manager.yaml already exists [ERROR FileAvailable--etc-kubernetes-manifests-kube-scheduler.yaml]: /etc/kubernetes/manifests/kube-scheduler.yaml already exists [ERROR FileAvailable--etc-kubernetes-manifests-etcd.yaml]: /etc/kubernetes/manifests/etcd.yaml already exists ===================================== 그러고 나니 아래 에러가 발생하네요. [wait-control-plane] Waiting for the kubelet to boot up the control plane as static Pods from directory "/etc/kubernetes/manifests". This can take up to 4m0s [kubelet-check] Initial timeout of 40s passed. [kubelet-check] It seems like the kubelet isn't running or healthy. [kubelet-check] The HTTP call equal to 'curl -sSL http://localhost:10248/healthz' failed with error: Get "http://localhost:10248/healthz": dial tcp 127.0.0.1:10248: connect: connection refused. [kubelet-check] It seems like the kubelet isn't running or healthy. [kubelet-check] The HTTP call equal to 'curl -sSL http://localhost:10248/healthz' failed with error: Get "http://localhost:10248/healthz": dial tcp 127.0.0.1:10248: connect: connection refused. [kubelet-check] It seems like the kubelet isn't running or healthy. [kubelet-check] The HTTP call equal to 'curl -sSL http://localhost:10248/healthz' failed with error: Get "http://localhost:10248/healthz": dial tcp 127.0.0.1:10248: connect: connection refused. [kubelet-check] It seems like the kubelet isn't running or healthy. [kubelet-check] The HTTP call equal to 'curl -sSL http://localhost:10248/healthz' failed with error: Get "http://localhost:10248/healthz": dial tcp 127.0.0.1:10248: connect: connection refused. [kubelet-check] It seems like the kubelet isn't running or healthy. [kubelet-check] The HTTP call equal to 'curl -sSL http://localhost:10248/healthz' failed with error: Get "http://localhost:10248/healthz": dial tcp 127.0.0.1:10248: connect: connection refused.
-
미해결데브옵스(DevOps)를 위한 쿠버네티스 마스터
kubeadm init 에러 나네요
kubeadm init 했는데 아래 에러가 납니다. root@master:~# kubeadm init [init] Using Kubernetes version: v1.22.1 [preflight] Running pre-flight checks error execution phase preflight: [preflight] Some fatal errors occurred: [ERROR FileAvailable--etc-kubernetes-manifests-kube-apiserver.yaml]: /etc/kubernetes/manifests/kube-apiserver.yaml already exists [ERROR FileAvailable--etc-kubernetes-manifests-kube-controller-manager.yaml]: /etc/kubernetes/manifests/kube-controller-manager.yaml already exists [ERROR FileAvailable--etc-kubernetes-manifests-kube-scheduler.yaml]: /etc/kubernetes/manifests/kube-scheduler.yaml already exists [ERROR FileAvailable--etc-kubernetes-manifests-etcd.yaml]: /etc/kubernetes/manifests/etcd.yaml already exists [preflight] If you know what you are doing, you can make a check non-fatal with `--ignore-preflight-errors=...` To see the stack trace of this error execute with --v=5 or higher
-
해결됨HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
질문있습니다.!
탭 메뉴 콘텐츠(스타일 01) with JQUERY 수업을 듣고 얼마가지 않아서 또 질문을 하게 됐는데, 선생님 귀찮게해서 죄송합니다ㅠㅠ 먼저, 궁금한 점이 2가지! 있습니다.! <html> <!-- jQuery CDN --> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <link rel="stylesheet" href="css/ex9.css"> </head> <body> <section> <div class="heading"> <h1><span>코딩웍스</span>, 프론트엔드 퍼블리셔 취업을 위한 실전 퍼블리싱 강좌</h1> <input type="text" placeholder="What are you looking for?"> </div> <div class="tab-inner"> <ul class="btn"> <li data-alt="tab1" class="active">HTML5</li> <li data-alt="tab2">CSS3</li> <li data-alt="tab3">JQUERY</li> <li data-alt="tab4">JAVASCRIPT</li> <li data-alt="tab5">CSS FRAMEWORKS</li> </ul> <div class="tabs"> <div id="tab1" class="active"> <h2>HTML5</h2> <img src="../images/platform-logo-01.png" alt=""> <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Assumenda molestiae nisi ducimus, voluptates, similique at dignissimos optio culpa ut, provident harum quaerat. Quis, nisi repellat libero voluptas nesciunt ex, id pariatur illum esse quos soluta repellendus, asperiores possimus eos. Officiis incidunt ipsa sint tempora quidem aut unde voluptas fugit, cum quod aspernatur repudiandae temporibus dignissimos illo sit mollitia! Debitis corrupti quos obcaecati rem nihil, ducimus eius dignissimos amet! Ab, veniam.</p> </div> <div id="tab2"> <h2>CSS3</h2> <img src="../images/platform-logo-02.png" alt=""> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quaerat itaque maiores voluptatum! Earum error nulla suscipit dicta tenetur explicabo velit at, et optio esse temporibus facere hic quas sunt nostrum perspiciatis sed debitis excepturi sit incidunt aperiam rem molestiae fuga ipsa. Numquam provident exercitationem maiores cumque, at ab voluptatum quas, ullam unde architecto fugit tempora. Commodi iure hic repudiandae blanditiis consequatur ex modi cupiditate, temporibus sapiente itaque, nam ipsa eius ducimus magni! Facere facilis fugit natus architecto sit incidunt a.</p> </div> <div id="tab3"> <h2>JQUERY</h2> <img src="../images/platform-logo-03.png" alt=""> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vitae, consequuntur aliquid? Tempore quos dolore rerum culpa natus architecto velit possimus qui animi placeat! Deleniti accusamus amet quae, asperiores minima minus deserunt odit quisquam corporis harum quibusdam maiores exercitationem veniam eius nemo tenetur excepturi ex laborum, qui repellat veritatis. Id ex rem, pariatur tenetur veniam explicabo voluptate inventore fugit, ut, nisi ipsa voluptates quas perspiciatis? Quo vitae libero ipsa consequatur cumque velit! Dolor sed amet quibusdam esse explicabo similique laudantium fugit, earum deserunt unde vitae, sint doloribus fuga natus iure laborum?</p> </div> <div id="tab4"> <h2>JAVASCRIPT</h2> <img src="../images/platform-logo-04.png" alt=""> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nemo fugit laboriosam quae nobis ipsum possimus, consequuntur provident aut magni dolorum ea voluptatem illum neque dolore error quisquam architecto sit quos inventore sed a nesciunt consequatur impedit. Ullam expedita rem aut in eveniet et possimus error cupiditate, dolorum quidem, voluptates consectetur tempore sed ut deserunt, tempora quos vel odit atque eum consequatur? Similique sunt maxime blanditiis, natus sequi animi exercitationem consectetur accusantium nulla praesentium? Odit eveniet quis vitae, voluptas error tempore impedit praesentium fugit amet ducimus neque culpa iste delectus ipsam quod et sint? Perferendis est totam deserunt ratione, omnis soluta.</p> </div> <div id="tab5"> <h2>CSS FRAMEWORKS</h2> <img src="../images/platform-logo-05.png" alt=""> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque laboriosam id earum odio alias nam quam magnam omnis repudiandae. Neque fuga perferendis unde molestias tempora quae quaerat dolorem voluptates eligendi sequi voluptatem ut in rem nisi, illo temporibus itaque eaque nam repellat aliquid illum! Omnis voluptatem sapiente, nulla animi voluptates itaque! Animi aspernatur, enim molestias repellat accusantium eveniet aperiam nulla iste ex eaque iusto error qui quibusdam minima nemo eos veritatis saepe nobis impedit explicabo laborum aliquam quasi excepturi soluta. Rerum perferendis reprehenderit molestiae consectetur, aliquid veniam, possimus, est unde omnis voluptate natus! Incidunt voluptatem atque sapiente molestiae nesciunt vel nihil eveniet, molestias veniam eaque.</p> </div> </div> </div> </section> <script> $('.btn li').click(function(){ $(this).addClass('active') $(this).siblings().removeClass('active') var tab = $(this).attr('data-alt') $('.tabs div').removeClass('active') $('#' + tab).addClass('active') }) </script> </body> </html> <css> /* Google Web Font */ @import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:300,400,500,700,900&display=swap'); /* /* Fontawesome 4.7 */ @import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); body { font-family: 'Raleway', sans-serif; /* color: #fff; */ line-height: 1.5em; font-weight: 300; margin: 0; background: #f4f4f4; display: flex; justify-content: center; align-items: center; height: 100vh; } a { color: #222; text-decoration: none; /* font-weight: 700; */ } section { width: 900px; } /* Heading */ .heading {} .heading h1 { font-size: 28px; text-align: center; } .heading span { color:crimson; } .heading input[type=text] { width: 100%; padding: 10px; background-color: #fff; outline: none; box-sizing: border-box; border: none; border-bottom: 2px solid #ddd; background: #fff url(../images/search-icon.png) no-repeat center left 10px; background-size: 23px; padding-left: 40px; } .heading input[type=text]::placeholder { transition: 0.3s; font-style: italic; } .heading input[type=text]:focus::placeholder { opacity: 0; visibility: hidden; } /* Tab list */ .tab-inner { margin-top: 30px; } .btn { list-style: none; padding: 0; margin: 0; overflow: hidden; margin-left: 10px; } .btn li { float: left; width: 120px; text-align: center; cursor: pointer; background-color: #eee; border-right: 1px solid #ddd; padding: 5px; border-top: 2px solid transparent; transition: 0.5s; } .btn li:last-child { width: 170px; border-right: none; } .btn li:hover, .btn li.active { background-color: #fff; border-top: 2px solid crimson; } .tabs { } .tabs div { background-color: #fff; padding: 20px; box-sizing: border-box; /* height: 100%; 을 줘도 html탭메뉴 img가 background에 넘어가요. */ display: none; } .tabs div.active { display: block; } /* Tab Content*/ .tabs div h2 { text-align: center; } .tabs div img { float: left; margin-right: 15px; } .tabs div p { overflow: hidden; } <첫번째!> CSS에 { section - width: 값을 조금 더 줬을 경우, .tabs div p태그 안 내용의 글자 수를 다르게 했는데 HTML5 메뉴가 액티브됐을 때 이미지가 배경을 넘어갑니다. } 그 글자 수에 따라 자동으로 이미지까지 꽉 차게 들어오면서 변경이 됐으면 좋겠는데 그냥 모든 탭메뉴 height 값을 넣어보고 알맞은 px값을 줄 수 밖에 없을까요? <두번째!> 똑같은 html코드에서 CSS만 변경해서 넣었습니다.! /* Google Web Font */ @import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:300,400,500,700,900&display=swap'); /* /* Fontawesome 4.7 */ @import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); body { font-family: 'Raleway', sans-serif; /* color: #fff; */ line-height: 1.5em; font-weight: 300; margin: 0; background: #f4f4f4; display: flex; justify-content: center; align-items: center; height: 100vh; } a { color: #222; text-decoration: none; /* font-weight: 700; */ } section { width: 900px; } /* Heading */ .heading {} .heading h1 { font-size: 28px; text-align: center; } .heading span { color:crimson; } .heading input[type=text] { width: 100%; padding: 10px; background-color: #fff; outline: none; box-sizing: border-box; border: none; border-bottom: 2px solid #ddd; background: #fff url(../images/search-icon.png) no-repeat center left 10px; background-size: 23px; padding-left: 40px; } .heading input[type=text]::placeholder { transition: 0.3s; font-style: italic; } .heading input[type=text]:focus::placeholder { opacity: 0; visibility: hidden; } /* Tab list */ .tab-inner { margin-top: 30px; } .btn { list-style: none; padding: 0; margin: 0; overflow: hidden; margin-left: 10px; } .btn li { float: left; width: 120px; text-align: center; cursor: pointer; background-color: #eee; border-right: 1px solid #ddd; padding: 5px; border-top: 2px solid transparent; transition: 0.5s; } .btn li:last-child { width: 170px; border-right: none; } .btn li:hover, .btn li.active { background-color: #fff; border-top: 2px solid crimson; } .tabs { position: relative; /* position을 줘봤습니다.! */ } .tabs div { background-color: #fff; padding: 20px; box-sizing: border-box; display: none; position: absolute; /* position을 줘봤습니다.! */ } .tabs div.active { display: block; } /* Tab Content*/ .tabs div h2 { text-align: center; } .tabs div img { float: left; margin-right: 15px; } .tabs div p { overflow: hidden; } <두번째!> 제가 생각을 해보고 .tabs 부모요소에 position: relative;를 넣고 그 자식요소인 .tabs div 에 position: absolute; 를 넣었는데 이미지는 이미지대로 배경 안에 알맞게 들어오는데 '세로-가로 가운데정렬' 한 전체 디자인이 밑으로 내려가서 한 가운데 오지 않는데 여기서 어떻게 해야하나요? (position 넣는게 아예 틀렸을 수도 있겠지만, 이렇게 해도 되는지 안되는지조차 아직 감이 덜 잡혀서 여쭤봅니다ㅠㅠ)
-
미해결
git merge 시 history 관리
안녕하세요. git feature를 사용해서 기능을 개발 중입니다. develop - feature/1 - feature/2 원래는 이렇게 개발을 해야하지만 제가 feature/2를 개발할 때 feature/1 내용을 merge해서 가져오다보니 feature/2에 그대로 feature/1 commit 내용이 남아 있는 문제가 있습니다. git history 관리를 위해서 feature/2에서 개발한 내용만 commit에 남기고 싶은데 어떻게 해결해야 할지 몰라서 질문드립니다.
-
미해결파이썬 알고리즘 문제풀이 입문(코딩테스트 대비)
print시 %가 출력됩니다
안녕하세요 정다면체 문제에서 제 코드로 실행시키면 마지막에 %가 꼭 붙어서 나옵니다... 구글링도 해봤는데 어떤 문제가 잘못된건 지 모르겠어요...! 마지막 줄의 print(i+1, end=' ')에서 end=' ' 를 지우고 실행하면 %가 출력이 안되는데 end=' '를 붙이고 실행하면 %도 출력됩니다ㅠㅠ 컴퓨터는 맥북이고 vscode 사용하고 있습니다!!