홈페이지 만들기 시작했음,,, 일단 코드를 싸놓고 다시 만들러 가겠습니다.
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>Document</title>
<link href="./style.css" rel="stylesheet">
<link rel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
</head>
<body>
<div class = "ascii-art">
.-.
.~~~::,..
.-;*;*;:==!,
,;;;*=!*=;$$=*;
~;!;****=!==$====!:
:;;:*******!;;;!*$$*~
.~::;!!!****!;;;:::!$$!-
~~:;;!!!!=*=!;:;::::*$$~.
~~-~-::;!====!;::::~~:#$!,
.~-~~~::;*$$$=;;:::~~~:!#=.
.---~,;~~*!=$$!;;;:;~~~~;$$-
..~~~-~!~:;*$$=!****;::~~:=$~ .. ,
, ,~::,*::!*$$$!::;;==;::::=$= .,,,,,. .,,.. .,,
~-:~:=:;$=$=!::;!;;!;:;==*$=, .,...,,,,,,,,,,,,,,,,,,,,,,,,
,,:::==-**$$;:::;**;;::;!!*$=, .,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
-,::~;$;:$#$!:~::::;!;::!;;;$$- ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
.,:;:;*!:*$#*;:~~:~~:::::!*;!$$: .,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,-,
..~.:~;!::##$;:~~~::::;:~~;;;;#$;~....,,,,,-,,,,,,,,,,,,------,,,,,,--,,,,--
.....,....,.,,,,,.... .,::-:~!*:=#$*:~~::::;!:::~:::;$$;:!~---,-,,-,-------------------------------
.,,,,,,,,,,,,,,,,,,,,,,,,,,,,.. .-~:!::-;=;!##=;:~:::;;;;!!;;:::;$#!;;!~------,,,,-----------,,----------------
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,--::!=;~;;=*$##*;~~;::;;:::;!*;;::#$=;:*;~--------------------,,,---------------
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,--:;!:;;;!=###$!:~~:::!*;;;;:;;;::#$$=!;*;---------------------,--------------~~
------,,,,-,-,,,,,,,,,,,,,,,,,-,,,,--*!:;!*=;$###$!:::::::!;~~;!;:!;*#$$=!!*!~------------~~~---~----------------~~
,,,,,,,-,--..,--,,,,,----,,,--------::~::!$*!$###$!;:::::::;:*::$;;;$#===!:!*;~--------------~~-----------------~~~
,,,,,,-~-----------------,,-----,---:;~~~;=*!$###$*!;:::::::;::;=;;!##$===:!!;:----------------------------~~-~~~~~
,,,,,,-::~~~~-------------,-,,,,,--~;::~-*:*=$###$=*;;::::::;;;;:::###$$==*!;;;~----~~~~~~~~~----~~~~~~~--~~~~;::~~
~~~---~::::::~~~-------------,,----~!*!~~!*=$####$**!;;:::~:::::::$###$$$==;:;;~~-~~~--~~~~~~~--~~~~~~~~~~~~::;::~~
~::~~~:::::::::~~------------------~!*=*===$#####=***!!;;::::~~~:$####$=$$==~!;~~-~~~--~~~~~~~~~~~~:~~~~:~~:;!;;::~
~::~~~:::::::~:~---~-~~-----~------~;*$##$#######==**!!!!;;;;:::$######=*!!!!;:~~~~::~-~~--~:~~~~~~:::~~:::;!!;;:::
~~~~~~:::::::~:~--~~~~~~~-----~~----!*$##########=*!!!!!!!*!!!!$#######$!!;!:::~~~~~:~~~~--~:::~~~:::::::::;!!;;:::
------::::::~~:~~~~~~~~~~~~~~-~~~---~;=##########*!!!!!!!!!!**#########$=;;:::::::~~:::::~::::::::;;:::::::;!!;::::
,,,,,-~::::::~:~~~~~~~~~~~~~~~~~~~~~:;*#########$*!!!!!!!!!*$@@@#####$#$$*;~:~--~~~~~-~~~~~,--~--~:::::::;:;!!;::::
~-----~~:::::~:~~~~~~~~~::::::~~~:;:*$$=$#######=!!;;;;!!!!$##@@#####=##$=*!:-,,,,--,-----~--~~~~::::::::;:;!;;::::
!!;:~~~~~~~::~:~~~~~~:;;;!!!!!;:!*=$$##!$$#####$*!;;;;;;;!*####@######$$#$==*-,,-,~~~~~~~~~~~-~~:;:::::::::;!;;:::;
!!;::~~~~~~~~~~~~~~~:;!!!**!!;*==$$$$##=$######*!;;:;;;;;;*##@@########$$$=:-,-,-,---~~~~~~~~~~::;::;;:::::;**!!!;;
:;:::~~~~~~~~~~~~~::;;!!!!!***==$$#####=$###$##*!;;::::;;;=@#########$$##*;:----~,-~~~:~~~~~~-~::;:::::::::;!*!!*!;
;::~:~~~~~~~~~~~~~:::;!!!!***=$$$######=#######*;;::::::;!$############=;::~----~,,--~~~~~~~~-~::;;;;;:~:::!******;
::~~~~~~~~~~~~~::::;;:;:!**=$$$$################--:::::::!$#########*!;:::::~~~~~--::::::::~~~~~-~:~~~---~~:~::~~~~
~:~~~~~~~~~~~~~:::::::;**===$$$$##########$#####!,,-~::::!#########$:--,,,,,,.,-,...--...........,,.....--.........
~:::::::::::::~~~~~~~;!!===$$$##########$$$#####*,,,..:~:!!#####$$=!,.........,,....,-......,,,,,~~-----::~~~~~--~~
;!;;;;;;;;;;;;-....-~!*=$$$$$$##########$########,,,.,,,--!#####=--~--~-~~:~-~::~--:;;~--~::;:;;;;;!;;;!;;!;!;;;;;;
;!;;;;;;;;;;;::,,.,~:;*=$$$$$$###################!,....,--:$#####$;~-,~~~~-;::;!;~~;;;;::;;;;;;;::;!;;;;;;;;;;;:;;!
;!;;;;;;;;!!;;;!!:~~:;!$$$$$$#####################-,,..,,-~=#######*,.-:;, -*:;!;::;;;!;;!!!;;::::;;!::;:;!::;;:;!!
:;;;;;;;;;!!;;;;;:~;;!!$$$$$######################:,,,,,,-~*####$##$*:;;!. -!::;:::;;;;::;!!!:~~:;;;;::::;;:~:::::;
:;;;;;;;;;;!;;;;;~:;*=*=$$$$$##############$######;,,,.,---*#####$##$=!~~:.-*~~::~-~:::~-~~~~~~~~~;:~~~~:;;~~-~:~-~
~::::;;;;;;;;;;;~~;;*$$=$$#$######################$,,,.,-,,*######$##$$;~~.:*~-------~~-------~~~~~~-~~~~~~~~~~~~~~
----~:::::::::~~~;!*=$$$$$##$$####################$-,,.,-,,*######$###$$!;-!*!~--~~~~~~~~~~~~~~~~~~~~~~~~~~~:::::::
-~~~~::::::::::~:;**=$$$$$##$$$####################=,,,,,,,*##$###$####$$!;**!:~~~~~~~~~~~~~~~~~~~~~~~~~~:::::::~::
~~~~~~~~~~----::;**=$$$$$####$#####################$-,.,,..*######$#####$*:!**:-----~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-------------:!:!*=$$$$#$###########################:,,,,..*##$###$#####$$:!=*;~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
,-----------~~;!!==$$$$$############################*,,,,.,*######$######$=*=*!::::~~~~~~~~~~~~~~~~~~~~~~::~~~~~~~~
<div>
이건 아무거나 쓸거야
</div>
</div>
</body>
</html>CSS
*{
box-sizing:border-box;
}
html{
background-image:url(./img/matrix.jpg);
}
.ascii-art {
font-family: monospace;
white-space: pre;
position : relative;
display: flex;
justify-content: center;
align-items: center;
width: 70%;
color : #44A246;
background-color: black;
}
div {
position : absolute;
top: 50px;
left: 50px;
display : flex;
justify-content: center;
align-items:center;
color: white;
background-color: white;
}'TIL > [멋쟁이 사자처럼] TIL' 카테고리의 다른 글
| TIL (HTML의 summary tag) (22.03.26) (0) | 2022.03.26 |
|---|---|
| TIL (22.03.26) (0) | 2022.03.26 |
| TIL (22.03.24) (0) | 2022.03.24 |
| TIL (22.03.21) (0) | 2022.03.22 |
| TIL (22.03.17) (0) | 2022.03.17 |