포도가게의 개발일지

html, css 기초(1) 본문

웹

html, css 기초(1)

grape.store 2021. 6. 28. 19:55
반응형
더보기

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

 <style>
 * {
font-family: 'Hi Melody', cursive;
 }

.display-4 {
font-size: 60px;
 }

.wrab {
width: 900px;
 margin: auto;
 }

.board {
border: solid;

 border-radius: 5px;

 width: 400px;
 padding: 20px 40px 20px 40px;
 margin: auto;
 display: block;
 }

.card-title {
color: cornflowerblue;
 }

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

</head>

<body>
<div class="wrab">
 <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">포스팅박스 열기</a>
 </p>

 </div>
 <div class="board">
 <div class="form-group">
 <label for="exampleInputEmail1">아티클 URL</label>
 <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"
 placeholder="">
 </div>
 <div class="form-group">
 <label for="exampleFormControlTextarea1">간단 코멘트</label>
 <textarea class="form-control" id="exampleFormControlTextarea1" rows="2"></textarea>
 </div>
 <button type="submit" class="btn btn-primary">기사저장</button>
 </div>
 <p></p>
 <div class="card-columns">
 <div class="card">
 <img class="card-img-top"
 src="https://post-phinf.pstatic.net/MjAxODAyMjdfMjA5/MDAxNTE5NzE0ODQyMTQ1.tzaKttIzHvs2pO5LGb50nIejX_q5j_GVDtkssNHyrBwg.eDpqAw7msePibaywyAUFqsaeAQgc9jizCx0DsCXm81Ig.JPEG/6_Fotolia_127759684_Subscription_Monthly_M.jpg?type=w1200"
 alt="Card image cap">
 <div class="card-body">
 <!-- <h5 class="card-title">여기 기사 제목이 들어가죠</h5>-->
 <h5><a class=card-title href="http://naver.com/"> 여기 기사 제목이 들어가죠 </a></h5>
 <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
 <p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
 </div>
 </div>
 <div class="card">
 <img class="card-img-top"
 src="https://post-phinf.pstatic.net/MjAxODAyMjdfMjA5/MDAxNTE5NzE0ODQyMTQ1.tzaKttIzHvs2pO5LGb50nIejX_q5j_GVDtkssNHyrBwg.eDpqAw7msePibaywyAUFqsaeAQgc9jizCx0DsCXm81Ig.JPEG/6_Fotolia_127759684_Subscription_Monthly_M.jpg?type=w1200"
 alt="Card image cap">
 <div class="card-body">
 <!-- <h5 class="card-title">여기 기사 제목이 들어가죠</h5>-->
 <h5><a class=card-title href="http://naver.com/"> 여기 기사 제목이 들어가죠 </a></h5>
 <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
 <p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
 </div>
 </div>
 <div class="card">
 <img class="card-img-top"
 src="https://post-phinf.pstatic.net/MjAxODAyMjdfMjA5/MDAxNTE5NzE0ODQyMTQ1.tzaKttIzHvs2pO5LGb50nIejX_q5j_GVDtkssNHyrBwg.eDpqAw7msePibaywyAUFqsaeAQgc9jizCx0DsCXm81Ig.JPEG/6_Fotolia_127759684_Subscription_Monthly_M.jpg?type=w1200"
 alt="Card image cap">
 <div class="card-body">
 <!-- <h5 class="card-title">여기 기사 제목이 들어가죠</h5>-->
 <h5><a class=card-title href="http://naver.com/"> 여기 기사 제목이 들어가죠 </a></h5>
 <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
 <p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
 </div>
 </div>
 <div class="card">
 <img class="card-img-top"
 src="https://post-phinf.pstatic.net/MjAxODAyMjdfMjA5/MDAxNTE5NzE0ODQyMTQ1.tzaKttIzHvs2pO5LGb50nIejX_q5j_GVDtkssNHyrBwg.eDpqAw7msePibaywyAUFqsaeAQgc9jizCx0DsCXm81Ig.JPEG/6_Fotolia_127759684_Subscription_Monthly_M.jpg?type=w1200"
 alt="Card image cap">
 <div class="card-body">
 <!-- <h5 class="card-title">여기 기사 제목이 들어가죠</h5>-->
 <h5><a class=card-title href="http://naver.com/"> 여기 기사 제목이 들어가죠 </a></h5>
 <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
 <p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
 </div>
 </div>
 <div class="card">
 <img class="card-img-top"
 src="https://post-phinf.pstatic.net/MjAxODAyMjdfMjA5/MDAxNTE5NzE0ODQyMTQ1.tzaKttIzHvs2pO5LGb50nIejX_q5j_GVDtkssNHyrBwg.eDpqAw7msePibaywyAUFqsaeAQgc9jizCx0DsCXm81Ig.JPEG/6_Fotolia_127759684_Subscription_Monthly_M.jpg?type=w1200"
 alt="Card image cap">
 <div class="card-body">
 <!-- <h5 class="card-title">여기 기사 제목이 들어가죠</h5>-->
 <h5><a class=card-title href="http://naver.com/"> 여기 기사 제목이 들어가죠 </a></h5>
 <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
 <p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
 </div>
 </div>
 <div class="card">
 <img class="card-img-top"
 src="https://post-phinf.pstatic.net/MjAxODAyMjdfMjA5/MDAxNTE5NzE0ODQyMTQ1.tzaKttIzHvs2pO5LGb50nIejX_q5j_GVDtkssNHyrBwg.eDpqAw7msePibaywyAUFqsaeAQgc9jizCx0DsCXm81Ig.JPEG/6_Fotolia_127759684_Subscription_Monthly_M.jpg?type=w1200"
 alt="Card image cap">
 <div class="card-body">
 <!-- <h5 class="card-title">여기 기사 제목이 들어가죠</h5>-->
 <h5><a class=card-title href="http://naver.com/"> 여기 기사 제목이 들어가죠 </a></h5>
 <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
 <p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
 </div>
 </div>
 </div>
</div>
</body>

</html>

'웹' 카테고리의 다른 글

원페이지 쇼핑몰 완성  (0) 2021.07.05
스파르타 코딩클럽 4주차 숙제(mongodb, flask, requests,ajax)  (0) 2021.07.03
requests pakage 사용(Get)  (0) 2021.07.02
스파르타 코딩클럽 2주차 숙제(ajax, 환율표시)  (0) 2021.07.01
스파르타 코딩클럽(왕초보) 1주차 숙제  (0) 2021.06.29
'웹' Related Articles more
Comments