묻고 답해요
169만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결[2024 업데이트] UX/UI 시작하기 : Figma 입문 (Inflearn Original)
Create boolean property이 안보입니다. 보이게 하려면 어떻게 해야하나요?
Create boolean property이 안보입니다. 보이게 하려면 어떻게 해야하나요?
-
미해결[2024 업데이트] UX/UI 시작하기 : Figma 입문 (Inflearn Original)
Constraints가 안보입니다.
라인 대각선 두개그리고 Constraints가 오른쪽 패널에 표시가 안돼는데요 표시될려면 어떻해야돼요?
-
미해결[2024 업데이트] UX/UI 시작하기 : Figma 입문 (Inflearn Original)
피그마 버전이 어떻게 도나요
피그마 2024버전 인가요?피그마 2025버전 인가요?
-
미해결피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
Constraint기능에서 Top & Bottom 기능이 연동이 안되네요
Left & Right는 적용이 잘되었는데, Top & Bottom 기능에서는 Constraint center한거마냥 움직여요..어떤것이 문제 일까요
-
미해결모바일 웹 퍼블리싱 포트폴리오 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
-
미해결[2024 업데이트] UX/UI 시작하기 : Figma 입문 (Inflearn Original)
그리드 추가시 세부 설정
Layout grid를 한 개만 설정할 때에는 아이콘을 누르면 세부적으로 count, type 등을 지정할 수 있는데 2개 이상부터는 아이콘을 눌러도 세부 설정하는 모달이 안나오는데 어떻게 해야 하죠?
-
미해결[2024 업데이트] UX/UI 시작하기 : Figma 입문 (Inflearn Original)
섹션6 컴포넌트 파고들기 [예제 실습] 컬러 테마 만들기 3 - 다크모드 관련 질문
강의 21초부터 레이어를 통해 다크모드를 현재 피그마에선 Layer 자체가 안 보여서 다크모드를 어떻게 적용하는지 모르겠습니다. 현재 피그마에서 레이어와 동일한 기능을 하는 메뉴가 뭔가요? ㅠㅠ
-
미해결[2024 업데이트] UX/UI 시작하기 : Figma 입문 (Inflearn Original)
4강부터 안나오네요 ㅠ 검은화면이 계속 나옵니다 어떻게 해결하면 될까요?
4강부터 안나오네요 ㅠ 검은화면이 계속 나옵니다 어떻게 해결하면 될까요?
-
미해결모바일 웹 퍼블리싱 포트폴리오 with Figma
강의듣다가 궁금해져서 문의 남깁니다. (빼꼼이 슬라이드 반응형)
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요 선생님강의듣다가 궁금해져서 문의남깁니다.빼꼼이 슬라이드를 반응형에도 적용하고 싶을땐.good-suggestion-items{ width:430px }말고어떤 값을 줘야될지 궁금합니다.
-
미해결[2024 업데이트] UX/UI 시작하기 : Figma 입문 (Inflearn Original)
예제 실습 채팅 ui 만들기
지금 44강 예제 실습- 기본 기능 활용한 채팅 ui 만들기를 듣고 있습니다 여기서 10분 43초의 화면처럼 오토 레이아웃 안에 사진을 가로정렬로 복제해서 넣고 싶은데 계속 세로정렬로만 됩니다. 디자인 패널에 가운데 위치하는 것과 horizontal layout 모양, 패딩 값까지 영상 속 내용처럼 동일하게 했는데 왜 저는 강사님처럼 가로정렬로 사진을 나열할 수 없는 걸까요?챗 gpt의 도움으로도 해결할 수 없어 연락드립니다강사님은 오토 레이아웃이 된 상태에서도 어떻게 사진을 가로정렬로 하신 걸까요?
-
미해결[2024 업데이트] UX/UI 시작하기 : Figma 입문 (Inflearn Original)
저만 섹션1의 5번째, 6번째, 7번째 영상이 안보이는건가요? @_@
강의가 안나옵니당 @_@? 저만 그런것일까유?
-
미해결피그마 시작하기
피그마 활용 클래스 > 4 컴포넌트 boolean
섹션 4. 피그마 활용 클래스 강의 중 4-4강에서 버튼을 만들어 하트 아이콘을 넣고 컴포넌트화 시킨 후하트 아이콘을 클릭하고 boolean 기능을 추가하는 부분이 현재 피그마 UI와 달라서 어떻게 만들고 적용하는 지 모르겠습니다.업데이트 되면서 패널 속성이 바뀐 것 같은데 어떻게 만들고 적용하면 되나요?
-
미해결모바일 웹 퍼블리싱 포트폴리오 with CSS Nesting
섹션2 자료 확인 부탁드립니다~!
선생님 ~ 섹션2 [실습] HTML 와이어프레임 만들기 실습(커스텀 체크박스 로그인 폼) 듣고 있는데 자료 다운 폴더에 모바일 웹 HTML 와이어프레임 구조 폴더가 없는것 같습니다. HTML 와이어프레임 실습(로그인 폼), 모바일 웹 개별 페이지(PNG) 등 등, 그리고 피그마 주소도 보이지 않네요 ~! 자료 받을수 있을까요?
-
미해결[2024 업데이트] UX/UI 시작하기 : Figma 입문 (Inflearn Original)
예제 실습
예제 실습에서 설정 아이콘을 만들 때가운데 작은 원 4 4 사이즈는 stroke를 1로 설정해도 되는 건가요?그러니까 톱니 모양은 stroke이 1.5 이지만 작은 원은 4 4 사이즈에 1로 해도 되는 것인지 여쭤보고 싶습니다
-
미해결[2024 업데이트] UX/UI 시작하기 : Figma 입문 (Inflearn Original)
컬러변수 사용 이유
컬러변수를 사용하는 이유를 모르겠어요.강의를 들어도 UI가 복잡해지고 한개의 컬러를 여러가지UI타입에 사용할 경우 왜 변수설정이 좋은지 모르겠어요.스타일이 등록이 간편해 보이는데, 왜 더 좋은가요?
-
미해결피그마 시작하기
그룹에 대한 질문입니다
2-프레임과 그룹의 차이 학습후 질문드립니다 그룹을 사용하는 이유가 궁금합니다. 프레임이 더 이점이 많은것 같아서요그룹을 어떻게 만드셨나요? 하단 UI 상으로는 프레임과 도형정도만 있습니다
-
미해결[2024 업데이트] UX/UI 시작하기 : Figma 입문 (Inflearn Original)
Type setting 속성
Type setting 안에 alignment, decoration, list style, truncate text 이 4가지밖에 없는데 혹시 다 보이게 만드는 방ㅂ넙이 있나요 ? ㅠㅠ
-
미해결[2024 업데이트] UX/UI 시작하기 : Figma 입문 (Inflearn Original)
ellipse 에서 호로 그려지지가 않는데 어떻게 하면 되나요?
기본 도형으로 ellipse 를 선택하면 꽉 찬 타원만 그려집니다.예제처럼 호를 그리려면 어떻게 해야하나요?
-
미해결피그마 시작하기
6- 디자인시스템 구축을 위한 스타일 만들기 > 그레이 선정
그레이 스타일 설정할 때 쓰려고 하는 가장 어두운 색을 설정했다면(예를들어 #000000) 여기서 명암만 10 or 100단위로 내려서 800 700 이렇게 내려가는 걸까요? 기준에 대한 감(?)이라고 해야 될 지 모르겠지만 가장 어두운 컬러를 선정할 때 그렇게 선정하는 이유와 점차 밝아지는 텀에 대한 기준을 모르겠습니다!
-
미해결피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
Copy Link로 프로토타입 공유 시, 휴대폰 프레임 안보이게 하는 기능
제목 그대로, Copy Link로 프로토타입 공유 시, 제가 Advanced settings > Show device frame 메뉴에서 unchecked하고 프레임 없앤 상태에서 공유를 해도, Link를 받은쪽에서는 휴대폰 프레임이 디폴트로 보여지는데, 공유할때부터 프레임 없이 보일 수 있도록 설정이 불가능할까요?
