DAY 31 - CSS - cssShadowCursor / map (2024.08.14)

HTML CSS JS

DAY 31 - CSS - cssShadowCursor / map (2024.08.14)

summ.n 2024. 8. 14. 17:37

text-shadow: offset-x offset-y blur-radius color | none | initial | inherit

offset-x

: 그림자의 수평 거리를 정합니다. (필수)

offset-x의 값을 증가시키면 그림자의 위치가 오른쪽으로 이동합니다.

offset-y

: 그림자의 수직 거리를 정합니다. (필수)

offset-y의 값을 증가시키면 그림자의 위치가 아래로 이동합니다.

blur-radius

: 흐림 정도를 정합니다. (선택 : 값을 정하지 않으면 0)

blur-radius의 값을 증가시키면 그림자가 흐려집니다.

color

: 색을 정합니다. (선택 : 값을 정하지 않으면 브라우저 기본값)

none

: 글림자 효과를 없앱니다.

initial

: 기본값으로 설정합니다.

inherit

: 부모 요소의 속성값을 상속받습니다.

Folder : 07_cssShadowCursor

exam01.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div {
	font: normal 24px Verdana;
}
.dropText {
	text-shadow: 3px 3px;
}

.redText {
	text-shadow: 3px 3px red;
}
.blurText {
	text-shadow: 3px 3px 5px skyblue;
}

.glowEffect {
	text-shadow: 0px 0px red;
}

.wordArtEffect{
	color: white;
	text-shadow: 0px 0px 3px darkblue;
}

.threeDEffect{
	color: white;
	text-shadow: 2px 2px 4px black;
}

.multiEffect{
	color: yellow;
	text-shadow: 2px 2px 2px blue,
				 0 0 25px blue,
				 0 0 5px darkblue;	              
}

</style>
</head>
<body>
	<h3>텍스트 그림자 만들기</h3>
	<hr>
	<div class="dropText">Drop Shadow</div>
	<div class="redText">Color Shadow</div>
	<div class="blurText">Blur Shadow</div>
	<div class="glowEffect">Glow Effect</div>
	<div class="wordArtEffect">WordArt Effect</div>
	<div class="threeDEffect">3D Effect</div>
	<div class="multiEffect">Multiple Shadow Effect</div>
</body>
</html>

exam02.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div{
	width: 150px;
	height: 70px;
	padding: 10px;
	border: 10px solid gold;
	background-image: url("../image/spongebob.png");
	background-size: 150px 100px; /* width(너비) height(높이) */
	background-repeat: no-repeat;
	background-position: center;
}

.redBox {
	box-shadow: 10px 10px red;
}

.blurBox{
	box-shadow: 10px 10px 5px skyblue;
}
.multiEffect{
	box-shadow: 2px 2px 2px black,
	            0 0 25px blue,
	            0 0 5px darkblue;
}
</style>
</head>
<body>
	<h3>박스 그림자 만들기</h3>
	<hr>
	<div class="redBox">뚱이와 함께</div><br>
	<div class="blurBox">뚱이와 함께</div><br>
	<div class="multiEffect">뚱이와 함께</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h3>마우스 커서</h3>
	아래에 마우스를 올려 보세요. 커서가 변합니다.
	<hr>
	<p style="cursor: crosshair;">십자 모양 커서</p>
	<p style="cursor: help;">도움말 모양 커서</p>
	<p style="cursor: pointer;">포인터 모양 커서</p>
	<p style="cursor: progress;">프로그램 실행 중 모양 커서</p>
	<p style="cursor: n-resize;">상하 크기 조절 모양 커서</p>
</body>
</html>

@keyframes

@keyframes로 어떤 모양에서 어떤 모양으로 변할지를 지정한다.

IE는 버전 10 이상에서 사용할 수 있다.

@keyframes name {

0% { ... }

n% { ... }

100% { ... }

}

name : 애니메이션의 이름을 정합니다.

0% : 시작할 때의 모양을 정합니다. 0% 대신 from을 사용해도 됩니다.

n% : n% 일 때의 모양을 정합니다.

100% : 끝날 때의 모양을 정합니다. 100% 대신 to를 사용해도 됩니다.

Folder : 07_cssDynamic

exam01.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
@keyframes bomb {
	from {font-size: 500%;}
	to{font-size: 100%;}
}

h3{
	animation-name: bomb;
	animation-duration: 3s;
	animation-iteration-count: infinite;
}

</style>
</head>
<body>
	<h3>꽝!</h3>
	<hr>
	<p>꽝! 글자가 3초동안 500%에서 시작하여 100%로 바뀌는 애니메이션입니다. 무한 반복합니다.</p>
</body>
</html>

exam02.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
span {
	transition: font-size 5s ease;
}

span:hover {
	font-size: 500%;
	color: red;
}

</style>
</head>
<body>
	<h3>font-size에 대한 전환</h3>
	<hr>
	<p><span>꽝!</span>글자에 마우스를 올려보세요.</p>
</body>
</html>

transition

시간의 흐름을 줘서 부드럽게 확대되도록 설정한다.

ease : 기본값, 느리게 시작해서 빠르게 전환한 다음 다시 천천히 종료

linear : 처음부터 끝까지 같은 속도로 전환

rotate()

: 해당 요소를 주어진 각도만큼 시계 방향(양수)이나 반시계 방향(음수)으로 회전시킨다.

skew()

: 해당 요소를 주어진 각도만큼 각각 x축과 y축 방향으로 기울인다

translate

: 현재 위치에서 해당 요소를 주어진 x축과 y축의 거리만큼 이동시킨다

주어진 거리가 양수이면 해당 축의 양의 방향으로, 음수이면 해당 축의 음의 방향으로 이동

scale()

: 해당 요소의 크기를 주어진 배율만큼 늘리거나 줄인다.

주어진 배율이 1보다 크면 크기를 늘리고, 0보다 크고 1보다 작으면 크기를 줄인다

exam03.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div{
	display: inline-block;
	padding: 5px;
	color: white;
	background: olivedrab;
}

/* 변환 */
div#rotate{
	transform: rotate(20deg);
}

div#skew{
	transform: skew(0deg, -20deg);
}

div#translate{
	transform: translateY(100px);
}
div#scale{
	transform: scale(3, 1);
}

/* 마우스를 올릴 때 추가 변환 */
div#rotate:hover{
	transform: rotate(80deg);
}

div#skew:hover{
	transform: skew(0deg, -60deg);
}

div#translate:hover{
	transform: translate(50px, 100px);
}
div#scale:hover{
	transform: scale(4, 2);
}

/* 마우스를 누를 때 변화 - y축 방향으로 5 */
div#scale:active {
	transform: scale(1, 5);
}
</style>
</head>
<body>
	<h3>다양한 Transform</h3>
	아래는 회전(rotate), 기울임(skew), 이동(translate), 확대/축소(scale)가 적용된 사례이다.
	또한 마우스를 올리면 추가적 변환이 일어난다.
	<hr>
	<div id="rotate">rotate(20deg)</div>
	<div id="skew">skew(0, -20deg)</div>
	<div id="translate">translate(100deg)</div>
	<div id="scale">scale(3, 1)</div>
</body>
</html>

/* 마우스를 올릴 때 추가 변환 */

/* 마우스를 누를 때 변화 - y축 방향으로 5 */

지도

- Javscript API 는 키 발급을 받아야 사용할 수 있다.

- 키를 발급받기 위해서는 카카오 계정이 필요하다.

https://developers.kakao.com/

Kakao Developers

카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.

developers.kakao.com

1. 뷰포트 선언

<meta name="viewport"

2. 컨텐트 선언

content="width=device-width (디바이스 크기에 맞추겠다고 선언)

initial-scale=1.0 (초기 크기 스케일 설정)

minimum-scale=1.0 (최소 크기 설정 / 범위: 0~10.0)

maximum-scale=1.0 (최대 크기 설정 / 범위: 0~10.0)

user-scalable=no (사용자 기기 확대기능 사용 유/무 설정, yes/no)

Kakao Maps API

다양한 기능과 소스를 알려준다

https://apis.map.kakao.com/web/sample/enableDisableZoomInOut/

지도 생성 샘플

https://apis.map.kakao.com/web/documentation/

↓

[지도 생성하기 샘플보기] 클릭

Folder: 09_map

exam01.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
html{
	height: 100%;
}

body{
	height: 100%; 
	margin: 0; 
	padding: 0;
}

#map{
	width: 100%; 
	height: 100%;
}

</style>
</head>
<body>
	<div id="map"></div>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appKey="></script>
<script type="text/javascript">
window.onload=function(){
	var position= new daum.maps.LatLng( 37.49940065922884, 127.02901856459081 );
	var container = document.getElementById("map");
	var options = {
			center: position, //중심 좌표
			level: 3 //지도의 확대 레벨 (기본값 : 3)
	}
	var map = new daum.maps.Map(container, options); //지도 생성
	
	var market = new daum.maps.Marker({
			position: position
	});
	
	marker.setMap(map); //마커 표시
}
</script>
</body>
</html>

[구글 맵] 검색

1. https://www.google.co.kr/maps/@45.2000678,17.2800773,5z?hl=ko

2. 경복궁 검색

3. 三 클릭

4. 지도 공유 또는 퍼가기

5. 지도 퍼가기(탭)

exam02.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
html{
	height: 100%;
}

body{
	height: 100%; 
	margin: 0; 
	padding: 0;
}

</style>
</head>
<body>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12647.396193089386!2d126.98441116977536!3d37.58217209999999!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x357ca2d6c2b8241f%3A0x60693493018e331f!2z7LC9642V6raBIO2bhOybkA!5e0!3m2!1sko!2skr!4v1723620027281!5m2!1sko!2skr" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</body>
</html>