Webページ作成(HTML、CSS)

31316 ワード

非専門家として、偶然の求人広告の横断幕を見て、スパルタコードクラブに入りました.
普段は符号化のみに関心を持っている場合に接する疎い用語やプログラムの使い方も困難である.
しかし、短い授業や実習を中心とした授業なので、気軽に楽しく勉強しています.
<作成プロセス>
1.pycharmのインストール

  • フォルダの作成


  • コードの設定


  • Webページの実行


  • 完全なコード
  • <!-- 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>스파르타코딩클럽 | 1주차 숙제</title>
    
    <link href="https://fonts.googleapis.com/css2?family=Black+Han+Sans&display=swap" rel="stylesheet">
    
    <style>
    
        body {
            background-image: url("http://t1.daumcdn.net/movie/19416b54c90dd3de1167f1cb6856e32d80c25d2f");
            background-size: 800px;
        }
    
        * {
            font-family: 'Black Han Sans', sans-serif;
            color: white;
            font-size: large;
    
        }
    
        .item-img {
            width: 600px;
            height: 400px;
    
            background-image: url("https://mblogthumb-phinf.pstatic.net/MjAxODA3MjBfOSAg/MDAxNTMyMDgyMTM5NTg0.aI_DFwdSQFSlg0vbtjeRiPlM3-Uo91JluWcJG2QlxY0g.dd-firQMVkUSR4KilOCQRAUaghhsSli6KD-7duGA1zkg.JPEG.victoryace89/1S25PD9ZTC_1.jpg?type=w800");
            background-position: center;
            background-size: cover;
        }
    
        .price {
            font-size: 30px;
        }
    
        .item-desc {
            width: 600px;
            margin-top: 20px;
            margin-bottom: 20px;
        }
    
        .item-order {
            width: 600px;
        }
    
        .btn-order {
            margin: auto;
            width: 100px;
    
            display: block;
        }
    
        .wrap {
            width: 600px;
            margin: auto;
        }
    
    </style>
    
    <script>
        function order() {
            alert('2018. 07. 21 (토) 밤 11:05');
        }
    </script>

    ギャングと権力派タエの殺人事件から1年後


    1年間の追跡、そして逮捕.
    昨年放送された
    「パタヤ殺人事件」の有力な金亨鎮容疑者が4月に逮捕された.2015年11月、タイのパタエ高級リゾート駐車場で発見された25歳の工科学生の死体.全身にひどい殴打の跡がある.
    ぎっしり詰まっている.事件後、姿を消して逃げた金亨振.昨年
    「それが知りたい」が放送された後、「ベトナムのどこかに隠れている」という重要な通報を受けた後、国際刑事組織とベトナムの地元警察の共同捜査を通じて、キム・ヒョンジン容疑者を逮捕した.
    事件発生から28カ月後、彼はどのようにして外部の視線を避けたのだろうか.制作チームは、金亨振(キム・ヒョンジン)氏が検挙されたベトナム現地で、記憶の中の人々に会うことができる.彼らの言うこと.
    金亨振容疑者の逃亡生活はどうだった?そして、彼らが言及した物語では、事件の追跡は別の方向に流れる.
    </div>
    <div class="item-order">
        <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">국제마피아파</option>
                <option value="2">스포츠토토 총판</option>
                <option value="3">파타야 범죄</option>
            </select>
        </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">이재명</option>
                <option value="2">은수미</option>
                <option value="3">성남경찰관</option>
            </select>
        </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">SBS</option>
                <option value="2">YOUTUBE</option>
            </select>
        </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">이큰별</option>
                <option value="2">그알제작진</option>
            </select>
        </div>
    </div>
    <button type="button" onclick="order()" class="btn btn-primary btn-order">방송 일자</button>
    ```