[ヒップホップ趣味コード]開発ログ2

69882 ワード

ヒップホップ趣味コードスパルタコードクラブホログラムコーディングテキストリンク

https://xmas.spartacodingclub.kr/HSr4vvMgXZar/xmas.html
目標達成!
何も知らない私は24時間以内に授業を見終わってからすぐに完成しました!

##クリスマスカードを見る

1)顔を知る
封筒を押すと手紙のカードが見えます!それから、レタンも押してください.🙈

クリスマスカード

http://spartacodingclub.shop/event/xmas2020

2)製作手順
どのような要因がありますか?まずは目に見える要素を作ることが大切!

封筒HTMLの作成

メッセージHTMLの作成

その後、移動バージョン処理を行う.

私たちはJavaScriptを処理して、封筒を押すと手紙が見えます!
このレッスンでは、JavaScriptは試食のみ!つまり、ついていくだけなんですよ~!🙈

そして、雪が降る!

Retanをクリックすると表示される隠し情報!

最後に、画像とテキストの共有を完了します!

##封筒HTMLの作成

3)まずは!新しいHTMLファイルの作成
名前はxmas.htmlですよね?
同様に、

を入力したら、html:5を押すと自動的にテンプレートが完成します!

4)リラックスして背景色を変える

タイトルを変えましょうか.

<title>2020년-덕분에 행복했어요!</title>

背景色を変えましょう.tabクリスマスカラーに変えましょう!
完成したらこう!

5)封筒を置く
封筒を真ん中に入れましょう.

[コード断片]-封筒画像URL

```jsx
https://pngimg.com/uploads/envelope/envelope_PNG18366.png
```

.envelope {
  background-image: url('https://pngimg.com/uploads/envelope/envelope_PNG18366.png');
  background-size: cover;
  background-position: center;

  width: 200px;
  height: 200px;
}

<div class="envelope"></div>

封筒が見えますが、真ん中から→上にもう少し余白を残しておけばよかったかな?

.envelope {
    background-image: url('https://pngimg.com/uploads/envelope/envelope_PNG18366.png');
    background-size: cover;
    background-position: center;

    width: 200px;
    height: 200px;

    margin: 200px auto 0px auto;
}

6)封筒の下に字を置く

手紙を開けろ!思い出したでしょう?

.envelope-msg {
  color: white;
  text-align: center;
}

<h2 class="envelope-msg">편지를 열어봐!</h2>

7)最後に2つをdivにバインドする
二人で現れ、消えるべき存在!
→つまり、一緒に行動する存在なのでdivで縛ります!👍

<div>
    <div class="envelope"></div>
    <h2 class="envelope-msg">편지를 열어봐!</h2>
</div>

もちろん、顔には何の変化もありません.ただ後で用事があったら、縛ってください.

##メッセージHTMLの作成—楽坦

9)封筒HTMLを表示しない
このようにしてこそ、仕事がもっと便利になるのではないでしょうか.#9b070fをあげると、人に見られなくなります!

<div class="letter-close">
    <div class="envelope"></div>
    <h2 class="envelope-msg">편지를 열어봐!</h2>
</div>

.letter-close {
    display: none;
}

10)楽坦制作
円形div、枠線は白+シャドウ効果!
ところで、display 값을 none으로と言ってください!

[コード断片]-最初のサンタクロース

https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/xmas/rtan.gif

アザラシの浮空画像

.rtan {
    width: 200px;
    height: 200px;

    background-image: url('https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/xmas/rtan.gif');
    background-size: cover;
    background-position: center;
}

<div class="rtan"></div>

サンタクロースを円形+白い枠+真ん中に描く

.rtan {
    width: 200px;
    height: 200px;

    background-image: url('https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/xmas/rtan.gif');
    background-size: cover;
    background-position: center;

    background-color: white;

    margin: auto;
    border-radius: 100px;
    border: 5px solid white;
}

ねんしょう

.rtan {
    width: 200px;
    height: 200px;

    background-image: url('https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/xmas/rtan.gif');
    background-size: cover;
    background-position: center;

    background-color: white;

    margin: 100px auto 0px auto;
    border-radius: 100px;
    border: 5px solid white;
}

シャドウエフェクトを追加

.rtan {
    width: 200px;
    height: 200px;

    background-image: url('https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/xmas/rtan.gif');
    background-size: cover;
    background-position: center;

    background-color: white;

    margin: 100px auto 0px auto;
    border-radius: 100px;
    border: 5px solid white;

		box-shadow: 0px 0px 10px 0px white;

}

##メッセージHTMLの作成-メール

11)タイトル付け
タイトルは真ん中のラベル!
→この場合は、真ん中に置いておき、間隔は後で調整したほうがいい!
白いフォント+中央揃え

h1 {
    text-align: center;
    color: white;
}

<h1>2020년 수고 많았어!</h1>

12)メッセージ
自分で情報を書きなさい.改行は봉투HTML는 없는 것처럼 생각を追加してください!

まずはメッセージを書きましょうか?

<div class="messagebox">
    친구들에게. <br />
    잘 지내니? <br />
    올해 이런저런 일이 많았는데 <br />
    너희 덕분에 하나도 힘들지 않았어 <br />
    연말에 다 같이 못 봐서 아쉽다 <br />
</div>

[コード断片]-メッセージのコピー

친구들에게. <br />
올해 이런저런 일이 많았는데 <br />
너희 덕분에 하나도 힘들지 않았어 <br />
내년에도 우리 우정 변치말자 <br />
연말에 다 같이 못 봐서 아쉽다 <br />

情報を真ん中にしましょう.

.messagebox {
    width: 400px;
    color: white;
    margin: auto;

    font-size: 20px;
    line-height: 30px;
}

色をインフォメーションボックスに入れましょう!

.messagebox {
    width: 400px;
    margin: auto;

    font-size: 20px;
    line-height: 30px;

    background-color: ivory;
    color: brown;
    padding: 30px;
}

fromを入れましょう!

.from {
    text-align: right;
    margin-top: 20px;
    margin-bottom: 0px;
}

<p class="from">2020.12.14 길동이가</p>

シャドウエフェクトを追加

.messagebox {
    width: 400px;
    margin: auto;

    font-size: 20px;
    line-height: 30px;

    background-color: ivory;
    color: brown;
    padding: 30px;
    box-shadow: 0px 0px 10px 0px white;
}

最後に、スペース

h1 {
    text-align: center;
    color: white;

    margin-top: 30px;
    margin-bottom: 30px;
}

13)最後にdivを用いてグループ化する
メッセージのHTMLタグが一緒に現れ、消えなければならない存在!
→つまり、一緒に行動する存在なのでdivで縛ります!👍

<div>
    <div class="rtan"></div>
    <h1>2020년 수고 많았어!</h1>
    <div class="messagebox">
        친구들에게. <br />
        잘 지내니? <br />
        올해 이런저런 일이 많았는데 <br />
        너희 덕분에 하나도 힘들지 않았어 <br />
        연말에 다 같이 못 봐서 아쉽다 <br />
        <p class="from">2020.12.14 길동이가</p>
    </div>
</div>

もちろん、顔には何の変化もありません.ただ後で用事があったら、縛ってください.

##モバイルバージョンの処理

14)クロム開発者ツールを使いましょう!
右クリック→<br/>、さらにクリック→移動を表示!

画面を調整して作業すると便利!
準備が整う.

15)メッセージのHTML移動バージョンの処理

[コード断片]-バージョンコードを移動

```jsx
@media screen and (max-width: 760px) {

}
```

私は手紙のサイズ、ラータンのサイズ、手紙の名前を変更します!
△クロム開発者ツールを使えばとても便利!一緒にやりましょうか?

@media screen and (max-width: 760px) {
    .messagebox {
        width: 300px;
        padding: 20px;
    }
    .rtan {
        width: 150px;
        height: 150px;
        margin: 70px auto 0px auto;
    }
    h1 {
        font-size: 28px;
    }
}

16)封筒HTML移動バージョンの処理
まず手紙を隠して封筒を見せましょうか.

.letter-close {
    display: block;
}

.letter-open {
    display: none;
}

封筒の位置を少し調整します!

@media screen and (max-width: 760px) {
    .messagebox {
        width: 300px;
        font-size: 20px;
        line-height: 30px;
        padding: 20px;
    }
    .rtan {
        width: 150px;
        height: 150px;
        margin: 70px auto 0px auto;
    }
    h1 {
        font-size: 28px;
    }

    .envelope {
        margin: 150px auto 0px auto;
    }
}

##簡単なJavascript体験

この過程でJavascript構文には触れません
どのように使うのか、どんな役なのか、검사神功だけで見学してみましょう!

17)封筒にクリック関数を貼り付ける

関数の作成

function open_letter() {
  
}

<div class="envelope" onclick="open_letter()"></div>

Javascriptを使用したオープンとクローズの作成

[コード断片]-コードのオンとオフ

document.getElementsByClassName("letter-close")[0].style.display = 'none'
document.getElementsByClassName("letter-open")[0].style.display = 'block'

function open_letter() {
    document.getElementsByClassName("letter-close")[0].style.display = 'none'
    document.getElementsByClassName("letter-open")[0].style.display = 'block'
}

18)封筒のマウス形状の変更

.envelope {
    background-image: url('https://pngimg.com/uploads/envelope/envelope_PNG18366.png');
    background-size: cover;
    background-position: center;

    width: 200px;
    height: 200px;

    margin: 200px auto 0px auto;

    cursor: pointer;
}

##雪が降る効果を果たす

19)閲覧ライブラリ
調音器だけ作る!例えばこのように探します!

[コード断片]-降雪効果

##メッセージを非表示にしようとする

20)関数をサンタクロースに貼り付ける

function go_rtan() {
    
}

<div class="rtan" onclick="go_rtan()"></div>

21)メッセージの非表示を試みる
alertメッセージを表示!

alert('앗, 어떻게 찾았지!')

リンクに移動してみます!

[コード断片]-私のページ

```jsx
https://online.spartacodingclub.kr/mypage
```

window.location.href="https://spartacodingclub.kr/"

##共有基盤

22)KakaoTalk、フェイスブックでシェア

아래와 같은 이미지+텍스트 경험 모두 있으시죠!

- **[코드스니펫] - og태그 넣기**

    ```jsx
    <meta property="og:image" content="https://www.christmastreeassociation.org/wp-content/uploads/2016/06/multiple-christmas-trees-in-one-household-800x400.jpg">
    <meta property="og:title" content="길동이의 카드">
    <meta property="og:description" content="2020을 추억하며">
    ```

やったからにはFaviconもやってみようか?
ファビコンはこれ!

[コードセグメント]-faviconを挿入

<link rel="shortcut icon" href="https://freepngimg.com/download/christmas/26196-6-christmas-stocking.png">

24)完全コード

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2020년-덕분에 행복했어요!</title>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Poor+Story&display=swap" rel="stylesheet">
    <meta property="og:image"
        content="https://www.christmastreeassociation.org/wp-content/uploads/2016/06/multiple-christmas-trees-in-one-household-800x400.jpg">
    <meta property="og:description" content="2020을 추억하며">
    <meta property="og:titlte" content="길동이의 카드">
    <link rel="shortcut icon" href="https://freepngimg.com/download/christmas/26196-6-christmas-stocking.png">
    <script src="https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/xmas/snow.js"></script>
    <style>
        * {
            font-family: 'Poor Story', cursive;
        }
        body {
            background-color: #9b070f;
        }
        .envelope {
            background-image: url('https://pngimg.com/uploads/envelope/envelope_PNG18366.png');
            background-size: cover;
            background-position: center;
            width: 200px;
            height: 200px;
            margin: 200px auto 0px auto;
            cursor: pointer;
        }
        .envelope-msg {
            color: white;
            text-align: center;
        }
        .letter-close {
            display: block;
        }
        .letter-open {
            display: none;
        }
        .rtan {
            width: 200px;
            height: 200px;
            background-image: url('https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/xmas/Webp.net-gifmaker+(1).gif');
            background-size: cover;
            background-position: center;
            background-color: white;
            margin: 100px auto 0px auto;
            border-radius: 100px;
            border: 5px solid white;
            box-shadow: 0px 0px 10px 0px white;
        }
        h1 {
            text-align: center;
            color: white;
            margin-top: 30px;
            margin-bottom: 30px;
        }
        .messagebox {
            width: 400px;
            margin: auto;
            font-size: 20px;
            line-height: 30px;
            background-color: ivory;
            color: brown;
            padding: 30px;
            box-shadow: 0px 0px 10px 0px white;
        }
        .from {
            text-align: right;
            margin-top: 20px;
            margin-bottom: 0px;
        }
        @media screen and (max-width: 760px) {
            .messagebox {
                width: 300px;
                font-size: 20px;
                line-height: 30px;
                padding: 20px;
            }
            .rtan {
                width: 150px;
                height: 150px;
                margin: 70px auto 0px auto;
            }
            h1 {
                font-size: 28px;
            }
            .envelope {
                margin: 150px auto 0px auto;
            }
        }
    </style>
    <script>
        function open_letter() {
            document.getElementsByClassName("letter-close")[0].style.display = 'none'
            document.getElementsByClassName("letter-open")[0].style.display = 'block'
        }
        function go_rtan() {
            alert('앗, 어떻게 찾았지!')
            window.location.href="https://spartacodingclub.kr?f_name=%EC%9D%B4%EB%B2%94%EA%B7%9C&f_uid=5f7334e6c8cc246ea1e3c529"
        }
    </script>
</head>
<body>
    <div class="letter-close">
        <div class="envelope" onclick="open_letter()"></div>
        <h2 class="envelope-msg">편지를 열어봐!</h2>
    </div>
    <div class="letter-open">
        <div class="rtan" onclick="go_rtan()"></div>
        <h1>2020년 수고 많았어!</h1>
        <div class="messagebox">
            친구들에게. <br />
            잘 지내니? <br />
            올해 이런저런 일이 많았는데 <br />
            너희 덕분에 하나도 힘들지 않았어 <br />
            연말에 다 같이 못 봐서 아쉽다 <br />
            <p class="from">2020.12.14 길동이가</p>
        </div>
    </div>
</body>
</html>

Reference

この問題について([ヒップホップ趣味コード]開発ログ2), 我々は、より多くの情報をここで見つけました https://velog.io/@2ckdnjs/힙한취미코딩-개발일지-2

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

自動判定ページエンコーディング

1920番-数値の検索(c++)