html 기초 강의 3

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