1. 선택자
페이지 정보
작성자 관리자 댓글 0건 조회 1,008회 작성일 22-01-05 22:18본문
1. 선택자
HTML5는 내용을 구성하고, CSS3을 통해 디자인을 꾸민다.
스타일 시트 형식 :
선택자 { 속성:속성값;}
실습 : css1.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS(Cascade Style Sheet)</title>
</head>
<body>
<header>
<h1>물품 주문서</h1>
</header>
<form action="#" method="get" name="form1">
<fieldset>
<legend>개인 정보</legend>
<ul>
<li>
<label>이름
<input type="text" placeholder="여백없이 입력바람"
required>
</label>
</li>
<li>
<label>연락처
<input type="tel" placeholder="연락가능한 번호"
required>
</label>
</li>
</ul>
</fieldset>
<fieldset>
<legend>배송지 정보</legend>
<ul>
<li><label>주소 <input type="text" size="40" max="60" required></label></li>
<li><label>전화번호 <input type="tel" required></label></li>
<li><label>전달사항 <textarea cols="40" rows="3"></textarea></label></li>
</ul>
</fieldset>
<fieldset>
<legend>주문 정보</legend>
<ul>
<li>
<label><input type="checkbox">상품A</label>
<label><input type="number" value="0" min= "0" max="10">개</label>
</li>
<li>
<label><input type="checkbox">상품B</label>
<label><input type="number" value="0" min = "0" max="10">개</label>
</li>
<li>
<label><input type="checkbox">상품C</label>
<label><input type="number" value="0" min = "0" max="10">개</label>
</li>
<li>
<label><input type="checkbox">상품D</label>
<label><input type="number" value="0" min = "0" max="10">개</label>
</li>
</ul>
</fieldset>
<div>
<label><input type="submit" value="주문하기"></label>
<label><input type="reset" value="다시작성"></label>
</div>
</form>
</body>
</html>
실습 : css1.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS(Cascade Style Sheet)</title>
<style>
ul {list-style-type:none;}
div {
text-align:center;
}
fieldset{
margin:20px 10px; /* 상하여백 : 20px , 좌우여백 : 10px*/
}
</style>
</head>
<body>
<header>
<h1>물품 주문서</h1>
</header>
<form action="#" method="get" name="form1">
<fieldset>
<legend>개인 정보</legend>
<ul>
<li>
<label>이름
<input type="text" placeholder="여백없이 입력바람"
required>
</label>
</li>
<li>
<label>연락처
<input type="tel" placeholder="연락가능한 번호"
required>
</label>
</li>
</ul>
</fieldset>
<fieldset>
<legend>배송지 정보</legend>
<ul>
<li><label>주소 <input type="text" size="40" max="60" required></label></li>
<li><label>전화번호 <input type="tel" required></label></li>
<li><label>전달사항 <textarea cols="40" rows="3"></textarea></label></li>
</ul>
</fieldset>
<fieldset>
<legend>주문 정보</legend>
<ul>
<li>
<label><input type="checkbox">상품A</label>
<label><input type="number" value="0" min= "0" max="10">개</label>
</li>
<li>
<label><input type="checkbox">상품B</label>
<label><input type="number" value="0" min = "0" max="10">개</label>
</li>
<li>
<label><input type="checkbox">상품C</label>
<label><input type="number" value="0" min = "0" max="10">개</label>
</li>
<li>
<label><input type="checkbox">상품D</label>
<label><input type="number" value="0" min = "0" max="10">개</label>
</li>
</ul>
</fieldset>
<div>
<label><input type="submit" value="주문하기"></label>
<label><input type="reset" value="다시작성"></label>
</div>
</form>
</body>
</html>
</body>
</html>
댓글목록
등록된 댓글이 없습니다.