본문 바로가기
카테고리 없음

스파르타코딩 웹개발 QUIZ 1주차

by Hanachoi 2022. 4. 8.

https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/web101/week01/08.+%EB%82%98%ED%99%80%EB%A1%9C%EB%A9%94%EB%AA%A8%EC%9E%A5%ED%8B%80.html

 

스파르타코딩클럽 | 부트스트랩 연습하기

여기 기사 제목이 들어가죠 기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...

s3.ap-northeast-2.amazonaws.com

#위에 있는 화면처럼 만들기

 

    •  내가 만든 코드
<!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=Noto+Sans+KR:wght@300&display=swap" rel="stylesheet">

    <style>
        *{
            font-family: 'Noto Sans KR', sans-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="https://images.unsplash.com/photo-1552832230-c0197dd311b5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8cm9tZXxlbnwwfHwwfHw%3D&w=1000&q=80"
                     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://images.unsplash.com/photo-1552832230-c0197dd311b5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8cm9tZXxlbnwwfHwwfHw%3D&w=1000&q=80"
                     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://images.unsplash.com/photo-1552832230-c0197dd311b5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8cm9tZXxlbnwwfHwwfHw%3D&w=1000&q=80"
                     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://images.unsplash.com/photo-1552832230-c0197dd311b5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8cm9tZXxlbnwwfHwwfHw%3D&w=1000&q=80"
                     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://images.unsplash.com/photo-1552832230-c0197dd311b5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8cm9tZXxlbnwwfHwwfHw%3D&w=1000&q=80"
                     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://images.unsplash.com/photo-1552832230-c0197dd311b5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8cm9tZXxlbnwwfHwwfHw%3D&w=1000&q=80"
                     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>
  • 헷갈렸던 부분
<a href="http://naver.com/" class="card-title">여기 기사 제목이 들어가죠</a>
  • "여기 기사 제목이 들어가죠"부분에는 하이퍼링크가 걸리는 코드가 들어가야되니까 a 코드로 바꿔줘야함.

 

<p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
  • 여기 글씨는 파란색에 bold처리가 되어야 함. 
  • 중첩으로 처리를 해서 글자모양을 바꿔주자
  • .comment 로 코드 만들고 컬러:blue ; / 굵기 font-weight : bold; 하나 넣어주고 중첩시키자
  • 글씨체를 바꾸려면 구글폰트에서 링크 긁어와서 <title>밑에 붙여넣고
  • <style>밑에 *{} 만들고 font-family 부분 긁어서 넣어주기

 

 

 

#위 내용에 포스팅박스 추가하기

https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/web101/week01/10.+%ED%8F%AC%EC%8A%A4%ED%8C%85%EB%B0%95%EC%8A%A4%EA%B9%8C%EC%A7%80.html

 

스파르타코딩클럽 | 부트스트랩 연습하기

 

s3.ap-northeast-2.amazonaws.com

  • bootstrap에서 form 파트 참고하기
  • <form>태그를 발견하면<div>로 바꾸자
  • 관련 태그를 구글링할때 w3schools.com/mdn에 잘 나옴 ex. CSS border w3school.com / CSS border mdn

 

  • 내가 한 코드
<!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=Noto+Sans+KR:wght@300&display=swap" rel="stylesheet">

    <style>
        *{
            font-family: 'Noto Sans KR', sans-serif;
        }
        .wrap {
            width: 900px;
            margin: auto;
        }
        .comment{
            color : blue;
            font-weight: bold;
        }
        .posting-box{
            width : 500px;
            margin : 0px auto 30px auto;
            border: 3px solid black;
            border-radius: 10px;
            padding: 30px;


        }


    </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="posting-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 class="card-columns">
            <div class="card">
                <img class="card-img-top"
                     src="https://images.unsplash.com/photo-1552832230-c0197dd311b5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8cm9tZXxlbnwwfHwwfHw%3D&w=1000&q=80"
                     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://images.unsplash.com/photo-1552832230-c0197dd311b5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8cm9tZXxlbnwwfHwwfHw%3D&w=1000&q=80"
                     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://images.unsplash.com/photo-1552832230-c0197dd311b5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8cm9tZXxlbnwwfHwwfHw%3D&w=1000&q=80"
                     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://images.unsplash.com/photo-1552832230-c0197dd311b5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8cm9tZXxlbnwwfHwwfHw%3D&w=1000&q=80"
                     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://images.unsplash.com/photo-1552832230-c0197dd311b5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8cm9tZXxlbnwwfHwwfHw%3D&w=1000&q=80"
                     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://images.unsplash.com/photo-1552832230-c0197dd311b5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8cm9tZXxlbnwwfHwwfHw%3D&w=1000&q=80"
                     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>
  • 헷갈리는 부분
    •  margin이랑 padding 부분 헷갈린다. 넣을때 안/밖 잘 생각해서 넣기 
    • margine 사용시 그냥 한줄안에서 시계방향으로 숫자 넣으면 다 적용될 수 있다는거 기억하기
    • 다른코드에서 필요한 부분만 가져와서 넣거나 필요없는거 뺄때 코드 영역 잘 확인하고 정확히 추가하고 빼기

댓글

티스토리툴바