2020.04.29

웹_프론트_백엔드/JAVA프레임윅기반_풀스택

2020.04.29

shine94 2020. 4. 29. 09:15

1. [과제] 주문정보 form, 캘린더 페이지 만들기(쌤이 제공해준 사진 참고하여 최대한 비슷하게 화면 구성해보기)

1) 주문정보 Form 만들기

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>주문 폼 작성</title>

<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>

<style>

body {
	font-family: Verdana, sans-serif;
}

header {
	font-size: 25px;
	background-color: Tomato;
	padding: 10px;
	color: white;
	font-family: Verdana, sans-serif;
}

table {
	border: 1px solid black;
	width: 100%;
	margin-left: auto; 
	margin-right: auto;
}


table, tr, td{
	border-collapse: collapse;
	padding: 20px;
}

footer {
	font-family: Verdana, sans-serif;
	font-size: 20px;

}

</style>

</head>
<body>

<br>
<header> 
<h1>11번가. 주문/결제</h1>
</header>

<section>
	<form>
	<br><br> 
	<h4>주문자 정보 입력</h4>
	<table>
		<tr>
			<td>주문자 정보</td>
			<td>
				<input value="비회원으로 상품구매 시 반드시 본인인증을 하셔야 합니다." size="55" disabled style="border: none; width=100%; background-color: white"/>
				<button type="button">휴대폰인증</button>
				<button type="button">아이핀인증</button>
			</td>
		</tr>
		<tr>
			<td style="vertical-align: top">주소</td>
			<td>
				<input type="text" disabled>&nbsp;<button type="button">주소찾기</button><br>
				<input type="text" size="150" disabled style="width=100%;"><br>
				<input type="text" size="150" style="width=100%;">
			</td>
		</tr>
		<tr>
			<td>휴대전화</td>
			<td>
				<select name="phoneNum">
					<option value="010" selected>010</option>
					<option value="011">011</option>
					<option value="016">016</option>
					<option value="017">017</option>
					<option value="018">018</option>
					<option value="019">019</option>
				</select>&nbsp;-&nbsp;
				<input type="number" maxlength="4" size="4" style="width=100%;">&nbsp;-&nbsp;
				<input type="number" maxlength="4" size="4" style="width=100%;">&nbsp;
				<input type="checkbox" checked>SMS 수신동의
			</td>
		</tr>
		<tr>
			<td>이메일</td>
			<td>
				<input type="text">&nbsp;@&nbsp;
				<input type="text">&nbsp;
				<select>
					<option selected>직접입력</option>
					<option>naver.com</option>
					<option>gmail.com</option>
					<option>hanmail.net</option>
					<option>nate.com</option>
					<option>yahoo.com</option>
					<option>lycos.co.kr</option>
					<option>dreamwiz.com</option>
					<option>netian.com</option>
				</select>
			</td>
		</tr>
	</table>
	<input value="※ SK플래닛(주)는 통신판매중개자로서 통신판매의 당사자가 아니며, 개별판매자가 등록한 상품정보 및 거래에 대해 SK플래닛(주)는 일체의 책임을 지지 않습니다." size="200" disabled style="border: none; width=100%; background-color: white">
	
	<br><br>
	<h4>배송지 정보 입력</h4>
	<table>
		<tr style="border-bottom: 1px Dotted black;">
			<td>배송지선택</td>
			<td><button type="button">주문자 정보와 동일</button></td>
		</tr>
		<tr>
			<td>받으시는 분</td>
			<td><input type="text"></td>
		</tr>
		<tr>
			<td style="vertical-align: top">주소</td>
			<td>
				<input type="text" disabled>&nbsp;<button type="button">주소찾기</button><br>
				<input type="text" disabled size="150" style="width=100%"><br>
				<input type="text" size="150" style="width=100%">
			</td>
		</tr>
		<tr>
			<td>휴대전화</td>
			<td>
				<select name="phoneNum">
					<option value="010">010</option>
					<option value="011">011</option>
					<option value="016">016</option>
					<option value="017">017</option>
					<option value="018">018</option>
					<option value="019">019</option>
				</select>&nbsp;-&nbsp;
				<input type="number" maxlength="4" size="4" style="width=100%;">&nbsp;-&nbsp;
				<input type="number" maxlength="4" size="4" style="width=100%;">&nbsp;
				<input type="checkbox" checked>안심번호 사용(무료)&nbsp;<i class="fas fa-question"></i>
				<input type="checkbox">집전화 추가 입력
			</td>
		</tr>
		<tr>
			<td style="vertical-align: top">배송시요구사항</td>
			<td>
				<input type="number">&nbsp;(0자/50자)<br>
				<input value="* 특정한 배송일을 지정하고자 할 경우 판매자와 연락하여 배송일을 확인해주시기 바랍니다." size="100" disabled style="border: none; width=100%; color: blue; background-color: white">
				
			</td>
		</tr>
	</table>
	
	<br><br>
	<h4>결제 정보 입력</h4>
	<table>
		<tr>
			<td>신용카드</td>
			<td>
				<input type="radio" name="creditCard" checked/>신용카드(일반)
				<input type="radio" name="creditCard"/>신용카드(법인)
				<input type="radio" name="creditCard"/>해외발급카드
			</td>
		</tr>
		<tr style="border-bottom: 1px Dotted black;">
			<td>현금결제</td>
			<td>
				<input type="radio" name="cash"/>무통장입금
				<input type="radio" name="cash"/>실시간계좌이체
			</td>
		</tr>
		<tr>
			<td>카드선택</td>
			<td>
				<select name="cardChoice">
					<option selected>국민</option>
					<option>비씨</option>
					<option>신한</option>
					<option>현대</option>
					<option>삼성</option>
					<option>롯데</option>
					<option>외환</option>
					<option>NH</option>
					<option>하나</option>
					<option>우리</option>
					<option>광주</option>
					<option>수협</option>
					<option>시티</option>
					<option>전북</option>
					<option>제주</option>
					<option>카카오뱅크</option>
					<option>케이뱅크</option>
				</select>
			</td>
		</tr>
		<tr>
			<td>할부방식</td>
			<td>
				<select>
					<option selected>일시불</option>
					<option>2</option>
					<option>5</option>
					<option>9</option>
					<option>12</option>
				</select>
			</td>
		</tr>
		<tr>
			<td>결제안내</td>
			<td>
				<button type="button" style="color: red; border-color: red">간편결제안내</button>
				<button type="button">공인인증안내</button>
				<button type="button">안전결제안내</button>
				<button type="button">안심클릭안내</button>
				<button type="button">해외발급카드안내</button>
			</td>
		</tr>
	</table>
	
	<div align="center" style="margin: 100px">
	<button style="width: 200px; height: 100px; font-size: 30px">결제하기</button>
	</div>
	
	</form>
</section> 

<footer> <p align="center">Copyright &copy; 2018 11Street Co.,Ltd. All Rights Reserved.</p> 
</footer>


</body>
</html>

2) 캘린더 페이지 만들기

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>캘린더 폼 작성</title>

<style>
table#radioChoice, table#trCalendar, tr.trRadioChoice, tr.trCalendar, td.tdCalendar, td.tdRadioChoice, th {
	border: 1px solid black;
	border-collapse: collapse;
	padding: 20px; 
}

ul, li {
	list-style-type: none;
	display: inline;
}

li {
	margin: 0px;
	border: 1px solid black;
	padding: 10px;
	width: 100;
}

a {
	padding: 10px;
	text-decoration: none; 
	color: black;
}

a:hover { 
	background-color: DodgerBlue;
	color: white;
}

iframe {
	width: 100%;
	border: none;
}

footer {
	text-align: center;
	background-color: #EEEEEE;
}

main {
	text-align: center;
}

</style>
</head>
<body>

<nav>
	<table style="border: 2px solid DarkGray; width: 100%; background-color: #EEEEEE;">
		<tr>
			<td style="text-align: center; padding: 10px; ">정책차림표</td>
			<td style="text-align: center; padding: 10px; ">미리보는 지원사업</td>
			<td style="text-align: center; padding: 10px; ">마감임박 지원사업</td>
			<td style="text-align: center; padding: 10px; background-color: DodgerBlue; color: white;">접수중인 지원사업</td>
		</tr>
	</table>
</nav>

<article> 
	<div style="text-align: center; margin: 20px;">
	<h1 style="display: inline; color: DimGray;">&lt;&nbsp;</h1>
	<h1 style="display: inline; color: DodgerBlue;">2015-06-17</h1>
	<h1 style="display: inline;color: DimGray;">&nbsp;&gt;</h1>
	</div>
	
	<table id="radioChoice" style="width: 100%">
		<tr class="trRadioChoice">
			<td class="tdRadioChoice" colspan="7">
				<input type="radio" name="choice" checked/>전체&nbsp;&nbsp;
				<input type="radio" name="choice"/>창업·벤처&nbsp;&nbsp;
				<input type="radio" name="choice"/>소상공인&nbsp;&nbsp;
				<input type="radio" name="choice"/>판로·수출&nbsp;&nbsp;
				<input type="radio" name="choice"/>R&D&nbsp;&nbsp;
				<input type="radio" name="choice"/>금융·세제&nbsp;&nbsp;
				<input type="radio" name="choice"/>인력
			</td>
		</tr>
		<tr class="trCalendar">
			<td class="tdCalendar" style="padding: 2px">
				<table id="calendar" style="width: 100%">
					<tr class="trCalendar">
						<th>일</th>
						<th>월</th>
						<th>화</th>
						<th>수</th>
						<th>목</th>
						<th>금</th>
						<th>토</th>
					</tr>
		
					<tr class="trCalendar">
						<td class="tdCalendar" style="background-color: #EEEEEE;"></td>
						<td class="tdCalendar">1</td>
						<td class="tdCalendar">2</td>
						<td class="tdCalendar">3</td>
						<td class="tdCalendar">4</td>
						<td class="tdCalendar">5</td>
						<td class="tdCalendar">6</td>
					</tr>
		
		
					<tr class="trCalendar">
						<td class="tdCalendar" style="background-color: Cyan;">7</td>
						<td class="tdCalendar">8</td>
						<td class="tdCalendar">9</td>
						<td class="tdCalendar">10</td>
						<td class="tdCalendar">11</td>
						<td class="tdCalendar">12</td>
						<td class="tdCalendar">13</td>
					</tr>
		
					<tr class="trCalendar">
						<td class="tdCalendar">14</td>
						<td class="tdCalendar">15</td>
						<td class="tdCalendar">16</td>
						<td class="tdCalendar">17</td>
						<td class="tdCalendar">18</td>
						<td class="tdCalendar">19</td>
						<td class="tdCalendar">20</td>
					</tr>
		
					<tr class="trCalendar">
						<td class="tdCalendar">21</td>
						<td class="tdCalendar">22</td>
						<td class="tdCalendar">23</td>
						<td class="tdCalendar">24</td>
						<td class="tdCalendar">25</td>
						<td class="tdCalendar">26</td>
						<td class="tdCalendar">27</td>
					</tr>
		
					<tr class="trCalendar">
						<td class="tdCalendar">28</td>
						<td class="tdCalendar">29</td>
						<td class="tdCalendar">30</td>
						<td class="tdCalendar" style="background-color: #EEEEEE;"></td>
						<td class="tdCalendar" style="background-color: #EEEEEE;"></td>
						<td class="tdCalendar" style="background-color: #EEEEEE;"></td>
						<td class="tdCalendar" style="background-color: #EEEEEE;"></td>
					</tr>
		
				</table>
			</td>
		</tr>
	
	</table>
</article> 




<main>
	<h4 style="color: #555555; text-align: left;">· 2015년 6월 7일, 전체 검색 결과, 진행중인 사업은 총 614건 입니다.</h4>
	<iframe src="Html15_practice3.html" name="businessList"></iframe>

	<br><br>
	<button>&lt;&lt;</button>&nbsp;<button>&lt;</button>
	<a href="Html15_practice3.html" target="businessList">&nbsp;1&nbsp;</a> 
	<a href="Html15_practice3.html" target="businessList">&nbsp;2&nbsp;</a>
	<a href="Html15_practice3.html" target="businessList">&nbsp;3&nbsp;</a>
	<a href="Html15_practice3.html" target="businessList">&nbsp;4&nbsp;</a>
	<a href="Html15_practice3.html" target="businessList">&nbsp;5&nbsp;</a>
	<button>&gt;</button>&nbsp;<button>&gt;&gt;</button>
	<br><br><br>
</main>



<footer>
	<br>
	<select style="vertical-align: middle;">
		<option>키워드</option>
		<option>작성일자</option>
		<option>작성자</option>
	</select>
	<input type="text" size="50">&nbsp;<button>검색</button>
	<br><br>
</footer>

</body>
</html>

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style>
table {
	border-collapse: collapse;
	padding: 20px; 

}

th {
	border-bottom: 2px solid black;
	border-top: 2px solid black;
	background-color: DarkGray;
	
}

td {
	border-bottom: 2px solid black;
	border-top: 2px solid black;
	text-align: center;
}
</style>

</head>
<body>

<table style="width: 100%">
	<tr>
		<th>번호</th>
		<th>지원사업명</th>
		<th>주관부처</th>
		<th>신청기관</th>
		<th>조회</th>
	</tr>
	<tr>
		<td>1</td>
		<td style="text-align: left;">2015년 창조경제 벤처창업대전 정부포상 및 전시회 참가 신청...</td>
		<td>중소기업청</td>
		<td>2015.06.04 ~ 2015.06.30</td>
		<td>731</td>
	</tr>
	<tr>
		<td>10</td>
		<td style="text-align: left;">2015년 창조경제 벤처창업대전 정부포상 및 전시회 참가 신청...</td>
		<td>중소기업청</td>
		<td>2015.06.04 ~ 2015.06.30</td>
		<td>731</td>
	</tr>
	<tr>
		<td>610</td>
		<td style="text-align: left;">2015년 창조경제 벤처창업대전 정부포상 및 전시회 참가 신청...</td>
		<td>중소기업청</td>
		<td>2015.06.04 ~ 2015.06.30</td>
		<td>731</td>
	</tr>
	<tr>
		<td>614</td>
		<td style="text-align: left;">2015년 창조경제 벤처창업대전 정부포상 및 전시회 참가 신청...</td>
		<td>중소기업청</td>
		<td>2015.06.04 ~ 2015.06.30</td>
		<td>731</td>
	</tr>
</table>

</body>
</html>

3) 과제를 통해 얻은 점
① 짧은 시간동안 많은 것을 배워서 헷갈렸는데 과제를 하면서 이것 저것 시도해보면서 정리가 많이 됬다.
② 주문 결제 과정을 통해 input과 select에 대해 확실히 알게되었고

이것 저것 디자인을 시도해보면서 CSS에 대한 습득이 기존보다 나아진 것 같다.
③ 캘린더를 통해 일부러 iframe을 사용했고 실질적으로 직접 사용해보면서 습득하게 되었다.

2. CSS 가 무엇인지 알 수 있는 사이트
: http://www.csszengarden.com/

3. Css004_Position.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Position</title>

<style>
div.static {
	border: 3px solid limegreen;
}

div.relative {
	border: 3px solid orangered;
	width: 400px;
	position: relative;
	left: 30px;	/* 왼쪽으로부터 -> */
	/*right: -30px;*/ /* 오른쪽으로부터 <- */
	/*top: 30px;*/ /* 위에서부터  ↓ */
	/*bottom: 30px;*/ /* 아래서부터  ↑ */
}

div.fixed {
	border: 3px solid blue;
	width: 300px;
	position: fixed;
	bottom: 0px;
	right: 0px;
}

div.absolute {
	border: 3px solid orchid;
	width: 200px;
	height: 100px;
	position: absolute;
	top: 40px;
	right: 20px;
}
</style>

</head>
<!--
	position : element 의 배치, 아래 4가지 종류
	
	1. static : (디폴트) 기본위치(normal) 에 배치.
				top, bottom, left, right 와 아무런 영향 없슴
				
	-- 나머지 아래 3개는 모두 ~~에 대해 '상대적' 배치
	   top, bottom, left, right 값에 영향 받음
	   
	2. relative : 기본위치(normal) 에 대해 '상대적' 배치
	3. fixed : 뷰포트(viewport) 에 대해 '상대적' 배치
	4. absolute : 부모(ancestor) 에 대해 '상대적' 배치
			- 부모가 relative, fixed, absolute 인경우만 작동!
			- 부모가 static 이면, body 에 대해 상대적 배치다.
-->

<body>
<h2>position: static</h2>
<div class="static">static</div>

<br><hr>

<h2>position: relative</h2>
<div class="relative">relative</div>

<br><hr>

<h2>position: fixed</h2>
<div class="fixed">fixed</div>

<br><hr>

<h2>position: absolute</h2> <!-- 다음 2개 비교 -->
<!--  부모가 relative, fixed, absolute 인 경우 -->
<div class="relative">부모1-relative
	<div class="absolute">absolute1</div>
</div>

<br>
<!-- 부모가 static 인 경우 -->
<div class="">부모2-static
	<div class="absolute">absolute2</div>
</div>

<br><hr>



<!-- 이번단원은 학생들도 아래 br 태그기입해주세요 -->
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>

4. Css005_overflow.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>overflow</title>
<!-- 
'content' 가 element box 를 벗어난 경우 어떻게 처리할지 명시
overflow 는 height 값을 가진 block 속성 element 에 대해서만 동작함!

	visible : (기본값) clip 발생 안하고, 그냥 box 영역 밖에 보임
	hidden : clip 발생, 넘치는 content 는 안 보임
	scroll : clip 발생하나 scroll 바 등장하여 볼수는 있게 한다
	auto : overflow 발생시에만 scoll 바 등장
	initial : 기본값 전환
	inherit : 부모 element 의 overflow 값 계승

https://www.w3schools.com/css/css_overflow.asp
https://www.w3schools.com/cssref/pr_pos_overflow.asp
https://www.w3schools.com/cssref/playit.asp?filename=playcss_overflow


x축(수평) overflow 값에 대해서만 설정할때는 overflow-x
y축(수직) overflow 값에 대해서만 설정할때는 overflow-y


-->
<style>
div {
	background-color: lightblue;
	width: 110px;
	height: 110px;
}

div.ex1 {
	overflow: scroll;
}

div.ex2 {
	overflow: hidden;
}

div.ex3 {
	overflow: auto;
}

div.ex4 {
	overflow: visible; /* 디폴트값..!! */
}
</style>
</head>
<body>

<h1>The overflow Property</h1>

<p>The overflow property specifies whether to clip content or to add scrollbars when an element's content is too big to fit in a specified area.</p>

<h2>overflow: scroll:</h2>
<div class="ex1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>

<h2>overflow: hidden:</h2>
<div class="ex2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>

<h2>overflow: auto:</h2>
<div class="ex3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>

<h2>overflow: visible (default):</h2>
<div class="ex4">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>

</body>
</html>

5. Css006_Float1.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Float & Clear 1</title>
<style>
img {
	width:170px; height:170px;
	margin-left:15px;  /* 왼쪽 바깥 여백 */
}
img#f1 {
	float: none; /* 기본값 */
}
img#f2 {
	float: right;
	margin: 100px;
}
img#f3 {
	float: left;
}

div#clear {
	clear: left; /* 더 이상 float:left 의 영향을 받지 않는다 */
}

</style>
</head>
<!-- CSS float 
	https://www.w3schools.com/css/css_float.asp
	
	float 는 content 들을 어떻게 배치하고 자리 잡을지 세팅한다.
	
	left - element를  컨테이너의 왼쪽으로 float 한다
	right- element를  컨테이너의 오른쪽으로 float 한다
	none - float 안한다 (디폴트) (일반 텍스트 출력처럼 한다)
	inherit - 부모의 float 값대로 동작.
	
	★ 일단 자신이 float가 되면 주변의 다른 element 의 content 는 그 '주변'으로 배치된다. 

 -->
<body>

<p>아래 이미지와 이를 감싸는 paragraph 의 텍스트 들이 어떻게 배치되는지 확인해보기 위해 none, right, left 값을 주면서 관찰해보자</p>
<hr>
<!--
	float: none 일때는 이미지도 텍스트의 하나처럼 배치된다 
	float: right 하면, 이미지는 컨테이너 우측으로 float 하고 
		주변 element의 content 은 float 하는 이미지 주변을 감싸는 형태가 된다.
	float: left 하면, 이미지는 컨테이너 좌측으로 float 하고 
		주변 element의 content 은 float 하는 이미지 주변을 감싸는 형태가 된다.
 -->
<p>
	<img id="f1" src="https://www.w3schools.com/css/pineapple.jpg" alt="Pineapple">
	<b>float:none</b>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
</p>
<hr>
<p>
	<img id="f2" src="https://www.w3schools.com/css/pineapple.jpg" alt="Pineapple">
	<b>float:right</b>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
</p>
<hr>
<p>
	<img id="f3" src="https://www.w3schools.com/css/pineapple.jpg" alt="Pineapple">
	<b>float:left;</b>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
</p>

<!-- clear -->
<div id="clear"></div>

<hr> <!-- hr의 위치 주목! -->


</body>
</html>

6. Css006_Float2.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Float & Clear 2</title>

<style>
h2 {
	border: 1px solid brown;
}

.div1, .div3 {
	border: 3px solid MediumSeaGreen;
	width: 100px;
	height: 50px;
	margin: 10px;	
}

.div2, .div4 {
	border: 1px solid red;
}



.div1 {
	float: left;
}

.div3 {
	float: left;
}

.div4 {
	clear: left;
}


</style>

</head>

<!-- 
clear 값 - clear가 적용된 element
좌우로 어떻게 float이 적용될지 지정
https://www.w3schools.com/css/css_float.asp


none : (디폴트) float 허용
left : 왼쪽으로는 float 허용안함
right : 오른쪽으로는 float 허용안함
both : 양쪽으로 float 허용안함
inherit : 부모의 clear 값
-->

<body>

<h2>clear가 없다면</h2>
<div class="div1">div1</div>
<div class="div2">div2 : div2 는 div1의 '다음'에 있었다. 
그러나, div1이 float:left 이기 때문에 
div2 의 content는  div1 주변을 float 한다.
</div>


<h2>clear가 적용된다면</h2>
<div class="div3">div3</div>
<div class="div4">div4 : div4 는 div3 '다음'에 있었다 
div4 는 clear:left 가 적용 되면, 더이상 float:left 의
영향을 받지 않는다
</div>


</body>
</html>

7. Css007_FloatClear01.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>float</title>
<!-- 
	1단계 float 적용 안된 상태  
	2단계 div1 에만 float:left 적용된 상태 → div2의 상태를 눈여겨보자
	3단계 div2 까지 float:left 적용된 상태
	4단계 div3 까지 float:left 적용된 상태	
	
		화면 폭을 좁혀가면서 변화도 확인하자, 
		같은 float 끼리는 inline 처럼 동작
-->
<style type="text/css">
	body {
		background-color: antiquewhite;
	}
	div.a {
		width: 100px;
		height: 100px;
		border: 1px solid black;
		font-size: 18px;	
	}
/* float: left;는 float: left;끼리 옆으로 붙는다..!!*/
	#div1 {
		background-color: red;
		float: left; /* div1 에 float:left 적용 */
	}
	#div2 {
		background-color: green;
		float: left; /* div2 에 float:left 적용 */
	}
	#div3 {
		background-color: blue;
		float: left; /* div3 에 float:left 적용 */
		clear: left;
	}
</style>
</head>
<body>
	<div id="div1" class="a">RED div1</div>
	<div id="div2" class="a">GREEN div2</div>
	<div id="div3" class="a">BLUE div3</div>

</body>
</html>

8. Css007_FloatClear06.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>container사용</title>
<!-- div 컨테이너로 감싼뒤의 모습 -->
<!-- 화면 좁혀가면서 변화 주목, 화면을 좁혀도 변화없다 -->

<style type="text/css">
	body {
		background-color: antiquewhite;
	}
	div.a {
		width: 100px;
		height: 100px;
		border: 1px solid black;
		font-size: 18px;	
	}
	#div1 {
		background-color: red;
		float:left         /* div1 에 float:left 적용 */
	}
	#div2 {
		background-color: green;
		float:left         /* div2 에 float:left 적용 */
	}
	#div3 {
		background-color: blue;
		float:left         /* div3 에 float:left 적용 */
	}
</style>
</head>
<body>

	<!-- div로 감싸기 -->
	<div style="width: 400px; background-color: aquamarine;">
		<div id="div1" class="a">RED div1</div>
		<div id="div2" class="a">GREEN div2</div>
		<div id="div3" class="a">BLUE div3</div>
	</div>


</body>
</html>

9. Css007_FloatClear07.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>container가 좁은 경우 float이동변화</title>

<!-- 컨테이너 폭이 좁아진 경우 경우  -->
<style type="text/css">
	body {
		background-color: antiquewhite;
	}
	div.a {
		width: 100px;
		height: 100px;
		border: 1px solid black;
		font-size: 14px;	
	}
	#div1 {
		background-color: red;
		float:left         /* div1 에 float:left 적용 */
	}
	#div2 {
		background-color: green;
        height: 30px;  		/* height 30 으로 조정 */
		float:left         /* div2 에 float:left 적용 */
	}
	#div3 {
		background-color: blue;
        height: 30px;  		/* height 30 으로 조정 */
		float:left         /* div3 에 float:left 적용 */
	}
	
	/* TODO : yellow div4 추가 */
	#div4 {
		background-color: yellow;
		float: left;
	}
	
</style>
</head>
<body>

	<!-- container 의 width 값을 변화 시켜 보자  -->
	<div style="width:400px; background-color: aquamarine;">
		<div id="div1" class="a">RED div1</div>
		<div id="div2" class="a">GREEN div2</div>
		<div id="div3" class="a">BLUE div3</div>
		<div id="div4" class="a">YELLOW div4</div>
	</div>


</body>
</html>

10. Css007_FloatClear08.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>container 폭이 좁은 경우2</title>
<!-- 컨테이너 폭이 좁은 경우2  -->
<!--  요소들을 포함한 컨테이너의 폭이 좁으면 추가되는 요소는 
다른 요소들 아래쪽에 위치하게 되고 가장 높이 올라갈 수 있는 횡적 위치에 자리를 잡는다 -->

<style type="text/css">
	body {
		background-color: antiquewhite;
	}
	div.a {
		width: 100px;
		height: 100px;
		border: 1px solid black;
		font-size: 14px;	
	}

    #div1 {
        background-color: red;
        float: left;                
    }
    #div2 {
        height: 30px;  /* height 30px */
        background-color: green;
        float: left;                
    }
    #div3 {
        height: 55px;   /* height 55px */
        background-color: blue;
        float: left;                 
    }
    #div4 {
        height: 100px;   /* height 100px */
        background-color: yellow;
        float: left;
    }

</style>
</head>
<body>

	<!-- 컨테이너가 좁아지면? -->
	<!-- TODO : width를 줄여보자 -->
    <div style="width:300px; background-color:aquamarine">
        <div id="div1" class="a">RED div1</div>
        <div id="div2" class="a">GREEN div2</div>
        <div id="div3" class="a">BLUE div3</div>
        <div id="div4" class="a">YELLOW div4</div>
    </div>

</body>
</html>

11. Css007_FloatClear09.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>container 폭이 좁은 경우3</title>
<!-- 컨테이너 폭이 좁은 경우3  -->
<!-- '구조상'으로는 부모 컨테이너 안에 자식 요소들이 위치하는 구조이지만 
    실제 화면에서는 마치 부모 영역 밖에 위치한 상태로 보여지는 경우가 있다 -->

<style type="text/css">
	body {
		background-color: antiquewhite;
	}
	div.a {
		width: 100px;
		height: 100px;
		border: 1px solid black;
		font-size: 14px;	
	}

    #div1 {
        background-color: red;
        float: left;  
        height: 10px;              
    }
    #div2 {
        height: 50px;  /* height 50px */
        background-color: green;
        float: left;                
    }
    #div3 {
        height: 30px;   /* height 30px */
        background-color: blue;
        float: left;                 
    }
    #div4 {
        height: 100px;   /* height 100px */
        background-color: yellow;
        float: left;
    }
    
    #div5 {
    	background-color: black;
    	height: 100px;
    	color: white;
    	float: left;
    }
</style>
</head > 
<body>
    아래처럼 부모 컨테이너 안에 자식 요소들이 위치하는 구조이지만 실제 화면에서는 부모 영역 밖에 위치한 상태로 보여지는 경우가 있다<br> <p>
    <!-- TODO 컨테이너를 줄여보자 -->
    <div style="width:400px; background-color:aquamarine">
	    <div id="div1" class="a"> RED</div>
	    <div id="div2" class="a"> GREEN</div>
	    <div id="div3" class="a"> BLUE</div>
	    <div id="div4" class="a"> YELLOW</div>
	    <div id="div5" class="a"> BLACK</div>
	</div>

</body>
</html>
<!-- '구조상'으로는 부모 컨테이너 안에 자식 요소들이 위치하는 구조이지만 
    실제 화면에서는 마치 부모 영역 밖에 위치한 상태로 보여지는 경우가 있다 -->

12. Css007_FloatClear10.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>clear & overflow</title>
<!-- clear:both  -->
<!--  부모 컨테이너 안에 자식 요소들이 위치하는 구조이지만 
실제 화면에서는 부모 영역 밖에 위치한 상태로 보여지는 경우가 있다 -->

<style type="text/css">
    body {
        background-color: antiquewhite;
    }
    div.a {
        width: 100px;
        height: 100px;
        border: 1px solid black;
        font-size: 14px;	
    }

    #div1 {
        background-color: red;
        float: left;                
    }
    #div2 {
        height: 50px;  /* height 50px */
        background-color: green;
        float: left;                
    }
    #div3 {
        height: 30px;   /* height 30px */
        background-color: blue;
        float: left;                 
    }
    #div4 {
        height: 100px;   /* height 100px */
        background-color: yellow;
        float: left;
    }
    
    #div5 {
        height: 100px;   /* height 100 */
        background-color: black;
        color:white;
        float: left;
    }
</style >
</head > 
<body>
	해결책1: clear:both<br> <p>
	<!-- container 안의 element에 적용  -->
	<!-- 이 방법을 주로 많이 선호함..!! -->
	<div style="width:350px; background-color:lightblue;">
		<div id="div1" class="a"> RED</div>
		<div id="div2" class="a"> GREEN</div>
		<div id="div3" class="a"> BLUE</div>
		<div id="div4" class="a"> YELLOW</div>
		<div id="div5" class="a"> BLACK</div>
		<div style="clear: both;"></div>
	</div>


<br><br>

	해결책2: overflow: auto<br> <p>
	<!-- container 에 적용  -->
	<div style="width:350px; background-color:lightblue; overflow: auto;">  
		<div id="div1" class="a"> RED</div>
		<div id="div2" class="a"> GREEN</div>
		<div id="div3" class="a"> BLUE</div>
		<div id="div4" class="a"> YELLOW</div>
		<div id="div5" class="a"> BLACK</div>
	</div> 
  
</body>
</html>

13. Css008_InlineBlock.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>inline-block</title>
<style>
	body {
		background-color: antiquewhite;
	}
	div.a {
		width: 100px;
		height: 100px;
		border: 1px solid black;
		font-size: 18px;	
		
		/* 아래 각각의 경우를 비교해보자 */
		/*display:block;*/    
	
		/* ↓여기서 주목 할 것은  inline 에는 width, height 값은 적용안된다는 사실*/
		/* display:inline은 width, height 없음, 크기는 content 만큼..!! */
		/*display:inline;*/
	
		
		/* ↓끼리끼리는 inline 처럼 움직이나 block 처럼 width, height 값을 가질수 있다 */
		display:inline-block;
		
	}

	#div1 {
		background-color: red;
	}
	#div2 {
		background-color: green;
	}
	#div3 {
		background-color: blue;
	}

</style>

<!--
	https://www.w3schools.com/css/css_inline-block.asp
	https://www.w3schools.com/css/tryit.asp?filename=trycss_inline-block_nav  : 메뉴구성에 많이 사용됨
	
	CSS display는  inline / block / none / inline-block 가능
	
	그중에서 inline-block 은 
	끼리끼리는 inline 처럼 움직이나, block 처럼 width, height 값을 가질수 있다 
	
	아래의 예제는 마지 div 3개가 float 인 마냥 움직인다.  (위의 css 를 보면 절대로 float 가 붙지 않았다!)
 -->
</head>
<body>
	<div id="div1" class="a">RED div1</div>
	<div id="div2" class="a">GREEN div2</div>
	<div id="div3" class="a">BLUE div3</div>

</body>
</html>

14. Css009_Selector1.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Css Selector</title>

<style>
/* 모든 element */
/*
* {  
    background-color: yellow;
}
*/

/* 모든 div element */
/*
div {
    background-color: yellow;
}
*/

/* 모든 p element */
/*
p {
    background-color: yellow;
}
*/

/* , 는 selector 나열 . 모든 h3 + 모든 div */
/*
h3, div {
    background-color: yellow;
}
*/


/* # 은 id selector 
	id 값이 para1 인 모든 element */
/*
#para1 {
	background-color: yellow;
}
*/

/* id 값이 para4인 span element */
/*
span#para4 {
	background-color: yellow;
}
*/

/* . 은 class selector */
/* class 에 c1 을 갖고 있는 모든 element */
/*
.c1 {
	background-color: yellow;
}
*/

/* class 에 c3 를 갖고 있는 모든 element */
/*
.c3 {
	background-color: yellow;
}
*/

/* class 에 c3 를 갖고 있는 span element */
/*
span.c3 {
	background-color: yellow;
}
*/

/* div 의 아래에(자손들중에) 있는 모든 p */
/*
div p {  
    background-color: yellow;
}
*/

/* div 의 바로 자식(child) 인 모든 p 
	div의 직속 자손만 적용..!! */
/*
div > p {  
    background-color: yellow;
}
*/

/* div 바로 다음 인접 형제 p */
/*
div + p {
    background-color: yellow;
}
*/

/* div 다음에 나오는 모든 형제 p */
/*
div ~ p {
    background-color: yellow;
}
*/ 

/* 연습: [01,06,07] 에 적용 */
/*
body > p {
    background-color: yellow;
}
*/

/* 연습: 다음은 과연 누가 select 될것인가? */
/*
div p ~ p {
    background-color: yellow;
}
*/


/* ★★띄어쓰기 조심★★ */
/* class 에 c1 과 c2 둘다 갖고 있는 element */
/*
.c1.c2 {
	background-color: yellow;
}
*/

/* class c1 을 갖고 있는 element 의 
	자손들 중에 class c2를 갖고 있는 element */
	/*
.c1 .c2 {
	background-color: yellow;
}
*/

/* class 에 c2를 갖고 있는 span element */
/*
span.c2 {
	background-color: yellow;
}
*/

/* span 의 자손중에 class c2를 갖고 있는 element */
span .c2 {
	background-color: yellow;
}
</style>
<style>
/* 예제용 margin */
div > * { margin-left: 30px; }
div > * > * {margin-left: 60px;}
</style>
</head>
<!-- 
	다시 복습)
	CSS 구문은
	
	selector { property:value; ... }
	
	여기서 'selector' 란 '어느 element' 에 스타일을 적용될지는 지정함.
	
	특정 element 를 지정하는 수단으로 CSS selector 가 광범위하게 사용됨
	
	selector 중에서 combinator 라고도 불리우는 다음 4가지 	
	1. descendant selector (space) : 자손
	2. child selector (>) : 자식
	3. adjacent sibling selector (+) : 다음에 등장하는 인접 형제
	4. general sibling selector (~) : 다음에 등장하는 모든 형제
 -->
<body>
	<!-- element 간 계층도를 그려보자 -->
	<h3>[00] CSS Combinator (h3)</h3>
	<p id="para1">[01] Paragraph (id="para1")</p>
	<div>
	[div시작]
	  <p>[02] Paragraph</p>
	  <p id="para2">[03] Paragraph (id="para2")</p>
	  <span class="c1">[04] span (class="c1")
	  	<p class="c2">[05] Paragraph (class="c2" div > span 내부)</p>
	  </span>
	[div끝]
	</div>
	
	<p id="para3">[06] Paragraph (id="para3")</p>
	<p class="c3">[07] Paragraph (class="c3")</p>
	<span class="c1 c2 c3">[08] span (class="c1 c2 c3")</span><br>
	<span id="para4" class="c3">[09] span (id="para4" class="c3")</span><br>

</body>
</html>

15. Css009_Selector2.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Selector2 - Pseudo class</title>
<style>
/* unvisited link */
a:link {
    color: red;
}

/* visited link */
a:visited {
    color: green;
}

/* mouse over link */
a:hover {
    color: hotpink;
}

/* selected link */
a:active {
    color: blue;
}

/* :hover 마우스가 올라간 상태 */
div#demo1 {
    background-color: green;
    color: white;
    padding: 25px;
    text-align: center;
}
div#demo1:hover {
    background-color: blue;
}

/* 마우스가 올라갔을때만 보여지게 하는 방법 */
p#demo2 {
    /* 기본적으로 안보이게 하다가 */
    display: none;
    background-color: yellow;
    color: black;
    padding: 20px;
}

div:hover p#demo2 {
    /* 마우스 올라가면 보이게 하기 */
    display: block;
}

/* :first-child */
div#demo3 p:first-child {
    color: blue;
} 

/* :nth-child() */
div#demo4 p:nth-child(2) {
    color: red;
} 

/* :focus 입력 상태*/
div#demo5 input:focus {
    background-color: yellow;
}

</style>

</head>
<!--
CSS selector 에서 pseudo-class 란?
	: element 의 특정 '상태(state)'
	: ex) 마우스가 올라간 상태, 링크 방문 여부, 포커스 상태...
	
CSS selector 에서 pseudo-class 구문 
	selector:pseudo-class {
	    property:value;
	}

	참고 레퍼런스
	https://www.w3schools.com/css/css_pseudo_classes.asp

 -->
<body>
<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>

<hr>
<div id="demo1">Mouse Over Me</div>
<br>

<hr>
<div>마우스를 올려보세요
  <p id="demo2">짜잔~</p>
</div>

<hr>
<div id="demo3">
	<p>paragraph1</p>
	<p>paragraph2</p>
	<p>paragraph3</p>
	<div>
		<p>paragraph4</p>
		<p>paragraph5</p>
	</div>
</div>


<hr>
<div id="demo4">
	<p>paragraph1</p>
	<p>paragraph2</p>
	<p>paragraph3</p>
	<div>
		<p>paragraph4</p>
		<p>paragraph5</p>
	</div>
</div>


<hr>
<div id="demo5">
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
</div>


</body>
</html>

16. Css009_Selector3.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Selector3 - Pseudo element</title>
<style>
/* ::first-line 첫 라인 */
div#demo1 p::first-line {
    color: #ff0000;
    font-variant: small-caps;
}

/* ::first-letter 첫 글자 */
div#demo2 p::first-letter {
    color: #ff0000;
    font-size: xx-large;   /* https://www.w3schools.com/cssref/playit.asp?filename=playcss_font-size&preval=x-large 참조 */ 
}

/* ::before ~앞에 삽입 */
div#demo3 h1::before {
    content: url(https://www.w3schools.com/css/smiley.gif);  /* content 는 pseudo-element selector 와만 사용 가능*/
}

/* ::selection  선택 영역 */
div#demo4 ::selection {
 	color: red;
    background: yellow;
}
</style>
</head>
<!-- 
CSS selector 에서 pseudo-element 란
element 의 '특정 부분' 에 적용 되는 것.

구문
selector::pseudo-element {
    property:value;
}

참조 : https://www.w3schools.com/css/css_pseudo_elements.asp
 -->
<body>

<div id="demo1">
<p>You can use the ::first-line pseudo-element to add a special effect to the first line of a text. Some more text. And even more, and more, and more, and more, and more, and more, and more, and more, and more, and more, and more, and more.</p>
</div>

<hr>
<div id="demo2">
<p>You can use the ::first-line pseudo-element to add a special effect to the first line of a text. Some more text. And even more, and more, and more, and more, and more, and more, and more, and more, and more, and more, and more, and more.</p>
</div>

<hr>
<div id="demo3">
<h1>This is a heading</h1>
<p>The ::before pseudo-element inserts content before the content of an element.</p>
</div>

<hr>
<div id="demo4">
<p><strong>Note:</strong> ::selection is not supported in Internet Explorer 8 and earlier versions.</p>
<p><strong>Note:</strong> Firefox supports an alternative, the ::-moz-selection property.</p>
</div>


</body>
</html>

17. Css009_Selector4.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Selector4 - Attribute Selector</title>
<style>
span {
	display:inline-block;
	height:30px;
	border: 1px solid lightgrey;
}

/*[attribute] 특정 attribute*/
div#demo1 [class] {
	background-color:yellow;
}
/*[attribute="value"] attribute="value"*/
div#demo2 [class="my"] {
	background-color:yellow;
}	
/*[attribute~="value"] value 포함 & 공백으로 구분*/
div#demo3 [class~="my"] {
	background-color:yellow;
}	
/*[attribute*="value"] value 포함 */
div#demo4 [class*="my"] {
	background-color:yellow;
}	

/*[attribute|="value"] value 혹은 value- 로 시작하는 단독 단어*/
div#demo5 [class|="my"] {
	background-color:yellow;
}	
	
/*[attribute^="value"] value 로 시작*/
div#demo6 [class^="my"] {
	background-color:yellow;
}	

/*[attribute$="value"] value 로 끝*/
div#demo7 [class$="my"] {
	background-color:yellow;
}	

</style>
</head>

<!-- 
Attribute Selector

참조 : https://www.w3schools.com/css/css_attribute_selectors.asp
 -->

<body>
<h3>demo1 [class]</h3>
<div id="demo1">
<span>1</span>
<span class="my">2 my</span>
<span class="my car">3 my car</span>
<span class="mycar">4 mycar</span>
<span class="carmy">5 carmy</span>
<span class="car my">6 car my</span>
<span class="my-car">7 my-car</span>
</div>

<hr>
<h3>demo2 [class="my"]</h3>
<div id="demo2">
<span>1</span>
<span class="my">2 my</span>
<span class="my car">3 my car</span>
<span class="mycar">4 mycar</span>
<span class="carmy">5 carmy</span>
<span class="car my">6 car my</span>
<span class="my-car">7 my-car</span>
</div>
	
<hr>
<h3>demo3 [class~="my"]</h3>
<div id="demo3">
<span>1</span>
<span class="my">2 my</span>
<span class="my car">3 my car</span>
<span class="mycar">4 mycar</span>
<span class="carmy">5 carmy</span>
<span class="car my">6 car my</span>
<span class="my-car">7 my-car</span>
</div>

<hr>
<h3>demo4 [class*="my"]</h3>
<div id="demo4">
<span>1</span>
<span class="my">2 my</span>
<span class="my car">3 my car</span>
<span class="mycar">4 mycar</span>
<span class="carmy">5 carmy</span>
<span class="car my">6 car my</span>
<span class="my-car">7 my-car</span>
</div>

<hr>
<h3>demo5 [class|="my"]</h3>
<div id="demo5">
<span>1</span>
<span class="my">2 my</span>
<span class="my car">3 my car</span>
<span class="mycar">4 mycar</span>
<span class="carmy">5 carmy</span>
<span class="car my">6 car my</span>
<span class="my-car">7 my-car</span>
</div>
	
<hr>
<h3>demo6 [class^="my"]</h3>
<div id="demo6">
<span>1</span>
<span class="my">2 my</span>
<span class="my car">3 my car</span>
<span class="mycar">4 mycar</span>
<span class="carmy">5 carmy</span>
<span class="car my">6 car my</span>
<span class="my-car">7 my-car</span>
</div>

<hr>
<h3>demo7 [class$="my"]</h3>
<div id="demo7">
<span>1</span>
<span class="my">2 my</span>
<span class="my car">3 my car</span>
<span class="mycar">4 mycar</span>
<span class="carmy">5 carmy</span>
<span class="car my">6 car my</span>
<span class="my-car">7 my-car</span>
</div>


</body>
</html>

18. Css012_Animation1.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Animation</title>
<!-- 
	CSS 애니메이션 관련 참조
	transition : https://www.w3schools.com/css/css3_transitions.asp
	2D transform : https://www.w3schools.com/css/css3_2dtransforms.asp
	3D transform : https://www.w3schools.com/css/css3_3dtransforms.asp
	animations : https://www.w3schools.com/css/css3_animations.asp
 -->
<style> 
div {
    width: 100px;
    height: 100px;
}

div#box1 {
    background: red;
    
	/*transition: width 2s;*/ /* width 값 변화발생시 2초에 걸쳐 진행 */
	transition: width 2s, height 1s; /* 복수 property 지정 가능 */
}

div#box1:hover {
	width: 300px;
	height: 200px;
}

div#box2 {
	background-color: blue;
	
	transition: width 2s, height 2s, background-color 2s, transform 2s;
}

div#box2:hover{
	width: 200px;
	height: 200px;
	background-color: yellow;
	transform: rotate(100deg);
}

/*  transform : 관련 값
	translate()  <-- 위치 이동
	rotate()  <-- 회전값
	scale()  <-- 크기
	skewX()  <-- x축 찌그러트리기
	skewY()  <-- Y축 찌그러트리기
	matrix()  <-- 좌표변환값.
*/

div#box3{
	background-color: green;
	transition: margin 2s;
}

div#box3:hover{
	margin-left: 100px;
}

</style>

</head>
<body>
<h1>The transition Property</h1>

<p>#box1 마우스를 올려보세요</p>
<div id="box1"></div>

<hr>

<p>#box2 마우스를 올려보세요</p>
<div id="box2"></div>

<hr>

<p>#box3 마우스를 올려보세요</p>
<div id="box3"></div>


</body>
</html>

19. Css013_Animation2.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>KeyFrame Animation</title>
<style> 
div {
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: 3;
}

@keyframes example {
	0% {background-color:red; left:0px; top:0px}
	25% {background-color:yellow; left:200px; top:0px;}
	50% {background-color:blue; left:200px; top:200px;}
	75% {background-color:green; left:0px; top:200px;}
	100% {background-color:red; left:0px; top:0px;}
}

</style>
</head>
<body>
<h1>Key Frame Animation</h1>

<p><b>Note:</b> IE9 나 이전 버젼에서는 작동안합니다.</p>

<div></div>


</body>
</html>

20. 오라클 백업

: 방학동안 학원 컴퓨터 백업할 예정이기 때문에 오라클 백업 필요

1) 명령 프롬프트 관리자 모드로 실행

2) 일부 계정 백업 : exp userid=아이디/비밀번호 file=저장할 장소\설정할 파일명.dump

3) 설정한 경로로 확인해보면 파일이 만들어져 있음(만들 파일명도 내가 설정했던 대로 설정됨)

21. funweb 홈페이지 만들기 - 헤더 구성

** 디렉토리 구성

** index.html

<!-- [1] 디렉토리 구성 

웹페이지를 담을 디렉토리 구성
기본적으로는 메인메뉴에 맞는 디렉토리로 구성
디렉토리 이름에는 공백,특수문자 배제!
 /funWeb/		-- 루트 디렉토리
 /images/		-- 메인이미지 디렉토리(이미지 관련하여 강사님이 제공)
 /company/		-- 회사소개 페이지 디렉토리
 /solutions/	-- 솔루션안내 페이지 디렉토리
 /center/		-- 고객센터 페이지 디렉토리
 /contact/		-- 연락방법 페이지 디렉토리
 /CSS/			-- CSS 파일 디렉토리
 /script/		-- 자바 스크립트, 관련 내용 디렉토리

-->

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>FunWeb</title>

<!-- [5] CSS 파일 생성, body 지정 -->
<link href="css/default.css" rel="stylesheet" type="text/css">

</head>
<body>

	<!-- [6] CSS 이용, 웹페이지 중앙배치 #wrap -->
	<div id="wrap">

		<!-- [2] html5 스타일로 구조 잡기 -->
		<header>
			<!-- 헤더 들어가는 곳 -->
				
			<!-- [11] login | join 추가 -->
			<div id="login">
				<a href="#">login</a> | <a href="#">Join</a>
			</div>
			
			
			<!-- 위 아래 Float의 간섭을 방지하기 <div>를 삽입..!! -->			
			<div class="clear"> </div>
			
			<!-- [3] header구성-로고 삽입 -->
			<div id="logo">			
				<img src="images/logo.gif" width="265" height="62" alt="FunWeb">
			</div>
			
			<!-- [10] <nav><ul><li><a> 스타일 지정 -->
			<nav id="top_menu">
				<!-- 네비게이션 들어가는 곳 -->
				<!-- [9] 리스트 메뉴 구조 만들기  -->
				<ul>
					<!-- "#" 더미 링크 : 현재 페이지로 감, 개발단계에서 페이지 만들기 전에 더미 링크로 작업 -->
					<li><a href="#">HOME</a></li>
					<li><a href="#">COMPANY</a></li>
					<li><a href="#">SOLUTIONS</a></li>
					<li><a href="#">CUSTOMER CENTER</a></li>
					<li><a href="#">CONTACT US</a></li>
					
				</ul>
			
			</nav>
			
		</header>
		
		<!-- [4] 메인이미지 들어갈 div 만들기 -->
		<div id="main_img">
		</div>
		
		<article>
			<!-- 메인 콘텐츠 들어가는 곳 -->
		</article>
		
		<footer>
			<!-- 푸터 들어가는 곳 -->
		</footer>
	
	</div>

</body>
</html>

** default.css

@charset "UTF-8";
/* [5] CSS 파일 생성, body 지정 */
body {
	background-color: #898989;
	margin: 0;
	padding: 0;
	font-size: 0.75em;
	line-height: 1.2em;
	color: #333;
}

/* [6] 웹페이지 중앙배치 #wrap */
#wrap {
	width: 971px;
	text-align: left;
	margin: 0px;
	margin-right: auto;
	margin-left: auto;
	
	/* [8] 그림자 백그라운드 적용 */
	background-image: url(../images/shadow.png);
	background-repeat: repeat-y;
	min-height: 780px;
	
}

/* [7] 로고 스타일, header 스타일 */
#logo {
	float: left;
	width: 250px;
	
	/* 위부터 시작하여 시계 방향으로 돌아감 */
	margin: 40px 0 0 40px;
}

header {
	height: 151px;
	margin: 0;
	padding: 0;
}

/* [10] <nav><ul><li><a> 스타일 지정 */
nav#top_menu {
	width: 600px;
	float: right;
	margin: 50px 20px 0 0;
}

nav#top_menu ul {
	list-style: none;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 13px;
	font-weight: 100;
	color: #333;
}

nav#top_menu ul li {
	float: left;
	/* 첫번째 숫자 : 위아래 여백, 두번째 숫자 : 좌우 여백 */
	margin: 0 5px;
	
}

nav#top_menu a {
	text-decoration: none;
	color: #333;
	
	/* a 태그 display 기본 설정은 inline
	      넓이 지정하고 싶으면 display 설정을 block으로 변경 후 
	   width, height 설정 가능 */
	display: block;
	height: 20px;
	padding: 10px;
	
}

nav#top_menu a:hover {
	background-image: url(../images/blue.gif);
	background-repeat: repeat-x;
	background-position: bottom;
}

/* [11] login | join 추가 */
#login {
	float: right;
	margin: 20px 64px 0 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	
	/* 자간 간격, 글자간 간격*/
	word-spacing: 5px;
}

#login a {
	text-decoration: none;
	color: #333;	
}

#login a:hover {
	color: #F90;
}

.clear {
	/* 양쪽으로 float 허용 안하기 위해 both로 설정 */
	clear: both;
	
}

22. funweb 홈페이지 만들기 - 메인 이미지 레이아웃

** index.html

<!-- [1] 디렉토리 구성 

웹페이지를 담을 디렉토리 구성
기본적으로는 메인메뉴에 맞는 디렉토리로 구성
디렉토리 이름에는 공백,특수문자 배제!
 /funWeb/		-- 루트 디렉토리
 /images/		-- 메인이미지 디렉토리(이미지 관련하여 강사님이 제공)
 /company/		-- 회사소개 페이지 디렉토리
 /solutions/	-- 솔루션안내 페이지 디렉토리
 /center/		-- 고객센터 페이지 디렉토리
 /contact/		-- 연락방법 페이지 디렉토리
 /CSS/			-- CSS 파일 디렉토리
 /script/		-- 자바 스크립트, 관련 내용 디렉토리

-->

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>FunWeb</title>

<!-- [5] CSS 파일 생성, body 지정 -->
<link href="css/default.css" rel="stylesheet" type="text/css">

</head>
<body>

	<!-- [6] CSS 이용, 웹페이지 중앙배치 #wrap -->
	<div id="wrap">

		<!-- [2] html5 스타일로 구조 잡기 -->
		<header>
			<!-- 헤더 들어가는 곳 -->
				
			<!-- [11] login | join 추가 -->
			<div id="login">
				<a href="#">login</a> | <a href="#">Join</a>
			</div>
			
			
			<!-- 위 아래 Float의 간섭을 방지하기 <div>를 삽입..!! -->			
			<div class="clear"> </div>
			
			<!-- [3] header구성-로고 삽입 -->
			<div id="logo">			
				<img src="images/logo.gif" width="265" height="62" alt="FunWeb">
			</div>
			
			<!-- [10] <nav><ul><li><a> 스타일 지정 -->
			<nav id="top_menu">
				<!-- 네비게이션 들어가는 곳 -->
				<!-- [9] 리스트 메뉴 구조 만들기  -->
				<ul>
					<!-- "#" 더미 링크 : 현재 페이지로 감, 개발단계에서 페이지 만들기 전에 더미 링크로 작업 -->
					<li><a href="#">HOME</a></li>
					<li><a href="#">COMPANY</a></li>
					<li><a href="#">SOLUTIONS</a></li>
					<li><a href="#">CUSTOMER CENTER</a></li>
					<li><a href="#">CONTACT US</a></li>
					
				</ul>
			
			</nav>
			
		</header>
		
		<!-- [12-1] 위 아래 Float의 간섭을 방지하기 위해 <div> 삽입 -->
		<div class="clear"></div>
		
		<!-- [4] 메인이미지 들어갈 div 만들기 -->
		<div id="main_img">
			<!-- [12-2] 메인이미지에 사용할 이미지 올리기 -->
			<img src="images/main_img.jpg" width="971" height="282">
		</div>
		
		
		<!-- [13-1] 본문(article) 작성 -->
		<article id="front">
			<!-- 메인 콘텐츠 들어가는 곳 -->
			<div id="solution">

				<div id="hosting">
					<h3>Web Hosting Solution</h3>
					<p>
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nunc urna, 
					fringilla non fringilla ut, lacinia eu urna. Aliquam nec urna at nisi pulvinar eleifend. 
					Duis commodo luctus leo vitae feugiat. Curabitur ac sodales ante. Ut vel est
					</p>
				</div>
				<div id="security">
					<h3>Web Security Solution</h3>
					<p>
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nunc urna, 
					fringilla non fringilla ut, lacinia eu urna. Aliquam nec urna at nisi pulvinar eleifend. 
					Duis commodo luctus leo vitae feugiat. Curabitur ac sodales ante. Ut vel est
					</p>
				</div>
				<div id="payment">
					<h3>Web Payment Solution</h3>
					<p>
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nunc urna, 
					fringilla non fringilla ut, lacinia eu urna. Aliquam nec urna at nisi pulvinar eleifend. 
					Duis commodo luctus leo vitae feugiat. Curabitur ac sodales ante. Ut vel est
					</p>
				</div>
				
			</div>
			
			
			<!-- [16-1] 위 아래 Float의 간섭을 방지하기 위해 <div> 삽입 -->
			<div class="clear"></div>
		
			<!-- [16-2] 하단 News 레이아웃 잡기 -->
			<div id="sec_news">
				<!-- [17-1] Security, News 디자인-class명 설정 -->
				<h3><span class="orange">Security</span> News</h3>
				<dl>
					<dt><a href="#">Vivamus id ligula velit, quis euismod nisi</a></dt>
					<dd><a href="#">Proin quis ante eget arcu tempus tempus porta vel ipsum. 
						Quisque vitae nulla vel lorem cursus dignissim. Sed sit amet metus tortor. 
						In hac habitasse platea dictumst. Aliquam erat volutpat. Aliquam massa risus, </a></dd>
					<dt><a href="#">Vivamus id ligula velit, quis euismod nisi</a></dt>
					<dd><a href="#">Proin quis ante eget arcu tempus tempus porta vel ipsum. 
						Quisque vitae nulla vel lorem cursus dignissim. Sed sit amet metus tortor. 
						In hac habitasse platea dictumst. Aliquam erat volutpat. Aliquam massa risus, </a></dd>
				</dl>
			</div>
			
			<div id="news_notice">
				<!-- [17-1] Security, News 디자인-class명 설정 -->
				<h3 class="brown">News &amp; Notice</h3>
				<table>
				  <tr>
				  	<!-- [19-1] News & Notice <table>-class명 설정 -->
					<td class="contxt"><a href="#">Vivamus id ligula velit, quis euismod nisi </a></td>
					<td><a href="#">2011.07.31</a></th>
				  </tr>
				  <tr>
				  	<!-- [19-1] News & Notice <table>-class명 설정 -->
					<td class="contxt">Fusce eros augue, tempus nec interdum eu</td>
					<td>2011.06.11</td>
				  </tr>
				  <tr>
				  	<!-- [19-1] News & Notice <table>-class명 설정 -->
					<td class="contxt">Donec eget tincidunt purus</td>
					<td>2011.05.12</td>
				  </tr>
				  <tr>
				  	<!-- [19-1] News & Notice <table>-class명 설정 -->
					<td class="contxt">Nam facilisis mauris in dui suscipit volutpat </td>
					<td>2011.05.08</td>
				  </tr>
				  <tr>
				  	<!-- [19-1] News & Notice <table>-class명 설정 -->
					<td class="contxt">Aenean in dui mollis leo ullamcorper fringilla </td>
					<td>2011.04.25</td>
				  </tr>
				</table>  
			</div>
		</article>
		
		
		<!-- [20-1] 위 아래 Float의 간섭을 방지하기 위해 <div> 삽입 -->
		<div class="clear"></div>
		
		<!-- [20-2] Footer  <footer> -->
		<footer>
			<!-- 푸터 들어가는 곳 -->
			<hr>
			<div id="copy">
				All contents Copyright 2011 FunWeb Inc. all rights reserved<br>
				Contact mail : funweb@funwebbiz.com Tel: +82 64 123 4315 Fax +82 64 123 4321
			</div>
			
			<div id="social">
				<img src="images/facebook.gif" width="33" height="33" alt="Facebook">
				<img src="images/twitter.gif" width="33" height="34" alt="Twitter">
			</div>
		</footer>
	
	</div>

</body>
</html>

** default.css

@charset "UTF-8";
/* [5] CSS 파일 생성, body 지정 */
body {
	background-color: #898989;
	margin: 0;
	padding: 0;
	font-size: 0.75em;
	line-height: 1.2em;
	color: #333;
}


/* [6] 웹페이지 중앙배치 #wrap */
#wrap {
	width: 971px;
	text-align: left;
	margin: 0px;
	margin-right: auto;
	margin-left: auto;
	
	
	/* [8] 그림자 백그라운드 적용 */
	background-image: url(../images/shadow.png);
	background-repeat: repeat-y;
	min-height: 780px;
}


/* [7] 로고 스타일, header 스타일 */
#logo {
	float: left;
	width: 250px;
	
	/* 위부터 시작하여 시계 방향으로 돌아감 */
	margin: 40px 0 0 40px;
}
header {
	height: 151px;
	margin: 0;
	padding: 0;
}


/* [10] <nav><ul><li><a> 스타일 지정 */
nav#top_menu {
	width: 600px;
	float: right;
	margin: 50px 20px 0 0;
}
nav#top_menu ul {
	list-style: none;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 13px;
	font-weight: 100;
	color: #333;
}
nav#top_menu ul li {
	float: left;
	/* 첫번째 숫자 : 위아래 여백, 두번째 숫자 : 좌우 여백 */
	margin: 0 5px;
}
nav#top_menu a {
	text-decoration: none;
	color: #333;
	
	/* a 태그 display 기본 설정은 inline
	      넓이 지정하고 싶으면 display 설정을 block으로 변경 후 
	   width, height 설정 가능 */
	display: block;
	height: 20px;
	padding: 10px;
}
nav#top_menu a:hover {
	background-image: url(../images/blue.gif);
	background-repeat: repeat-x;
	background-position: bottom;
}


/* [11] login | join 추가 */
#login {
	float: right;
	margin: 20px 64px 0 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	
	/* 자간 간격, 글자간 간격*/
	word-spacing: 5px;
}
#login a {
	text-decoration: none;
	color: #333;	
}
#login a:hover {
	color: #F90;
}
.clear {
	/* 양쪽으로 float 허용 안하기 위해 both로 설정 */
	clear: both;
}


/* [12-3] 메인이미지 원하는 모양으로 꾸며서 만들기 */
#main_img {
	width: 971px;
	height: 308px;
	background-image: url(../images/img_back.png);
	
	/* background-repeat : 백그라운드 이미지 반복 여부를 설정 */
	background-repeat: no-repeat;
	
	background-position: center top;
} 
#main_img img {
	margin: 9px 0 0 0;
}


/* [13-2] 본문(article) CSS 작성 */
article#front {
	margin: 5px 0 5px 0;
}
#solution {
	border: 1px solid #ffffff;
	width: 910px;
	min-height: 150px;
	background-color: #EDEDED;
	padding: 10px;
	
	/* border-radius : 테두리를 둥글게 만드는 속성 */
	border-radius: 10px;
	
	margin: 0 0 0 20px;
}
#hosting, #security, #payment {
	width: 30%;
	float: left;
	padding: 10px;
}


/* [14] #solution 내 <h3>,<p> 스타일 */
@font-face {
	/* @font-face : 기본글꼴 외의 다른 글꼴을 지정할 경우
	     http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp */
	font-family: "seo";
	src:url(../images/segoeui.eot);
}
#hosting h3, #security h3, #payment h3 {
	font-family: seo;
	font-size: 14px;
	font-weight: 600;
	color: #333;
	margin: 0 0 10px 80px;
}
#hosting p, #security p, #payment p {
	font-family: seo;
	font-size: 12px;
	color: #333;
	margin: 0 0 0 80px;
}


/* [15] 각 solution 에 아이콘 배치 */
#hosting {
	background-image: url(../images/icon1.png);
	background-repeat: no-repeat;
	background-position: left 15px;
	border-left: 1px solid #ccc;
}
#security {
	background-image: url(../images/icon2.png);
	
	/* background-repeat : 백그라운드 이미지 반복 여부를 설정 */
	background-repeat: no-repeat;
	
	background-position: left 15px;
	border-left: 1px solid #ccc;
}
#payment {
	background-image: url(../images/icon3.png);
	background-repeat: no-repeat;
	background-position: left 15px;
	border-left: 1px solid #ccc;
}


/* [16-3] 하단 News 레이아웃 잡기 */
#sec_news, #news_notice {
	float: left;
	width: 420px;
	margin: 15px 0 0 20px;
}


/* [17-2] Security, News 디자인 */
#sec_news h3, #news_notice h3 {
	font-family: seo;
	font-size: 14px;
	font-style: italic;
	font-weight: normal; 
	width: 420px;
	height: 24px;
	background-image: url(../images/h3_back.jpg);
	background-repeat: no-repeat;
	padding: 5px 0 0 22px;
}
#sec_news .orange {
	color: #F26522;
}
#news_notice .brown {
	color: #827B00;
}


/* [18] Security News <dl> */
#sec_news dt {
	font-family: "Times New Roman", Times, serif;
	font-size: 16px;
	
	/* 첫번째 숫자 : 위아래 여백, 두번째 숫자 : 좌우 여백 */
	margin: 5px 0;
	
	color: F00;
}
#sec_news dt a {
	color: #F00;
	text-decoration: none;
}
#sec_news dt a:hover {
	color: #F90;
	
	/* underline : 글자 아래에 선 만들기 */
	text-decoration: underline;
}
#sec_news dd {
	margin-left: 0;
	color: #333;
}
#sec_news dd a {
	color: #333;
	text-decoration: none;
}
#sec_news dd a:hover {
	color: #F90;
	text-decoration: underline;
}


/* [19-2] News & Notice <table> */
#news_notice {
	padding-left: 30px;
}
#news_notice table {
	width: 400px;
	border-collapse: collapse;
	text-align: center;
}
#news_notice td {
	padding: 6px 4px;
	border-bottom: 1px dotted #999;
	
}
#news_notice td.contxt {
	background-image: url(../images/tr_back.gif);
	background-repeat: no-repeat;
	background-position: left center;
	padding-left: 15px;
	text-align: left;
	color: #333;
}
#news_notice a {
	color: #333;
	text-decoration: none;
}
#news_notice a:hover {
	text-decoration: none;
	color: #F90;
}


/* [21] Footer 스타일 입히기 */
footer {
	margin: 50px 0 0 0;
	height: 80px;
	background-image: url(../images/under_logo.gif);
	background-repeat: no-repeat;
	background-position: 40px center;
}
footer hr {
	width: 900px;
	margin: 0 0 0 15px;
}
footer #copy {
	font-family: seo;
	width: 450px;
	margin: 20px 0 0 190px;
	float: left;
}
footer #social {
	width: 130px;
	margin: 20px 20px 0 0;
	float: right;
}
footer #social img {
	margin: 1px;
}

** 최종 완성 결과창

'웹_프론트_백엔드 > JAVA프레임윅기반_풀스택' 카테고리의 다른 글

2020.05.06 (0)	2020.05.06
[2020.04.21] 구글 스토어 앱 출시 완료! (0)	2020.05.02
2020.04.28 (0)	2020.04.28
2020.04.27 (0)	2020.04.27
2020.04.24 (0)	2020.04.24

현재글2020.04.29

shine의 개발 노트

게임 서버 개발자, 샤인의 IT 공부 노트

shine의 개발 노트

2020.04.29

'웹_프론트_백엔드 > JAVA프레임윅기반_풀스택' 카테고리의 다른 글

'웹_프론트_백엔드/JAVA프레임윅기반_풀스택'의 다른글

티스토리툴바

2020.04.29

'웹_프론트_백엔드 > JAVA프레임윅기반_풀스택' 카테고리의 다른 글

'웹_프론트_백엔드/JAVA프레임윅기반_풀스택'의 다른글

관련글

티스토리툴바