42Day - 29_layout3 / 30_layout4/ 31_layout5/ 32_layout6/ 33_layout7/ 34_table/ 35_transform_translate/ 36_transform_scale/ 37_transform_rotate/ 38_transform_skew/ 39_transition1/ 40_ transition2/ 41_animation/ 42_design / && 01

5월 ~ 7월) 웹/web

42Day - 29_layout3 / 30_layout4/ 31_layout5/ 32_layout6/ 33_layout7/ 34_table/ 35_transform_translate/ 36_transform_scale/ 37_transform_rotate/ 38_transform_skew/ 39_transition1/ 40_ transition2/ 41_animation/ 42_design / && 01_hello

첼로그 2023. 6. 1. 18:12

5Day - 29_layout3 / 30_layout4/ 31_layout5/ 32_layout6/ 33_layout7/ 34_table/ 35_transform_translate

/36_transform_scale/ 37_transform_rotate/ 38_transform_skew/ 39_transition1/ 40_ transition2/ 41_animation

/ 42_design / && 01_hello

29_layout3

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style type="text/css">
div {
	margin: 20px;
	padding: 10px;
	border: 2px solid red;
	text-align: center;
}

/* display 속성값을 [none]으로 설정한 경우 박스모델 미배치 - 박스모델 미출력 */
.on { display: inline; }
.off { display: none; }

/* visibility : 박스모델 출력 관련 스타일 속성 */
/* 속성값 : visible(보임 처리 - 기본), hidden(숨김 처리) */
.show { visibility: visible; }
.hide { visibility: hidden; }
</style>
</head>
<body>
	<h1>박스모델 배치 관련 스타일 속성</h1>
	<hr>
	<div>
		<img alt="펜션 이미지1" src="images/1.jpg" class="on">
		<img alt="펜션 이미지2" src="images/2.jpg" class="off">
		<img alt="펜션 이미지3" src="images/3.jpg" class="on">
	</div>
	<div>
		<img alt="펜션 이미지1" src="images/1.jpg" class="show">
		<img alt="펜션 이미지2" src="images/2.jpg" class="hide">
		<img alt="펜션 이미지3" src="images/3.jpg" class="show">
	</div>
</body>
</html>

30_layout4

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style type="text/css">
/* 다른 박스모델을 출력하기 위한 영역 제공하는 컨테이너 역활의 박스모델 */
#container {
	width: 800px;
	/* min-height : 박스모델의 최소 높이를 설정하기 위한 스타일 속성 */
	min-height: 600px;
	border: 1px solid red;
}

/* 컨테이너 영역에 출력될 아이템 역활의 박스모델 */
.box {
	width: 200px;
	height: 200px;
	margin: 20px;
	border: 1px solid green;
	/* display: inline-block; */
	
	/* float : 컨테이너 역활의 박스모델에 아이템 역활의 박스모델을 왼쪽 또는 오른쪽 위치부터 
	차례대로 배치 하기 위한 스타일 속성 */
	/* => 아이템 역활의 박스모델이 컨테이너 역활의 박스모델에 배치될 경우 자동 줄바꿈 처리  */
	/* => float 스타일이 적용된 박스모델 다음에 위치한 박스모델에도 float 스타일 적용  */
	/* 속성값 : none(기본), left, right */ 
	float: left;
}

p {
	/* clear : float 스타일로 설정된 배치 관련 스타일을 초기화 처리하기 위한 스타일 속성  */
	/* 속성값 : left, rigth, both */
	clear: both;
}
</style>
</head>
<body>
	<h1>박스모델 배치 관련 스타일 속성</h1>
	<hr>
	<div id="container">
		<div class="box"></div>
		<div class="box"></div>
		<div class="box"></div>
		<div class="box"></div>
		<div class="box"></div>
		<div class="box"></div>
		<p>안녕하세요.</p>
	</div>
</body>
</html>

31_layout5

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style type="text/css">
/* 다른 박스모델을 출력하기 위한 영역 제공하는 컨테이너 역활의 박스모델 - Flex Containter */
#container {
	width: 800px;
	min-height: 600px;
	border: 1px solid red;
	/* 컨테이너 역활의 박스모델에 display 속성값을 [flex]로 설정하는 경우 Flex Containter로
	처리되어 아이템 역활의 박스모델을 한쪽 방향의 일정하는 간격으로 자동 배치 */
	display: flex;
	
	/* flex-direction : Flex Containter에서 Flex Item를 배치하는 방향을 설정하는 스타일 속성 */
	/* 속성값 : row(기본), column, row-reverse, column-reverse  */
	/* flex-direction: row; */
	
	/* flex-wrap : Flex Containter에서 Flex Item를 배치에 대한 줄바꿈 처리에 대한 스타일 속성  */
	/* 속성값 : nowrap(기본), wrap(아래 줄바꿈 처리), wrap-reverse(위 줄바꿈 처리) */
	/* flex-wrap: wrap; */
	
	/* flex-flow : flex-direction과 flex-wrap을 동시에 설정하는 스타일 속성 */
	flex-flow: row wrap;
	
	/* justify-content : Flex Containter에서 Flex Item을 정렬하기 위한 스타일 속성 */
	/* 속성값 : flex-start(기본), flex-end, center, space-between, space-around, space-evenly */
	justify-content: space-evenly;
}

/* 컨테이너 영역에 출력될 아이템 역활의 박스모델 - Flex Item */
.box {
	width: 200px;
	height: 200px;
	margin: 20px;
	border: 1px solid green;
}
</style>
</head>
<body>
	<h1>박스모델 배치 관련 스타일 속성</h1>
	<hr>
	<div id="container">
		<div class="box">A</div>
		<div class="box">B</div>
		<div class="box">C</div>
		<div class="box">D</div>
		<div class="box">E</div>
		<div class="box">F</div>
	</div>
</body>
</html>

32_layout6

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style type="text/css">
div {
	width: 400px;
	height: 200px;
	margin: 10px;
	border: 1px solid black;
}

#red { 
	background: red;

	/* position : 박스모델 배치 관련 스타일 속성 */
	/* 속성값 : static(기본) - 박스모델 자동 배치(박스모델의 중첩 배치 불가능) */	
	/* position: static; */  

	/* 속성값 : relative - 박스모델 자동 배치 후 top 속성과 left 속성을 사용하여 박스모델을
	이동하여 배치(박스모델의 중첩 배치 가능) */
	/* top : 세로 방향(Y)의 이동 관련 스타일 속성 - 단위 : px, % */
	/* left : 가로 방향(X)의 이동 관련 스타일 속성 - 단위 : px, % */
	/*
	position: relative;  
	top: 50px;
	left: 30px;
	*/

	/* 속성값 : absolute - 박스모델 배치 전 top 속성과 left 속성을 사용하여 박스모델을
	이동하여 배치(박스모델의 중첩 배치 가능) */
	/*
	position: absolute;
	top: 200px;
	left: 100px;  
	*/

	/* 속성값 : fixed - absolute 속성값 동일(스크롤 미제공) */
	position: fixed;
	top: 200px;
	left: 100px;
}

#green {
	background: green;
	
	/*
	position: relative;
	top: -20px;
	left: -10px;
	*/
	
	/*
	position: absolute;
	top: 250px;
	left: 700px;
	*/  
	
	position: fixed;
	top: 250px;
	left: 700px; 
}

#blue {
	background: blue;
	
	/*
	position: relative;
	top: -200px;
	left: 100px;
	*/
	
	/*
	position: absolute;
	top: 300px;
	left: 400px;
	*/  
	
	position: fixed;
	top: 300px;
	left: 400px;	  
}
</style>
</head>
<body>
	<h1>박스모델 배치 관련 스타일 속성</h1>
	<hr>
	<div id="red"></div>
	<div id="green"></div>
	<div id="blue"></div>
</body>
</html>

33_layout7

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style type="text/css">
div {
	width: 400px;
	height: 200px;
	margin: 10px;
	border: 1px solid black;
}

#red {
	background: red;
	position: absolute;
	top: 100px;
	left: 200px;
	/* z-index : 박스모델 배치 순서 관련 스타일 속성 */
	/* 속성값 : 정수값 - 정수값이 큰 박스모델을 위에 배치 */
	z-index: 3;
}

#green {
	background: green;
	position: absolute;
	top: 200px;
	left: 400px;
	z-index: 100;
}

#blue {
	background: blue;
	position: absolute;
	top: 300px;
	left: 300px;
	z-index: 1;
}
</style>
</head>
<body>
	<h1>박스모델 배치 관련 스타일 속성</h1>
	<hr>
	<!-- 박스모델이 중첩될 경우 박스모델이 배치되는 순서에 의해 중첩 배치 -->
	<div id="red"></div>
	<div id="green"></div>
	<div id="blue"></div>
</body>
</html>

34_table

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style type="text/css">
table {
	border: 1px solid black;
	
	/* border-collapse : 박스모델의 외곽선 중첩 관련 스타일 속성  */
	/* 속성값 : separate(중첩 외곽선 구분 - 기본), collapse(중첩 외곽선 병합) */
	border-collapse: collapse;
}

th, td {
	border: 1px solid black;
	
	/* 모든 셀(Cell)의 폭이 일정하게 변경 */
	/* width: 200px; */
	
	height: 30px;
}

td { text-align: center; }

/* 셀(Cell)마다 폭을 다르게 설정 - 행의 셀 폭을 변경하면 다른 행에도 적용 */
.num { width: 100px; }
.name { width: 150px; }
.address { 
	width: 200px;
	text-align: left; 
	padding-left: 5px;
}
</style>
</head>
<body>
	<h1>테이블 관련 스타일 속성</h1>
	<hr>
	<table>
		<tr>
			<!-- 셀(Cell)의 폭의 태그내용에 의해 자동으로 설정 -->
			<th>번호</th><th>이름</th><th>주소</th>
		</tr>
		<tr>
			<td class="num">1000</td><td class="name">강백호</td><td class="address">서울시 강남구 역삼동 79-11 역삼타워</td>
		</tr>
		<tr>
			<td class="num">2000</td><td class="name">서태웅</td><td class="address">부산시 사하구</td>
		</tr>
		<tr>
			<td class="num">3000</td><td class="name">송태섭</td><td class="address">광주시 광산구</td>
		</tr>
		<tr>
			<td class="num">4000</td><td class="name">정대만</td><td class="address">수원시 팔달구</td>
		</tr>
		
		<tr>
			<td class="num">5000</td><td class="name">채치수</td><td class="address">인천시 월미구</td>
		</tr>
	</table>
</body>
</html>

35_transform_translate

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style type="text/css">
#original {
	margin: 20px;
}

img {
	border: 1px solid black;
}

.image {
	float: left;
	margin: 20px;
	background: rgba(0, 0, 255, 0.3);
	
	/* perspective : Z 영역 관련 스타일 속성 */
	/* 속성값 : Z 영역에 대한 깊이를 px 단위로 설정 */
	perspective: 200px;
	
	/* transform-style : 박스모형 변형에 대한 차원 관련 스타일 속성 */
	/* 속성값 : flat(2차원 - 기본), preserve-3d(3차원)  */
	transform-style: preserve-3d;
}

/* transform : 박스모델 변형 관련 스타일 속성 */
/* 속성값 : 변경 관련 함수 - translate, scale, rotate, skew 등 */

/* translate(x, y) : 박스모델을 가로(X)와 세로 방향(Y)으로 이동하는 함수 - 단위 : px */
#translate img {
	transform: translate(20px, 20px);
}

/* translatex(x) : 박스모델을 가로 방향(Y)으로 이동하는 함수 - 단위 : px */
#translatex img {
	transform: translatex(20px);
}

/* translatey(y) : 박스모델을 세로 방향(Y)으로 이동하는 함수 - 단위 : px */
#translatey img {
	transform: translatey(-20px);
}

/* translatez(z) : 박스모델을 원근 방향(Z)으로 이동하는 함수 - 단위 : px */
#translatez img {
	transform: translatez(-20px);
}

/* translate3d(x, y, z) : 박스모델을 입체적으로 이동하는 함수 - 단위 : px */
#translate3d img {
	transform: translate3d(-20px, -20px, -20px);
}
</style>
</head>
<body>
	<h1>박스모델 변형 관련 스타일 속성</h1>
	<hr>
	<div id="original">
		<h3>원본이미지</h3>
		<img alt="펜션 이미지" src="images/1.jpg">
	</div>
	<hr>
	<div id="translate" class="image">
		<img alt="펜션 이미지" src="images/1.jpg">
	</div>
	<div id="translatex" class="image">
		<img alt="펜션 이미지" src="images/1.jpg">
	</div>
	<div id="translatey" class="image">
		<img alt="펜션 이미지" src="images/1.jpg">
	</div>
	<div id="translatez" class="image">
		<img alt="펜션 이미지" src="images/1.jpg">
	</div>
	<div id="translate3d" class="image">
		<img alt="펜션 이미지" src="images/1.jpg">
	</div>
</body>
</html>

36_transform_scale

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style type="text/css">
#original {
	margin: 20px;
}

img {
	border: 1px solid black;
}

.image {
	float: left;
	margin: 20px;
	background: rgba(0, 0, 255, 0.3);
	perspective: 200px;
	transform-style: preserve-3d;
}

/* scale(x, y) : 박스모델을 가로와 세로 방향으로 확대 또는 축소하는 함수 - 단위 : 배율 */
#scale img {
	transform: scale(1.2, 1.2);
}

/* scalex(x) : 박스모델을 가로 방향으로 확대 또는 축소하는 함수 - 단위 : 배율 */
#scalex img {
	transform: scalex(0.8);
}

/* scaley(y) : 박스모델을 세로 방향으로 확대 또는 축소하는 함수 - 단위 : 배율 */
#scaley img {
	transform: scaley(1.2);
}

/* scalez(z) : 박스모델을 원근 방향으로 확대 또는 축소하는 함수 - 단위 : 배율 */
#scalez img {
	transform: scalez(0.8);
}

/* scale3d(x, y, z) : 박스모델을 입체적으로 확대 또는 축소하는 함수 - 단위 : 배율 */
#scale3d img {
	transform: scale3d(1.2, 1.2, .8);
}
</style>
</head>
<body>
	<h1>박스모델 변형 관련 스타일 속성</h1>
	<hr>
	<div id="original">
		<h3>원본이미지</h3>
		<img alt="펜션 이미지" src="images/1.jpg">
	</div>
	<hr>
	<div id="scale" class="image">
		<img alt="펜션 이미지" src="images/1.jpg">
	</div>
	<div id="scalex" class="image">
		<img alt="펜션 이미지" src="images/1.jpg">
	</div>
	<div id="scaley" class="image">
		<img alt="펜션 이미지" src="images/1.jpg">
	</div>
	<div id="scalez" class="image">
		<img alt="펜션 이미지" src="images/1.jpg">
	</div>
	<div id="scale3d" class="image">
		<img alt="펜션 이미지" src="images/1.jpg">
	</div>	
</body>
</html>

37_transform_rotate

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style type="text/css">
#original {
	margin: 20px;
}

img {
	border: 1px solid black;
}

.image {
	float: left;
	margin: 20px;
	background: rgba(0, 0, 255, 0.3);
	perspective: 200px;
	transform-style: preserve-3d;
}

/* rotate(각도) : 박스모델을 가로와 세로 방향으로 회전하는 함수 - 단위 : deg  */
#rotate img {
	transform: rotate(45deg);
}

/* rotatex(각도) : 박스모델을 가로 방향으로 회전하는 함수 - 단위 : deg  */
#rotatex img {
	transform: rotatex(45deg);
}

/* rotatey(각도) : 박스모델을 세로 방향으로 회전하는 함수 - 단위 : deg  */
#rotatey img {
	transform: rotatey(45deg);
}

/* rotatez(각도) : 박스모델을 원근 방향으로 회전하는 함수 - 단위 : deg  */
#rotatez img {
	transform: rotatez(45deg);
}

/* rotate3d(x, y, z, 각도) : 박스모델을 입체적으로 회전하는 함수 - 단위 : deg  */
#rotate3d img {
	transform: rotate3d(-1, 1, 2, 45deg);
}

</style>
</head>
<body>
	<h1>박스모델 변형 관련 스타일 속성</h1>
	<hr>
	<div id="original">
		<h3>원본이미지</h3>
		<img alt="펜션 이미지" src="images/1.jpg">
	</div>
	<hr>
	<div id="rotate" class="image">
		<img alt="펜션 이미지" src="images/1.jpg">
	</div>
	<div id="rotatex" class="image">
		<img alt="펜션 이미지" src="images/1.jpg">
	</div>
	<div id="rotatey" class="image">
		<img alt="펜션 이미지" src="images/1.jpg">
	</div>
	<div id="rotatez" class="image">
		<img alt="펜션 이미지" src="images/1.jpg">
	</div>
	<div id="rotate3d" class="image">
		<img alt="펜션 이미지" src="images/1.jpg">
	</div>	
</body>
</html>

38_transform_skew

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style type="text/css">
#original {
	margin: 20px;
}

img {
	border: 1px solid black;
}

.image {
	float: left;
	margin: 20px;
	background: rgba(0, 0, 255, 0.3);
	perspective: 200px;
	transform-style: preserve-3d;
}

/* skew(x, y) : 박스모델을 가로와 세로 방향으로 비트는 함수 - 단위 : deg */
#skew img {
	transform: skew(30deg, 30deg);
}

/* skewx(x) : 박스모델을 가로 방향으로 비트는 함수 - 단위 : deg */
#skewx img {
	transform: skewx(30deg);
}

/* skewy(y) : 박스모델을 세로 방향으로 비트는 함수 - 단위 : deg */
#skewy img {
	transform: skewy(30deg);
}
</style>
</head>
<body>
	<h1>박스모델 변형 관련 스타일 속성</h1>
	<hr>
	<div id="original">
		<h3>원본이미지</h3>
		<img alt="펜션 이미지" src="images/1.jpg">
	</div>
	<hr>
	<div id="skew" class="image">
		<img alt="펜션 이미지" src="images/1.jpg">
	</div>
	<div id="skewx" class="image">
		<img alt="펜션 이미지" src="images/1.jpg">
	</div>
	<div id="skewy" class="image">
		<img alt="펜션 이미지" src="images/1.jpg">
	</div>
</body>
</html>

39_transition1

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style type="text/css">
#shape div {
	width: 100px;
	height: 100px;
	background: red;
	border-radius: 0;
	
	/* 트렌지션 효과(Transition Effect) : 시간 경과에 따른 박스모델의 스타일 변화 기능 제공 */
	
	/* transition-property : 트렌지션 효과를 적용할 스타일을 속성값으로 설정 */
	transition-property: background border-radius;
	
	/* transition-duration : 트렌지션 효과의 제공 시간을 속성값으로 설정 - 단위 : s(초) */
	transition-duration: 3s;
	
	/* transition-timing-function : 트렌지션 효과의 제공 속도를 속성값으로 설정 */
	/* 속성값 : linear(기본), ease-in, ease-out, ease-in-out, cubic-bezier 함수 등 */
	/* => https://easings.net 사이트 참조 */
	transition-timing-function: ease-in;
	
	/* transition-delay : 트렌지션 효과의 지연 시간을 속성값으로 설정 - 단위 : s(초)*/
	transition-delay: 0.5s;
}

#shape div:hover {
	background: blue;
	border-radius: 50%;
}
</style>
</head>
<body>
	<h1>트렌지션 관련 스타일 속성</h1>
	<hr>
	<p>도형 위에 마우스 커서를 올려보세요.</p>
	<div id="shape">
		<div></div>
	</div>
</body>
</html>

40_ transition2

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style type="text/css">
#images img {
	margin: 20px;
	
	/* opacity : 박스모델 투명도 관련 스타일 속성 */
	/* 속성값 : 0.0(투명) ~ 1.0(불투명) */
	opacity: 0.5;

	/* transition : 트렌지션 관련 모든 스타일 속성값 설정 */	
	transition: all 1s;
}

#images img:hover {
	transform: scale(1.2, 1.2);
	opacity: 1.0;
}

#shape div {
	width: 100px;
	height: 100px;
	background: url("images/f1.png") no-repeat center;
	position: relative;
	left: 0;
	transition: all 2s;
}

#shape:hover div {
	background: url("images/f2.png") no-repeat center;
	left: 600px;	
}
</style>
</head>
<body>
	<h1>트렌지션 관련 스타일 속성</h1>
	<hr>
	<div id="images">
		<img alt="펜션 이미지1" src="images/1.jpg">
		<img alt="펜션 이미지2" src="images/2.jpg">
		<img alt="펜션 이미지3" src="images/3.jpg">
	</div>
	<hr>
	<div id="shape">
		<div></div>
	</div>
</body>
</html>

41_animation

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style type="text/css">
#ani {
	width: 100px;
	height: 100px;
	position: relative;
	/*
	left: 10px;
	background: url("images/f1.png") no-repeat center;
	*/
	
	/* animation-name : 박스모델에 적용될 애니메이션의 이름을 속성값으로 설정 */
	animation-name: myani;
	
	/* animation-duration : 박스모델에 적용될 애니메이션의 지속시간을 속성값으로 설정 */
	animation-duration: 5s;

	/* animation-iteration-count : 박스모델에 적용될 애니메이션의 반복 횟수를 속성값으로 설정 */
	/* 속성값 : 정수 또는 infinite(무제한) */
	animation-iteration-count: infinite;
	
	/* animation-direction : 박스모델에 적용될 애니메이션의 진행 방향을 속성값으로 설정 */
	/* 속성값 : normal(정방향 - 기본), reverse(역방향),  alternate(정방향 > 역방향), alternate-reverse(역방향 > 정방향) */
	animation-direction: alternate;
}

/* @keyframes : 애니메이션의 이름과 상태에 따른 스타일 변화를 정의하기 위한 시스템 속성 */
/* => 상태(백분율 또는 키워드 - from, to)에 따른 CSS 스타일을 정의하여 애니메이션 효과 제공  */
/* => 시작상태(from)와 종료상태(to)를 포함하여 2개 이상의 상태 작성 */
@keyframes myani {
	/* 시작상태 */
	/*
	from {
		top: 0;
		left: 10px;
		background: url("images/f1.png") no-repeat center;
	}
	*/
	
	/* 종료상태 */
	/*
	to {
		top: 0;
		left: 600px;
		background: url("images/f2.png") no-repeat center;
	}
	*/
	
	0% {
		top: 0;
		left: 10px;
		background: url("images/f1.png") no-repeat center;
	}
	
	25% {
		top: 0;
		left: 600px;
		background: url("images/f2.png") no-repeat center;
	}
	
	50% {
		top: 300px;
		left: 600px;
		background: url("images/f1.png") no-repeat center;
	}
	
	75% {
		top: 300px;
		left: 10px;
		background: url("images/f2.png") no-repeat center;
	}
	
	100% {
		top: 0;
		left: 10px;
		background: url("images/f1.png") no-repeat center;
	}
}
</style>
</head>
<body>
	<h1>애니메이션 관련 스타일 속성</h1>
	<hr>
	<div id="ani"></div>
</body>
</html>

42_design

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- meta 태그의 name 속성값으로 viewport 설정 -->
<!-- > 스마트기기 해상도에 맞게 태그내용이 출력되도록 설정하기 위한 속성 -->
<!-- > 장치 폭 또는 브라우저의 해상도가 다르기 때문에 출력에 대한 이상현상 발생 -->
<!-- > content 속성값으로 장치에 대한 폭을 확대 또는 축소 설정 -->
<meta name="viewport" content="width=device-width">
<title>CSS</title>
<style type="text/css">
/* 모든 장치(해상도)에 공통적으로 적용될 스타일 설정 */
body {
	background: lime;
}

/* 반응형 웹디자인 구현을 위해 유동성 구조로 박스모델 설정 */
/* > 크기 단위를 px 대신 % 또는 em 사용 */
#container {
	width: 80%;
	margin: 0 auto;
}

#logo img {
	width: 100%;
	margin-top: 150px;
}

/* @media : 장치 또는 해상도에 따라 다른 CSS 스타일을 적용하기 위한 시스템 속성 - Media Query */
/* 형식) @media 장치 [and 조건] [and 조건] ... { 선택자 { 속성: 속성값; ... } ... } */
/* 장치 : all, screen, print, tv, aural, braille 등 */
@media screen and (max-width:360px) {
	body {
		background: yellow;	
	}
}

@media screen and (min-width:361px) and (max-width:768px) {
	body {
		background: orange;	
	}
}


@media screen and (min-width:769px) and (max-width:1024px) {
	body {
		background: olive;	
	}
}
</style>
</head>
<body>
	<!-- 반응형 웹디자인 구현을 위해 전체 내용이 출력될 박스모델의 폭 제한 - 컨테이너 역활의 박스모델 -->
	<div id="container">
		<h1>반응형 웹 디자인(Responsive Web Design)</h1>
		<hr>
		<p>장치 또는 해상도에 따라 다른 스타일의 페이지를 제공하기 위한 웹디자인 기법</p>
		<hr>
		<div id="logo">
			<img alt="로고" src="images/logo.png">
		</div>
	</div>
</body>
</html>

( js 파일 / 자바스크립트 )

01_hello

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
<!-- script 태그 : 스크립트 언어를 사용하여 프로그램을 작성하는 영역을 제공하는 태그 -->
<script type="text/javascript">

// 자바스트립트의 주석문와 자바와 동일

// 자바스크립트는 한 줄에 작성된 코드를 하나의 명령으로 인식하여 처리
// > 명령 마지막에 ; 생략 가능

// 자바스크립트는 객체 지향 프로그래밍 언어로 객체를 이용하여 프로그램 작성
// > 객체의 속성(Property)와 함수(Method)를 이용하여 명령을 작성하여 실행

// console 객체 : 브라우저 콘솔을 표현하기 위해 제공되는 내장객체
// console.log(message) : 브라우저 콘솔에 메세지를 출력하는 메소드
// console.log("Hello, JavaScript!!!");

// window 객체 : 웹브라우저를 표현하기 위해  제공되는 내장객체
// window.alert(message) : 메세지창(경고창)을 생성하여 메세지를 출력하는 메소드(함수)
// > window 객체를 생략하여 메소드 호출 가능
//window.alert("Hello, JavaScript!!!");

</script>
</head>
<body>
	<h1>자바스크립트 작성</h1>
	<hr>
	<p>자바스크립트(JavaScript) : 웹페이지에서 발생된 이벤트를 처리하기 위한 기능을 제공하는
	스크립트 프로그래밍 언어 - 클라이언트에서 해석되어 실행</p>
	<p>자바스크립트 표준 규약은 ES15(ECMAScript15)까지 구현되었으나 일반적으로 
	ES6(ECMAScript6)을 이용하여 작성</p>
</body>
</html>

저작자표시 비영리 (새창열림)