scratch pad
[Start Web Coding] provides a coding practice area so that you can code directly on the web without having to build a development environment
Use HTML coding, HTML, CSS, JavaScript, jQuery, and PHP coding on the web.
Please press the [Run] button below.
And try modifying the source.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>에버디벨 - HTML 예제 샘플</title>
</head>
<body>
<p>HTML을 사용해서 이렇게 글씨를 웹페이지에 띄울수 있어요.</p>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>에버디벨 - CSS 예제 샘플</title>
<style>
p{color:skyblue;font-size:30px;text-shadow:3px 3px 3px skyblue, 3px 3px 10px hotpink}
</style>
</head>
<body>
<p>CSS를 사용하면 이렇게 글씨를 아름답게 꾸밀수도 있지요.</p>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>에버디벨 - Java Script 예제 샘플</title>
<style>
p{color:skyblue;font-size:50px;text-shadow:3px 3px 3px skyblue, 3px 3px 10px hotpink}
</style>
<script>
window.onload = function () {
document.getElementsByTagName('p')[0].addEventListener("click", changeText);
function changeText() {
document.getElementsByTagName('p')[0].style.fontSize = '30px';
document.getElementsByTagName('p')[0].innerText = '자바스크립트를 사용하면 이렇게 클릭이벤트를 만들고 내용을 변경할 수 있습니다.';
}
}
</script>
</head>
<body>
<p>여기를 눌러보세요. </p>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>에버디벨 - jQuery 예제 샘플</title>
<style>
p{color:skyblue;font-size:50px;text-shadow:3px 3px 3px skyblue, 3px 3px 10px hotpink;position:absolute;left:0;top:0}
</style>
<script src="http://www.startwebcoding.co.kr/material/js/jquery-3.1.1.min.js?jsVer=1491485184"></script>
<script>
$(document).ready(function(){
$('p').animate({
top:100,
left:200
},function(){
$('p').animate({
top:50,
left:50
}, function(){
$('p').animate({
top:0,
left:20
});
$('p').css('font-size','30px');
});
});
});
</script>
</head>
<body>
<p>제이쿼리를 사용하면 자바스크립트보다 더욱 짧은 코드로 기능을 쉽게 구현할 수 있습니다.</p>
</body>
</html>
<?php
$word1 = "PHP는 서버사이드 언어로 화면 뒤에서 데이터베이스에 접근등 여러가지 일을 처리해요.";
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>에버디벨 - PHP 예제 샘플</title>
</head>
<body>
<p><?=$word1?></p>
</body>
</html>
