묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결
css position absolute설정 시 space-between이 실행되지 않습니다.
cssbody { height: 97vh; display: flex; justify-content: center; align-items: center; background-color: #f3f3f5; } .sedow { box-shadow: 0 0px 20px 5px rgba(128, 128, 128, 0.1); } .insedow { color: rgba(128, 128, 128, 0.7); } .white-color { color: #ffffff; } .font-weight-lg { font-weight: 600; } .screen-first { height: 170mm; width: 90mm; background-color: #ffffff; margin: 50px; border-radius: 40px; position: relative; } .screen-second { height: 170mm; width: 90mm; background-color: wheat; margin: 50px; border-radius: 40px; } .screen-first-icon_box { display: flex; justify-content: space-between; margin: 50px 25px 0; } .screen-first_profile_box { display: flex; justify-content: center; margin-top: 30px; } .screen-first_profile { height: 80px; width: 80px; background-color: orange; border-radius: 50%; box-shadow: 0 0px 15px 10px rgba(255, 180, 40, 0.3); } .screen-first_profile_name { text-align: center; font-size: x-large; font-weight: 750; margin-top: 40px; } .screen-first_profile_genre { text-align: center; font-weight: 600; color: rgba(128, 128, 128, 0.7); margin-top: 15px; } .screen-first_button-box { margin-top: 35px; display: flex; justify-content: center; } .screen-first_button-box_button1 { padding: 12px 32px; border-radius: 30px; background-color: black; color: #ffffff; margin-right: 5px; } .screen-first_button-box_button2 { padding: 12px 20px; border-radius: 30px; background-color: #ffffff; color: rgba(128, 128, 128, 0.7); margin-left: 5px; font-weight: 550; } .fa-heart { color: black; } .screen-first_song-list { justify-content: center; align-items: center; flex-direction: column; margin-top: 20px; margin-left: 15px; margin-right: 15px; } .screen-first_song-list_profile { display: flex; align-items: center; padding: 15px 25px; position: relative; border-radius: 20px; } .screen-first_song-list_profile_img { display: flex; align-items: center; justify-content: center; height: 45px; width: 45px; background-color: tomato; border-radius: 10px; } .screen-first_song-list_profile_text { margin-left: 15px; } .fa-ellipsis-vertical { color: rgba(128, 128, 128, 0.7); position: absolute; right: 20px; } .screen-first_song-list_profile_text_title { margin-bottom: 5px; font-size: small; } .fa-chart-simple { color: #ffffff; } .screen-first_music-player { display: flex; justify-content: space-between; align-items: center; position: absolute; bottom: 5px; } .screen-first_music-player { background-color: #222222; padding: 15px 30px; margin: 10px 15px; border-radius: 50px; } .screen-first_music-player_text_singer { margin-bottom: 7px; } .fa-pause { margin: 0 20px; } 추가로 reset.css 2.0도 적용하여 사용하고 있습니다./* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; } table { border-collapse: collapse; border-spacing: 0; } html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="css/reset.css" /> <link rel="stylesheet" href="css/style.css" /> <script src="https://kit.fontawesome.com/3373615a5c.js" crossorigin="anonymous" ></script> </head> <body> <div class="screen-first"> <div class="screen-first-icon_box"> <i class="fa-solid fa-arrow-left fa-lg"></i> <i class="fa-solid fa-magnifying-glass fa-lg"></i> </div> <div class="screen-first_profile_box"> <div class="screen-first_profile"></div> </div> <h1 class="screen-first_profile_name">Tyler, The Creator</h1> <h4 class="screen-first_profile_genre">Rap, Hip-Hop</h4> <div class="screen-first_button-box"> <div class="screen-first_button-box_button1">Shuffle</div> <div class="screen-first_button-box_button2 sedow"> <i class="fa-solid fa-heart fa-lg"></i> 212 971 </div> </div> <ul class="screen-first_song-list"> <li class="screen-first_song-list_profile"> <div class="screen-first_song-list_profile_img"></div> <div class="screen-first_song-list_profile_text"> <h4 class="screen-first_song-list_profile_text_title insedow font-weight-lg" > Tyler, the Creator </h4> <h2 class="screen-first_song-list_profile_text_singer font-weight-lg" > EARFQUAKE </h2> </div> <i class="fa-solid fa-ellipsis-vertical fa-xl"></i> </li> <li class="screen-first_song-list_profile sedow"> <div class="screen-first_song-list_profile_img"> <i class="fa-solid fa-chart-simple fa-xl"></i> </div> <div class="screen-first_song-list_profile_text"> <h4 class="screen-first_song-list_profile_text_title insedow font-weight-lg" > Tyler, the Creator </h4> <h2 class="screen-first_song-list_profile_text_singer font-weight-lg" > EARFQUAKE </h2> </div> <i class="fa-solid fa-ellipsis-vertical fa-xl"></i> </li> <li class="screen-first_song-list_profile"> <div class="screen-first_song-list_profile_img"></div> <div class="screen-first_song-list_profile_text"> <h4 class="screen-first_song-list_profile_text_title insedow font-weight-lg" > Tyler, the Creator </h4> <h2 class="screen-first_song-list_profile_text_singer font-weight-lg" > EARFQUAKE </h2> </div> <i class="fa-solid fa-ellipsis-vertical fa-xl"></i> </li> <li class="screen-first_song-list_profile"> <div class="screen-first_song-list_profile_img"></div> <div class="screen-first_song-list_profile_text"> <h4 class="screen-first_song-list_profile_text_title insedow font-weight-lg" > Tyler, the Creator </h4> <h2 class="screen-first_song-list_profile_text_singer font-weight-lg" > EARFQUAKE </h2> </div> <i class="fa-solid fa-ellipsis-vertical fa-xl"></i> </li> </ul> <div class="screen-first_music-player"> <div class="screen-first_music-player_text"> <div class="screen-first_music-player_text_singer insedow"> Tyler, The Creartor </div> <div class="screen-first_music-player_text_title white-color font-weight-lg" > NOVEMBER </div> </div> <div> <i class="fa-solid fa-backward-step fa-lg white-color"></i> <i class="fa-solid fa-pause fa-2xl white-color"></i> <i class="fa-solid fa-forward-step fa-lg white-color"></i> </div> </div> </div> <!-- <div class="screen-second"></div> --> </body> </html> 이상하게 position absolute시에만 space-between이 작동하지 않습니다. 아무리 고민해보아도 원인을 파악할 수 없어 질문드립니다. ㅜㅜ
-
미해결
웹화면 깨짐현상
홈페이지만들어서 nginx로 배포했습니다,,, 만 이런식으로 디자인이랑 글씨가 다깨져서 보입니다zzz 그냥 runserver 했을때는 괜찮았는데 왜이러는걸까요? 이런현상을 뭐라하나요? 뭔지알면 스택오버플로우에 질문이라도 할텐데 무슨현상이라고 하는지도 모르겠습니다
-
미해결
형들 이거 왜 안돼??
형들 나 코린인데 html로 웹 페이지 하나 만들려고 html이랑 css랑 javascript 공부중인데 서로 연결도 잘 되고 나름 걱정 없었는데 폰트 다운 받을 라고 했더니 갑자기 사이트 이상해지고 (사진 첨부함) 검색 해봐도 나갔는 일은 없는것 같음 그래도 3시간 정도 서핑 해봤는데 전혀 해결 법이 없어서 형들한테 물어 보는 거야... 그리고 비쥬얼 스튜디오에 유튜브에서 코딩할 떄 쓰는 폰트어썸 코드 따라 써봤는데 인식이 안된는지 실행해 봐도 써놓은 글자만 보이고 이미지는 아예 안보여... 이거 끝까지 다 읽은 형님 있으시다면 감사드리고 제발 해결 법좀 알려 주세욥 ㅜ
-
미해결스프링 핵심 원리 - 기본편
request 스코프 예제 서버 실행 문제에 대해 질문드립니다.
[질문 템플릿]1. 강의 내용과 관련된 질문인가요? 예2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? 예3. 질문 잘하기 메뉴얼을 읽어보셨나요? 예[질문 내용]안녕하세요. 처음 Spring boot에 입문한 취준생입니다. 선생님의 강좌를 잘 따라가다가 문제가 발생했습니다. [request 스코프 예제] request 스코프 예제중 web라이브러리도 잘 추가했고, 실행결과 Tomcat 서버거 실행되는 것 까지는 확인이 되었습니다. 그 후에 MyLogger, LogDemoController, LogDemoService를 추가하여 실행했을때 강의에서 처음에는 서버의 오류가 발생했지만,만 저의 로그를 봤을때에는 error발생 없이 2022-04-13 16:33:03.542 INFO 16264 --- [nio-8080-exec-1] o.a.c.c.C.[Tomcat].[localhost].[/] : Initializing Spring DispatcherServlet 'dispatcherServlet' 2022-04-13 16:33:03.542 INFO 16264 --- [nio-8080-exec-1] o.s.web.servlet.DispatcherServlet : Initializing Servlet 'dispatcherServlet' 2022-04-13 16:33:03.543 INFO 16264 --- [nio-8080-exec-1] o.s.web.servlet.DispatcherServlet : Completed initialization in 1 ms 이런식의 로그가 뜬 채로 아무것도 되지 않았고, 그 후에 수정한 코드를 넣어봐도 결과는 같았습니다. 구글링을 해보았지만 그렇다 한 해결책을 내놓지 못했고, 혹시나 해서 logDemo메서드에 soutm을 해 보아도 찍혀 나오는게 없었습니다. 한번 살펴봐 주시면 감사하겠습니다. [프로젝트 압축링크] https://drive.google.com/file/d/1I8royGvDc4BXMUtSOTGCPRtNBtnoFg4S/view?usp=sharing
-
미해결따라 하다 보면 완성되는, Ionic 훑어보기
웹 개발을 위한 ionic
안녕하세요회사에서 ionic이 필요하여 급하게 강의를 찾다가 신청하게 되었습니다. 현재 구성이 ionic으로 되있는 웹 플랫폼 하나를 수정할 필요가 생겼는데 후에 android, ios앱으로 확장 가능성이 적은 웹 app 개발에도 ionic이 갖는 장점이 있을까요?
-
미해결
2명의 클라이언트가 접속했을 때 카운트 시작하는 시스템을 만들고 싶은데 어떤 코드를 사용해야 할까요?
일부분만 발췌해서 가져왔습니다. 2명의 클라이언트가 접속했을 때 index.js에서 접속자 수를 받아오고, html 내 script에서 카운트 실행 코드를 작성했는데 2명 이상이 접속해야 카운트가 실행되는 코드는 어떻게 작성해야 하는지 모르겠네요. 어떤 방법이 있을까요 ?? //index.js io.sockets.on("connection",(socket)=>{ const req=socket.request; const ip=req.headers['x-forwarded-for']||req.connection.remoteAddress; console.log("새로운 클라이언트 접속",ip,socket.id, req.ip); user_count++; io.emit('users.count',user_count); //client.html <script> let socket=io(); socket.on('users.count', function(number) { document.getElementById('users-count').innerHTML=number; let user_count = document.getElementById('users-count').value; if(number==2){ var count=10; var counter=setInterval(function(){ if(count<=0){ clearInterval(counter); document.getElementById("timer").innerHTML="Finished"; } else { document.getElementById("timer").innerHTML=count+"초 남았습니다"; } count-=1; },1000); } }); </script>
-
미해결실전! 스프링 부트와 JPA 활용1 - 웹 애플리케이션 개발
[질문] 서버 값 전달 방식
머스타치 문법에서는 DTO 에 @AllArgsContstructor 가 있으면 서버로 전달하면서 값이 들어가 있는데 타입리프에서는 적용하는 방법을 찾아보았는데 대부분 setter로 된예시만 있었습니다. 타입리프는 불가능한것인지 궁금합니다.
