[CSS] ch01-09. attr

09_attr.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>요안도라</title>
<style>
@import "../css/09_attr.css";
</style>
</head>

<body>
    <section id="container">
        <h1>예약하기</h1>
        <form name="form1" id="form1" method="post">
            <fieldset>
                <legend>예약자 정보</legend>
                <ul>
                    <li><label for="name">예약자</label>
                    <input type="text" id="name">    </li>
                    <li><label for="contact">연락처</label> 
                    <input type="tel" id="contact"></li>
                    <li><label for="people">예약 인원</label> 
                    <input type="number" id="people"></li>
                    <li><label for="bank">입금 은행</label> 
                    <input type="text" id="bank"></li>
                </ul>
            </fieldset>
            <input type="submit"/>
        </form>
    </section>
</body>
</html>

 

09_attr.css

@CHARSET "UTF-8";
ul li {
    list-style: none; /*목록에서 불릿 없앰*/
    font-size: 16px; /*글자 크기 16px*/
    margin-top: 10px; /*위쪽 여백 10px*/
}
ul li label {
    float: left; /*왼쪽으로 배치*/
    width: 80px; /*너비 80px*/
    line-height: 25px; /*줄간격 25px*/
}
input[type="text"] {
    width: 150px; /*너비 150px*/
    background-color: skyblue; /*배경색 하늘색*/
    border: 1px solid #000; /*1px짜리 검은색 실선*/
}