웹 1주차

미역국·2021년 7월 5일

스파르타_웹

목록 보기

1/4

코드정렬: ctrl + alt + l
주석처리: ctrl + /
background(css에서):

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

부트스트랩
클래스 이름 추가하고자 할때 그냥 class=""의 "" 안에 띄어서 구분해서 적어주면 끝
글씨체 변경:

<link href="https://fonts.googleapis.com/css2?family=Yeon+Sung&display=swap" rel="stylesheet">
    <style>
        *{
            font-family: 'Yeon Sung', cursive;
        }

JavaScript:

let a = 5
let my_name = 'junto'
let list = ['딸기','베리','수박']
let dict = {'name':'bob','age':27}
dict['name'] //'bob'
dict['height'] = 180
dict['fruits'] = list //딕셔너리에 리스트 추가하기
dict //{'name':'bob','age':27,'height':180,'fruit':Array(3)}
let myemail = 'junto@gmail.com'
myemail.split('@') //['junto','gmail.com']
myemail.split['@'][1].split('.') //['gmail','com']

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>
    <link href="https://fonts.googleapis.com/css2?family=Yeon+Sung&display=swap" rel="stylesheet">
    <style>
        *{
           font-family: 'Yeon Sung', cursive;
        }
        .image {

            width: 500px;
            height: 300px;

            background-image: url("https://pbs.twimg.com/profile_images/2605561181/image_400x400.jpg");
            background-size: cover;
            background-position: center;
        }
        .price{
            font-size: 20px;
        }
        .order{
            width:500px;
        }
        .descript{
            width:500px;
            margin:20px;
        }
        .btn{
            margin:auto;
            display: block;
        }
        .order-form{
            width:500px;
            margin: 20px auto 20px auto;

        }

    </style>

</head>

<body>
    <div class="order-form">
        <div class="image"></div>
        <div class="descript">
            <h1>상품제목 <span class="price">가격:1,000,000,000,000원 /개</span></h1>
            <p>이 상품은 팔지 않습니당</p>
        </div>
        <div class="order">
            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <span class="input-group-text" id="inputGroup-sizing-default">주문자 성함</span>
                </div>
                <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
            </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>Choose...</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="inputGroup-sizing-default">주소</span>
                </div>
                <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
            </div>
            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <span class="input-group-text" id="inputGroup-sizing-default">전화번호</span>
                </div>
                <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
            </div>
            <button type="button" class="btn btn-primary btn">버튼</button>
        </div>
    </div>>
</body>

</html>코드를 입력하세요

미역국

웅냥웅냥

다음 포스트

웹 1주차

스파르타_웹

웹 2주차

0개의 댓글

관련 채용 정보