chan.log
블로그 이미지

Home

Write

Setting

About Me
04-04 20:19
Dark
TIL/[멋쟁이 사자처럼] TIL

TIL (22.03.26)

맹찬
|2022. 3. 26. 22:39

홈페이지 만들기 끝!

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>Maeeeeeeng_chan</title>
    <link href="./reset.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <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-container">
        <canvas id="Matrix"></canvas>
        <script src="./main.js"></script>
        <div class = "ascii-art">
            <p>
                                                        .-.                                                    
                                                    .~~~::,..                                                   
                                                    .-;*;*;:==!,                                                   
                                                ,;;;*=!*=;$$=*;                                                  
                                                ~;!;****=!==$====!:                                               
                                                :;;:*******!;;;!*$$*~                                              
                                            .~::;!!!****!;;;:::!$$!-                                             
                                            ~~:;;!!!!=*=!;:;::::*$$~.                                            
                                            ~~-~-::;!====!;::::~~:#$!,                                            
                                            .~-~~~::;*$$$=;;:::~~~:!#=.                                            
                                        .---~,;~~*!=$$!;;;:;~~~~;$$-                                            
                                        ..~~~-~!~:;*$$=!****;::~~:=$~                           ..              ,
                                        , ,~::,*::!*$$$!::;;==;::::=$=                         .,,,,,.  .,,..  .,,
                                        ~-:~:=:;$=$=!::;!;;!;:;==*$=,              .,...,,,,,,,,,,,,,,,,,,,,,,,,
                                        ,,:::==-**$$;:::;**;;::;!!*$=,           .,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
                                        -,::~;$;:$#$!:~::::;!;::!;;;$$-         ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
                                        .,:;:;*!:*$#*;:~~:~~:::::!*;!$$:      .,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,-,
                                    ..~.:~;!::##$;:~~~::::;:~~;;;;#$;~....,,,,,-,,,,,,,,,,,,------,,,,,,--,,,,--
    .....,....,.,,,,,....           .,::-:~!*:=#$*:~~::::;!:::~:::;$$;:!~---,-,,-,-------------------------------
.,,,,,,,,,,,,,,,,,,,,,,,,,,,,..     .-~:!::-;=;!##=;:~:::;;;;!!;;:::;$#!;;!~------,,,,-----------,,----------------
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,--::!=;~;;=*$##*;~~;::;;:::;!*;;::#$=;:*;~--------------------,,,---------------
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,--:;!:;;;!=###$!:~~:::!*;;;;:;;;::#$$=!;*;---------------------,--------------~~
------,,,,-,-,,,,,,,,,,,,,,,,,-,,,,--*!:;!*=;$###$!:::::::!;~~;!;:!;*#$$=!!*!~------------~~~---~----------------~~
,,,,,,,-,--..,--,,,,,----,,,--------::~::!$*!$###$!;:::::::;:*::$;;;$#===!:!*;~--------------~~-----------------~~~
,,,,,,-~-----------------,,-----,---:;~~~;=*!$###$*!;:::::::;::;=;;!##$===:!!;:----------------------------~~-~~~~~
,,,,,,-::~~~~-------------,-,,,,,--~;::~-*:*=$###$=*;;::::::;;;;:::###$$==*!;;;~----~~~~~~~~~----~~~~~~~--~~~~;::~~
~~~---~::::::~~~-------------,,----~!*!~~!*=$####$**!;;:::~:::::::$###$$$==;:;;~~-~~~--~~~~~~~--~~~~~~~~~~~~::;::~~
~::~~~:::::::::~~------------------~!*=*===$#####=***!!;;::::~~~:$####$=$$==~!;~~-~~~--~~~~~~~~~~~~:~~~~:~~:;!;;::~
~::~~~:::::::~:~---~-~~-----~------~;*$##$#######==**!!!!;;;;:::$######=*!!!!;:~~~~::~-~~--~:~~~~~~:::~~:::;!!;;:::
~~~~~~:::::::~:~--~~~~~~~-----~~----!*$##########=*!!!!!!!*!!!!$#######$!!;!:::~~~~~:~~~~--~:::~~~:::::::::;!!;;:::
------::::::~~:~~~~~~~~~~~~~~-~~~---~;=##########*!!!!!!!!!!**#########$=;;:::::::~~:::::~::::::::;;:::::::;!!;::::
,,,,,-~::::::~:~~~~~~~~~~~~~~~~~~~~~:;*#########$*!!!!!!!!!*$@@@#####$#$$*;~:~--~~~~~-~~~~~,--~--~:::::::;:;!!;::::
~-----~~:::::~:~~~~~~~~~::::::~~~:;:*$$=$#######=!!;;;;!!!!$##@@#####=##$=*!:-,,,,--,-----~--~~~~::::::::;:;!;;::::
!!;:~~~~~~~::~:~~~~~~:;;;!!!!!;:!*=$$##!$$#####$*!;;;;;;;!*####@######$$#$==*-,,-,~~~~~~~~~~~-~~:;:::::::::;!;;:::;
!!;::~~~~~~~~~~~~~~~:;!!!**!!;*==$$$$##=$######*!;;:;;;;;;*##@@########$$$=:-,-,-,---~~~~~~~~~~::;::;;:::::;**!!!;;
:;:::~~~~~~~~~~~~~::;;!!!!!***==$$#####=$###$##*!;;::::;;;=@#########$$##*;:----~,-~~~:~~~~~~-~::;:::::::::;!*!!*!;
;::~:~~~~~~~~~~~~~:::;!!!!***=$$$######=#######*;;::::::;!$############=;::~----~,,--~~~~~~~~-~::;;;;;:~:::!******;
::~~~~~~~~~~~~~::::;;:;:!**=$$$$################--:::::::!$#########*!;:::::~~~~~--::::::::~~~~~-~:~~~---~~:~::~~~~
~:~~~~~~~~~~~~~:::::::;**===$$$$##########$#####!,,-~::::!#########$:--,,,,,,.,-,...--...........,,.....--.........
~:::::::::::::~~~~~~~;!!===$$$##########$$$#####*,,,..:~:!!#####$$=!,.........,,....,-......,,,,,~~-----::~~~~~--~~
;!;;;;;;;;;;;;-....-~!*=$$$$$$##########$########,,,.,,,--!#####=--~--~-~~:~-~::~--:;;~--~::;:;;;;;!;;;!;;!;!;;;;;;
;!;;;;;;;;;;;::,,.,~:;*=$$$$$$###################!,....,--:$#####$;~-,~~~~-;::;!;~~;;;;::;;;;;;;::;!;;;;;;;;;;;:;;!
;!;;;;;;;;!!;;;!!:~~:;!$$$$$$#####################-,,..,,-~=#######*,.-:;, -*:;!;::;;;!;;!!!;;::::;;!::;:;!::;;:;!!
:;;;;;;;;;!!;;;;;:~;;!!$$$$$######################:,,,,,,-~*####$##$*:;;!. -!::;:::;;;;::;!!!:~~:;;;;::::;;:~:::::;
:;;;;;;;;;;!;;;;;~:;*=*=$$$$$##############$######;,,,.,---*#####$##$=!~~:.-*~~::~-~:::~-~~~~~~~~~;:~~~~:;;~~-~:~-~
~::::;;;;;;;;;;;~~;;*$$=$$#$######################$,,,.,-,,*######$##$$;~~.:*~-------~~-------~~~~~~-~~~~~~~~~~~~~~
----~:::::::::~~~;!*=$$$$$##$$####################$-,,.,-,,*######$###$$!;-!*!~--~~~~~~~~~~~~~~~~~~~~~~~~~~~:::::::
-~~~~::::::::::~:;**=$$$$$##$$$####################=,,,,,,,*##$###$####$$!;**!:~~~~~~~~~~~~~~~~~~~~~~~~~~:::::::~::
~~~~~~~~~~----::;**=$$$$$####$#####################$-,.,,..*######$#####$*:!**:-----~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-------------:!:!*=$$$$#$###########################:,,,,..*##$###$#####$$:!=*;~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
,-----------~~;!!==$$$$$############################*,,,,.,*######$######$=*=*!::::~~~~~~~~~~~~~~~~~~~~~~::~~~~~~~~</p>
        <details id="chan"><summary class="summary-initial">CHAN</summary>
            안녕하세요 멋쟁이사자처럼 10기 

            기획/디자인팀 김명찬입니다!
            임산생명공학과 3학년으로 재학하고있고,
            소프트웨어학과 복수전공을 준비하고있습니다.

        </details>

        <details id="game"><summary class="summary-initial">GAME</summary>
            <img src = "img/hearthstone.png">
            게임 정말 여러가지 많은 게임들을 좋아합니다. 
            전략 턴제게임, 카드게임, AOS, FPS, TPS, RPG 등등 
            여러 게임을 해봤어요. 
            요즘에는 시간 나면, 롤이나 하스스톤을 해요.
        </details>

        <details id="blog"><summary class="summary-initial">BLOG</summary>
            <a href="https://mingtian-chan.tistory.com/" target= "_blank">
                https://mingtian-chan.tistory.com/
            </a>

            매일매일 공부하는 내용을 적고 있습니다. 
            배운 내용을 정리한단 느낌으로 꼬박꼬박 적고 있습니다.
            한번 보러오세요.
        </details>

        <details id="hair"><summary class="summary-initial">HAIR</summary>
            <img src = "img/hair.jpg">
            머리는 21년 1월부터 지금까지 계속 기르고 있어요.
            처음엔 딱히 별 뜻 없이, 머리 자르기 귀찮아서 안 잘랐는데,
            기르다 보니 어떻게 알게 되어서, 
            어린 암 환자들을 위한 모발 기부를 목표로 기르고 있습니다.
        </details>

        <details id="MBTI"><summary class="summary-initial">MBTI</summary><img src = "img/enfp.png">
            MBTI는 ENFP/J로 P/J가 반반정도 나와요!
            낮선 사람 만나고, 새로운 활동을 하는걸 정말 좋아해요.
            한 가지에 꽂히면 시간 가는 줄 모르고 주구장창 
            파는 경우도 있어요. 
        </details>

        <details id="diver"><summary class="summary-initial">DIVING</summary>
            <img src = "img/diving.jpg">
            18년도에 동아리에 들어가면서 처음 시작했습니다. 
            물에 들어가면 해양생물이나 풍경을 보는 것도 정말 재밌지만,
            물에 무중력으로 떠있는 기분도 정말 좋아요! 
        </details>



        <p class = "me">
            <img src = "img/chan.jpg" >
        </p>


        </div>

    </div>

</body>
</html>

CSS

*{
    box-sizing:border-box;
}


body {
    /* body에 남아있는 여백 날리기! */
    margin: 0;
    padding: 0;
    overflow-x: hidden;

}


.ascii-container {
    display: flex;
    justify-content: center;
    align-items: center;


}

.ascii-art {

    font-family: monospace;
    white-space: pre;

    position : absolute;
    justify-content: center;
    bottom: 10%;


    width: max-content;
    color : #44A246;
    background-color: #ffffff;
    background-color: rgba( 255, 255, 255, 0 );


}

.ascii-art > p {

    z-index: 1;
    margin :0;


    text-align: left;
    width: 100%;

    font-size: 13px;
    line-height: 10px;
    letter-spacing: 2px;

}


div {

    display : flex;
    justify-content: center;
    align-items:center;


}

a {
    text-decoration: none;


    justify-content: center;
    align-items:center;


    width: fit-content;
    height: fit-content;

}
.summary-initial {
    height: 30px;
}

details {
    font: 16px "cursive","나눔 고딕";
    width: 500px;
    height: 0px;
    background-color: red;

  }

  details > summary {
    padding: 2px 6px;


    border: 1  #44A246; 
    cursor: pointer;
  }

  details > p {
    padding: 2px 6px;
  } 

#chan {
    z-index: 5;
    margin: 0;
    padding: 0;

    display : flex;
    justify-content: center;
    align-items:center;
    background-color: rgba( 0, 0,0 , 0.8 );

    position: fixed;
    left: 20%;
    top: 15%;
    height: fit-content;

}

#game {
    z-index: 4;
    margin: 0;
    padding: 0;

    display : flex;
    justify-content: center;
    align-items:center;
    background-color: rgba( 0, 0,0 , 0.8 );

    position: fixed;
    left: 20%;
    top: 35%;
    height: fit-content;

}
#blog {
    z-index: 3;
    margin: 0;
    padding: 0;

    display : flex;
    justify-content: center;
    align-items:center;
    background-color: rgba( 0, 0,0 , 0.8 );

    position: fixed;
    left: 20%;
    top: 55%;
    height: fit-content;
}

#MBTI {
    z-index: 4;
    margin: 0;
    padding: 0;

    display : flex;
    justify-content: center;
    align-items:center;
    background-color: rgba( 0, 0,0 , 0.8 );

    position: fixed;
    left: 60%;
    top: 35%;

    height: fit-content;

}

#hair {
    z-index: 5;
    margin: 0;
    padding: 0;

    display : flex;
    justify-content: center;
    align-items:center;
    background-color: rgba( 0, 0,0 , 0.8 );

    position: fixed;
    left: 60%;
    top: 15%;
    height: fit-content;

}

#MBTI {
    z-index: 4;
    margin: 0;
    padding: 0;

    display : flex;
    justify-content: center;
    align-items:center;
    background-color: rgba( 0, 0,0 , 0.8 );

    position: fixed;
    left: 60%;
    top: 35%;

    height: fit-content;

}
#diver{
    z-index: 3;
    margin: 0;
    padding: 0;

    display : flex;
    justify-content: center;
    align-items:center;
    background-color: rgba( 0, 0,0 , 0.8 );

    position: fixed;
    left: 60%;
    top: 55%;
    height: fit-content;
}

.me{
    z-index: 2;

    position: absolute;
    bottom: -1%;
    left: -10%;
}
.me:hover {
    opacity: 0;
    transition: 1s;
}


.button {

    display: flex;
    justify-content: center;
    align-items: center;

    position : absolute;
    left: 30%;
    top: 30%;
}

JS

const canvas = document.getElementById('Matrix');
const context = canvas.getContext('2d');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

const katakana = 'アァカサタナハマヤャラワガザダバパイィキシチニヒミリヰギジヂビピウゥクスツヌフムユュルグズブヅプエェケセテネヘメレヱゲゼデベペオォコソトノホモヨョロヲゴゾドボポヴッン';
const latin = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
const nums = '0123456789';

const alphabet = katakana + latin + nums;

const fontSize = 10;
const columns = canvas.width/fontSize;

const rainDrops = [];

for( let x = 0; x < columns; x++ ) {
    rainDrops[x] = 1;
}

const draw = () => {
    context.fillStyle = 'rgba(0, 0, 0, 0.05)';
    context.fillRect(0, 0, canvas.width, canvas.height);

    context.fillStyle = '#0F0';
    context.font = fontSize + 'px monospace';

    for(let i = 0; i < rainDrops.length; i++)
    {
        const text = alphabet.charAt(Math.floor(Math.random() * alphabet.length));
        context.fillText(text, i*fontSize, rainDrops[i]*fontSize);

        if(rainDrops[i]*fontSize > canvas.height && Math.random() > 0.975){
            rainDrops[i] = 0;
        }
        rainDrops[i]++;
    }
};

setInterval(draw, 30);

'TIL > [멋쟁이 사자처럼] TIL' 카테고리의 다른 글

TIL (22.03.28)  (0) 2022.03.28
TIL (HTML의 summary tag) (22.03.26)  (0) 2022.03.26
TIL (22.03.24)  (0) 2022.03.25
TIL (22.03.24)  (0) 2022.03.24
TIL (22.03.21)  (0) 2022.03.22

티스토리툴바