1학기 기말 대비 웹설계 정리

June 16, 2019

	/* forExample.css */
	.example {font-size: 13px; background-color: aliceblue}

view raw forExample.css hosted with ❤ by GitHub

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset=utf-8>
	<title>1학기 기말 정리</title>
	<style>
	@import url(test2.css);
	@import "forExample.css";
	body {background-color: aliceblue}
	span {background-color: aqua}
	.box {
	background-color: cornsilk;
	border-style: solid;
	border-color: darkmagenta;

	margin: 50px;
	border-width: 30px;
	padding: 20px;}
	div.applyingBox {
	margin: 50px;
	background-color: darksalmon;
	padding: 10px;
	border: 4px;
	border-left-color: cornflowerblue;
	border-bottom-color: darkcyan;
	border-right-color: aquamarine;
	border-top-color: blueviolet;
	border-style: double;
	border-radius: 0px 40px 0px 40px
	}
	.block {
	display: block;
	width: 100px;
	height: 60px;
	}
	.inline{
	display: inline;
	}
	.inline-block {
	display: inline-block;
	border: 2px dotted orangered;
	background: powderblue;
	margin: 10px;
	width: 60px; height: 80px;
	}

	div.relative {
	display: inline-block;
	height: 50px;
	width: 50px;
	border: 1px solid lightgray;
	text-align: center;
	color: white;
	background: red;
	}

	#down:hover {
	position: relative;
	left: 20px;
	top: 20px;
	background: green;
	}
	#up:hover {
	position: relative;
	right: 20px;
	bottom: 20px;
	background: green;
	}
	ul #withCss {
	background-color: beige;
	padding: 10px 10px 10px 50px;
	list-style-position: inside;
	list-style-type: georgian;
	}
	ul #withCss li {
	background-color: darksalmon;
	margin-bottom: 5px;
	}
	.tableWithCss table {
	border-collapse: collapse;
	}
	.tableWithCss td, th {
	border: 1px dotted green;
	height: 20px;
	width: 100px;
	text-align: center;
	}
	.tableWithCss thead th {
	height: 40px;
	width: 100px;
	}
	.tableWithCss tfoot th {
	height: 30px;
	width: 100px;
	}
	.tableWithCss thead {
	background-color: darkseagreen;
	color: darkorange;
	}
	.tableWithCss td, tfoot th{
	border-bottom: 1px solid seagreen;
	}
	.tableWithCss tbody tr:nth-child(even) {
	background: antiquewhite;
	}
	.tableWithCss tbody td:hover {
	background: pink;
	}
	input[type=text] {
	border: 2px solid skyblue;
	border-radius: 5px;
	color: darkblue;
	}
	input[type=text]:hover {
	background: beige;
	}
	input[type=text]:focus {
	font-size: 120%;
	}
	@keyframes textColorAnimation {
	0% {color: azure;}
	33% {color: beige;}
	66% {color: bisque;}
	100% {color: azure;}
	}
	#animation {
	animation-name: textColorAnimation;
	animation-duration: 5s;
	animation-iteration-count: infinite;
	list-style-position: inside;
	}
	@keyframes bomb {
	from {font-size: 500%;}
	to {font-size: 100%;}
	}
	#bang {
	animation-name: bomb;
	animation-duration: 3s;
	animation-iteration-count: 10;
	}
	#transition {
	transition: font-size 5s;
	}
	#transition:hover {
	font-size: 500%;
	}
	.typeOfVary thead, tbody{
	background: aliceblue;
	border: none;
	}
	.typeOfVary th, td{
	background: aliceblue;
	border: solid 1px;
	width: 300px;
	}
	</style>
	<link type="text/css" rel="stylesheet" href="test.css">
	<script>
	function over(obj) {
	obj.src="orangemushroom.jpg";
	}
	function out(obj) {
	obj.src="다운로드.jpg";
	}
	function adder(a, b) {
	var sum = 0; //sum 초기화
	sum = a + b;
	return sum;
	}
	function gugudan(n) {
	sum = 0; //sum 초기화
	if(isNaN(n) \|\| n < 1 \|\| n > 9) {
	alert("잘못 입력하셨습니다.");
	return;
	}
	for (i = 1; i <= 9; i++)
	{
	document.write(n + "x" + i + "=" + n * i + "<br>");
	}
	}
	</script>
	</head>
	<body>
	<ul>
	<h3><li>CSS</li></h3>
	<ul>
	<li style="color: crimson; margin: 10px">인라인 스타일로 CSS 적용하기(margin: 10px)</li>
	<li><span>임베디드 스타일</span>로 CSS 적용하기</li>
	<li>외부 스타일 시트 파일 불러오기</li>
	<ul>
	<li><span class="cssLink"><link></span> 태그를 이용하여 CSS3 스타일 시트 파일 불러오기</li>
	<li><span id="cssImport">@import url(파일명)</span>로 CSS3 파일 불러오기</li>
	</ul>
	<li style="color: darkblue">부모 태그를 상속받는 <em style="background-color: antiquewhite">자식 <em> 태그</em></li>
	<li>셀렉터 종류</li>
	<ul>
	<li>태그 이름 셀렉터 <span class="example">ex) body, span {}</span></li>
	<li>class 셀렉터 <span class="example">ex) .cssLink {}</span></li>
	<li>id 셀렉터 <span class="example">ex) #cssImport {}</span></li>
	</ul>
	<li>셀렉터 조합하기</li>
	<ul>
	<li>부모셀렉터 > 자식 셀렉터 <span class="example">ex) div > strong : <div>의 직계 자식인 <strong>에 적용</span></li>
	<li>조상 셀렉터 자손 셀렉터 <span class="example">ex) ul strong : <ul>의 자손 <strong>에 적용</span></li>
	</ul>
	<li>전체 셀렉터: *</li>
	<li>속성 셀렉터: 특정 속성이 일치하는 태그에만 스타일 적용 <span class="example"><br>
	ex) input[type=text] {color:red;} : type 속성값이 "text인 <input type="text>에 적용</span></li>
	<li>가상 클래스 셀렉터</li>
	<ul>
	<li>:firstletter, :hover 등등</li>
	</ul>
	<li>CSS3의 박스모델: 각 태그요소를 하나의 박스로 다룸</li>
	<ul>
	<li>안쪽부터 순서대로 콘텐츠 영역(아쿠아) - padding(콘실크) - border(보라색) - margin
	<div class="box"><span>콘텐츠 영역</span></div></li>
	<li>활용
	<div class="applyingBox"><img src="%EB%8B%A4%EC%9A%B4%EB%A1%9C%EB%93%9C%20(1).jpg" alt="다운받은 사진"></div></li>
	</ul>
	<li>이미지 테두리 만들기 {border-image: url("이미지 파일 이름") 이미지 자를 픽셀 크기 round/repeat/stretch;}</li>
	<li>배경 다루기</li>
	<li>텍스트 그림자, text-shadow</li>
	<li>박스 그림자, box-shadow</li>
	<li>마우스 커서 제어, cursor : value(auto, crosshair 등등)</li>
	<li>display</li>
	<ul>
	<li>display:block<br>
	<span class="block">block span</span>과
	<span class="block">block span</span>박스</li>
	<li>display:inline<br>
	<span class="inline">inline</span>
	<span class="inline">inline</span>
	<span class="inline">inline</span>
	</li>
	<li>display:inline-block<br>
	<span class="inline-block">inline-block</span>
	<span class="inline-block">inline-block</span>
	<span class="inline-block">inline-block</span>
	</li>
	</ul>
	<li>position</li>
	<ul>
	<li>position:relative</li>
	<li>position:absolute</li>
	<li>position:fixed</li>
	</ul>
	<li>float:right</li>
	<li>z-index로 카드쌓기 <span class="example">ex) z-index: -3, z-index: 2인 카드가 두 장 있으면 z-index: 2인 카드가 위에 출력</span></li>
	<li>visibility: hidden</li>
	<li>overflow</li>
	<ul>
	<li>overflow:hidden: 스크롤 x, 글자 잘림</li>
	<li>overflow:visible: 스크롤 x, 글자 안 잘림</li>
	<li>overflow:scroll: 스크롤 o</li>
	</ul>
	<li>리스트 꾸미기</li>
	<ul id="withCss">
	<li>A</li>
	<li>B</li>
	<li>C</li>
	</ul>
	<li>표 꾸미기</li>
	<table class="tableWithCss">
	<caption>표</caption>
	<thead>
	<tr><th>가</th><th>나</th><th>다</th></tr>
	</thead>
	<tbody>
	<tr><td>A</td><td>B</td><td>C</td></tr>
	<tr><td>D</td><td>E</td><td>F</td></tr>
	</tbody>
	<tfoot>
	<tr><th>1</th><th>2</th><th>3</th></tr>
	</tfoot>
	</table>
	<li>폼 꾸미기<br>
	이름: <input type="text" placeholder="이름을 입력하세요."><br>
	<label>Comment<textarea placeholder="메시지를 남겨주세요"></textarea></label></li>
	<li>태그에 동적 변화 만들기</li>
	<ul>
	<li id="animation" style="background: black">애니메이션</li>
	<li id="bang">쾅!</li>
	<li id="transition">커져라! 크게 크게!</li>
	<li>transform: rotate/skew/translate/scale...</li>
	</ul>
	</ul>
	<br>
	<h3><li>자바 스크립트</li></h3>
	<ul>
	<li>마우스 올려보기<br>
	<img src="다운로드.jpg" alt="이미지"
	onmouseover="over(this)"
	onmouseout="out(this)"></li>
	<li>마우스 올려보기(자바스크립트 코드 불러서 사용)<br>
	=<script src="practise.js"><br>
	//HTML5부터 여기에 자바스크립트 코드 추가 작성하면 안 됨<br>
	</script><br>
	</li>
	</ul>
	<li><a href="javascript:alert('확인')">url에 자바스크립트 작성(a href 사용)</a></li>
	<li>document.write()로 웹페이지에 html 콘텐츠 출력<br>
	<script>
	document.write("A<br>");
	document.write("B<br>");
	document.write("C");
	</script></li>
	<li>자바스크립트 다이얼로그:프롬프트 다이얼로그<br>
	prompt("메시지", "디폴트 입력값)<br>
	<input type="button" id="프롬프트" onclick="프롬프트_click()" value="프롬프트">
	<script>
	function 프롬프트_click() {
	var ret = prompt("이름을 입력하세요", "나예진");
	if(ret == null) {
	//취소 버튼이나 다이얼로그를 닫은 경우
	}
	else if(ret =="") {
	//문자열 입력 없이 확인 버튼 누른 경우
	}
	else {
	//ret에는 사용자가 입력한 문자열
	}
	}</script></li>
	<li>자바스크립트 다이얼로그:확인 다이얼로그<br>
	confirm("메시지")<br>
	<button type="button" id="확인" onclick="확인_click()" value="">확인</button>
	<script>
	function 확인_click() {
	var ret = confirm("확인 버튼");
	if(ret == true)
	{
	//사용자가 "확인" 버튼을 누른 경우
	}
	else {
	//취소 버튼이나 다이얼로그를 닫은 경우
	}
	}</script></li>
	<li>자바스크립트 다이얼로그:경고 다이얼로그<br>
	alert("메시지")<br>
	<button type="button" id="경고" onclick="경고_click()" value="">경고</button>
	<script>
	function 경고_click() {
	alert("클릭하였습니다.");
	}</script></li>
	<li>지역변수와 전역변수
	<table class="typeOfVary">
	<thead>
	<tr><th>지역변수</th><th>전역변수</th></tr>
	</thead>
	<tbody>
	<tr><td>함수 내에 var 키워드로 선언</td><td>함수 밖에 선언되거나, <br>함수 내에 var 키워드 없이 선언된 변수</td></tr>
	<tr><td>선언된 함수 내에서만 사용</td><td>프로그램 전역에서 사용</td></tr>
	</tbody>
	</table></li>
	<li>this로 전역변수 접근<br>
	<script>
	var x=100; //전역변수 x(함수 밖에 선언)
	function f() {//함수 f() 선언
	var x=1; //지역변수 x

	document.write("지역변수 x=" + x);
	document.write("<br>");
	document.write("전역변수 x=" +this.x);
	}
	f(); //함수 f() 호출
	</script></li>
	<li>문자열 내에 문자열 출력하기(\"..."\ 이용)<br>
	<script>
	function cite() {
	var cite="그녀는 \"누구세요\"라고 했습니다.";
	document.write(cite);
	}
	cite();
	</script></li>
	<li>0~n까지의 합 구하기<br>
	<input type="button" id="합 구하기" value="합 구하기" onclick="합_구하기_click()">
	<script>
	function 합_구하기_click() {
	var n = prompt("0보다 큰 정수를 입력하세요", 0);
	n = parseInt(n); //문자열 n을 숫자로 바꿈

	var i = 0, sum = 0;
	while(i <= n)
	{
	sum += i;
	i++;
	}
	confirm("0~" + n + "까지의 합은 " + sum + "입니다.");
	}</script></li>
	<li>1에서 얼마까지 더해야 n을 넘는가?<br>
	<input type="button" id="초과" value="초과 구하기" onclick="초과_click()">
	<script>
	function 초과_click() {
	var n = prompt("n값을 입력해 주세요", 0);
	n = parseInt(n);

	//변수 초기화
	var i = 0;
	sum = 0;

	while(true) { //무한반복
	sum += i;
	if(sum > n)
	break; //합이 n을 넘어갈 경우 break;
	i++;
	}

	confirm("1에서 " + i + "까지 더해야 " + n + "을 넘음, 그때까지의 합은 " + sum);
	}</script></li>
	<li>5로 나눈 나머지가 2인 수만 더하기<br>
	<button type="button" onclick="계산_click()">계산하기</button>
	<script>
	function 계산_click() {
	var n = prompt("어디까지 더할까요?", 0);
	n = parseInt(n); //n값 정수로 변환
	sum = 0; //합계 초기화

	for (i=1; i<=n; i++)
	{
	if(i % 5 != 2) continue; //5로 나눈 나머지가 2가 아닐 경우
	sum += i;
	}
	confirm("합: " + sum);
	}</script></li>
	<li>함수 adder() 만들기<br>
	<input type="button" value="호출" onclick="returnAdder_click()">
	<script>
	function returnAdder_click(){
	var a = parseInt(prompt("더할 두 수 중, 첫 번째 수를 입력하세요", 0));
	var b = parseInt(prompt("더할 두 수 중, 두 번째 수를 입력하세요", 0));
	confirm("두 수 " + a + ", " + b + "의 합은 " + adder(a, b) + "입니다");
	}</script></li>
	<li>자바스크립트에서 제공하는 전역함수</li>
	<ul>
	<li>eval() <span class="example">예) var res = eval("23+46"); //res는 30</span></li>
	<li>parseInt() <span class="example"><br>
	예) var i = parseInt("32"); //32를 10진수로 변환, 정수 32 반환<br>
	예) var n = parseInt("0x32"); //"0x32"를 16진수로 해석, 정수 50 반환</span></li>
	<li>isNaN() <span class="example"><br>
	예) isNaN(32) //false 반환<br>
	예) isNaN("hello") //true 반환</span></li>
	</ul>
	<li>구구단 출력 함수 만들기<br>
	<button type="button" onclick="returnGugudan_click()">단 입력</button>
	<script>
	function returnGugudan_click() {
	var n = parseInt(prompt("단을 입력하세요", 0));
	gugudan(n);
	}</script></li>
	</ul>
	</body>
	</html>

view raw html_javaScript_for_exam.html hosted with ❤ by GitHub

	/* test.css */
	.cssLink {background-color: beige; color: burlywood; font-size: 30px}

view raw test.css hosted with ❤ by GitHub

	/* test2.css */
	#cssImport {background-color: darkseagreen; margin-left: 20px; color: antiquewhite; font-size: 30px}

view raw test2.css hosted with ❤ by GitHub

bracket 이용해서 만듦

+2019-06-17 04:24 추가사항
html_javaScript_for_exam.html의 178번째 줄에서
document.write(n + “x” + i + “=” + n * i + “<br>”)); → document.write(n + “x” + i + “=” + n * i + “<br>”);
파인애플 사진이 주황버섯 사진으로 바뀌지 않는 오류 수정

Twitter Facebook LinkedIn

나예진

1학기 기말 대비 웹설계 정리

공유하기

댓글남기기

참고

Int_integer

[프로그래머스] 올바른 괄호

DFS와 BFS에 대해

Datadog 설정