[スパルタコードクラブ]Web開発1週間のコース内容と開発ログ

24918 ワード
ガイドテープ Web開発 js CSS ネットワークフォント 開発ログ スパルタコードクラブ 講義 html テキストリンク
韓耳音ICTメンタープログラムは、「スパルタコードクラブ」課程の支援を受けて、インターネット開発を学ぶために「王初歩開始クラス」の課程を開始した.
1週目のレッスンでは、サーバ、クライアント、Webの動作概念を簡単に学び、HTMLとCSS、JAVAスクリプトを学ぶことができます.

HTMLベース


見出しラベル


デザイン要素が溶け込んでいます.(ガイドバー、CSSファイルリンク、スタイル定義を使用)

Bodyラベル


ページ全体の内容.

共通ラベル

<hn></hn> : 머리말의 크기를 지정하는 태그 (<h1>으로 지정했을 때 본제목 용으로 사용할 수 있다.)
<p></p> : 하나의 문단을 의미하는 태그
<div></div> : 구역을 나누는 태그
<img src="이미지 주소"></img> : 웹 페이지의 이미지를 불러오는 태그
<a href="이동할 주소">하이퍼링크 내용</a> : 하이퍼링크 적용 태그
<hr> : 가로선 태그
<button>버튼 내용</button> : 버튼 태그
<ul></ul> : 순서가 정의되지 않은 리스트            <ol></ol> : 순서가 정의된 리스트
<input type="text"></input> : text로 내용을 입력할 수 있는 태그
-> type은 text, button, checkbox 등 다양하게 사용할 수 있다. 구글링이 최고다(❁´◡`❁)

CSSベース


CSSの使い方


headタグにstyleタグを追加して定義する(background-color、color、width、marginなど)

クラスの使い方


このタグではclass=「クラス名」、styleタグです.クラス名{}を定義し、タグのCSS要素を作成します.
▶各種ラベルにstyleを適用する場合は、idではなくclassを定義する必要があります.
'''클래스 관련 코드 외 생략'''
<head>
  <style>
  .class_name {
     width : 300px; --너비 300px--
     background-color : pink --배경 색상 핑크색--
     margin : 10px auto 10px auto --위 오른쪽 아래 왼쪽 순으로 구역 바깥 여백 설정--
     padding : 10px auto 10px auto --위 오른쪽 아래 왼쪽 순으로 구역 안쪽 여백 설정--
     }
  </style>
</head>

<body>
  <div class="class_name">
     <h1>강의내용복습<h1>
     <p>2주차도 화이팅</p>
  </div>
</body>

ログインページ


学んだ内容に基づいて簡単なログインページを作成!
+画質がおかしいのか背景設定がおかしいのか見栄えが悪い…!
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login Page</title>
    <style>
        .mytitle{
            background-color: antiquewhite;
            width: 300px;
            height: 150px;

            color:white;
            text-align: center;

            background-image: url("링크 생략");
            background-size: cover;
            background-position: center;

            border-radius: 10px;
            padding-top: 20px;  <!--안쪽에다가여백-->
        }

        .wrap{
            width:300px;
            margin:auto;
        }

        .btn{
            display:block;
            width: 100px;
            margin:auto;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="mytitle">
        <h1>Login Page</h1>
        <h5>Enter the ID & PW!</h5>
        </div>

        <p>ID : <input type="text"></p>
        <p>PW : <input type="text"></p>
        <input type="button" value="login" class="btn">
    </div>

</body>
</html>

Webフォントの適用


Google fontsやその他のビジネスフォントを利用すると、Webフォントを簡単に適用できます.

WebページのフォントをGoogle fontsとして使用


1.google fonts->Google fonts韓国語ページに先にログイン
2.必要なfontを選択し、「select this style」を選択します.

3.Embededをクリックし、linkバーの内容をhtmlファイルのheadラベルにコピーします.
4.CSS rules to specification familyバーの内容をhtmlファイルのstyleラベルにコピーし、classに適用します(完全に適用する必要がある場合は*{~}にコピーします).

ガイドテープ


起動バーは、あらかじめ作成されたきれいなcssファイルです.適用するには、開始テンプレートが必要です.ガイドバーを使用すると、必要なWebデザインが表示されやすくなります.
ガイドバーページ 
<< 부트 스트랩 시작 템플릿 - 이 줄을 제외한 나머지 줄을 그대로 복사해 사용하면 된다 >>
<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>

    <title>부트스트랩</title>
</head>

<body>
    hello
</body>

</html>
上の内容に基づいて作成された「リンクメモ帳」があり、このページにアップロードするのは複雑かもしれませんが、次回アップロードするつもりで、、、、、、、、、、、、ブーンブーン.

スパルタコードクラブ王哨報開始クラス第1週受講後記


一人でネットを学ぶのは本当に迷って、スパルタのコードクラブで王初甫に出会ってクラスを始めました...!
ビデオは2時間単位ではなく、1つの章が短いビデオで構成されているので、集中しやすいです.
一番重要なのは、初めてネットを勉強して、初級クラスなので、指導者が説明しやすいようなので、理解しやすいです.
そしてマネージャーさんが管理してくれて勉強に励んでいます毎週出てくる課題も本当に本当に本当に本当に満足しています.
今はまだ1週間目なので面白いと思いますが、進行中のプロジェクトをもっと頑張りたいと思います.
パチ!!!!!!!!!!!!!!!!!!!!!!!!!
poj-2777セグメントツリーブラシ問題
hexoはblogを書きます