겜스 지박령 주거지

[HTML, CSS] 웹 사이트 만들어 보기 2일차

호용_ — Wed, 4 Aug 2021 21:35:52 +0900

갑자기 사이트를 만들어보고 싶어졌다..

그래서 바로 HTML부터 공부하기로 했다.

책을 사긴 좀 그렇고 인터넷과 유튜브에 충분히 질 좋은 많은 자료들과 동영상 강좌들도 많아서

그냥 유튜브랑 구글을 왔다 갔다하며, HTML의 기본적인 문법, 태그, 속성등에 대해서 배우기 시작했다.

좀 재미있게 만들어 보고 싶어서

이런 짓을 해버렸다

파피루스다

img 태그로 샌즈 이미지(gif)도 넣어보고

p태그에 글도 쓰면서 br로 줄내림도 해보고

strong 태그도 쓰고 i태그도 써보고

a태그에 href로 목차도 만들어보고

class랑 id로 CSS에서 배경색도 지정해보고 color도 바꿔보고

가운데 정렬도 해보고했다....

2일차 부터는 block, inline의 개념이라던가, position의 개념, transition이란 것을 알게 되었다

폰트도 적용해보았는데

Google fonts earlyaccess에서 여러 한글 웹폰트들을 찾을 수 있었다

https://fonts.google.com/earlyaccess

이게 뭔지 이제 나도 모르겠다

여러가지 놀라운 HTML과 CSS의 기능들을 통해서

더 최고의 똥을 만들 생각을 하니 벌써 짜릿하다

이 사이트 디자인은 후에도 HTML이나 CSS, JS의 다른 여러 기능들이나 API등을 배우면

다 여기다가 적용시키면서 놀아볼 생각이다

이제 flex라던가, grid 등의 기능들을 배우면 될 것 같은데

JavaScript를 배우기위해 HTML과 CSS를 배우기 시작한거라

이쯤 배우고 나중에 필요하면 더 배우기로 하자

우선 JS부터 익히기 시작해야겠다

아래는 해당 웹페이지의 HTML과 CSS 코드들이다

배운지 이틀째라 많이 중구난방하고 비효율적인 코드들이 많을 수 있다

조언좀 해주세요

HTML코드

<!DOCTYPE html>
<html lang = "ko">
    <head>
        <title>와 샌즈 아시는구나</title>
        <meta charset="UTF-8">
        <link href="./style.css" rel="stylesheet">
    </head>
    <body>
        <header>
            <h1> 언더테일 아시는구나! </h1>
            <img src="https://t1.daumcdn.net/thumb/R720x0/?fname=http://t1.daumcdn.net/brunch/service/user/7z9S/image/SfogW1NZS05q2wMvONwahJFedcc" 
            width="250"/>
            <ul>
                <li>
                    <a href = "#wa">
                        와! 샌즈 아시는구나!
                    </a>
                </li>
                <li>
                    <a href = "#pa">
                        파피루스는 아세요?
                    </a>
                </li>
            </ul>

        </header>

        <div class = "explain" id = "wa">
            <h2 class = "HeadTopic" >샌즈가 뭐냐면....</h2>
            <div class = "lines">
                <img src="https://s3.orbi.kr/data/file/united/02597b0571c0e30190357f1d32775caa.gif" width="250">
                <br><strong><em>와! 샌즈 아시는구나!</em></strong><br><br> 혹시 모르시는분들에 대해 설명해드립니다<br>샌즈랑 언더테일의 세가지 엔딩루트중 몰살엔딩의 최종보스로
                
                <br><br> <div id = "clamax">*진.짜.겁.나.어.렵.습.니.다*</div> <br><br>
                
                공격은 전부다 회피하고 만피가 92인데 샌즈의 공격은 1초당 60이 다는데다가 독뎀까지 추가로 붙어있습니다..<br>
                하지만 이러면 절대로 게임을 깰 수 가없으니 제작진이 치명적인 약점을 만들었죠.<br>
                샌즈의 치명적인 약점이 바로 지친다는것입니다. 패턴들을 다 견디고나면 지쳐서 자신의 턴을 유지한채로 잠에듭니다.
                <br>하지만 잠이들었을때 창을옮겨서 공격을 시도하고 샌즈는 1차공격은 피하지만 그 후에 바로날아오는 2차 공격을 맞고 죽습니다.
                <br>

                <a href = "https://namu.wiki/w/%EC%83%8C%EC%A6%88" target = _blink>
                    샌즈에 대해 더 알고 싶다면 여기로
                </a>
            </div>
        </div>

        <div class = "explain" id = "pa">
            <h2 class = "HeadTopic" >
                파피루스 아세요?
            </h2>
            <div class = "lines">
                <img src = "https://smart.science.go.kr/k3i/scienceSubject/cmm/imageView.action?file_sid=1848" width="250">
                <br><strong><em>Papyrus. 순우리말로는 종이방동사니.</em></strong> <br><br> 이집트 나일강변에서 자라는 사초류. 또는 이 식물로 만든 종이 이전의 기록매체. <br> 고대 종이 이전의 기록매체 중 가장 유명한 것이다 보니 영어에서의 종이를 뜻하는 영단어 'Paper'의 어원이 되었으며, 영어의 Bible과 Bibliography의 어원과도 밀접한 관계가 있다.<br> 지중해권에 파피루스를 판매한 페니키아의 상업 도시 비블로스가 파피루스 무역항이었기 때문이다.
            </div>
        </div>
    </body>
</html>

CSS 코드

@import url(//fonts.googleapis.com/earlyaccess/jejumyeongjo.css);

body{
    font-family: 'Jeju Myeongjo', serif;
}

#clamax{
    font-size:32px;
    font-style: italic;
    color : red;
}

header{
    width : 500px;
    margin: 0 auto;
    text-align: center;
}

header ul{
    text-align: left;
    display: inline-block;
    position : absolute;
    margin-top: 0px;
}

img{
    display: inline-block;
    transition: 0.3s;
}
img:hover{
    width:300px;
}

.explain{
    text-align: center;
}

.HeadTopic{
    font-weight: bold;
    font-size : 2rem;
    background-color:honeydew;
}

.lines{
    font-size : 20px;
}

.lines strong{
    font-size : 24px;
}

[Shadertoy] BEHOLD

호용_ — Wed, 27 Jan 2021 10:48:11 +0900

모르겠어요

그냥 영롱한걸 만들고 싶었어용

원리는.. 그냥 많이 많이 겹친겁니다

거기에 노이즈로 살짝 부드럽게 만들어준거죵 호호ㅗㅎ

우와아ㅏㅏㅇㅇㄱ!!

아래 링크에서 60fps로 체험 가능!

마우스 드래그로 빛 위치를 바꿀 수 있습니다!

www.shadertoy.com/view/WlKczt

[Shadertoy] 뒤틀린 3D효과

호용_ — Fri, 15 Jan 2021 14:40:52 +0900

s뭔가 많이 뒤틀렸습니다.

원리는 각 픽셀의 색의 평균을 구해서 양자화 시키고

그 값에 따라 이미지를 잘라서

확대, 축소를 시켜 쌓는 느낌으로? 만든겁니다.

때문에 정확한 3D는 아니지만 ( 좀 많이 )

음영 차이 등으로 3D효과를 따라 할 수 있었습니다.

으악

www.shadertoy.com/view/tlyczm

[Shadertoy] CRT 모니터 효과

호용_ — Wed, 13 Jan 2021 14:45:04 +0900

안녕하세요

옛날 모니터, 그러니까 CRT모니터라고 하죠?

그거를 쉐이더로 이리저리 만들어봤습니다

uv 왜곡 시키고..

색상 분리시키고..

선 그리고...

그게 다에요!

어때요?

www.shadertoy.com/view/ttffzs

Shadertoy

www.shadertoy.com

위의 링크로 들어가서 60fps로 목격하세요!!!

코드도 포함 :-ㅇ

[Shadertoy] 이미지를 점으로 바꿔줍니다?

호용_ — Tue, 12 Jan 2021 18:05:39 +0900

슬픕니다?

그렇습니다?

이미지를 점으로 바꿔줍니다?

www.shadertoy.com/view/wtGcRh

Shadertoy

www.shadertoy.com

여기서 코드도 볼 수 있습니다?

[Shadertoy] 그림자 쉐이더

호용_ — Thu, 7 Jan 2021 17:00:25 +0900

www.shadertoy.com/view/tsjyWw

Shadertoy

www.shadertoy.com

링크를 타고 들어가서 즐겨보세요

화면을 클릭하고 움직이면 그림자의 위치가 바뀝니다!

[Shadertoy] 디더링 쉐이더

호용_ — Sun, 31 May 2020 16:33:59 +0900

GIF가 좀 깨집니다;;

허이짜

디더링 쉐이더 입니다.

디더링을 해줍니다.

제대로 만든건지 모르겠습니다.

픽셀크기가 작으면 보기 엄청 좋습니다.

너무크면 보기 안 좋아집니다;;

그리고 눈 아픕니다;;

https://www.shadertoy.com/view/WsXfR2

Shadertoy

www.shadertoy.com

↑ 여기서 코드 보기 가능! ↑

[카테고리 정하기 애매한 연구] 공튀기기 반사 연구

호용_ — Sun, 31 May 2020 16:20:46 +0900

공튀기기 할때 반사될때, 뭐라고 불러야 할지는 모르겠지만

입사 벡터, 반사 벡터(?)를 구하는 방법을 연구했습니다.

막대기의 노멀 벡터와, 공의 속도 벡터를 재료로 써서

반사된 후의 속도벡터를 구하는 것입니다

인터넷에 찾아보면 금방 공식 같은게 나오겠지만,

안 찾아보고 그냥 직접 생각해서 만들어봤습니다.

이런건 혼자 발명할 수 있다!

는 느낌이 들어서 그랬습니다.

대충 이런 원리로 작동합니다.

스스로 생각해서 만든 반사 공식입죠... 후후..

made by 내 머리..

아무튼 완죤 잘 작동합니다!!

벡터를 통해서 계산하기때문에

막대기의 노말벡터만 알면

모든 각도에서 호환 가능합니다!

잘 작동합니다!!!!

[제목 아직도 못정한 게임] 검 궤적 추가

호용_ — Sun, 31 May 2020 15:11:09 +0900

검의 궤적이 이제 보인다..!

검 궤적을 추가했습니다.

게임이 더 지저분해진것 같지만..

괜찮을겁니다.. 아무튼 멋있으면 그만입니다.

[Shadertoy] 픽셀화 쉐이더

호용_ — Thu, 14 May 2020 00:24:23 +0900

픽셀화된 아저씨의 모습

옛날 옛적에 만들었던 픽셀화 쉐이더.

방금 블로그를 만든 입장에서, 글감이 없어 올립니다..

픽셀화라고 하는건지도 모르겠고, 잘 짠건지도 모르겠고,

일단 만들었고, 일단 작동하는데요...

제가 픽셀을 너무 좋아해서 유니티에서 3D게임 만들때

포스트 프로세싱으로 계속 우려먹을 예정

LINK : https://www.shadertoy.com/view/3sXSWj