HTML_3일차
예제>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<style>
table{
border-collapse: collapse;
width:610px;
}
table,td,th{
border:solid 1px #ccc;
text-align: center;
}
img{
width:50px;
height:25px;
margin:3px;
padding:3px;
}
#title{
height:30px;
background-color: gray;
}
.col{
color:hotpink;
background-color: pink;
text-decoration: underline;
}
</style>
</head>
<body>
<table border="1">
<tr id="title">
<th>열차번호</th>
<th>출발</th>
<th>도착</th>
<th>출발시간</th>
<th>특실</th>
<th>일반실</th>
<th>소요시간</th>
</tr>
<tr>
<td class="col">175</td>
<td>서울</td>
<td>부산</td>
<td>21:00</td>
<td><img src="C:\Users\Admin\Desktop\Web\CSS3\full.png"></img></td>
<td><img src="C:\Users\Admin\Desktop\Web\CSS3\full.png"></img></td>
<td>02:44</td>
</tr>
<tr>
<td class="col">177</td>
<td>서울</td>
<td>부산</td>
<td>21:30</td>
<td><img src="C:\Users\Admin\Desktop\Web\CSS3\empty.png"></img></td>
<td><img src="C:\Users\Admin\Desktop\Web\CSS3\empty.png"></img></td>
<td>02:38</td>
</tr>
<tr>
<td class="col">179</td>
<td>서울</td>
<td>부산</td>
<td>22:00</td>
<td><img src="C:\Users\Admin\Desktop\Web\CSS3\empty.png"></img></td>
<td><img src="C:\Users\Admin\Desktop\Web\CSS3\empty.png"></img></td>
<td>02:42</td>
</tr>
</table>
</body>
</html>
실행결과>
로그인박스 예제>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<style>
/* 전체적으로 여백을 없앰 */
* {
margin:0;
padding:0;
}
/* 블릿을 업애줌 */
ul {
list-style-type:none;
}
body {
font-family:"맑은 고딕", "돋움";
font-size:12px;
color:444444;
}
/* 멤버로그인 전체이미지를 둘러는 실선을 만듦 */
#login_box {
width:220px;
height:120px;
border:solid 1px #bbbbbb;
border-radius:15px;
margin:10px 0 0 10px;
padding:10px 0 0 15px;
}
/* h2 테그에 대한 디자인 Arial글꼴 10px */
h2 {
font-family:"Arial";
margin-bottom:10px;
}
/* 로그인 박스 크기 고정 */
#login_box input {
width:100px;
height:18px;
}
/*id_pass와 로그인버튼의 위치 정렬 inline-block은 가로정렬, vertical-align은 수직정렬에서 가장 상단에 위치 */
#id_pass, #login_btn {
display:inline-block;
vertical-align:top;
}
/* id_pass 클래스를 사용할 경우 넓이가 20px에 가로정렬 */
#id_pass span {
display: inline-block;
width:20px;
}
#pass {
margin-top:3px;
}
/* 로그인버튼일 경우 margin padding 여백을 준후 모서리를 5px만큼 둥굴게 */
#login_btn button {
margin-left:5px;
padding:12px;
border-radius:5px;
}
/* 버튼의 경우 언더라인 */
#btns {
margin:12px 0 0 0;
text-decoration:underline;
}
/* id선택자 btns의 li 태그일 경우 --> display:inline 줄 바꿈없이 한줄로 배치*/
#btns li {
margin-left:10px;
display:inline;
}
*/
</style>
</head>
<body>
<form>
<div id="login_box">
<h2>Member Login</h2>
<ul id="input_button">
<li id="id_pass">
<ul>
<li>
<span>ID</span>
<input type="text">
</li> <!-- 아이디 -->
<li id="pass">
<span>PW</span>
<input type="password">
</li> <!-- 패스워드 -->
</ul>
</li>
<li id="login_btn">
<button>로그인</button>
</li>
</ul>
<ul id="btns">
<li>회원 가입</li>
<li>아이디/비밀번호 찾기</li>
</ul>
</div> <!-- 로그인 박스 -->
</form>
</body>
</html>
실행결과>
text-align : 텍스트 정렬
- center, left, right
- start : 현재 텍스트 줄의 시작위치에 맞춰 문단정렬
- justify: 양쪽에 맞추어 문단을 정렬
- match-parent: 부모요소를 따라 문단정렬
line-height : 줄간격
ex) p{font-size: 12px; line-height: 24px;}
예제>
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>market</title>
<style>
#container {
width: 650px;
margin: 0 auto;
padding: 5px;
}
#check {
width: 640px;
border: 1px solid #ccc;
}
h1 {
color: white; /* 글자색 */
font-size: 1em; /* 글자 크기 */
background: #222; /* 배경색 */
margin: 0; /* 제목과 다른 요소 간의 마진 여백 */
padding: 10px; /* 테두리와 제목 텍스트 사이의 패딩 여백 */
}
h2 {
color: #ff0000; /* 글자색 */
font-size: 1.5em; /* 글자 크기 */
text-align: center; /* 가운데 정렬 */
}
p {
font-size: 1.2em; /* 글자 크기 */
line-height: 2em; /* 줄간격 */
font-weight: bold; /* 굵게 */
text-align: center; /* 가운데 정렬 */
}
.accent {
color: #0000ff; /* 글자색 */
}
.smalltext {
font-size: 0.7em; /* 글자 크기 */
}
</style>
</head>
<body>
<div id="container">
<img src="C:\Users\Admin\Desktop\Web\CSS3\top.jpg" alt="가정용 꿀사과 - 흠집이 있고 약간은 못생겼지만 맛과 영양은 그대로입니다. 질좋은 사과를 저렴하게 즐겨보세요">
<div id="check">
<h1>확인하세요</h1>
<h2>주문 및 배송</h2>
<p><span class="accent">오후 2시 이전</span> 주문건은 당일 발송합니다<br>
2시 이후 주문건은 다음날 발송합니다(주말 제외)</p>
<hr>
<h2>교환 및 환불</h2>
<p>불만족시 <span class="accent">100% 환불</span>해 드립니다<br>
고객센터로 전화주세요</p>
<hr>
<h2>고객센터 </h2>
<p>0000-0000<br>
<span class="smalltext">상담시간 : 오전 9시 ~ 오후 6시 (토/일, 공휴일 휴무)</span></p>
</div>
</div>
</body>
</html>
실행결과>
