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 는 키 발급을 받아야 사용할 수 있다.
- 키를 발급받기 위해서는 카카오 계정이 필요하다.
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>
'HTML CSS JS' 카테고리의 다른 글
| DAY31, 32 - 페이지 만들기 코드 복습 - reset.css (0) | 2024.08.18 |
|---|---|
| DAY 31 - 페이지 만들기1 (2024.08.14) DAY 32 - 페이지 만들기2 (2024.08.16) (0) | 2024.08.16 |
| DAY 30 - CSS - hidden / visible / scroll / auto / transform / transition (0) | 2024.08.13 |
| DAY 29 - CSS - 박스 / 테두리 / Position / float / inline / inline-block (2024.08.12) (0) | 2024.08.12 |
| DAY 28 - CSS (2024.08.09) (0) | 2024.08.09 |
