inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

173만명의 커뮤니티!! 함께 토론해봐요.

모바일 웹 레이아웃 도움요청드립니다! (왕초보)

미해결

모바일 웹 퍼블리싱 포트폴리오 with Figma

CSS 구조 문의드립니다. Wrapper를 이용해서 인증번호, 재발송, 우편번호 찾기 버튼을 화면 안으로 넣고 싶은데 어떻게 하는지를 도저히 모르겠습니다.. 아시는 분은 도와주시면 정말 감사하겠습니다. style.css 일부 /* Import Local CSS */ @import url('/css/reset.css'); @import url('/css/variables.css'); * { font-family: var(--primary-kr); font-weight: 500; box-sizing: border-box; } body { margin: 0; font-family: var(--primary-kr); color: var(--dark-black); font-size: 14px; } .container { width: 100%; max-width: 393px; margin: 0 auto; padding: 16px; background-color: var(--white); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); border-radius: 10px; box-sizing: border-box; font-family: var(--primary-kr); } .phone-input-wrapper { display: flex; /* 플렉스 박스 설정 */ justify-content: space-between; } .phone-input-wrapper input[type="tel"] { width: 60%; /* 입력 필드가 가변적인 공간을 차지 */ padding: 10px; border: 1px solid var(--gray); font-size: 14px; height: 40px; /* 동일한 높이 */ box-sizing: border-box; /* 패딩과 테두리를 포함한 크기 계산 */ } .phone-input-wrapper .btn-certification { width: 40%; /* 선택박스의 고정 너비 */ height: 40px; /* 입력 필드와 동일한 높이 */ padding: 10px; border: 1px solid var(--gray); font-size: 14px; box-sizing: border-box; /* 패딩 포함 */ } /* 인증번호 입력 필드 */ .auth-input-wrapper { display: flex; /* Flexbox로 가로 정렬 */ align-items: center; /* 세로 중앙 정렬 */ justify-content: space-between; width: 100%; /* 부모 요소의 너비를 꽉 채움 */ max-width: 393px; box-sizing: border-box; /* 패딩 포함 */ position: relative; /* 타이머 배치를 위해 필요 */ flex-wrap: wrap; } .auth-input-wrapper input { flex: 0; /* 입력 필드가 가용 공간을 차지 */ height: 40px; border: 1px solid var(--gray); font-size: 14px; box-sizing: border-box; min-width: 70%; /* 최소 너비 설정 */ } .auth-input-wrapper .timer { flex: 0; position: absolute; /* 입력 필드 내부 배치 */ right: 45%; top: 50%; transform: translateY(-50%); font-size: 14px; color: var(--alert-red); pointer-events: none; /* 클릭 불가 */ } .auth-input-wrapper .reset { display: flex; position: absolute; align-items: center; right: 40%; justify-content: center; text-decoration: none; /* 기본 링크 스타일 제거 */ margin-left: 10px; /* 타이머와의 간격 */ overflow: hidden; } .auth-input-wrapper .reset-link img { width: 16px; /* 아이콘 크기 */ height: 16px; } .auth-input-wrapper .reset-link:hover { background-color: var(--lightblue); /* 호버 시 색상 변경 */ transition: background-color 0.2s ease; } .auth-input-wrapper .btn-resend { flex: 1; height: 40px; font-size: 14px; color: white; background-color: var(--blue); border: none; border-radius: 6px; cursor: pointer; white-space: nowrap; /* 텍스트 줄바꿈 방지 */ min-width: 60px; /* 버튼 최소 너비 */ } /* 주소 필드 래퍼 */ .address-wrapper { display: flex; align-items: center; width: 100%; /* 화면 너비에 맞춤 */ box-sizing: border-box; } .address-wrapper input[type="text"] { width: 60%; height: 40px; padding: 10px; border: 1px solid var(--gray); font-size: 14px; box-sizing: border-box; min-width: calc(70% - 10px); /* 최소 너비 */ } .address-wrapper .btn-post-search { flex: 0 0 auto; /* 버튼 크기 고정 */ height: 40px; padding: 0 15px; font-size: 14px; color: white; background-color: var(--navybutton); border: none; border-radius: 6px; cursor: pointer; white-space: nowrap; /* 텍스트 줄바꿈 방지 */ min-width: 100px; /* 버튼 최소 너비 */ } signup-email.html <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>회원가입</title> <link rel="stylesheet" href="/css/style.css"> </head> <body> <!-- Signup Form --> <div class="signup-content"> <div class="signup-field"> <label for="username">아이디<em>*</em></label> <input type="text" id="username" placeholder="아이디 입력" required> </div> <div class="signup-field"> <label for="password">비밀번호<em>*</em></label> <input type="password" id="password" placeholder="영문+숫자+특수문자 8자 이상" required> </div> <div class="signup-field"> <label for="password-check">비밀번호 확인<em>*</em></label> <input type="password" id="password-check" placeholder="비밀번호 확인 입력" required> </div> <div class="signup-field"> <label for="name">이름<em>*</em></label> <input type="text" id="name" placeholder="이름 입력" required> </div> <div class="signup-field"> <label for="email"> 이메일<em>*</em> </label> <div class="email-input-wrapper"> <input type="email" id="email" name="email" placeholder="이메일 입력" required> <select name="email-domain" id="email-domain"> <option value="">선택하기</option> <option value="gmail.com">gmail.com</option> <option value="naver.com">naver.com</option> <option value="daum.net">daum.net</option> </select> <span class="dropdown-icon"></span> <!-- SVG 아이콘 위치 --> </div> </div> <div class="signup-field"> <label for="phone">휴대폰<em>*</em></label> <div class="phone-input-wrapper"> <input type="tel" id="phone" placeholder="숫자만 입력" required> <button class="btn-certification">인증번호</button> </div> </div> <div class="signup-field"> <label for="auth-code"></label> <div class="auth-input-wrapper"> <input type="text" id="auth-code" placeholder="인증번호 입력" required> <span class="timer">00:00</span> <a href="#" class="reset"> <img src="/images/reset.svg" alt="Reset Icon"> </a> <button class="btn-resend" type="button">재발송</button> </div> </div> <div class="signup-field"> <label for="address">주소<em>*</em></label> <div class="address-wrapper"> <input type="text" id="address" placeholder="주소 입력" required> <button class="btn-post-search">우편번호 찾기</button> </div> </div> <div class="signup-field"> <label for="address-detail"></label> <input type="text" id="address-detail"> </div> <div class="signup-field"> <label for="address-detail">상세주소<em>*</em></label> <input type="text" id="address-detail" placeholder="상세 주소 입력" required> </div> <p class="notice">배송지에 따라 상품 정보가 달라질 수 있습니다.</p> <div class="thirdline"></div> <!-- 위에 줄 --> </div> </body> </html> style.css

  • HTML/CSS
  • jquery
  • 모바일-디자인
  • figma
  • 포트폴리오
JOONBUM 댓글 2 좋아요 1 조회수 203

해외 취업에 대해서는 어떻게 생각하시나요?

해결됨

게임 프로그래머 취업 전략 가이드

조금 뜬금없는 질문일지도 모르겠습니다만, 루키스님께서는 외국에서 전공을 배우기도 하셨고, 외국어에도 관심이 많으시기 때문에 질문 드려봅니다. '우리 마음 속에 있는 갓겜'을 만드는 것이 최종 목표라 한다면, 해외에 나가 뛰어난 게임 개발자들을 더 많이 만나보고, 함께 일해보면서 성장하는 과정도 꽤나 큰 도움이 될 수 있겠다는 생각이 듭니다. 또 한편으로는 그래봤자 외국인들도 크게 다를 게 없을 수도 있고, 외국어 공부까지 병행해야 해서 부하만 가중된다는 생각이 들기도 하네요. 결국 혼자 공부하고 성장해야 하는 프로그래머라지만, 그래도 해외에 나간다면 더욱 더 성장할 수 있는 메리트가 있을까요?

  • 포트폴리오
  • 기술면접
로코 댓글 2 좋아요 0 조회수 480

결국 서버, 클라 모두 할 줄알아야 할까요?

미해결

게임 프로그래머 취업 전략 가이드

현직 서버개발자입니다. 요즘 추세도 그렇고 업무하다보면 클라쪽도 알면 업무가 수월한 경우도 있는데요. 서버개발자는 클라도 할줄 알면 좋다. 클라개발자는 서버도 할줄 알면 좋다. 에서 좋다 정도가 아니고 요즘은 필수 개념일까요? 경력이 짧아 문의드립니다.

  • 포트폴리오
  • 기술면접
snu 댓글 2 좋아요 0 조회수 467

새 탭 혹시 어떤 익스텐션인가요 ?

미해결

비전공자를 위한 개발자 취업 올인원 가이드 [통합편]

학습과는 무관한건데 개인적으로 궁금해서요.. 2:34에 등장하는 확장 프로그램이 궁금해요 !

  • 포트폴리오
  • 면접
피터 댓글 0 좋아요 0 조회수 171

질문 답변 부탁드립니다

미해결

[백엔드/예외처리 시나리오/집계 최적화] 백엔드 포트폴리오와 실무 이력 강화 전략. 올인원 PART1

카카오페이 말고 다른 pg사 이용해보려고 하는데 페이코 같은 경우 어떤 식으로 해야 되는 지요

  • java
  • spring-boot
  • 포트폴리오
  • 기술면접
  • bulkinsert
kofk113 댓글 1 좋아요 0 조회수 185

강의듣다가 궁금해져서 문의 남깁니다. (빼꼼이 슬라이드 반응형)

미해결

모바일 웹 퍼블리싱 포트폴리오 with Figma

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요 선생님 강의듣다가 궁금해져서 문의남깁니다. 빼꼼이 슬라이드를 반응형에도 적용하고 싶을땐 .good-suggestion-items{ width:430px }말고 어떤 값을 줘야될지 궁금합니다.

  • HTML/CSS
  • jquery
  • 모바일-디자인
  • figma
  • 포트폴리오
준쮸넛 댓글 1 좋아요 1 조회수 102

팀 프로젝트했는데 면접 관련 질문있습니다

미해결

제가 국비교육을 들었는데 한달 전쯤에 수료했습니다. 당연히 팀 프로젝트도 진행했는데, 이 팀 프로젝트에서 제가 맡은 파트의 비중, 중요도, 난이도 등등에 걱정되는 부분이 있어서 글작성하게 됐습니다. 이번 국비교육 팀프로젝트에서 역할분담을 하다보니 제가 맡은 부분들이 생각보다 큰 비중을 차지하지않아서(저희 팀은 api를 사용해서 웹소설, 웹툰, 도서 리뷰 플랫폼을 통합적으로 제공하는 웹페이지를 제작했습니다. 그런데도 저는 api를 사용하는 기술도 없고, 감정분석이나 스프링 시큐리티를 사용한 기술도 없습니다.) 제가 구현한 기능들은 공지사항 관련 CRUD나 공지사항 목록의 검색, 정렬 및 페이지네이션 구현과 페이지 간의 이동 정도로 요약할 수 있어, 포트폴리오나 이력서에 제출할 때 조금 부실하지않을까 염려되어 질문드리게 됐습니다. 면접때, 이런 프로젝트 내용들로 질문이 들어오고 답변도 해야할텐데, 이럴땐 어떻게 하는게 좋을까요? 정말 현실적으로 댓글 달아주시면 감사하겠습니다.

  • 팀프로젝트
  • 면접
  • 이력서
  • 포트폴리오
  • crud
whdk333 댓글 0 좋아요 0 조회수 92

해상도가 720p 까지 가능해서 화면이 흐리네요.

해결됨

[백엔드/예외처리 시나리오/집계 최적화] 백엔드 포트폴리오와 실무 이력 강화 전략. 올인원 PART1

강사님 1080p 화질이 안될까요? 720p라 화면에서 글자가 흐릿하게 보입니다..

  • java
  • spring-boot
  • 포트폴리오
  • 기술면접
  • bulkinsert
아라레 댓글 1 좋아요 0 조회수 190

pg 파라미터가 이제는 없어진다고 하는데 업데이트 해주시나요?

미해결

[백엔드/예외처리 시나리오/집계 최적화] 백엔드 포트폴리오와 실무 이력 강화 전략. 올인원 PART1

pg 파라미터가 이제는 없어진다고 하는데 업데이트 해주시나요?

  • java
  • spring-boot
  • 포트폴리오
  • 기술면접
  • bulkinsert
kofk113 댓글 1 좋아요 0 조회수 231

템플릿 압축해제 실패

해결됨

개발자 이력서 작성 & 면접대비 완벽가이드

안녕하세요. 좋은 강의 잘 듣고 있습니다 :) 섹션 3에서 첨부해주신 강의자료 템플릿 다운로드하여 압축 해제 시도 시, '압축 풀기를 완료할 수 없습니다. 압축(ZIP) 폴더가 올바르지 않습니다.' 라고 오류가 뜨고 압축 폴더 내부 접근 시 비어있다고 뜨는데 확인 부탁드립니다. 감사합니다.

  • 포트폴리오
  • 면접
  • 이력서
황주영 댓글 1 좋아요 0 조회수 294

paymentProcess() 결제내역 남기기

미해결

[백엔드/예외처리 시나리오/집계 최적화] 백엔드 포트폴리오와 실무 이력 강화 전략. 올인원 PART1

제가 알기로는 request_pay() 매개변수로 포트원 대시보드에서 확인가능한 storeId 와 channelkey을 추가해서 요청해야, 결제내역에 남는걸로 알고있습니다. 결제기록 안남으시면 참고하세용

  • java
  • spring-boot
  • 포트폴리오
  • 기술면접
  • bulkinsert
구코딩 댓글 0 좋아요 0 조회수 187

안녕하세요 질문이 있습니다.

미해결

비전공자를 위한 개발자 취업 올인원 가이드 [통합편]

안녕하세요 어제 강의를 결제해서 오늘 보고 있습니다. 처음부터 보다가 1:1 멘토링에 대해 나오는데 만약 멘토링을 신청하려면 어디서 어떻게 신청을 하면 되나요?

  • 포트폴리오
  • 면접
부드러운 족제비 댓글 1 좋아요 0 조회수 155

맨 마지막 면접 단골 질문에 대해서 궁금한게 있습니다

해결됨

서류합격률 4%를 탈출하는 개발자 이력서 작성법(실습 포함)

SQS, RabbitMQ, Kafka 등 여러개가 있는데 왜 SQS를 썼냐고 물어봤을 때 팀원들이 SQS에 대해서 이해도가 있어서 선택했다고 말하면 자기 주관이 빠진것처럼 들릴 수가 있는데 괜찮은 건가요? 면접관이 뭘 듣고 싶어하는지는 모르겠지만 RabbitMQ와 KAfka는 써보지는 않았지만 각각에 대해서 비교하는 자료라도 찾아서 말해야되지 않나 싶어서 물어봅니다. 예전 면접에서 redis를 왜 썼냐고 물어봤을 때 팀원들이 redis에 대해서 잘 알고 있고 이미 사용중이어서 사용했다고 말했는데 이게 옳은 대답인지 잘 모르겠습니다

  • 포트폴리오
  • 이력서
동동이 댓글 1 좋아요 1 조회수 264

언리얼엔진 포트폴리오에 관해 여쭤보고 싶어요

미해결

게임 프로그래머 취업 전략 가이드

안녕하세요 루키스님 저는 취업을 언리얼엔진 회사로 하고싶어서 언리얼엔진을 공부하고 있습니다. 엔진을 공부하다가 보니 GAS라는게 좋다고 해서 익혀보고.. 어느정도 감을 잡고 보니 이번엔 Lyra 프로젝트가 있더라구요. 그래서 지금은 루키스님 강의인 Lyra 클론코딩을 듣고있습니다. 그런데 Lyra가 지식적으로는 큰 도움이 되는 반면 이 구조를 기반으로 내가 포트폴리오를 만들 수 있을까? 라는 의심과 현업에선 아직 Lyra구조를 많이들 사용을 안하지 않을까? 라고 타협하고 싶은 마음이 슬슬 들기 시작해서요.. 제가 여쭤보고 싶은건 아래와 같습니다. 현업에선 GAS 와 Lyra 구조를 각각 어느정도 쓰는 추세인지 포트폴리오를 만든다면 기본 언리얼엔진에 GAS,멀티플레이어만 얹어서 만들면 충분할지, 아니면 Lyra구조로 포트폴리오를 만들면 더 경쟁력이 있는지

  • 포트폴리오
kkk7600ki 댓글 2 좋아요 0 조회수 681

디스코드 초대 오류

미해결

취업/이직에 성공할 수 밖에 없는 포트폴리오 전략 강의

안녕하세요! 디스코드 초대가 만료되었다고 뜹니다..!

  • 포트폴리오
  • ux-기획
  • 프로덕트디자인
정지수 댓글 2 좋아요 0 조회수 222

포트폴리오에 대해 질문있습니다.

해결됨

빠른 취업을 위한 프론트엔드 로드맵

안녕하세요 강의 영상 잘 보고 있습니다 다름이 아니라 포트폴리오에 대해 기능들도 확인을 했는데 어떤 포트폴리오를 만들어야 할지 생각이 잘 나지 않더라구요. 투두리스트는 뭔가 기본중에 기본인것 같아 포트폴리오로 사용하기엔 부적절한 것같고 다른 걸 생각해보고 있지만 어떠한 걸 만들어야 할지 생각이 나지 않습니다.

  • 포트폴리오
  • 온라인-교육
부드러운 족제비 댓글 2 좋아요 1 조회수 169

안녕하세요~

해결됨

하루 100만 원을 벌게해준 프리랜서 노하우 완벽 정리

안녕하세요 ~ 강의 너무 잘 듣고 있습니다. 궁금한게 있는데 혹시 핑거 견적서 서비스는 종료가 된 것일까요? 유용하게 사용할 수도 있을 것 같아서 확인해보려고 했는데 접속이 안되네욥

  • 포트폴리오
  • 사업계획서
  • 소프트스킬
박용수 댓글 2 좋아요 0 조회수 174

UX개선사항이 없는 에이전시출신 UI디자이너

미해결

취업/이직에 성공할 수 밖에 없는 포트폴리오 전략 강의

안녕하세요 4년차 UI디자이너&퍼블리셔 입니다. 에이전시에서 근무했고 총 50개의 프로젝트를 진행하였지만 UX적으로 개선한 적이 없고 고객사의 입김으로만 디자인 했던 터라 문제해결 능력을 어떻게 풀어나갈 지 의문입니다. 지금이라도 UX해커톤이라던지 기초강의나 학원을 다녀서 실무프로젝트가 아닌 사이드 프로젝트를 첫번째 포폴로 넣어야할까요? 사내 프로젝트 중 이미 배포된 전 프로젝트의 UIUX를 개선하여 지인들에게 설문 돌려서 얻는 데이터가 최선인데 이렇게 해도 될까요? 또한 퍼블리싱 및 개발팀과의 커뮤니케이션 능력을 어필하기 위해 마지막은 피그마 디자인 시스템&코드 컴포넌트화로 개선된 사항을 정리하려고 하는데 이 부분도 괜찮을까요?

  • 포트폴리오
  • ux-기획
  • 프로덕트디자인
김희민 댓글 2 좋아요 0 조회수 365

desk 가 밑으로 떨어졌을 때, "y 값이 문자열"에 대한 내용입니다.

미해결

Three.js로 1인칭 3D 웹사이트 만들기

우선 원인은... MeshObject 클래스 속성 중 differenceY 의 값에 OR 연산자를 사용., main.js 에서 ground 변수에 '0' 문자열 값을 할당해서 그런데요. ground 는 y 속성값을 할당하지 않았기 때문에 MeshObject 클래스에서 info.y 는 undefined 이고, this.y 는 "this.height / 2 + this.differenceY" 의 계산이 적용되서 " 0.1 / 2 + '0' " 즉, 문자열 '0.20' 이 출력됩니다. 산술 연산자 '+' 가 들어가게되면, 그 계산식의 결과값은 반드시 문자열이 나옵니다. x, y, z, differenceY 는 모두 좌표와 연관된 값으로, 모두 숫자 데이터 타입을 할당받아야 하는 일관성이 필요한데 ground, floor 에서만 differenceY 가 문자열을 받아 발생한 이슈입니다. 강의를 들어보던 중 강사님께서 처음에 숫자 0 을 사용하셨고, this.differenceY 속성에 값을 할당할때 OR 연산자를 쓰심으로인해 숫자 0 이 null/undefined 로 인식되는 것 때문에 문자열로 바꾸신거 같더라구요. 조금 더 정확하게 하자면, OR 연산자가 아닌 ?? 연산자를 사용해 숫자 0을 값 그대로 사용할 수 있도록 바꾸고 ground 에도 문자열 '0' 이 아닌 숫자 0 을 넣어주면 될것같습니다. x, y, z 에 곱하기 1을 하는 추가코드는 필요없어집니다.

  • javascript
  • 인터랙티브-웹
  • 포트폴리오
  • three.js
  • 3d
김찬기 댓글 0 좋아요 0 조회수 119

인기 태그

인프런 TOP Writers

주간 인기글