😀 html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
 div{
 	height: 50px;
 	border: 2px dotted blue;
 }
</style>

<script src="../js/outscript.js" type="text/javascript"></script>

</head>
<body>
 <input type="button" value="확인" onclick="proc1()">
 <br>
 <br>
 <p>버튼을 클릭하면 입력받아 출력한다</p>
 <div></div>
</body>
</html>

😀 javascript

 

/**
 * 
 */

proc1 = () =>{
   vinput = prompt("입력하세요");
   
   //div를 검색
   vdiv = document.getElementsByTagName('div')[0]

   vdiv.innerText = vinput;
   vdiv.innerHTML = vinput;
	
	/*
   var str;
   str = "<h1>" + vinput + "</h1>" ;
   
   var str =  "<h1>" + vinput + "</h1>" ;
   */

   str = "<h1>" + vinput + "</h1>" ;		 
   
   vdiv.innerHTML =str;
//   vdiv.innerText = str;
}
/*
proc1 = () =>{
	
}
function proc1(){
	
}
*/

😀 실행

 

'웹프로그래밍(HTML, CSS3, JavaScript)' 카테고리의 다른 글

[html] documentwrite  (0) 2022.12.29
[html/jsp] position위치  (0) 2022.12.27
[html/jsp] 리스트 연습  (0) 2022.12.27
[html/jsp] wordwrapping  (0) 2022.12.27
[html/jsp] table스타일  (0) 2022.12.27

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

	vinput = window.prompt("입력하세요");
	
	document.write("<h1>" + vinput + "</h1>"); /* 테스트용 실제론 사용하지 않음*/
	
</script>
</head>
<body>

</body>
</html>

😀 참고자료

😀 실행

'웹프로그래밍(HTML, CSS3, JavaScript)' 카테고리의 다른 글

[html/javascript] 외부스크립트 사용법  (0) 2022.12.29
[html/jsp] position위치  (0) 2022.12.27
[html/jsp] 리스트 연습  (0) 2022.12.27
[html/jsp] wordwrapping  (0) 2022.12.27
[html/jsp] table스타일  (0) 2022.12.27
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div{
	width : 100px;
	height: 100px;
	border: 2px solid blue;
	margin: 10px;
}
.d1{
	background : lightgreen;
}
.d2{
	background: lightblue;
}
.d3{
	background: pink;
}
.d4{
	background: orange;
}
#id2{
	position : relative;
	left : 80px;
	top : 50px;
}
#id3{
	position: absolute; /*body 기준 */
	top: 250px;
	left: 200px;
}
#id4{
	position: fixed;
 	top: 250px;
	right: 200px;
}
</style>
</head>
<body>
<div class="d1">d1</div>
<div class="d2">d2</div>
<div class="d3">d3</div>
<div class="d4">d4</div>
<hr>
<div class="d1">d1</div>
<div id="id2" class="d2">
id2 d2<br>
position : relative;<br>
left : 80px;<br>
top : 50px;<br>

</div>
<div class="d3">d3</div>
<div class="d4">d4</div>
<hr>
<div class="d1">d1</div>
<div id="id3" class="d2">
id3 d2<br>
position: absolute;<br>
top: 250px;<br>
left: 200px;<br>
</div>
<div class="d3">d3</div>
<div class="d4">d4</div>
<br>
<div class="d1">d1</div>
<div id="id4" class="d2">
id4 d2<br>
position: fixed;<br>
top: 250px;<br>
right: 200px;<br>
</div>
<div class="d3">d3</div>
<div class="d4">d4</div>

</body>
</html>

 😀 참고자료

 😀 실행

'웹프로그래밍(HTML, CSS3, JavaScript)' 카테고리의 다른 글

[html/javascript] 외부스크립트 사용법  (0) 2022.12.29
[html] documentwrite  (0) 2022.12.29
[html/jsp] 리스트 연습  (0) 2022.12.27
[html/jsp] wordwrapping  (0) 2022.12.27
[html/jsp] table스타일  (0) 2022.12.27
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
ul{
	border : 10px inset red;
	border-left : none;
	border-right : none;
	list-style-type : none;
	height : 50px;
	width : 70%;
	margin : 10px auto; /* 가운데 정렬 */
	
}
ul li{
	width : 200px;
	float : left;
	margin : 5px;
/*	border : 1px solid blue; */
	padding-left : 8%;
}
ul li a{ 
	font-size : 1.5em;
	text-transform : uppercase;
	text-decoration : none;
	letter-spacing : 5px;	
/*	border : 1px solid green;*/
}
ul li a:hover{
	text-decoration : underline;
}
</style>
</head>
<body>
<ul>
	<li><a href="#">home</a></li> <!-- 옆으로 display : inline float : left -->
	<li><a href="#">project</a></li>
	<li><a href="#">notice</a></li>
	<li><a href="#">qna</a></li>
</ul>
</body>
</html>

😀 참고자료

😀 실행

'웹프로그래밍(HTML, CSS3, JavaScript)' 카테고리의 다른 글

[html] documentwrite  (0) 2022.12.29
[html/jsp] position위치  (0) 2022.12.27
[html/jsp] wordwrapping  (0) 2022.12.27
[html/jsp] table스타일  (0) 2022.12.27
[html/jsp] border 스타일  (0) 2022.12.27
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
 div{
	border : 1px solid blue;
	width : 500px;
	word-wrap : break-word; 
}
</style>
<script>
function proc1(){
	//입력
	var vstr = prompt("입력하세요");
	
	// id=d1인 div요소에 추가
	
	// 부모요소.appendChild(자식요소)
	// 자식요소가 일반 문자열이 아니고 Objcet로 변환
	
	// 부모요소를 검색
	var vparent = document.getElementById('d1');
	
	// 일반문자열을 Object로 변화
	var vchild = document.createTextNode(vstr);
	
	// 추가
	vparent.appendChild(vchild);
}
</script>
</head>
<body>

<input type="button" value="확인" onclick="proc1()">
<br>
<br>
<div id="d1">
진달래(Rhododendron mucronulatum, 영어: Korean rhododendron 또는 Korean rosebay)는 진달래과에 속하는 낙엽활엽 관목이다. 한국·중국·일본·몽골 북부·우수리 등지에 분포한다. 중국 연변 조선족 자치주의 주화이자, 경기도 수원시와 중국 연길시의 시화이기도 하다.

<strong>2이름</strong>
꽃을 먹을 수 있고 약에도 쓸 수 있어서 참꽃이라고도 부른다.[1] 꽃 색깔이 붉은 것이 두견새가 밤새 울어 대 피를 토한 것이라는 전설 때문에 두견화(杜鵑花)라고도 한다. 간도지역의 재중동포들은 진달래를 천지꽃, 천지화라고도 부른다.[2]
<strong>3생태</strong>
산지의 양지쪽에서 자라며 높이는 2-3m이고 작은가지에 비늘조각이 있다. 잎은 어긋나고 긴 타원상 피침형 또는 도피침형이며, 양 끝이 좁고 가장자리가 밋밋하다. 표면에는 비늘조각이 약간 있고 뒷면에는 비늘조각이 밀생하며 털이 없다. 꽃은 4월에 잎보다 먼저 피고 가지 끝부분의 곁눈에서 1개씩 나오지만 2-5개가 모여달리기도 한다. 화관은 벌어진 깔때기형으로, 지름은 3-4.5cm, 자홍색에서 홍색을 띠고 겉에 털이 있으며 가장자리가 5개로 갈라진다. 수술은 10개이며 수술대 밑부분에 털이 있고 암술은 1개로, 수술보다 훨씬 길다. 열매는 원통형이며 길이 2cm 정도이다.[1] 10월에 짙은 갈색으로 익는데, 다 익으면 다섯 갈래로 터지며, 겉에 비늘 조각이 빽빽하게 난다.[3]

한국에서 가장 큰 진달래 노거수는 가지산 중봉 해발 1100미터 고지에 있는 천연기념물로 지정되어 있는 철쭉나무 노거수 군락지에서 발견되었는데, 키가 3.5m, 땅에 접한 부위의 둘레가 91cm에 달한다.[4] 한국의 대표적인 진달래 군락지는 인천시 강화군의 고려산, 전남 여수시의 영취산, 충남 당진시의 아미산에 있다.[4]

<strong>4변종과 품종</strong>
백색 꽃이 피는 것을 흰진달래(R. mucronulatum for. albiflorum (Nakai) Okuyama)라고 한다. aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
</body>
</html>

😀 참고자료

😀 실행

'웹프로그래밍(HTML, CSS3, JavaScript)' 카테고리의 다른 글

[html/jsp] position위치  (0) 2022.12.27
[html/jsp] 리스트 연습  (0) 2022.12.27
[html/jsp] table스타일  (0) 2022.12.27
[html/jsp] border 스타일  (0) 2022.12.27
[html/jsp] text스타일  (0) 2022.12.27

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
table{
	border : 3px solid blue;
	margin : 20px;
}
td{
	width : 200px;
	height : 50px;
	text-align : center;
}
th{
	height : 50px;
	background-color : lightgreen;
}
table#tab1{
	border-collapse : collapse;
}
table#tab2{
	border-spacing: 10px;
	/*empty-cells : hide; */
}
</style>
</head>
<body>
<table id = "tab1" border="1">

	<tr>
		<th>제목1</th>
		<th>제목2</th>
		<th>제목3</th>
	</tr>
	
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
	</tr>
	
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
	</tr>
</table>

<table id = "tab2" border="1">
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
	</tr>
	
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
	</tr>
	
	<tr>
		<td>1</td>
		<td>2</td>
		<td></td>
	</tr>
</table>
</body>
</html>

😀 참고자료

 

😀 실행

'웹프로그래밍(HTML, CSS3, JavaScript)' 카테고리의 다른 글

[html/jsp] 리스트 연습  (0) 2022.12.27
[html/jsp] wordwrapping  (0) 2022.12.27
[html/jsp] border 스타일  (0) 2022.12.27
[html/jsp] text스타일  (0) 2022.12.27
[html/jsp] 리스트스타일  (0) 2022.12.27
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
div{
	margin : 20px;
	padding : 20px;
	border : 1px solid blue;
	width : 50%;
}
#d1{
	border-color : red;
	background-color : coral;
	box-shadow: 30px 10px 25px yellow; /* horizontal, vertical, blur(숫자 높을수록 더 흐려짐), color */
	
}
#d2{
	border-style : dotted;
}
#d3{
	border-width : 5px;
	border-style : double solid;
}
#d4{
	border-width : 3px 10px;
	border-style : dotted solid double dashed;
}
#d5{
	border-color : red green;
}
#d6{
	border-width : 10px;
	border-color : red;
	border-style : inset;
}
#d7{
	border-width : 10px;
	border-color : red;
	border-style : outset;
}
#d8{
	border-width : 20px;
	border-color : red;
	border-style : groove;
}
#d9{
	border-width : 20px;
	border-color : red;
	border-style : ridge;
}
#d10{
	border-width : 1px thin 5px thick;
	border-color : green;
	border-style : solid;
}
#d11{
	border-width : 10px 5px medium thick;
	display : none;
}
#d12{
	visibility : hidden; /* 숨겨지지만 공간차지 */
}

</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
<div id="d5"></div>
<div id="d6"></div>
<div id="d7"></div>
<div id="d8"></div>
<div id="d9">d9</div>
<div id="d10">d10</div>
<div id="d11">d11</div>
<div id="d12">d12</div>
</body>
</html>

😀 참고자료

😀 실행

'웹프로그래밍(HTML, CSS3, JavaScript)' 카테고리의 다른 글

[html/jsp] wordwrapping  (0) 2022.12.27
[html/jsp] table스타일  (0) 2022.12.27
[html/jsp] text스타일  (0) 2022.12.27
[html/jsp] 리스트스타일  (0) 2022.12.27
[html/jsp] 백그라운드이미지  (0) 2022.12.27
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div{
	border : 3px solid pink;
	margin : 20px;
	padding :  10px;
}
#d1{
	text-indent : 50px; /* text-indent : 들여쓰기(양수) 내어쓰기(음수) */
	letter-spacing : 15px;
}
#d2{
	line-height : 40px;
}
#d3{
	text-align : right;
	text-decoration : underline;
}
h1#d4{
	text-shadow : 50px 20px 5px red /* 3번째 : 흐리게 */
}
#h1{
	text-transform : uppercase; /* text-transform은 대문자로 또는 소문자로 바꾸는 속성/ 모두 대문자 */
}
#h2{
	text-transform : lowercase; /* 모두 소문자 */
}
#h3{
	text-transform : capitalize; /*앞글자만 대문자 */
}
textarea{
	direction : rtl;
	font-size : 1.5em;
}
</style>
</head>
<body>
<textarea rows="5" cols="50"></textarea>
<br>
<h1 id="h1">Merry Christmas!!! Happy New Year</h1>
<h1 id="h2">Merry Christmas!!! Happy New Year</h1>
<h1 id="h3">Merry Christmas!!! Happy New Year</h1>
<h1 id= "d4">무궁화 꽃이 피었습니다</h1>
<div id = "d1">
진달래(Rhododendron mucronulatum, 영어: Korean rhododendron 또는 Korean rosebay)는 진달래과에 속하는 낙엽활엽 관목이다. 한국·중국·일본·몽골 북부·우수리 등지에 분포한다. 중국 연변 조선족 자치주의 주화이자, 경기도 수원시와 중국 연길시의 시화이기도 하다.

<strong>2이름</strong>
꽃을 먹을 수 있고 약에도 쓸 수 있어서 참꽃이라고도 부른다.[1] 꽃 색깔이 붉은 것이 두견새가 밤새 울어 대 피를 토한 것이라는 전설 때문에 두견화(杜鵑花)라고도 한다. 간도지역의 재중동포들은 진달래를 천지꽃, 천지화라고도 부른다.[2]
<strong>3생태</strong>
산지의 양지쪽에서 자라며 높이는 2-3m이고 작은가지에 비늘조각이 있다. 잎은 어긋나고 긴 타원상 피침형 또는 도피침형이며, 양 끝이 좁고 가장자리가 밋밋하다. 표면에는 비늘조각이 약간 있고 뒷면에는 비늘조각이 밀생하며 털이 없다. 꽃은 4월에 잎보다 먼저 피고 가지 끝부분의 곁눈에서 1개씩 나오지만 2-5개가 모여달리기도 한다. 화관은 벌어진 깔때기형으로, 지름은 3-4.5cm, 자홍색에서 홍색을 띠고 겉에 털이 있으며 가장자리가 5개로 갈라진다. 수술은 10개이며 수술대 밑부분에 털이 있고 암술은 1개로, 수술보다 훨씬 길다. 열매는 원통형이며 길이 2cm 정도이다.[1] 10월에 짙은 갈색으로 익는데, 다 익으면 다섯 갈래로 터지며, 겉에 비늘 조각이 빽빽하게 난다.[3]

한국에서 가장 큰 진달래 노거수는 가지산 중봉 해발 1100미터 고지에 있는 천연기념물로 지정되어 있는 철쭉나무 노거수 군락지에서 발견되었는데, 키가 3.5m, 땅에 접한 부위의 둘레가 91cm에 달한다.[4] 한국의 대표적인 진달래 군락지는 인천시 강화군의 고려산, 전남 여수시의 영취산, 충남 당진시의 아미산에 있다.[4]

<strong>4변종과 품종</strong>
백색 꽃이 피는 것을 흰진달래(R. mucronulatum for. albiflorum (Nakai) Okuyama)라고 한다.
</div>

<div id = "d2">
진달래(Rhododendron mucronulatum, 영어: Korean rhododendron 또는 Korean rosebay)는 진달래과에 속하는 낙엽활엽 관목이다. 한국·중국·일본·몽골 북부·우수리 등지에 분포한다. 중국 연변 조선족 자치주의 주화이자, 경기도 수원시와 중국 연길시의 시화이기도 하다.

<strong>2이름</strong>
꽃을 먹을 수 있고 약에도 쓸 수 있어서 참꽃이라고도 부른다.[1] 꽃 색깔이 붉은 것이 두견새가 밤새 울어 대 피를 토한 것이라는 전설 때문에 두견화(杜鵑花)라고도 한다. 간도지역의 재중동포들은 진달래를 천지꽃, 천지화라고도 부른다.[2]
<strong>3생태</strong>
산지의 양지쪽에서 자라며 높이는 2-3m이고 작은가지에 비늘조각이 있다. 잎은 어긋나고 긴 타원상 피침형 또는 도피침형이며, 양 끝이 좁고 가장자리가 밋밋하다. 표면에는 비늘조각이 약간 있고 뒷면에는 비늘조각이 밀생하며 털이 없다. 꽃은 4월에 잎보다 먼저 피고 가지 끝부분의 곁눈에서 1개씩 나오지만 2-5개가 모여달리기도 한다. 화관은 벌어진 깔때기형으로, 지름은 3-4.5cm, 자홍색에서 홍색을 띠고 겉에 털이 있으며 가장자리가 5개로 갈라진다. 수술은 10개이며 수술대 밑부분에 털이 있고 암술은 1개로, 수술보다 훨씬 길다. 열매는 원통형이며 길이 2cm 정도이다.[1] 10월에 짙은 갈색으로 익는데, 다 익으면 다섯 갈래로 터지며, 겉에 비늘 조각이 빽빽하게 난다.[3]

한국에서 가장 큰 진달래 노거수는 가지산 중봉 해발 1100미터 고지에 있는 천연기념물로 지정되어 있는 철쭉나무 노거수 군락지에서 발견되었는데, 키가 3.5m, 땅에 접한 부위의 둘레가 91cm에 달한다.[4] 한국의 대표적인 진달래 군락지는 인천시 강화군의 고려산, 전남 여수시의 영취산, 충남 당진시의 아미산에 있다.[4]

<strong>4변종과 품종</strong>
백색 꽃이 피는 것을 흰진달래(R. mucronulatum for. albiflorum (Nakai) Okuyama)라고 한다.
</div>

<div id = "d3">
진달래(Rhododendron mucronulatum, 영어: Korean rhododendron 또는 Korean rosebay)는 진달래과에 속하는 낙엽활엽 관목이다. 한국·중국·일본·몽골 북부·우수리 등지에 분포한다. 중국 연변 조선족 자치주의 주화이자, 경기도 수원시와 중국 연길시의 시화이기도 하다.

<strong>2이름</strong>
꽃을 먹을 수 있고 약에도 쓸 수 있어서 참꽃이라고도 부른다.[1] 꽃 색깔이 붉은 것이 두견새가 밤새 울어 대 피를 토한 것이라는 전설 때문에 두견화(杜鵑花)라고도 한다. 간도지역의 재중동포들은 진달래를 천지꽃, 천지화라고도 부른다.[2]
<strong>3생태</strong>
산지의 양지쪽에서 자라며 높이는 2-3m이고 작은가지에 비늘조각이 있다. 잎은 어긋나고 긴 타원상 피침형 또는 도피침형이며, 양 끝이 좁고 가장자리가 밋밋하다. 표면에는 비늘조각이 약간 있고 뒷면에는 비늘조각이 밀생하며 털이 없다. 꽃은 4월에 잎보다 먼저 피고 가지 끝부분의 곁눈에서 1개씩 나오지만 2-5개가 모여달리기도 한다. 화관은 벌어진 깔때기형으로, 지름은 3-4.5cm, 자홍색에서 홍색을 띠고 겉에 털이 있으며 가장자리가 5개로 갈라진다. 수술은 10개이며 수술대 밑부분에 털이 있고 암술은 1개로, 수술보다 훨씬 길다. 열매는 원통형이며 길이 2cm 정도이다.[1] 10월에 짙은 갈색으로 익는데, 다 익으면 다섯 갈래로 터지며, 겉에 비늘 조각이 빽빽하게 난다.[3]

한국에서 가장 큰 진달래 노거수는 가지산 중봉 해발 1100미터 고지에 있는 천연기념물로 지정되어 있는 철쭉나무 노거수 군락지에서 발견되었는데, 키가 3.5m, 땅에 접한 부위의 둘레가 91cm에 달한다.[4] 한국의 대표적인 진달래 군락지는 인천시 강화군의 고려산, 전남 여수시의 영취산, 충남 당진시의 아미산에 있다.[4]

<strong>4변종과 품종</strong>
백색 꽃이 피는 것을 흰진달래(R. mucronulatum for. albiflorum (Nakai) Okuyama)라고 한다.
</div>

<div id = "d4">
진달래(Rhododendron mucronulatum, 영어: Korean rhododendron 또는 Korean rosebay)는 진달래과에 속하는 낙엽활엽 관목이다. 한국·중국·일본·몽골 북부·우수리 등지에 분포한다. 중국 연변 조선족 자치주의 주화이자, 경기도 수원시와 중국 연길시의 시화이기도 하다.

<strong>2이름</strong>
꽃을 먹을 수 있고 약에도 쓸 수 있어서 참꽃이라고도 부른다.[1] 꽃 색깔이 붉은 것이 두견새가 밤새 울어 대 피를 토한 것이라는 전설 때문에 두견화(杜鵑花)라고도 한다. 간도지역의 재중동포들은 진달래를 천지꽃, 천지화라고도 부른다.[2]
<strong>3생태</strong>
산지의 양지쪽에서 자라며 높이는 2-3m이고 작은가지에 비늘조각이 있다. 잎은 어긋나고 긴 타원상 피침형 또는 도피침형이며, 양 끝이 좁고 가장자리가 밋밋하다. 표면에는 비늘조각이 약간 있고 뒷면에는 비늘조각이 밀생하며 털이 없다. 꽃은 4월에 잎보다 먼저 피고 가지 끝부분의 곁눈에서 1개씩 나오지만 2-5개가 모여달리기도 한다. 화관은 벌어진 깔때기형으로, 지름은 3-4.5cm, 자홍색에서 홍색을 띠고 겉에 털이 있으며 가장자리가 5개로 갈라진다. 수술은 10개이며 수술대 밑부분에 털이 있고 암술은 1개로, 수술보다 훨씬 길다. 열매는 원통형이며 길이 2cm 정도이다.[1] 10월에 짙은 갈색으로 익는데, 다 익으면 다섯 갈래로 터지며, 겉에 비늘 조각이 빽빽하게 난다.[3]

한국에서 가장 큰 진달래 노거수는 가지산 중봉 해발 1100미터 고지에 있는 천연기념물로 지정되어 있는 철쭉나무 노거수 군락지에서 발견되었는데, 키가 3.5m, 땅에 접한 부위의 둘레가 91cm에 달한다.[4] 한국의 대표적인 진달래 군락지는 인천시 강화군의 고려산, 전남 여수시의 영취산, 충남 당진시의 아미산에 있다.[4]

<strong>4변종과 품종</strong>
백색 꽃이 피는 것을 흰진달래(R. mucronulatum for. albiflorum (Nakai) Okuyama)라고 한다.
</div>

</body>
</html>

😀 실행

'웹프로그래밍(HTML, CSS3, JavaScript)' 카테고리의 다른 글

[html/jsp] table스타일  (0) 2022.12.27
[html/jsp] border 스타일  (0) 2022.12.27
[html/jsp] 리스트스타일  (0) 2022.12.27
[html/jsp] 백그라운드이미지  (0) 2022.12.27
[html/jsp] 백그라운드  (0) 2022.12.27

+ Recent posts