dukDukz
2021.03.07 과제_웹 페이지 만들기 (자유) 본문
ex1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>1st_Website</title>
<link rel="stylesheet" type="text/css" href="ex1.css"/>
</head>
<body>
<br>
<div class="main"> 웹 페이지에 오신걸 환영합니다.</div>
<img src="welcome.jpg" alt="welcome 사진" > <!--alt는 이미지 없을 때 나타나는 텍스트-->
<p class="hello_kor">반갑습니다. 어서오세요!</p><br>
<p class="hello_eng">Welcome to my Website!</p>
<ul class="ul_1">
<h1>[회원 가입]</h1>
<li class="id_1">아이디: <input class="input_id" type="text" placeholder="아이디를 입력하세요"></br></li>
<li class="pw_1">비밀번호: <input class="input_pw" type="text" placeholder="패스워드를 입력하세요"></br></li>
<li class="pw_re">비밀번호 확인: <input class="input_pw_re" type="text" placeholder="다시 비밀번호를 입력하세요"></li>
<li class="sex">성별: 남<input class="man" type="radio"></radio>
여<input class="man" type="radio"></radio> </li>
<li class="hobbies"> 취미 : 독서 <input class="reading" type="checkbox">
영화 보기 <input class="movies" type="checkbox">
음악 감상 <input class="music" type="checkbox"></li>
<button class="btn">확인</button>
</ul>
<ul class="ul_2">
<h2>[연락망]</h2>
<li class="email">Email : <a href="mailto:hello@naver.com">hello@naver.com</a></li>
<li class="website">Web : <a href="http://naver.com" target="_blank">http://naver.com</a></li>
<li class="tel">Tel : 02-123-4567 </li>
</ul>
</body>
</html>
ex1.css
*{margin: 0; padding: 0;}
ul,li {list-style:none;}
body{
background-color: lightgray;
}
/***** 웹 윗 부분 *****/
.main{
color: blueviolet;
font-size: 50px;
font-style: bold;
text-align: center;
margin-top: 20px;
margin-bottom: 40px;
}
img {
display: block;
margin: 0px auto; /*사진 중앙정렬*/
margin-bottom: 30px;
}
.hello_kor{
color:blue;
font-size: x-large;
font-weight: 500;
font-style: italic;
text-align: center;
}
.hello_eng{
color: coral;
font-size: x-large;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
text-align: center;
}
h1{
color: darkkhaki;
font-size: 25pt;
text-align: left;
margin-top: 100px;
}
/***** 회원가입 파트*****/
.ul_1{
margin-left: 200px;
margin-bottom: 100px;
}
h1{
margin-bottom: 25px;
color: darkgreen;
font-size: 25pt;
text-align: left;
margin-top: 100px;
}
.id_1, .pw_1, .pw_re , .sex ,.hobbies{
font-size: 13pt;
margin-bottom: 15px;
}
.input_id, .input_pw {
width: 140px;
height: 30px;
}
.input_pw_re {
width: 190px;
height: 30px;
}
.btn{
margin-top: 20px;
width: 80px;
height: 40px;
}
/***** 연락망 파트*****/
h2 {
margin-bottom: 20px;
}
.ul_2{
margin-left: 200px;
margin-top: 60px;
margin-bottom: 60px;
}
.email, .website, .tel{
font-size: 20pt;
margin-bottom: 15px;
}
ex2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>A Cafe</title>
<link rel="stylesheet" type="text/css" href="ex2.css"/>
</head>
<body>
<div class="box">
<h2>A Cafe</h2>
<h4>[ Menu ]</h4>
<table id="first_table">
<tr id="icehot">
<td class="icehot1"> ICED / HOT</td>
</tr>
<tr id="coffee">
<td class="americanoIH">Americano     4.5</td>
<td class="latteIH">Latte     5.0</td>
</tr>
<tr id="pic1">
<td><img class="ame_pic" src="americano.jpeg" alt="아메리카노 사진" ></td>
<td><img class="latte_pic" src="latte.jpg" alt="라떼 사진" ></td>
</tr>
<tr id="order1">
<td>ICED<input class="type_ame1" type="radio">
HOT<input class="type_ame2" type="radio">
<button>주문하기</button></td>
<td>ICED<input class="type_latte1" type="radio">
HOT<input class="type_latte2" type="radio">
<button>주문하기</button></td>
</tr>
</table>
<table id="second_table">
<tr id="tea">
<td class="camotea">Chamomile Tea     3.5</td>
<td class="greentea">Green Tea     4.5</td>
</tr>
<tr>
<td ><img class="camo_pic" src="camotea.jpg" alt="카모마일 사진" ></td>
<td ><img class="greentea_pic" src="greentea.jpeg" alt="녹차 사진" ></td>
</tr>
<tr id="order2">
<td>ICED<input class="type_camo1" type="radio">
HOT<input class="type_camo2" type="radio">
<button>주문하기</button></td>
<td>ICED<input class="type_green1" type="radio">
HOT<input class="type" type="radio">
<button>주문하기</button></td>
</tr>
</table>
</div>
</body>
</html>
ex2.css
body{
background-color:white;
font-family:Verdana, Geneva, Tahoma, sans-serif;
font-style: bold;
}
h2{
padding-bottom: 100px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 45pt;
text-align: center;
}
h4{
font-size: 25pt;
padding-bottom: 80px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-style: bold;
text-align: center;
}
.icehot1{
font-style: italic;
padding-bottom: 50px;
font-size: 20pt;
padding-bottom: 150px;
}
table {
margin-left:auto;
margin-right:auto;
}
/*******음료 종류*******/
.americanoIH, .latteIH ,.camotea ,.greentea{
font-size: 20pt;
margin-left: 400px;
background-color: lightgrey;
}
#first_table, #second_table{
padding-bottom: 150px;
}
.ame_pic, .latte_pic, .camo_pic, .greentea_pic{
height: 400px;
width: 450px;
margin-right: 100px;
}
.ame_pic, .camo_pic {
margin-right: 100px;
}
.coffee{
align-content: center;
}
+ 자주 쓰이는 html 코드