スパルタネットワークプログラミングA-Z基礎1週間まとめ

65186 ワード

振り返る明日勉強するキャンプスパルタコードクラブ WebプログラミングA-Z テキストリンク

第1週目の整理

専門家として、ネットプログラミングの基礎科目をゆっくり勉強しました.第1週目の内容は、HTMLとCSSを利用してHTMLページを作成し、JavaScript構文を整理し、第1週目を完了することです.以下は勉強しながら保存・記録する内容です.

ソートソース

ボックスのデフォルトはwidthプロパティ設定値で、width以外の両側の余白値を調整することで中央揃えを設定します.

行内モデルは箱型モデルに変更して並べ替えます.

<style>
.center-align {
    margin: auto;
    display: block;
}
</style>

DIVイメージの挿入

画像を挿入する方法は、imgタグを使用する方法と、DIVを背景に画像を挿入する方法の2つがあります.

段、DIVを背景に画像を挿入すると右クリックで画像を保存できないという欠点があります.

<style>
    background-image: url('https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg');
    background-position: center;
    background-size: cover;
</style>

ガイドバーのデフォルトテンプレート

ガイドバーは、HTMLとCSSを用いてテンプレート化されたHTML/CSSの集合である.

マウスを持っていくと、色の変化やモバイル環境やPC環境に対応するWebをサポートするためには、内部でJクエリーを使用し、ガイドバーを使用するためにはJクエリーをインポートする必要があります.

<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>
</head>

ガイドバーコンポーネントを使用すると、さまざまな機能をサポートするコンポーネントを簡単に使用できます.( https://getbootstrap.com/docs/4.0/components )

Google Webフォント

通常フォントは、ユーザPCにフォントがないと動作しないため、ネットワークフォントを使用することができ、クライアントPCにフォントがなくても使用することができる.

の代表的なGoogleフォントで、アドレスは以下の通りです.
( https://fonts.google.com/?subset=korean )

個人手帳のデフォルトソース

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

        * {
            font-family: 'Gaegu', cursive;
        }

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

        .posting-box {
            width: 500px;
            margin: auto;
            margin-bottom: 40px;

            border: 2px solid gray;
            border-radius: 10px;

            padding: 20px;
        }

        .comment {
            color: blue;
            font-weight: bold;
        }
    </style>

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Gaegu:wght@300;400&display=swap" rel="stylesheet">

    <script>
        function hey() {
            alert('안녕');
        }
    </script>

</head>

<body>
    <div class="wrap">
        <div class="jumbotron">
            <h1 class="display-4">나홀로 링크 메모장!</h1>
            <p class="lead">중요한 링크를 저장해두고, 나중에 볼 수 있는 공간입니다</p>
            <hr class="my-4">
            <p class="lead">
                <a class="btn btn-primary btn-lg" href="#" role="button" onclick="hey()">포스팅박스 열기</a>
            </p>
        </div>

        <div class="posting-box">
            <div class="form-group">
                <label for="exampleInputEmail1">아티클 URL</label>
                <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
            </div>
            <div class="form-group">
                <label for="exampleFormControlTextarea1">간단 코멘트</label>
                <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
            </div>
            <button type="submit" class="btn btn-primary">기사저장</button>
        </div>

        <div class="card-columns">
            <div class="card">
                <img class="card-img-top"
                     src="https://dimg.donga.com/ugc/CDB/WEEKLY/Article/5b/b3/22/85/5bb32285000ed2738de6.jpg"
                     alt="Card image cap">
                <div class="card-body">
                    <a class="card-title" href="https://www.naver.com/" role="button">여기 기사 제목이 들어가죠</a>
                    <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
                    <p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

第1週目のタスク

<!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>
    <style>
        * {
            font-family: 'Gothic A1', sans-serif;
        }

        .wrap {
            padding-top: 30px;
            width: 500px;
        }

        .center-align {
            margin: auto;
            display: block;
        }

        #content {
            margin-top: 30px;
        }

        #order {
            margin-top: 30px;
        }

        .small-font {
            font-size: 16px;
        }
    </style>

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Gothic+A1&display=swap" rel="stylesheet">
</head>

<body>
    <div class="wrap center-align">
        <img src="http://img.wemep.co.kr/deal/1/646/4286461/1addee2a949a32f76c7d8e05794070d73c7ebe9b.jpg"/>

        <div id="content">
            <h1 style="display: inline;">양초를 팝니다</h1> <span class="small-font">가격 3,000원 / 개</span>
            <p>이 상품으로 말할 것 같으면 용왕이 찾지 못한 토끼의 간을 찾아 빨간망토의 늑대와 아기 돼지 삼형제의 숨결이 고루 녹아 잇는 먹으면 120세까지 살 수 있다는 이 상품으로 말할 것 같으면
                용왕이 찾지 못한 토끼의 간을 찾아 빨간 망토의 늑대와 아기 돼지 ...</p>
        </div>
        <div id="order">
            <h1>주문하기</h1>
            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <span class="input-group-text" id="basic-addon3">주문자 성함</span>
                </div>
                <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
            </div>
            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <label class="input-group-text" for="inputGroupSelect01">수량</label>
                </div>
                <select class="custom-select" id="inputGroupSelect01">
                    <option selected>-- 수량을 선택하세요. --</option>
                    <option value="1">1개</option>
                    <option value="2">2개</option>
                    <option value="3">3개</option>
                </select>
            </div>
            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <span class="input-group-text" id="basic-addon3">주소</span>
                </div>
                <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
            </div>
            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <span class="input-group-text" id="basic-addon3">전화 번호</span>
                </div>
                <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
            </div>
            <button type="button" class="btn btn-primary center-align" onclick="alert('주문이 완료되었습니다');">주문하기</button>
        </div>
    </div>
</body>
</html>

Reference

この問題について(スパルタネットワークプログラミングA-Z基礎1週間まとめ), 我々は、より多くの情報をここで見つけました https://velog.io/@manijang2/스파르타-웹-프로그래밍-A-Z-기초-1주차-정리

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

Collection and Share based on the CC Protocol

DZNEmptyDataSetでbuttonTitleに合わせてBackgroundImageのsizeを調節する

Traffis CLIツールを用いた機密データの暗号化