TIL(today I learned)

2020.09.17 #TIL

노랑세희 2020. 9. 18. 01:10

 학원에서는 기획단계의 SWOT과 PERSONA를 배워서 시안을 만들었다. 일러스트 툴 사용이 아직 어색하고 어려워서 부지런히 연습하고 사용해야겠다.

 오늘은 어제 마무리 못한 팝업 회원가입 폼을 마무리하고 쇼핑몰 상품정보 영역을 공부했다. 상품 이미지 왼쪽에 배치하고 정보를 오른쪽에 배치하여 양옆에 넣는 것과 이미지로 버튼 만들기가 조금 어려웠다. HTML은 완성했고 CSS는 내일 완성할 것이다.

 

1. 회원가입 POP-UP

 

HTML

<!DOCTYPE html>

<html lang="en">

 

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="popup form.css">

    <title>회원가입 팝업 폼</title>

</head>

 

<body>

    <div class="popup">

        <h2>간편 상담 신청</h2>

        <div class="content">

            <table>

                <caption>

                    <details class="hide">

                        <summary>간편 상담 신청</summary>

                        신청자 이름, 연락처, 메모, 적용가능한 혜택 입력 및 체크하는 양식

                    </details>

                </caption>

                <colgroup>

                    <col style="width: 111px;">

                    <col>

                </colgroup>

                <tbody>

                    <tr>

                        <th>신청자이름<span>*<em class="hide">필수입력</em></span></th>

                        <td><input type="text" id="form1" placeholder="이름을 입력해 주세요."><label for="form1"></label></td>

                    </tr>

                    <tr>

                        <th>연락처<span>*<em class="hide">필수입력</em></span></th>

                        <td><input type="tel" id="form2" placeholder="숫자만 입력해주세요"><label for="form2"></label></td>

                    </tr>

                    <tr>

                        <th>메모(<span class="memo">0/300 byte</span>)</th>

                        <td><textarea placeholder="궁금하신 점이나 렌탈 계약 진행시 SK매직이 고민해야 할 부분이 있다면 메모로 남겨주세요. 예) 평일 오후 2시~3시 사이에 연락주세요."></textarea></td>

                    </tr>

                    <tr>

                        <th>적용가능한<br>혜택이 있나요?</th>

                        <td>

                            <ul>

                                <li><input type="checkbox" id="bene1" class="hide"><label for="bene1">T멤버십 회원이예요.</label></li>

                                <li><input type="checkbox" id="bene2" class="hide"><label for="bene2">지금 브로드밴드 인터넷을 쓰고 있어요.</label></li>

                                <li><input type="checkbox" id="bene3" class="hide"><label for="bene3">브로드밴드 인터넷을 신규 가입하여 결합하고 싶어요.</label></li>

                            </ul>

                        </td>

                    </tr>

                </tbody>

            </table>

            <div class="agree">

                <input type="checkbox" id="agree1" class="hide"><label for="agree1"><span>[필수]</span>개인정보 수집 및 이용 동의</label>

                <a href="#a" class="btn_view">전문보기</a>

            </div>

        </div>

        <a href="#a" class="consult">상담신청</a>

        <img src="icon_close.PNG" alt="닫기" class="close">

    </div>

    <div class="dim"></div>

</body>

 

</html>

 * HTML은 class를 수정하고 dim을 넣어 배경과 팝업창이 분리될 수 있게 하였음

 * table은 <caption>과 <details>,<summary>로 요약글을 넣을 수 있는데 화면에 따로 표시되지 않게끔 class="hide"를 부여해서 가려줬음 이후 화면에서 날리고 싶은 요소에는 class="hide" 넣어 사라지게함

 * <col>은 th에 고정사이즈를 넣고 td는 나머지 영역을 차지하게 만듬

 

 

CSS

.popup {

    width: 820px; height: 835px;

    position: fixed; left: 50%; top: 50%;

    transform: translate(-50%, -50%);

    z-index: 100;

    background: #fff;

    padding: 54px 60px 77px;

    box-sizing: border-box;

}

.popup h2 {

    margin: 0;

    padding: 0 0 42px;

    border-bottom: 3px solid #444444;

    text-align: center;

    font-weight: normal;

    font-size: 33px;

    line-height: 100%;

}

 

.hide {

    position: absolute; left: -3000%;

}

 

.content {

    margin-bottom: 30px;

    border-bottom: 2px solid #f4f4f4;

    padding: 40px 78px;

}

table {
    width: 100%;

    margin: 0 auto;

    padding: 0 0 29px 0;

    border-bottom: 2px solid #f4f4f4;

}

table th {

    font-size: 13px; color: #222222;

    text-align: left;

}

table th span {

    color: #de4f41;

}

table th span.memo {

    color:#999999;

}

 

table td input, textarea {

    width: 100%;

    box-sizing: border-box;

}

table td #form1, #form2 {

    height: 48px;

    padding: 19px 0 16px 9px;

    border-width: 2px 1px;

    border-color: #f4f4f4;

    border-style: solid;

    border-radius: 2px;

    font-size: 12px;

    color: #999;

 

}

table td textarea {

    height: 117px;

    padding: 8px 0 0 12px; 

    border-width: 2px 1px;

    border-color: #f4f4f4;

    border-style: solid;

    border-radius: 2px;

    font-size: 12px;

    color: #999;

    box-sizing: border-box;

}

table td ul {

    padding: 0;

    margin: 0;

}

table td ul li {

    list-style: none;

}

input[type="checkbox"]+ label {

    font-size: 13px;

    color:#666666;

}

input[type="checkbox"]+ label:before {

    content: "";

    display: inline-block;

    width: 20px; height: 20px;

    border-width: 2px 1px;

    border-style: solid; 

    border-color:#ebebeb;

    background: #f4f4f4;

    margin-right: 10px;

    vertical-align: middle;

    box-sizing: border-box;

    transition: all .3s;

}

input[type="checkbox"]:checked + label:before {

    border: 7px solid #ebebeb;

}

 

.agree {

    margin: 27px 0 0;

    padding-left: 30px;

    border: 2px solid #f4f4f4;

    line-height: 63px;

    position: relative;

}

div.agree label {

    color: #666;

    font-size: 13px;

    vertical-align: middle;

}

.agree span{

    color: #e04f41;

}

div.agree .btn_view {

    position: absolute; right:30px; top: 15px;

    display: inline-block;

    width: 95px; height: 33px;

    border-color: #dddddd;

    border-width: 2px 1px;

    border-style: solid;

    border-radius: 3px;

    text-align: center;

    line-height: 33px;

    font-size: 13px;

    color: #000000;
    text-decoration: none;

    box-sizing: border-box;

}

 

a.consult {

    display: inline-block;

    margin-top: 29px;

    width: 170px; height: 51px;

    border-radius: 3px;

    background: #de4f41;

    color: white;

    position: relative;  left: 50%;

    transform: translateX(-50%);

    text-decoration: none;

    text-align: center;

    line-height: 51px;

}

 

.close {

    position: absolute; right:40px; top: 40px;

}

.dim{

    position: fixed; left: 0; top: 0;

    z-index: 99;

    width: 100%; height: 100%;

    background: rgba(0,0,0,0.5);

}

 * 할때는 어려웠는데 막상 만들고 나니 구조화 하는 것에 익숙해지면 쉬울 것 같다는 생각을 했음 특히 영역을 미리 나눠서 여백까지 지정했는데 중복 여백 들어가는 부분이 있어서 추후에 수정할 때 복잡했었음 이후에는 좀 더 정확하게 여백을 나눠야겠음

 * 선택자 지정할때 추후 다른 컨텐츠에서 똑같은 양식으로 사용할 부분이 있으면 부모 선택자 지정없이 단독으로 지정하면 된다는 것을 알았음 같은 일을 두번 세 번 반복하지 않으려면 이부분을 매번 유의해야함

 * .hide { position: absolute; left: -3000%; } 

 * checkbox를 꾸밀때는 input[type="checkbox"]를 hide하고 :before{ content : "" ; width : 20px; height: 20px; ~~~ ;}로 넣을 수 있음

 * 가상선택자 할때 선택자 지정을 논리적으로 생각해서 지정해야함 

 * .dim{ } 처음 배웠음

 

결과물

 

 

2. 쇼핑몰 상품정보 영역

 

HTML

<!DOCTYPE html>

<html lang="en">

 

<head>

    <meta charset="UTF-8">

    <link rel="stylesheet" href="detail.css">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>쇼핑몰 상세보기</title>

</head>

 

<body>

    <div class="product_view">

        <h2>소니 스마트밴드 토크 SWR30(안드로이드 4.42 킷캣 버전이상 호환가능</h2>

        <table>

            <caption>

                <details>

                    <summary>소니 스마트밴드 토크 SWR30 제품 상세</summary>

                    판매가, 상품코드, 제조사, 구매수량, 옵션선택, 배송비, 결제금액 선택창

                </details>

            </caption>

            <colgroup>

                <col style="width: px;"> <col>

            </colgroup>

            <tr>

                <th>판매가</th>

                <td>129,000</td>

            </tr>

            <tr>

                <th>상품코드</th>

                <td>C004843</td>

            </tr>

            <tr>

                <th>제조사/공급사</th>

                <td>CONY/자강정보통신</td>

            </tr>

            <tr>

                <th>구매수량</th>

                <td>

                    <input type="number">

                    <a href="#a" class="up">up</a>

                    <a href="#a" class="down">down</a>

                </td>

            </tr>

            <tr>

                <th>사용가능쿠폰</th>

                <td>0개</td>

            </tr>

            <tr>

                <th>옵션선택</th>

                <td>

                    <select>

                        <option>기본(+0)</option>

                        <option>옵션1(+1000)</option>

                        <option>옵션2(+1000)</option>

                        <option>옵션3(+1000)</option>

                    </select>

                </td>

            </tr>

            <tr>

                <th>배송비</th>

                <td>무료배송</td>

            </tr>

            <tr>

                <th>결제금액</th>

                <td><b>129,000</b>원</td>

            </tr>

        </table>

        <div class="img">

            <img src="@thoumb.png" alt="">

            <ul>

                <li class="on"><a href="#a"><img src="@thoumb.png" alt=""></a></li>

                <li><a href="#a"><img src="@thoumb.png" alt=""></a></li>

            </ul>

        </div>

        <div class="btns">

            <a href="#a" class="btn1">장바구니</a> 

            <a href="#a" class="btn1">구매하기</a> 

        </div>

    </div>

</body>

 

</html>

 * html은 비교적 간단해서 금방 작성할 수 있었음 129,000원에서 굵은 글씨는 굳이 span이 아니라 b나 strong으로 간단히 감싸줄 수 있음

 * 이미지를 텍스트와 양쪽 정렬해야하는데 이는 CSS에서 position으로 가능함

 * html 구조를 잡을 때 table-img-button 순으로 작성하는 것을 배웠음