HTML / CSS - 7 (2021.03.12)

티스토리 뷰

HTML_CSS

HTML / CSS - 7 (2021.03.12)

LHOIKTN 2021. 3. 12. 16:49

첫째 날 배우고 그냥 넘어갔던 게 있었다.

            <li>아이디: <input type = "text" placeholder = "아이디를 입력하세요" /></li>
            <li>패스워드: <input type = "password" placeholder = "패스워드를 입력하세요" /></li>
            <li>패스워드 확인: <input type = "password" placeholder = "다시 패스워드를 입력하세요" /></li>
            <li>생년월일: <input type = "date" placeholder = "생년월일을 입력하세요." /></li>

input
특성	유형	설명
placeholder	password, search, tel, text, url	양식 컨트롤이 비어있는 때 양식 컨트롤에 나타나는 내용

양식 컨트롤? 뭐 어렵게 적혀 있는데 그림으로 보면 한 번에 이해가 된다.

박스 안에 아이디나 비밀번호를 입력하면 내용이 들어가게되면서 양식 컨트롤이 비어있는 상태가 아니기 때문에 placeholder로 지정해준 내용은 사라진다.

과제) 네이버 로그인 화면 비밀번호 박스 만들기.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>회원가입</title>
    <style>
        h2 {
            font-size: 12px;
        }

        body {
            background: #efefef;
        }

        input {
            border: none;
        }

        .ps_box {
            display: block;
            background:#fff;
            height: 26px;
            width: 260px;
            padding: 7px 14px;
            border: 1px solid #ddd;

        }
        .setup_url{ 
            font-size: 11px;
            color: #666;
        }
        #img_lock{ 
            float: right;
            width: 24px;
            height: 24px;
        }
    </style>

</head>

<body>
    <div class="row_group">
        <div class="join_now">
            <h3 class="join_title">아이디</h3>
            <span class="ps_box int_id">
                <input type="text" class="int" size="17">
                <span class="setup_url">@naver.com</span>
            </span>
            <h3 class="join_title">비밀번호</h3>
            <span class="ps_box int_id">
                <input type="text" class="int" size="17">
                <img id ="img_lock" src="image/lock.jpg">
            </span>
        </div>
    </div>

</body>

</html>

저번에 과제로 네이버 회원가입 화면을 한번 그대로 따라해봤는데, 그때는 뭐 소스코드를 보고 따라한 게 아니라 화면에 보이는 대로 따라 했었다. 가운데 정렬도 못하고 magrin-left:38% 로 사기 쳤었다. 지금 다시 그 코드를 보니까 참 부끄러워서 지우고 싶은 마음이 굴뚝같다.

이번과제는 위에서 만든 아이디 박스를 복붙해서 비밀번호 박스를 만드는 과제다. 아이디박스에 사용된 @naver.com을 제거하고 자물쇠 이미지를 넣어봤다. (이미지는 구글에서 적당한 거 골라서 워터마크 지우고 썼다.)

네이버 회원가입 화면에서는 비밀번호의 보안강도에 따라 사용불가는 빨간색. 보통은 갈색, 안전은 초록색 자물쇠로 바뀌는데 비밀번호 문자열에 대해 조건을 주고 그에 따라 판단하는 거 같다.

728x90

'HTML_CSS' 카테고리의 다른 글

HTML / CSS - 9.5 (2021.03.16) (0)	2021.03.16
HTML / CSS - 9 (2021.03.15) (0)	2021.03.15
HTML / CSS - 6 (2021.03.11) (1)	2021.03.11
HTML / CSS - 5 (2021.03.10) (0)	2021.03.10
HTML / CSS - 4 (2021.03.09) (0)	2021.03.10

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2025/01 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

글 보관함

GPD2021

티스토리 뷰