5월 31일 퇴사 후, 오늘부터 강의를 듣기로 하여 오랜만에 다시 티스토리 블로그를 시작하려 한다.
원하는 CSS 색 쉽게 찾는 방법
CSS Gradient — Generator, Maker, and Background
As a free css gradient generator tool, this website lets you create a colorful gradient background for your website, blog, or social media profile.
cssgradient.io
원하는 웹/ 모바일 템플릿 찾는 방법
http://www.gdweb.co.kr
www.gdweb.co.kr
SVG란?
(Scalable Vector Graphics)
쉽게 말하면 이미지마다 점을 찍어 이미지로 나타낸 것
2차원 벡터 그래픽을 표현하기 위한 XML 기반 마크업 언어
알람창 띄우기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Message box</title>
<style>
.outBox{
width: 300px;
height: 150px;
background-color: pink;
position:absolute;
left: 100px; top:100px;
text-align: center;
border-radius: 10px;
box-shadow: 5px 3px 4px rgba(0,0, 220,0.4);
}
h3{
font-size: 20px;
margin-top: 50px;
/* 글자 높낮이 조절 */
}
.inBox{
position: absolute;
/* 첫번째로 가져감 포지션으로 위치 변경 다음으로 display */
left: 50%;
/* 2. absolute 하면 무조건 left가 따라와야함!! */
transform: translate(-50%,0);
/* 3. transform은 크기만큼을 땡기는 것 */
width: 20%;
height: 15%;
background-color: red;
color: white;
font-weight: bold;
border-radius: 5px;
box-shadow: 1px 2px 3px rgba(200,0,0);
}
</style>
</head>
<body>
<div class="outBox">
<h3>Important Message!</h3>
<div class="inBox">Close</div>
</div>
</body>
</html>
무의미한 한글 텍스트 생성기
한글입숨 - 무의미한 한글 텍스트 생성기
한글판 로렘입숨. 무의미한 한글 텍스트를 생성해 줍니다.
hangul.thefron.me
Visual Studio Code에서 자동 줄맞춤을 하는 방법은 WIndows 기준으로 · Ctrl + A로 전체 코드 선택 후
Ctrl + K + F 을 누르면 자동으로 줄 맞춤이 된다.
초대장 만들기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>invite</title>
<style>
.outBox {
width: 600px;
height: 300px;
position: absolute;
left: 50px;
top: 50px;
text-align: center;
border-radius: 10px;
box-shadow: 5px 3px 4px rgba(0, 0, 220, 0.4);
}
div {
box-shadow: 5px 3px 4px rgba(0, 0, 220, 0.4);
background-color: yellow;
}
.villageBox {
width: 100%;
height: 80%;
/* 박스 안에서 60% 높이 만큼 가져가겠다 */
background-color: blue;
}
h3 {
font-size: 20px;
margin-top: 20px;
/* 글자 높낮이 조절 */
text-align: center;
}
</style>
</head>
<body>
<div class="outBox">
<img class="villageBox" src="./img/village01.png" alt="village image">
<!-- alt 습관은 무조건 들여야 함!! 전세계적인 약속!! -->
<h3>초대합니다!</h3>
</div>
</body>
</html>
이미지를 클릭하면 네이버 페이지로 넘어가게 하는 방법
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>image</title>
<style>
div{
width: 400px;
height: 400px;
text-align:center;
background-color: rgb(16, 235, 162);
box-shadow: 5px 3px 4px rgba(0, 0, 220, 0.4);
}
img{
width: 300px;
height: 300px;
background-color: blue;
border-radius: 50%;
}
img:hover{
filter:brightness(150%);
/* 밝아져라! */
cursor: pointer;
/* 마찬가지로 마우스가 올라갔을때인데 마우스모양이 손가락 모양으로 변함 */
}
</style>
</head>
<body>
<div>
<h1>image</h1>
<a href="http://www.naver.com">
<img src="./img/top01.png" alt="paris image">
</a>
</div>
</body>
</html>'Javascript' 카테고리의 다른 글
| DOM 개념 간단 정리 / 짝수 판별 / 점수 분류 / 계절 판별 / 로그인 판독 문제 (0) | 2023.06.13 |
|---|---|
| Visual Studiocode로 javascipt로 나머지를 구하는 프로그램 만들기 기초 1 (0) | 2023.06.12 |
| [javascript] 키워드 정리 Property 프로퍼티 속성의 개념 (0) | 2022.05.08 |
| 자바스크립트 기초 (0) | 2022.05.08 |
| 자바스크립트 기초 개념 정리 (0) | 2022.05.08 |
