하이브리드앱

본문 바로가기
사이트 내 전체검색


하이브리드앱
하이브리드앱

1. 선택자

페이지 정보

작성자 관리자 댓글 0건 조회 504회 작성일 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>



1.PNG



실습 : 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>



2.PNG


댓글목록

등록된 댓글이 없습니다.


개인정보취급방침 서비스이용약관 모바일 버전으로 보기 상단으로

TEL. 063-469-4551 FAX. 063-469-4560 전북 군산시 대학로 558
군산대학교 컴퓨터정보공학과

Copyright © www.leelab.co.kr. All rights reserved.