2024_06_18

오늘의 코딩

(폴더: WebStandard01)

09/ 2_layout
- 배운것
  - border: 1px solid #ㅇㅇㅇㅇㅇㅇ: 모든 영역에 테두리 표시
  - margin: 0 auto : 화면 중앙에 배치
  - padding: 셀 테두리와 글자 사이의 간격
  - float: 요소를 왼쪽이나 오른쪽에 떠 있게 만듬
  - clear: float 속성을 무효화 시키는 속성
  - footer: 일반적으로 웹 페이지의 맨 하단에 있는 글로벌(혹은 전역) 푸터를 나타내거나,
    글이나 콘텐츠 영역에 대한 작성자, 저작권 정보, 관련 문서에 대한 링크 등의 내용을 나타냄

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	div	{
		border: 1px solid #ccc;	/* 모든 영역에 테두리 표시 */
	}
	
	#container {
		width: 960px;
		padding: 20px;
		margin: 0 auto;	/* 화면 중앙에 배치 */
	}
	
	#header {
		padding:20px;
		margin-bottom: 20px;
	}
	
	#contents {
		width: 620px;
		padding: 20px;
		float: left;
		margin-bottom: 20px;
	}
	
	#sidebar {
		width: 220px;
		padding: 20px;
		float: right;
		margin-bottom: 20px;
		background: #eee; 	
	}
	
	#footer {
		clear: both;	/* 양쪽 플로팅 해제 */
		padding: 20px; 
	}
	
</style>
</head>
<body>
	<div id="container">
		<h1>사이트 제목 ***</h1>
	<div id="sidebar">	
		<h2>사이드 바</h2>
		<ul>
			<li>모든 국민은 근로의 의무를 진다. 
			국가는 근로의 의무의 내용과 조건을 민주주의원칙에 따라 법률로 정한다.</li>
		</ul>	
	</div>
	<div id="content">
		<h2>본문</h2>
		<p>재산권의 행사는 공공복리에 적합하도록 하여야 한다. 
		정부는 회계연도마다 예산안을 편성하여 회계연도 개시 90일전까지 국회에 제출하고,
 		국회는 회계연도 개시 30일전까지 이를 의결하여야 한다.</p>
 		<p>대통령의 임기가 만료되는 때에는 임기만료 70일 내지 40일전에 후임자를 선거한다. 
		제2항과 제3항의 처분에 대하여는 법원에 제소할 수 없다. 
		언론·출판에 대한 허가나 검열과 집회·결사에 대한 허가는 인정되지 아니한다.</p>
 		
 	</div>
	<div id="footer">	
		<h2>푸터</h2>
			이 헌법시행 당시의 법령과 조약은 이 헌법에 위배되지 아니하는 한 그 효력을 지속한다.
	</div>	
</body>
</html>

09/ 3_layout
- 배운것: sidebar

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	div {
		padding: 20px;
		border: 1px solid #ccc;
	}	
	#container {
		width: 960px;
		margin: 0 auto;
	}
	#header {
		padding: 20px; 
		margin: 0 auto; 
	}
	#contents {
		width: 490px;
		float: left;
		margin-bottom: 20px;
	}
	#left-sidebar {
		width: 150px;
		float: left;
		margin-bottom:  20px;
		margin-right: 20px;
	}
	#right-sidebar {
		width: 150px;
		float: right;
		margin-bottom: 20px;
	}
	#footer {
		clear: both; 
	}
	
</style>
</head>
<body>
	<div id="container">
		<div id="header">
			<h1>사이트 제목</h1>
		</div>	
		<div id="left-sidebar">
			<h2>사이드바 Left</h2>
			<ul>
			<li>항목1</li>
			<li>항목2</li>
			<li>항목3</li>
			<li>항목4</li>
		</ul>
		</div>
	
		<div id="contents">
			<h2>본문</h2>
				<p>예비비는 총액으로 국회의 의결을 얻어야 한다. 
				예비비의 지출은 차기국회의 승인을 얻어야 한다. 
				이 헌법시행 당시의 법령과 조약은 이 헌법에 위배되지 아니하는 한 그 효력을 지속한다.</p>
		
				<p>	국가의 세입·세출의 결산, 국가 및 법률이 정한 단체의 회계검사와 
				행정기관 및 공무원의 직무에 관한 감찰을 하기 위하여 대통령 소속하에 감사원을 둔다.</p>
			
				<p>모든 국민의 재산권은 보장된다. 그 내용과 한계는 법률로 정한다. 
				대한민국의 국민이 되는 요건은 법률로 정한다. 
				법률이 헌법에 위반되는 여부가 재판의 전제가 된 경우에는 
				법원은 헌법재판소에 제청하여 그 심판에 의하여 재판한다.	</p>
		</div>	
		
		<div id = "right-sidebar">
		<h2>사이드바 Right</h2>
		<ul>
			<li>항목1</li>
			<li>항목2</li>
			<li>항목3</li>
			<li>항목4</li>
		</ul>
		</div>
		<div id="footer">
		<h2>푸터</h2>
			<p>	저작권 정보</p>
			<p>	연락처 등</p>
	
 		</div>	
	</div>
</body>
</html>

10/ semantic, style2
- 배운것
  - a href: <a> 태그의 href 속성은 링크된 페이지의 URL을 명시함
  - nav: 다른 웹 페이지로 연결하거나, 현재 웹 페이지의 콘텐츠 내부로 연결되는 탐색(navigation)을 위한 링크(links)가 있는 영역을 나타냄/ 일반적인 예로는 메뉴, 목차, 색인 등이 있음
  - article: 문서, 페이지, 애플리케이션, 또는 사이트에서 독립적으로 배포 가능하거나 재사용할 수 있는 콘텐츠를 묶는 영역으로 사용됨/ 게시판 글, 뉴스 기사, 블로그 글, 댓글 등이 있음
  - section: 문서, 애플리케이션의 일반적인 섹션을 나타냄, 더 적합한 의미를 가진 요소가 없을 때 논리적인 측면에서 주제별 콘텐츠 그룹을 나타내는데 사용
  - div: 레이아웃을 만들거나 콘텐츠를 나누는(division) 컨테이너로 사용하는 태그
  - aside: 페이지 내 주요 콘텐츠와 직접적이지는 않지만 간접적으로 연관된 내용으로 구성된 별도(aside, 별도로 하고)의 부분을 나타냄, 이러한 부분은 주로 사이드바 혹은 문서의 내용과 관련된 추가 정보를 제공하는 작은 영역으로 표현

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="css./style2.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
	<header>
		<h1>Joandora</h1>
			<h2>가장 제주다운 수산리집</h2>
	</header>
	<nav class="navi">
		<ul>
			<li><a href="#">이용 안내</a></li>
			<li><a href="#">객실 소개</a></li>
			<li><a href="#">예약 방법</a></li>
			<li><a href="#">예약하기</a></li>
		</ul>
	</nav>
	<article>
			<section class="content">
				<h2>요안도라 소개</h2>
				<h3>¤ 요안도라는 게스트 하우스(Guest House) 형식의 농어촌 민박입니다</h3>
				<p>성산의 날씨는 다음주 내내 높은 구름에 햇살 가득이라고 합니다. 
				목요일이면 섭씨 27도까지 오른다고 하지만, 
				늘 부는 바람이 쾌적한 균형을 잡아 마당에 마당에 나가 앉아 있는 시간이 많아질듯 합니다.</p>
				<p>오늘은 사진에 보이는 긴 돌담을 따라 들어오는 
				요안도레 올레 입구에 특곤색의 대문을 달았습니다.</p>
				<p>	내일은 두달 여동안 밖거리에 만든 데스트 하우스에 연백색의 황토 페인트를 칠할 예정입니다. 
					그리고 이것저것 사소한 저이를 마치고 나면, 
					나이 드시고 젊고 한 미지의 새식구들을 설렘으로 만나고 함께하고, 
					도시의 바쁜 생활로 소원해진 오래된 친구와의 우정을 이 제주에서 새롭게 열어나가기 위해 
					요안도라를 세상에 알리려고 합니다.
				</p>
				<div class="banner"><img src="images/banner2.png">
					<width="700" height="233" alt="요안도라"></div>	
			</section>
	</article>
	<aside class="sidebar">
		<h3>¤ 알립니다</h3>
		<p>게스트하우스 예약은 
		전화 070-####-#### 로 직접 통화하시는게 가장 정확하고 빠릅니다. 
		인터넷 전화이므로 시외 전화 요금이 부과되지 않습니다.</p>
		<img src="images/2.jpg" alt="">
		<img src="images/1.jpg" alt="">
		<img src="images/4.jpg" alt="">
	</aside>
	<footer>
		<p>Copyright 2012 funnycom</p>
	</footer>
</div>
</body>
</html>

body {
	font: 14px "맑은 고딕";
}

.container {
	position: absolute;
	width: 960px;
	margin: 0 auto;
	background-color: #fff;
	border: 1px solid #E7E7E7;
	
}

header {
	position: relative;
	height: 280px;
	background-image: url('../images/bg.png');
	background-repeat:  no-repeat;
	background-position: left top; 
}


header h1 {
	position: absolute;
	right: 20px;
	bottom: 70px;	
	font-size: 3em;
	color:#FFC;
	text-shadow: 1px 2px 2px #000;
}

header h2 {
	position: absolute;
	right: 20px;
	bottom: 30px;
	font-size: 1.8em;
	color: #FF0;
	text-shadow: 0px 1px 1px #000;	
}

.navi {
	position: relative;
	background: #271717;
	margin-top: -15px;
	width:960px;
	height: 60px;
}

.navi ul {
	list-style: none;
	height: 40px;
	padding-top: 10px;
	padding-bottom: 5px;	
}

.navi ul li {
	display: inline;
	float: left;
	font-size: 15px;	
	margin-right: 10px;
}

.navi a, .navi a:visited {
	padding: 10px 5px 5px 35px;
	display: block;
	color:#fff;
	width: 150px;
	text-decoration: none;
}

11/audio
- 배운것
  - background: url : css의 background - image 넣을때 사용

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>오디오 재생하기</title>
<style type="text/css">
	.top {
		width:600px;
		height:300px;
		background: url(images/bg2.jpg) no-repeat top left;
		background-size: cover;  
		 
	}
</style>
</head>
<body>
	<audio src="media/bgsound.mp3" controls="controls"></audio>
	<div class="top"></div>
</body>
</html>

11/ video1

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	body {
			margin-top: 20px;
			margin-left: 50px;
	}
</style>
</head>
<body>
	<video src="media/Painting.mp4" controls="controls"></video>
</body>
</html>

12/ adjacent
- 배운점:
  - 형제태그: h1 x태그 다음에 나오는 반드시 ul일때만

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
 	/* h1 x태그 다음에 나오는 반드시 ul일때만 */
  	h1 + h2 {
 	  color: red;
 	  background-color: gray; 
    }

	h2 + ul {
 	  color:blue;
 	  font-weight: bold;
 	}
    
 
</style>
</head>
<body>
	<section id="container">
		<h1>예약 방법 및 요금</h1>
		<h2>h1 다음 ---> h2 첫째</h2>
		<h2>h1 다음 ---> h2 둘째</h2>
		<h2>h1 다음 ---> h2 셋째</h2>
		<ul>
			<li>직접 통화</li>
			<li>문자 남기기</li>
		</ul>
		<ul>	
			<li>1인 : 40,000원</li>
			<li>2인 : 60,000원</li>
			<li>3인 : 80,000원</li>
			<li>4인 : 100,000원</li>
		</ul>
		<ul>	
			<li>1a : 40,000원</li>
			<li>2b : 60,000원</li>
			<li>3c : 80,000원</li>
			<li>4d : 100,000원</li>
		</ul>		
	</section>		
</body>
</html>

12/ attr

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	ul {
		list-style: none;
	}
	li {
		width: 100px;
		dispaly: inline;
		float: left;
		margin: 10px;
	}
	li a {
		padding: 5px 20px;
		font-size: 14px; 
		color: blue;
		text-decoration: none;		
	}
	a[href] {
		background: yellow;
	}
</style>
</head>
<body>
	<ul>
		<li><a>메인 메뉴 : </a></li>
		<li><a href="#">메뉴 1 </a></li>
		<li><a href="#">메뉴 2 </a></li>
		<li><a href="#">메뉴 3 </a></li>
		<li><a href="#">메뉴 4 </a></li>
	</ul>
</body>
</html>

12/ attr2
- 배운것
  - a[target="_blank"] { : 특정 값이 포함된 속성을 가진 요소를 찾아 스타일 적용

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	ul {
		list-style: none;
	}
	li {
		padding: 5px 30px;
	}
	li a {
		font-size: 16px;
		color: green;
		text-decoration: none;
	}
	a[target="_blank"]	{
		padding-right: 30px;
		background: url(images/newwindow.png) no-repeat center right;	
	}


</style>
</head>
<body>
	<h1>HTML5 표준안 사이트</h1>
	<ul>
		<li><a href="http://www.w3c.org/TR/html" target="_blank">HTML</a></li>
		<li><a href="https://www.w3.org/TR/selectors">CSS Selector Level 3</a></li>
		<li><a href="https://www.w3.org/TR/css3-mediaqueries">미디어쿼리</a></li>		
	</ul>
</body>
</html>

12/ attr3

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	ul {
	
	}
	li {
		display:inline;
		float: left;
		margin: 10px;
	}
	li a{
		padding: 5px 20px;
		font-size: 14px;
		color: green; 
		text-decoration: none;
	}
	.flat {
		background: blue;
		color: white;
	}
	[class ~="button"] {
		border: 2px solid black;
		box-shadow: rgba(0,0,0,0.4) 5px 5px;
	}
	
</style>
</head>
<body>
	<ul>
		<li><a href="#">메뉴 1</a></li>
		<li><a href="#">메뉴 2</a></li>
		<li><a href="#" class="button">메뉴 3</a></li>
		<li><a href="#" class="flat button" >메뉴 4</a></li>
	</ul>
</body>
</html>

12/ attr4

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	ul {
		list-style: none;
	}
	li {
		display:inline;
		float:left;
		margin: 10px;
	}
	li a {
		padding: 5px 10px;
		font-size: 14px;
		color: blue;
		text-decoration: none;
	}
	
	a[title |="us"] {
		/* 특정 값이 포함된 속성을 가진 요소를 찾아 스타일 적용 */
		background: url(images/us.png) no-repeat left center;
		padding: 5px 25px;
	}
	a[title |="jap"] {
		background: url(images/jp.png) no-repeat left center;
		padding: 5px 25px;
	}
</style>
</head>
<body>
	<ul>
		<li>외국어 서비스 : </li>
		<li><a href="#" title="us">영어</a></li>
		<li><a href="#" title="us-english">영어</a></li>
		<li><a href="#" title="jap-anese">일본어</a></li>
		<li><a href="#" title="japanese">일본어</a></li>
	</ul>
</body>
</html>

12/ attr5

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	ul {
		list-style: none;
	}	
	li {
		display: inline;
		float: left;
		margin: 10px;
	}
	li a {
		padding: 5px 20px;
		font-size: 14px;
		color: blue;
		text-decoration: none;
	}
	a[title ^="eng"] {
		background: url(images/us.png) no-repeat left center;
		padding: 5px 25px;
	}
	a[title ^="jap"] {
		background: url(images/jp.png) no-repeat left center;
		padding: 5px 25px;
	}
	a[title ^="chin"] {
		background: url(images/ch.png) no-repeat left center;
		padding: 5px 25px;
	}
	
</style>
</head>
<body>
	<ul>
		<li>외국어 서비스 : </li>
		<li><a href="#" title="english">영어</a></li>
		<li><a href="#" title="japanese">일본어</a></li>
		<li><a href="#" title=chinese">중국어</a></li>
	</ul>
</body>
</html>

12/ attr6

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	ul {
		list-style: square;
	}
	li a {
		line-height: 30px;
		font-size: 14px;
		color: blue; 
		text-decoration: none;
	}
	a[href $= "hwp"] {
		background: url(images/hwp_icon.gif) center right no-repeat;
		padding-right: 25px;
	}	
	a[href $= "xls"] {
		background: url(images/excel_icon.gif) center right no-repeat;
		padding-right: 25px;
	}	
	
		
</style>
</head>
<body>
	<h3>회사 소개 파일 다운 받기(확장자)</h3>
		<ul>
			<li><a href="intro.hwp">intro.hwp 파일</a></li>
			<li><a href="class301.hwp">class301 hwp 파일</a></li>
			<li><a href="intro.xls">엑셀 파일</a></li>
		</ul>
</body>
</html>

12/ attr7

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	UL {
		list-style: circle;
	}
	li {
		padding: 5px, 30px
	}
	li a {
		font-size: 16px;
		color: blue;
		text-decoration: none;
	}
	[href *="w3"] {
	 background: blue;
	 color:white;
	}
</style>
</head>
<body>
<h1>HTML5 참고 사이트  --> tag 중간  </h1>
	<p>(아래 링크 중 파란색 배경의 링크는 W3C 사이트로 연결됩니다.)</p>
	<ul>
		<li><a href="http://www.w3c.org/TR/html">HTML 표준안 사이트</a></li>
		<li><a href="http://www.webplatform.org">튜토리얼과 아티클</a></li>	
		<li><a href="http://caniuse.com">HTML 지원 여부 체크</a></li>
		<li><a href="http://www.w3c.org/TR/css3-mediaqueries">미디어쿼리</a></li>		
	</ul>
</body>
</html>

12/ nth
- 배운것: 2n(짝수), 2n+1(홀수)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	#container {
		text-align: center;
		color: #2b2b2b;
	}
	table {
		width: 200px;
		margin: 0 auto;
		border-collapse: collapse;
	}
	
	td {
		text-align: left;
		padding:10px;
		padding-left: 20px;
	}
	table tr:nth-child(2n+1){
		background: lightgray;
		color: black;
	}
	table tr:nth-child(2n){
		background: orange;
		color: blue;
	}
		 
</style>
</head>
<body>
	<div id="container">
		<h1>건강에 좋은 건강 식품</h1>
		<table border="1">
			<tr>
				<td>블루베리</td>
			</tr>
			<tr>
				<td>귀리</td>
			</tr>
			<tr>
				<td>토마토</td>
			</tr>
			<tr>
				<td>시금치</td>
			</tr>
			<tr>
				<td>적포도주</td>
			</tr>
			<tr>
				<td>견과류</td>
			</tr>
			<tr>
				<td>브로콜리</td>
			</tr>
			<tr>
				<td>연어</td>
			</tr>
			<tr>
				<td>마늘</td>
			</tr>
			<tr>
				<td>녹차</td>
			</tr>
		</table>
	</div>
</body>
</html>

12/ navi

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	.container{
		width: 960px;
		margin: 0 auto;
		background-color: #fff;
		border: 1px solid #E7E7E7;
	}
	header{
		height: 280px;
		margin: 0;
		background-image: url(images/header-bg.png);
		background-repeat: no-repeat;
		background-position: left top;
	}
	navi ul {
		list-style: none;
		height:40px;		
		padding-top: 10;
		padding-bottom: 5;
	}
	.navi ul li{
		display:inline;
		float:left;
	}
	.navi a:link, .navi a visited {
		padding: 10px 5px 5px 35px;
		display: block;
		color:navy;
		width: 150px;
		text-decoration: none;
	}
	.navi a:hover, .navi a:focus {
		text-shadow: 0px 2px 2px #000;
		color:orange; 
	}
	.navi a:active {
		color: red;
	}

</style>	
</head>
<body>
	<div class="container">
		<header> </header>
		<nav class="navi">
			<ul>
				<li><a href="#">이용 안내</a></li>
				<li><a href="#">객실 소개</a></li>
				<li><a href="#">예약 방법 및 요금</a></li>
				<li><a href="#">예약하기</a></li>
			</ul>
		</nav>
	</div>
</body>
</html>

수업교재

clear 속성

float 속성을 무효화 시키는 속성

float 속성

요소를 왼쪽이나 오른쪽에 떠 있게 만듦

1)margin 속성 값이 1개라면
à 네 방향 모두에 같은 값 적용
●
●
2)margin 속성 값이 2개라면
à 첫번째 값은 위아래, 두번째 값은 좌우 마진 값
●
●
3)margin 속성 값이 3개라면
à 빠진 값은 마주 보는 방향의 속성 값 사용
●
●
4)margin 속성 값이 4개라면
à top, right, bottom, left 순으로 적용

10-2)
<nav> 태그 – 내비게이션 링크
•같은 사이트 안의 문서나 다른 사이트의 문서로 연결하는 링크를 나타냄
•내비게이션 메뉴뿐만 아니라 푸터에 있는 사이트 링크 모음 부분에도 사용됨

<section> 태그 – 주제별 콘텐츠 영역
•웹 상의 실제 내용
•태그 적용 부분을 떼어내 독립적으로 배포하거나 재사용하더라도 완전히 하나의 콘텐츠

<aside> 태그 – 본문 이외의 내용

•본문 내용 외에 주변에 표시되는 기타 내용들
•필수 요소가 아니므로 광고나 링크 모음 등 문서의 메인 내용에 영향을 미치지 않는 내용들을 넣을 때 사용\\

11-1)

표준화된 시맨틱 태그를 이용해 웹 문서를 작성하면 어떤 기기에서도 문서 구조를 정확히 이해할 수 있다

11-2) 오디오 &비디오 재생하기

<audio> 태그

•배경 음악이나 효과음 등 오디오 재생
•대부분 브라우저에서 mp3 지원하므로 mp3 파일만 사용

사용자들의 브라우저 환경을 고려해서 최신 브라우저와 이전 브라우저에서 모두 재생할 수 있도록 여러 코덱의 파일을 함께 지정

12-1) 연결 선택자

연결 선택자: 선택자와 선택자를 연결해 적을 대상을 한정하는 선택자, 컴비네이션 선택자(combination selector): 또는 '조합 선택자' 라고도 함
하위 선택자
- 부모 요소에 포함된 모든 하위 요소에 스타일이 적용된다
- 자식 요소뿐만 아니라 손자 요소, 손자 요소 등 모든 하위 요소까지 적용
- 하위 선택자를 정의할 때는 상위 요소와 하위 요소를 나란히 씀
형제선택자
- 형제 요소들에 스타일 적용
- 인접 형제 선택자와 다른 점은 모든 형제 요소에 다 적용한다는 것
속성선택자: 지정한 속성을 가진 요소를 찾아 스타일 적용

12-3) 가상 클래스와 가상 요소

구조 가상 클래스
- :nth-child(n) : 앞에서부터 n번째 자식 요소에 스타일 적용
- :nth-last-child(n) : 뒤에서부터 n번째 자식 요소에 스타일 적용
- 위치를 나타낼 때 an+b 처럼 수식을 사용할 수도 있음. 이 때 n 값은 0부터.
$값: 특정 값으로 끝나는 속성을 가진 요소를 찾아 스타일 적용
*값: 값의 일부가 일치하는 속성을 가진 요소를 찾아 스타일 적용

인터렉티브] p37~123

'JSP > HTML' 카테고리의 다른 글

2024_06_17_월 (0)	2024.06.17
2024_06_14_금 (0)	2024.06.14
2024_06_13_목 (0)	2024.06.13

코딩일기

2024_06_18_화

오늘의 코딩

(폴더: WebStandard01)

수업교재

인터렉티브] p37~123

'JSP > HTML' 카테고리의 다른 글

티스토리툴바

2024_06_18_화

오늘의 코딩

(폴더: WebStandard01)

수업교재

인터렉티브] p37~123

'JSP > HTML' 카테고리의 다른 글

관련글

티스토리툴바