왕초보 day_2

조소영·2021년 6월 30일
개발일지스파르타왕초보왕초보개발일지
0
<!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=Sunflower:wght@300&display=swap" rel="stylesheet">


    <style>
        * {
            font-family: 'Sunflower', sans-serif;
        }

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

        .comment {
            color: blue;
            font-weight: bold;
        }

        .box {
            margin: 10px auto 30px auto;
            width: 500px;
            border: 3px solid black;
            border-radius: 10px;
            padding: 25px;


        }

    </style>
</head>

<body>
<div>
    <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="box">
            <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="3"></textarea>
            </div>
            <button type="submit" class="btn btn-primary">기사저장</button>

        </div>


    </div>
</div>

<div class="card-columns">
    <div class="card">
        <img class="card-img-top"
             src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR-i1TsJ0G4Y6js4IjWLRBmaiTxjWFoyBd2uw&usqp=CAU"
             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 class="card">
        <img class="card-img-top"
             src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR-i1TsJ0G4Y6js4IjWLRBmaiTxjWFoyBd2uw&usqp=CAU"
             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 class="card">
        <img class="card-img-top"
             src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR-i1TsJ0G4Y6js4IjWLRBmaiTxjWFoyBd2uw&usqp=CAU"
             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 class="card">
        <img class="card-img-top"
             src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR-i1TsJ0G4Y6js4IjWLRBmaiTxjWFoyBd2uw&usqp=CAU"
             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 class="card">
        <img class="card-img-top"
             src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR-i1TsJ0G4Y6js4IjWLRBmaiTxjWFoyBd2uw&usqp=CAU"
             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 class="card">
        <img class="card-img-top"
             src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR-i1TsJ0G4Y6js4IjWLRBmaiTxjWFoyBd2uw&usqp=CAU"
             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>

이게 다 모냐고 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
일단 나홀로 메모장 만들기 수업인데
부트스트랩을 이용해서 뼈대를 만들었다!

구글로 코딩 열어서 볼때에 오른쪽버튼-검사 누르면 개발자도구로 볼수있음! 해당코드에 마우스커서 올리면 해당코드가 어느부분에 입력되는지? 알수있음!

전체문단,박스를 구성변경하려면
바디안에 디브를 새로 만들고, 디브옆에 class="아무말" 만들어서 그안에 ctrl+x,ctrl+v해서 넣고, 헤드 안에 스타일태그 만들어서
.아무말 { 해서 여백, 넓이, 중앙정렬 등으로 맞춘다!

폰트굵기는 구글에 css폰트굵기 검색

폰트설정은 구글복사해서 타이틀태그 밑에 붙여넣기 (긴거), 스타일태그 밑에 *{ 해서 붙여넣기 (폰트패밀리 어쩌고)

링크-a태그? 이그젬플 코드에 써있음! a태그로 하이퍼링크 달때에는 기존코드를 지우고 a를 쓰면 닫힘코드도 자동으로 바뀜!

여기까지 수업들으면서 쓴 메모장,,,
코멘트 넣는거 어떻게 햇더라?
내일 다시 복습해야해ㅠㅠ 너무어려움
사주볼때 잘하는 사람 옆에있으면 나도 잘한다고 했는데
스파르타 왕초보반에 잘하는사람 진짜 많은데도
나는 허덕이고 있음 ㅎㅎㅎ
이건 진짜 기초중에 기초라고,,,그랬는데
일단 영어랑도 안친하고 구글링 하는것도 익숙하지않다ㅠㅠ
오늘은 강의 2개듣고 뇌 과부화 왔으니
내일도 12,13,14강 금요일 15,16강 듣고 전체 복습 해야지 아쟈아쟈

+11강 수업 포스팅박스? 까지 만든 코드!
마찬가지로 부트스트랩 에서 폼즈 다운받아서 수정한 양식~
박스만들고, 모서리 둥글게 하고, 간격 띄우고!

profile
조소영
에이치아이~
이전 포스트

왕초보 day_1

다음 포스트

왕초보 day_4

0개의 댓글