개발일지 2022.04.19 첫 웹페이지 제작

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

<link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">

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

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

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

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

    .fosting-box {
        width: 500px;
        margin: 0px auto 30px auto;
        margin-bottom: 15px;
        padding: 30px;
        border: 2px solid black;
        border-radius: 3px;
    }

</style>

나홀로 링크 메모장!

중요한 링크를 저장해두고, 나중에 볼 수 있는 공간입니다

포스팅박스 열기 

<div class="fosting-box">
    <div class="form-group">
        <label for="exampleInputEmail1">아티클 URL</label>
        <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    </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://a.cdn-hotels.com/gdcs/production40/d811/5e89ad90-8f10-11e8-b6b0-0242ac110007.jpg"
             alt="Card image cap">
        <div class="card-body">
            <a href="https://www.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://a.cdn-hotels.com/gdcs/production40/d811/5e89ad90-8f10-11e8-b6b0-0242ac110007.jpg"
             alt="Card image cap">
        <div class="card-body">
            <a href="https://www.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://a.cdn-hotels.com/gdcs/production40/d811/5e89ad90-8f10-11e8-b6b0-0242ac110007.jpg"
             alt="Card image cap">
        <div class="card-body">
            <a href="https://www.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://a.cdn-hotels.com/gdcs/production40/d811/5e89ad90-8f10-11e8-b6b0-0242ac110007.jpg"
             alt="Card image cap">
        <div class="card-body">
            <a href="https://www.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://a.cdn-hotels.com/gdcs/production40/d811/5e89ad90-8f10-11e8-b6b0-0242ac110007.jpg"
             alt="Card image cap">
        <div class="card-body">
            <a href="https://www.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://a.cdn-hotels.com/gdcs/production40/d811/5e89ad90-8f10-11e8-b6b0-0242ac110007.jpg"
             alt="Card image cap">
        <div class="card-body">
            <a href="https://www.naver.com/" class="card-title">여기 기사 제목이 들어가죠</a>
            <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
            <p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
        </div>
    </div>
</div>

정리.

  1. head 부분에는 부트스트랩 때문에 넣어야 하는거, 타이틀, 웹폰트 링크(위에꺼)가 들어간다.
  2. 스타일(css)도 head에 들어간다.
  3. margin은 위부터 시계방향으로 돌아간다.
  4. border는 굵기, 종류, 색깔 순이다. solid가 실선이다. 고체 아니었나?
  5. 전체를 wrap으로 싸서 드셔보세요. 페이지 전체의 크기를 먹이고 싶을 때에는 전체를 div로 묶고 class="" 준 다음 css로 조정한다.
  6. 부트스트랩(https://getbootstrap.com/docs/4.0/components/buttons/)과 구글 웹폰트(https://fonts.google.com/?subset=korean)를 기억하자.
  7. < textarea class="form-control" id="exampleFormControlTextarea1" rows="3">< /textarea> 를 잘 모르겠다. 또 보자.

소감.

  1. 학교 다닐 때 영어 단어 열심히 외울걸...
  2. 배우고 때때로 익히니 쩔지 아니한가. 저녘에 복습으로 다시 한 번 써봤다. 물론 막힐 때마다 무슨 단어를 써야하는지 보고 쓴거긴 하지만 기부니가 좋았다.
  3. 코딩 속도를 올리려면 css 단어 기본적인건 외워야 할 것 같은데 정말 안 외워진다. bold가 font-weight에 있다니 그걸 내가 어캐 아나? border 같은거 엑셀 함수처럼 무슨 자리에 뭐 들어가는지 띄워주면 좋을텐데... 물론 구글링하면 나오긴 하지만 좀 외워야 빨리 칠텐데 이건 좀 걱정된다. 기억력이슈...
Javascript 공튕기기
Optimistic-Ui

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage