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

56736 ワード

ヒップホップ趣味コード独自開発ログスパルタコードテキストリンク

私はPDFファイルを教学資料の先頭に置いた!
[カリキュラムの目標]

クリスマスカードを作り、HTML、CSSを練習します.

の簡単なJavaScriptを味わう.

実習

反応型ネットワーク基礎.

[目次]
すべての切り替えのショートカットキーをオン/オフにします.
Windows : Ctrl + alt + tMac : ⌘ + ⌥ + t

01.クリスマスカードを見る

1)顔を知る

2)作成順

02.封筒HTMLの作成

3)まず!新しいHTMLファイル

を作成

4)軽くウォーミングアップして背景色を変える

5)封筒

を置く

6)封筒の下に字を書く

7)最後に、2つをdivに結合する

03.(息を止める)Webフォントの適用

8)続ける前に、まずネットアイを着ましょうか?

04.メッセージHTML-楽坦の作成

9)封筒HTMLを表示しない

10)楽坦制作
円形div、枠線は白+シャドウ効果!
ところで、봉투HTML는 없는 것처럼 생각と言ってください!

[コード断片]-最初のゲルマンは

アザラシの浮空画像

.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;

}

05.メッセージHTML-メールの作成

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

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

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

12)メッセージ
自分で情報を書きなさい.改行は<br/>を追加してください!

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

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

[コード断片]-メール

をコピー

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

.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>

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

06.バージョン移動処理

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

다음과 같이 화면을 맞추고 작업하면 편해요!

Responsive로 맞추고, 가로길이를 365px 쯤으로 맞추면 준비 끝!

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

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

@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;
    }
}

07.簡単なJavascript体験

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

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

関数の作成

function open_letter() {
  
}

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

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

[コード断片]-コード

をオンおよびオフにします.

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;
}

08.雪が降る効果を果たす

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

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

09.隠し情報を入れる

20)レタン見学

[コードsnipet]-2番目のゲルマンは

です.

[コードsnipet]-3番目のゲルマンは

です.

[コードsnipet]-4番目のゲルマンは

です.

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

function go_rtan() {
    
}

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

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

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

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

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

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

10.基礎業務の共有

23)KakaoTalk、フェイスブックでシェア
以下の画像+文字体験はありますよね!

[コードフラグメント]-ogラベルを追加

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

[コード断片]-favicon

を挿入

25)完全コード

<!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>

11.配置

まだ勉強していない友達のために!スパルタは単独で導入機能を創造しました!
(導入機能を知りたい場合は、Web開発総合クラスに参加してください...ハハ)

26)URLの導入と取得
受け取ったリンクをKakaoTalkに送ってogを確認します:画像の表示が良いかどうか!

[コード断片]-配置ページの移動作業を簡単に処理でき、JavaScriptも簡単に体験できます.
あと普段好奇心があることを知りました~(ogタグが不思議!)
こんなに充実した良い講座を久しぶりに聞いて、完走できて嬉しいです.

https://xmas.spartacodingclub.kr/7ZWZjKMYEzY7/xmas.html<---創造の成果!!
隣で見ていた従妹のKakaotalkも送ったことがありますが、不思議です...ううう

Reference

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

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

Collection and Share based on the CC Protocol

古いReact mixins

hexoブログに404公益ページを追加