[Sparta] 21.08.03 개발일지 1

novxerim·2021년 11월 10일
0

Sparta

목록 보기
1/9

로그인 페이지

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>로그인페이지</title>
    <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&display=swap" rel="stylesheet">
    <style>
        *{
            font-family: 'Gaegu', cursive;
        }
        .mytitle {
            background-color: green;

            width: 300px;
            height: 200px;

            color: white;
            text-align: center;

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

            border-radius: 10px;

            padding-top: 20px;
        }

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

        .mybtn {
            width: 100px;
            margin: auto;
            display: block;
        }

        .red-font {
            color: red;
            font-size: 16px;
        }

    </style>
</head>
<body>
    <div class="wrap">
        <div class="mytitle">
            <h1>로그인 페이지</h1>
            <h5>아이디, 패스워드를 입력해주세요</h5>
        </div>

        <p> ID: <input type="text"/></p>
        <p> PW: <input type="text"/></p>
        <button class="mybtn">로그인하기</button>
    </div>

</body>
</html>

나홀로 링크 메모장

<!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 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&display=swap" rel="stylesheet">


<style>

*{

font-family: 'Gaegu', cursive;

}

.wrap {

width: 900px;

margin: auto;

}

.comment {

color: blue;

font-weight: bold;

}

.font-bold {

font-weight: bold;

}

.articlebox {

width: 500px;

margin: 0px auto 30px auto;

border: 3px solid black;

border-radius: 5px;

padding: 50px;

}

</style>

<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 onclick="hey()" class="btn btn-primary btn-lg" href="#" role="button">포스팅박스 열기</a>

</p>

</div>


<div class="articlebox">

<div class="font-bold">

<label for="exampleInputEmail1">아티클 URL</label>

<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"

<p></p>

<div class="form-group">

<label for="exampleFormControlTextarea1">간단 코멘트</label>

<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>

</div>

<p></p>

<button type="submit" class="btn btn-primary font-bold">기사 저장</button>


</div>

</div>



<div class="card-columns">

<div class="card">

<img class="card-img-top" src="https://i.ytimg.com/vi/moFB-j5iY2E/maxresdefault.jpg" alt="Card image cap">

<div class="card-body">

<a href="http://naver.com/">여기 기사 제목이 들어가죠</a>

<p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>

<p class="card-text comment">여기에 코멘트가 들어갑니다.</p>

</div>

</div>

<div class="card">

<img class="card-img-top" src="https://i.ytimg.com/vi/moFB-j5iY2E/maxresdefault.jpg" alt="Card image cap">

<div class="card-body">

<a href="http://naver.com/">여기 기사 제목이 들어가죠</a>

<p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>

<p class="card-text comment">여기에 코멘트가 들어갑니다.</p>

</div>

</div>

<div class="card">

<img class="card-img-top" src="https://i.ytimg.com/vi/moFB-j5iY2E/maxresdefault.jpg" alt="Card image cap">

<div class="card-body">

<a href="http://naver.com/">여기 기사 제목이 들어가죠</a>

<p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>

<p class="card-text comment">여기에 코멘트가 들어갑니다.</p>

</div>

</div>

<div class="card">

<img class="card-img-top" src="https://i.ytimg.com/vi/moFB-j5iY2E/maxresdefault.jpg" alt="Card image cap">

<div class="card-body">

<a href="http://naver.com/">여기 기사 제목이 들어가죠</a>

<p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>

<p class="card-text comment">여기에 코멘트가 들어갑니다.</p>

</div>

</div>

<div class="card">

<img class="card-img-top" src="https://i.ytimg.com/vi/moFB-j5iY2E/maxresdefault.jpg" alt="Card image cap">

<div class="card-body">

<a href="http://naver.com/">여기 기사 제목이 들어가죠</a>

<p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>

<p class="card-text comment">여기에 코멘트가 들어갑니다.</p>

</div>

</div>

<div class="card">

<img class="card-img-top" src="https://i.ytimg.com/vi/moFB-j5iY2E/maxresdefault.jpg" alt="Card image cap">

<div class="card-body">

<a href="http://naver.com/">여기 기사 제목이 들어가죠</a>

<p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>

<p class="card-text comment">여기에 코멘트가 들어갑니다.</p>

</div>

</div>

</div>

</div>

</body>


</html>
profile
novxerim
블로그 이전했습니다. https://yerimi11.tistory.com/
다음 포스트

[Sparta] 21.08.04 개발일지 2

0개의 댓글