css form

 

 

앞서 공부했던 css 속성들을 사용하여 form 태그 꾸미는 연습을 해 보자.

• 폼 태그는 전부 input 속성이기 때문에 input 전체를 꾸미기보단 태그 각각을 꾸미는 게 좋음
• border-radius: 테두리를 둥글게 만들어주는 속성

/* CSS */
.input{
            box-sizing: border-box;
            width: 100%;
            padding: 10px 20px;
            margin: 5px 0;
}

input[type='text'] {
    border-radius: 20px;
}

input[type='text']:focus {
    background-color: gold;
    border: 3px dotted black
}

input[type='password'] {
    border : none;
    border-bottom: 3px solid sandybrown;
}

input[type='password']:focus {
    border-bottom: 5px dotted aquamarine;
}

select{
    box-sizing: border-box;
    width: 100%;
    padding: 10px;
    margin: 5px 0;
    border: 2px solid darkolivegreen;
    background-color: bisque;
}

textarea {
    box-sizing: border-box;
    width: 100%;
    resize: none;
    height: 150px;
    font-size: 20px;
}

button{
    width: 150px;
    background-color: navy;
    color: white;
    padding: 15px 20px;
    cursor: pointer;
}

#center { text-align: center;}

<!-- HTML -->
<form action="#">
    <p>아이디 <input type="text" class="input" maxlength="20" placeholder="아이디를 입력하세요"></p>
    <p>비밀번호 <input type="password" class="input" maxlength="20" placeholder="비밀번호를 입력하세요"></p>
    <p>직업 
        <select>
            <option value="프로그래머">프로그래머</option>
            <option value="공무원">공무원</option>
            <option value="전문직">전문직</option>
            <option value="학생">학생</option>
            <option value="취준생">취준생</option>
        </select>
    </p>
    <p><textarea></textarea></p>
    <p id="center"><button>회원가입</button></p>
</form>

 

 

코드 적용 화면

input[type='text']:focus

 

input[type='password']:focus