안녕하세요:)
오늘은 아스키코드를 활용해 페이지안에 랜덤 글자를 설정하는 방법을 알려드리겠습니다.
<조건>
1.대문자 65- 90 소문자 97-122
2.화면에 영문자를 200개 출력하시오.
3.크기는 10px~ 150px까지
4.컬러는 랜덤 rgb(0~255,0~255,0~255)
<설명>
1.대문자 65- 90 소문자 97-122
시작하기 전에 알아야 할 부분은 아스키코드 표입니다.
보시는 것처럼 모든 문자에 대해 8자리의 2진형태로 표기화한 것을 보실 수 있습니다.
대문자는 65번부터 90번까지, 소문자는 97번부터 122번까지 설정되어 있습니다.
https://www.vlsifacts.com/ascii-code/
ASCII Code
ASCII codes are alphanumeric codes that represent numbers, alphabets, symbols and special characters in computers. ASCII stands for American Standard Code for Information Interchange. Whenever we p…
www.vlsifacts.com
예를들어, vscode에서 해당 코드를 치시면 A를 불러오게 됩니다.
String.fromCharCode(65)
다음으로 대문자와 소문자 번호를 랜덤값으로 변수 지정
let Upper = Math.floor(Math.random() *90 - 65 +1) +10;
let Lower = Math.floor(Math.random() *122 -97 +1) + 97;
그 값을
document.write('<p class="abcBox" style="top:'+locY+'px; left:'+ locX+ 'px; font-size:' +fontSize+'px;">A</p>');
2.
나라별 국기 그리기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>나라별 국기</title>
<style>
/* 타이, 마다가스카르, 라오스, 스웨덴, 그리스, 체코, 스위스, 영국 */
/* css에서 요소를 원하는 위치에 배치하고 싶을 때 positon을 사용할 수 있다. */
/* value: static, absolute, relative, fixed */
.Thailand {
background-color: red;
width: 400px;
height: 250px;
display: inline-block;
justify-content: center;
align-items: center;
}
.Thailand1 {
background-color: red;
width: 400px;
height: 50px;
}
.Thailand2 {
background-color: white;
width: 400px;
height: 50px;
}
.Thailand3 {
background-color: purple;
width: 400px;
height: 80px;
}
.madar1 {
border: 1px solid red;
background-color: white;
width: 300px;
height: 200px;
display: inline-block;
}
.madar2 {
background-color: red;
width: 200px;
height: 100px;
float: right;
}
.madar3 {
background-color: green;
width: 200px;
height: 100px;
float: right;
}
.laos1 {
background-color: green;
width: 300px;
height: 150px;
}
.laos2 {
background-color: red;
width: 300px;
height: 50px;
}
.laos3 {
background-color: blue;
display: flex;
justify-content: center;
width: 300px;
height: 50px;
}
.laos4 {
background-color: white;
width: 40px;
height: 40px;
border-radius: 50%;
margin-top: 5px;
}
.sweden1 {
background-color: rgb(12, 122, 212);
width: 300px;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
}
.sweden2 {
background-color: yellow;
width: 400px;
height: 50px;
float: center;
}
.sweden3 {
background-color: yellow;
width: 50px;
height: 200px;
margin-left: -70px;
position: absolute;
}
.greece1 {
background-color: rgb(12, 122, 212);
width: 300px;
height: 200px;
display: inline-block;
/* justify-content: center; */
}
.greece2 {
background-color: rgb(12, 122, 212);
width: 300px;
height: 25px;
/* float: ; */
}
.greece3 {
background-color: white;
width: 300px;
height: 25px;
}
.greece4 {
background-color: rgb(12, 122, 212);
width: 150px;
height: 100px;
position: absolute;
margin-top: 0px;
margin-left: 0px;
display: flex;
justify-content: center;
align-items: center;
}
.greece5 {
background-color: white;
position: center;
width: 150px;
height: 25px;
}
.greece6 {
background-color: white;
width: 25px;
height: 100px;
margin-left: 0px;
position: absolute;
}
.Czechia1{
background-color: rgb(0, 89, 255);
border: 1px solid black;
width: 300px;
height: 200px;
display: inline-block;
}
.Czechia2{
background-color: white;
width: 300px;
height: 100px;
}
.Czechia3{
background-color: red;
width: 300px;
height: 100px;
}
.Czechia4{
/* background-color: rgb(0, 89, 255); */
width: 200px;
height: 0px;
position: absolute;
margin-left: 0px;
border-top: 100px solid transparent;
border-left: 100px solid rgb(0, 89, 255);
border-right: 100px solid transparent;
border-bottom: 100px solid transparent;
}
.swiss1{
background-color: rgb(238, 54, 54);
width: 300px;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
}
.swiss2 {
background-color: white;
width: 100px;
height: 30px;
}
.swiss3 {
background-color: white;
width: 30px;
height: 100px;
float: center;
position: absolute;
}
.England1{
background-color: blue;
width: 300px;
height: 200px;
/* display: flex;
justify-content: center;
align-items: center; */
position: relative;
overflow: hidden;
}
.England2 {
background-color: red;
border: 10px solid white;
width: 350px;
height: 30px;
transform: rotate(35deg);
margin-top: -3%;
left: -10%;
top:80px;
position: absolute;
}
.England3 {
background-color: red;
border: 10px solid white;
width: 350px;
height: 30px;
transform: rotate(-35deg);
margin-top: 25%;
left: -12%;
position: absolute;
}
.England4 {
background-color: red;
border: 10px solid white;
width: 200px;
height: 30px;
transform: rotate(90deg);
position: absolute;
top: 36%;
left: 15%;
}
.England5 {
background-color: red;
border: 10px solid white;
width: 300px;
height: 30px;
position: absolute;
top: 35%;
}
</style>
</head>
<body>
<div class="Thailand">
<div class="Thailand1"></div>
<div class="Thailand2"></div>
<div class="Thailand3"></div>
<div class="Thailand2"></div>
<div class="Thailand1"></div>
</div>
<div class="madar1">
<div class="madar2"></div>
<div class="madar3"></div>
</div>
<div class="laos1">
<div class="laos2"></div>
<div class="laos3">
<div class="laos4"></div>
</div>
<div class="laos2"></div>
</div>
<div class="sweden1">
<div class="sweden2"></div>
<div class="sweden3"></div>
</div>
<div class="greece1">
<div class="greece4">
<div class="greece5"></div>
<div class="greece6"></div>
</div>
<div class="greece2"></div>
<div class="greece3"></div>
<div class="greece2"></div>
<div class="greece3"></div>
<div class="greece2"></div>
<div class="greece3"></div>
<div class="greece2"></div>
<div class="greece3"></div>
</div>
<div class="Czechia1">
<div class="Czechia4">
<div class="Czechia5"></div>
</div>
<div class="Czechia2"></div>
<div class="Czechia3"></div>
</div>
<div class="swiss1">
<div class="swiss2"></div>
<div class="swiss3"></div>
</div>
<div class="England1">
<div class="England2"></div>
<div class="England3"></div>
<div class="England22"></div>
<div class="England33"></div>
<div class="England4"></div>
<div class="England5"></div>
</div>
<div class="yNot">27사단</div>
<div class="yNot2">00사단</div>
<h1>15사단</h1>
<h2>2사단</h2>
<h3>26사단
<h3 class="y1"></h3>
<h3 class="y2"></h3>
</h3>
<div class="yapBox">00사단
<h3 class="y1"></h3>
<h3 class="y2"></h3>
</div>
<h5>8사단</h5>
<script>
</script>
</body>
</html>
'Javascript' 카테고리의 다른 글
| 계산기 (0) | 2023.07.12 |
|---|---|
| Vscode javascript로 객체 활용하여 계산기 만들기 (0) | 2023.07.11 |
| Stack / 삼항연산자 / 스프레드 / Rest / Arguments 정의 및 Object 마음대로 갖고 놀기 (0) | 2023.07.05 |
| 16진수 -> 10진수 변환 계산기 / 랜덤값 활용한 장미 1000송이 만들기 (0) | 2023.07.04 |
| for문, while문, forEach문 적재적소로 활용하기 (0) | 2023.07.03 |
