CHAPTER 7. HTML 와 CSS 로웹사이트만들 기
웹사이트작성
웹사이트구축과정
내비게이션구조도
홈페이지레이아웃
헤더 <header> <h1> <img src="images/shop.png" width="50" height="50" /><a href="index.html">web Shop</a></h1> </header>
내비게이션메뉴 <nav> <ul> <li><a href="index.html">home</a></li> <li><a href="index.html">about Us</a></li> <li><a href="index.html">news</a></li> <li><a href="index.html">my Account</a></li> <li><a href="index.html">contacts</a></li> </ul> </nav>
왼쪽수직메뉴 <aside id="left"> <h4> 카테고리 </h4> <ul> <li><a target="iframe1" href="computer.html"> 컴퓨터 </a></li> <li><a target="iframe1" href="clothing.html"> 의류 </a></li> <li><a target="iframe1" href="music.html"> 음악 </a></li> <li><a target="iframe1" href="movie.html"> 영화 </a></li> <li><a target="iframe1" href="computer.html"> 스포츠 / 레저 </a></li> <li><a target="iframe1" href="computer.html"> 가구 / 인테리어 </a></li> <li><a target="iframe1" href="computer.html"> 식품 </a></li> </ul> </aside>
섹션 <section id="main"> <article id="article1"> <iframe name="iframe1" src="computer.html" width="440" height="300" seamless></iframe> </article> </section>
오른쪽수직메뉴 <aside id="right"> <div id="shopcart"> <h4>shopping Cart</h4> 현재쇼핑카트에물품이없습니다.<br /> <a href="shopcart.html"> 쇼핑카트보기 </a> </div> <div id="login"> <h4>log In</h4> <form action="#"> 아이디 <input type="text" /><br /> 패스워드 <input type="password" /><br /> <input type="submit" value=" 로그인 " /> <input type="reset" value=" 초기화 " /><br /> <a href="register.html" target="_blank" id="register"> 회원가입 </a> <a href="#" id="forgot"> 비밀번호분실 </a> </form> </div> </aside>
바닥글 <footer>copyright (c) 2013 Web Shop</footer>
회원가입페이지 <!DOCTYPE html> <html> <head> <style> body { height: 100%; background-color: #F3F1E9; label { display: inline-block; width: 120px; input { display: inline-block; width: 160px; </style> </head>
<body> <div id="page-wrap"> 회원가입페이지 <form method="post" action="process.jsp"> <fieldset> <legend> 회원정보입력 </legend> <label for="name"> 아이디 </label> <input type="text" name="name" id="text1" /> <button> 중복검사 </button><br /> <label for="password1"> 패스워드 </label> <input type="password" name="password1" /><br /> <label for="password2"> 패스워드확인 </label> <input type="password" name="password2" /><br /> <label for="name"> 이름 </label> <input type="text" name="name" /><br /> <label for="tel"> 휴대폰번호 </label> <input type="tel" name="tel" /> <br /> <label for="email"> 이메일 </label> <input type="email" name="email" /> <br />
회원가입페이지 <label for="dob"> 생일 </label> <input type="date" name="dob" /> <br /> <label for="url"> 홈페이지 </label> <input type="url" name="url" /> <br /> <input type="radio" name="gender" value="male"> 남성 <br> <input type="radio" name="gender" value="female"> 여성 <br> </fieldset> <input type="submit" name="submit" value=" 제출 " /> <input type="reset" name="reset" value=" 초기화 " /> </form> </div> </body> </html>
상품정보페이지 <!DOCTYPE html> <html> <head> <style> #product1, #product2 { width: 200px; float: left; border: 1px dotted red; </style> </head> <body> <div id="product1"> <img src="computer.png" width="100" height="100" /> <p> 심플하고슬림한본체에코어 i5 3470 과지포스 GT630 을장착 CPU: 인텔코어 i5 3470 ( 아이비브릿지 3 세대 ) 사용 <br /> 가격 : 1,200,000 원 </p> <input type="button" value=" 쇼핑카트에추가하기 " /> </div>
상품정보페이지 <div id="product2"> <img src="images/notebook.png" width="100" height="100" /> <p> Full-HD 로선명한화면, ISP 패널로시야각도좋다! CPU: 인텔코어 i7 3630 QM, CPU: 인텔코어 i7 3630 QM <br /> 가격 : 1,200,000 원 </p> <input type="button" value=" 쇼핑카트에추가하기 " /> </div> </body> </html>
<html> <head> <title> 쇼핑카트 </title> <style> body { height: 100%; background-color: #F3F1E9; table { width: 100%; border-collapse: collapse; text-align: center; table caption { color: red; text-decoration: underline; </style> </head> 쇼핑카트페이지
쇼핑카트페이지 <body> <form action="#"> <table border="1"> <caption>shopping Cart</caption> <tr> <th> 품목 </th> <th> 가격 </th> <th> 수량 </th> <th> 합계 </th> </tr> <tr> <td> 컴퓨터세트 </td> <td>2,000,000 원 </td> <td> <input type="number" min="0" step="1" value="0"></td> <td> <input type="text" size="6" value="0" /></td> </tr> <tr> <td> 티셔츠 </td> <td>50,000 원 </td> <td> <input type="number" min="0" step="1" value="0"></td> <td> <input type="text" size="6" value="0" /></td> </tr>
쇼핑카트페이지 <tr> <td> 음악파일 </td> <td>1,000원 </td> <td> <input type="number" min="0" step="1" value="0"></td> <td> <input type="text" size="6" value="0" /></td> </tr> <tr> <td> 영화파일 </td> <td>5,000원 </td> <td> <input type="number" min="0" step="1" value="0"></td> <td> <input type="text" size="6" value="0" /></td> </tr> </table> <input type="button" value=" 계산 " /> <input type="submit" value=" 구매 " /> <input type="reset" value=" 초기화 " /> </form> <a href="main.html">back to Home</a> </body> </html>
외부 CSS 파일
CSS 파일 * { /*border: 1px solid red;*/ padding: 0px; margin: 0px; body { background-color: #F3F1E9; header { height: 60px; margin: 10px; nav { margin: 10px; nav ul { list-style: none; text-align: center; border-top: 1px solid red; border-bottom: 1px solid red; padding: 10px 0;
nav ul li { display: inline; text-transform: uppercase; padding: 0 10px; letter-spacing: 10px; nav ul li a { text-decoration: none; color: black; nav ul li a:hover { text-decoration: underline; CSS 파일 aside#left { width: 175px; margin-top: 20px; float: left;
#left h4 { font-family: Arial, Helvetica, sans-serif; font-size: 20px; #left ul { font-family: Arial, Helvetica, sans-serif; font-size: 15px; color: #FFF; list-style: none; text-indent: 15px; #left ul li { background: #3f3f3f; line-height: 28px; border-bottom: 1px solid #333; #left ul li a { text-decoration: none; color: #FFF; display: block; CSS 파일
CSS 파일 #left ul li a:hover { background: #d40203; #left ul li#active { background: #d40203; #main { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #464646; overflow: hidden; float: left; width: 430px; #shopcart { margin-bottom: 20px; #login { margin-top: 40px;
CSS 파일 aside#right { padding: 0px; margin-left: 10px; width: 200px; float: left; footer { width: 100%; height: 50px; clear: both; background-image: url(images/footer_bg.gif); background-position: top left; background-repeat: repeat-x;
Q & A