1. 그림 그리기
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
Your browser does not support the HTML5 canvas tag.
</canvas>
2. 구글맵
<div id="map" style="width:400px;height:400px;background:yellow"></div>
<script>
function myMap() {
var mapOptions = {
center: new google.maps.LatLng(51.5, -0.12),
zoom: 10,
mapTypeId: google.maps.MapTypeId.HYBRID
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=myMap"></script>
<!--
To use this code on your website, get a free API key from Google.
Read more at: https://www.w3schools.com/graphics/google_maps_basic.asp
-->
//////////////////////////////////////////////////////////////////////////////////////////
<div id="map" style="width:400px;height:400px;"></div>
<script>
function myMap() {
var mapOptions = {
center: new google.maps.LatLng(51.5, -0.12),
zoom: 10,
mapTypeId: google.maps.MapTypeId.HYBRID
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
}
</script>
3. 링크
/* 링크 방문 전 */
a:link {
color: red;
}
/* 링크 방문 후 */
a:visited {
color: green;
}
/* 마우스를 갖다 대었을 때 */
a:hover {
color: hotpink;
}
/* 마우스로 클릭 했을 때 */
a:active {
color: blue;
}
4. javascript
1. 클릭하면 시간 나옴
<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click</button>
<p id="demo"></p>
출처 : https://www.w3schools.com/css/css_link.asp