趙科丁さんは特に

イケメンライオンのように、フロントで10:00~18:00、ジョコディンが講義してくれました.YouTubeでよく見かけた方が教えてくれた感じが不思議な経験でした
では最近流行っている『私に似合うOOOは?』類似のWebサイトを作成します.
index

<section class="landing">
  <h1>쿨찐 테스트</h1>
  <section class="mt-4">
    <p>자신은 절대 아니라고</p>
    <p>생각하는 쿨찐들!!</p>
    <p>내가 설마 쿨찐은 아니겠지?</p>
  </section>
  <a href="test.html" class="btn btn-warning mt-4">
    시작하기
  </a>
</section>

<footer class="footer">
  <p>친구들도 테스트시키기</p>
</footer>

htmlにはmt-4というクラスがあります.これはBootstrapを使うときに役立つ機能です.margin-topをあげました.

Bootstrap Spacing

m : margin
p : padding
t : top
b : bottom
l : left
r : right
x:x軸(左、右)
y:y軸(上、下)
1 : 0.25rem
2 : 0.5rem
3 : 1rem
4 : 1.5rem
5 : 3rem
auto
反応型はREM設計を採用することが多い.
(ルートが16 pxの場合、2 remが32 px)

* {
  font-family: "Noto Sans KR", sans-serif;
}

.landing {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 70vh;
  min-height: 500px;
  background-color: #0d6efd;
  color: white;
}

.landing h1 {
  border-top: 2px solid;
  border-bottom: 2px solid;
  padding-bottom: 4px;
  font-weight: 700;
}

.landing p {
  margin-bottom: 2px;
}

.footer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 30vh;
  background-color: #e8eef4;
  color: #7c8081;
}

indexページを簡単に作成しました.次に、テストを正式に実行するページを作成します.
test

<article class="question">
  <h2 class="mt-2">아싸이고 싶어</h2>
  <p class="mt-3">인싸는 화려해보이지만 피곤한 일이 더 많다. 나는 솔직히 아싸가 더 편하고 좋다.</p>
  <div class="btn-group mt-3" role="group" aria-label="Basic radio toggle button group">
    <input type="radio" class="btn-check yes" name="q5-btnradio" id="q5-btnradio1" autocomplete="off">
    <label class="btn btn-outline-primary" for="q5-btnradio1">Yes</label>

    <input type="radio" class="btn-check no" name="q5-btnradio" id="q5-btnradio2" autocomplete="off">
    <label class="btn btn-outline-danger" for="q5-btnradio2">No</label>

    <input type="radio" class="btn-check maybe" name="q5-btnradio" id="q5-btnradio3" autocomplete="off">
    <label class="btn btn-outline-success" for="q5-btnradio3">Maybe</label>
  </div>
</article>

ラジオのある文章.
radioが多いので混同される可能性がありますが、idにはそれぞれ異なる値が必要で、nameは同じオプションのradioの間で同じでなければなりません.Labelのfor値はradioのid値と一致すればよい.
yes,no,mayclassは後にそれぞれ総数の計算に用いられる.

<footer class="footer">
  <a onclick="result()" href="#" class="btn btn-warning mt-4">결과보기</a>
</footer>
<script src="script.js"></script>

スクリプトを読み込み、生成された関数結果()をクリックして操作します.
cssは簡単なので説明は省略します.結果ページを作成する時間になりました.
script.jsでは、選択したコンテンツの数を計算することで他のページにジャンプできる部分が設計されています.

結果ページ

前述のように、簡単にできるようにHTML/CSSを設計しています.

faviconサイトの作成でfavicon画像ファイルを作成できます.ここからfaviconをダウンロードしてvscodeに入れ、生成したリンクをheadに追加すればいいです.
配置
今から配置します.コンピュータ自体をサーバとして作成できないため、外部サーバを使用します.netlifyを利用します.
(Herokuは主にサーバ側アプリケーションを管理しています.)
Netlifyはフロントエンドコードを担持します.)

GitHubにリポジトリを作成し、それをプッシュしてnetlifyに接続します.https://frosty-williams-90f996.netlify.app/のようなリンクが表示され、現在公開されています.

ドメインを低価格で購入するサイトでドメイン名を購入します.これはガビアというサイトで、私の知っている限りでは1年で約500元ぐらいです.

会員に加入して、使いたいドメイン名の住所を書いてから、無割引預金で購入します.550元
NetlifyとGabiaの接続
netlifyにプロジェクトのドメインを設定させます.


これにより4つのdnsアドレスが表示されます.今からガビアに行きましょう.

netlifyで得られた4つのdnsアドレスをガビアに入れた.今待っていればいいです.

やっと完成しました...
sns共有機能の簡単な追加


sns共有サイトを使用すると、sns共有機能を簡単に追加できます.
広告収入を創出する
ココア広告では、開発されたアプリケーションに広告を貼って収益を創出することができる.

サイトでは私にどうすればいいか、渋滞はありません.上の写真は私のプロジェクトに現れた広告です.
露光位相

NAVER調査コンサルタントを用いて上位露光を行う.
私が作成したプロジェクトの住所を入れて、認証してください.
ロボットを検証します.txt simple生成では、すべての検索ロボットに対して「収集を許可」オプションが選択されます.そしてダウンロードします.名前はロボットtxtで固定します.そしてvscodeに追加します.

xml-サイトマッピングに私たちの住所を追加してstartを押します.作成したサイトマッピング(xml)をvscodeに挿入します.
検索中に表示される準備ができています.Git pushやってみる

最後に、NAVER検索アシスタントのウェブサイトの地図を追加しました.
SEO最適化
外部-リバースリンク、アクセス刺繍など
内部-シンボルマーク、メタマークなど
(複数のサイトで私のサイトに言及->逆リンク)

seo site checkupは私たちの和弦がどれだけSEOされているかを見ることができます見ながら再構築すればいいです.
の最後の部分
今日私は多くの役に立つウェブサイトを理解して、これは1つの学習が全体のWeb開発の構造を総括する良い時間です.Jocodingと一緒に成長した時間は有意義でした