N

Inflearn brand logo image

인프런 커뮤니티 질문&답변

JOONBUM님의 프로필 이미지
JOONBUM

작성한 질문수

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

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

작성

·

101

·

수정됨

1

CSS 구조 문의드립니다.

image.png

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/CSSjquery모바일-디자인figma포트폴리오

답변 2

0

JOONBUM님의 프로필 이미지
JOONBUM
질문자

해결했습니다! 강사님이 말씀하신 것처럼 border 1px을 주고 하니 해결이 쉬웠습니다. 감사합니다!

0

코딩웍스(Coding Works)님의 프로필 이미지
코딩웍스(Coding Works)
지식공유자

강의에 없는 새로운 페이지를 만드신 듯 합니다.

질문 내용이 너무 광범위해서 답변 드리기 좀 어렵습니다.

가급적이면 강의 내용에 있는 부분만 질문 주셨으면 합니다.

JOONBUM님의 프로필 이미지
JOONBUM

작성한 질문수

전체 Q&A
질문하기