1일차 (실습)


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>로그인페이지</title>
    <style>
        .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");
								// URL의 이미지를 배경으로 가져옴
            background-size: cover;		// 크기지정
            background-position: center;	// 위치지정

								// 이미지관련 세줄은 항상 같이사용
															
            border-radius: 10px;			// 모서리 둥글게 하는것

            padding-top: 20px;			// 안쪽 여백

        }

        .wrap {
            width: 300px;
            margin: auto;				// 로그인화면을 가운데로 가져오기
								// margin auto; 양옆을 동일하게 설정
								// 안될경우 display:block을 추가 
        }

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

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


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

  <style>
        .wrap {
            width: 900px;
            margin: auto;

        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="jumbotron"> // 부트스트랩의 점보트론 
            <h1 class="display-4">Hello, world!</h1>
            <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to
                featured content or information.</p>
            <hr class="my-4">
            <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
            <p class="lead">
                <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
            </p>
        </div>
        <div class="card-columns"> // 부트스트랩의 카드 컬럼
            <div class="card">
                <img class="card-img-top"
                     src="..." // 사진 이미지주소 넣는곳
                     alt="Card image cap">
                <div class="card-body">
                    <h5 class="card-title">Card title that wraps to a new line</h5>
                    <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional
                        content. This content is a little bit longer.</p>
                </div>
            </div>
            <div class="card">
                <img class="card-img-top"
                     src="..."
                     alt="Card image cap">
                <div class="card-body">
                    <h5 class="card-title">Card title that wraps to a new line</h5>
                    <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional
                        content. This content is a little bit longer.</p>
                </div>
            </div>
            <div class="card">
                <img class="card-img-top"
                     src="..."
                     alt="Card image cap">
                <div class="card-body">
                    <h5 class="card-title">Card title that wraps to a new line</h5>
                    <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional
                        content. This content is a little bit longer.</p>
                </div>
            </div>
            <div class="card">
                <img class="card-img-top"
                     src="..."
                     alt="Card image cap">
                <div class="card-body">
                    <h5 class="card-title">Card title that wraps to a new line</h5>
                    <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional
                        content. This content is a little bit longer.</p>
                </div>
            </div>
            <div class="card">
                <img class="card-img-top"
                     src="..."
                     alt="Card image cap">
                <div class="card-body">
                    <h5 class="card-title">Card title that wraps to a new line</h5>
                    <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional
                        content. This content is a little bit longer.</p>
                </div>
            </div>
            <div class="card">
                <img class="card-img-top"
                     src="..."
                     alt="Card image cap">
                <div class="card-body">
                    <h5 class="card-title">Card title that wraps to a new line</h5>
                    <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional
                        content. This content is a little bit longer.</p>
                </div>
            </div>
            
        </div>
    </div>

<!doctype html>
<html lang="en">


<head>
    <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=Gowun+Batang&display=swap" rel="stylesheet">
    <!-- 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: 'Gowun Batang', serif;
        }
        .wrap {
            width: 900px;
            margin: auto;

        }
        .comment{
            color: blue;
            font-weight: bold;
        }
    </style>
</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">포스팅박스 열기</a>
            </p>
        </div>
        <div class="card-columns">
            <div class="card">
                <img class="card-img-top"
                     src="..."
                     alt="Card image cap">
                <div class="card-body">
                    <a href="http://naver.com/" class="card-title">여기 기사 제목이 들어가죠</a>
                    <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
                    <p class="card-text comment">여기에 코멘트가 들어갑니다.</p>

                </div>
            </div>


        </div>
    </div>


</body>
</html>

<head>
	<style>
		.forms{
			border: black solid;
			border-radius: 5px;
			width: 500px;
			margin: 20px auto;
			padding: 50px;
								//border 형태의 경우 w3school / MDN									에서 조회 가능
		}
	</style>
</head>
<body>
	<div class="forms">
    		<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="exampleInputPassword1">간단 코멘트</label>
        		<input type="password" class="form-control" 						id="exampleInputPassword1" placeholder="">
    		</div>
    		<button type="submit" class="btn btn-primary">기사 저장</				button>
	</div>
</body>

좋은 웹페이지 즐겨찾기