1. bootstrap 시작 템플릿

이용하려면 꼭 밑에 저장 된 코드를 먼저 붙인 다음에 bootstrap 사이트에 있는 코드를 붙어야 된다.

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

이걸로 시작해보죠!

2. bootstrap 코드 받는 곳

https://getbootstrap.com/docs/4.0/components/alerts/

3. bootstrap을 이용하면 내가 기존에 하던 방식은 같이 쓸 수 있나?

-YES!

4. 스파르타에서 제시한 웹페이지와 같이 만들기.

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

부트스트렙에 들어가서 필요한 코드를 복사해서 나의 파이참에 붙이기.

내가 필요한 것은 하나라도 만약 코드가 덩어리로 되어있으면 일단 다 붙이고

"네이버 카테고리 이름 바꾸는 형식"으로 코드는 확인해서 필요없는 것은 확인 후에 지우기.

Jumbotron 그리고 card column 입력 후

인터넷 상에 있는 사진을 땡겨오는 법

필요없는 코드 지우고 인터넷 사진 src 뒤에 입력한 후

Card Column 추가하기

그냥 하나 만든 Column Card를 copy&paste

앞에 스파르타에서 웹페이지 제시한 것과 같게
회색 박스 크기 조정.
Body 안에
div class="wrap" 사용
그리고
Head 안에 style 만들고
width: 900px;
margin: auto;
입력

<1> QUIZ -똑같이 만들기

사진만 다르게 다른 것은 다 같게

1. Style에서 * 전체 폰트font-family 설정
   font-family: 'Stylish', sans-serif;

   Style 전에는 font를 가져오는 곳을 명시해야 함.
   그래서 밑의 인터넷 주소를 붙임.

2. Body의 card-title에 a href 인터넷주소 입력
   a href="http://naver.com/" class="card-title">
   그리고 Style에서 card-title 색깔 설정
   color: dodgeblue;

3. 마지막 card-text2 항목을 위해
   Style에서 color,font 그리고 margin 변경
   color: blue;
   font-weight: bold;
   margin: 10px 0px 10px 0px;

   

Pycharm 코드가 너무 길어서 캡쳐가 힘들어
밑에 복붙. - 뭔가 Style은 반영이 안 되고 그 밑의 Body 내용은 다 반영이 되서 Card-text 5개는 지우고 하나만 남겨놨음.

<!-- 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=Nanum+Pen+Script&family=Stylish&display=swap" rel="stylesheet">
<style>
    .wrap {
        width: 900px;
        margin: auto; }

    .card-text2 {
        margin 10px 0px 10px 0px;
        color: blue;
        font-weight: bold;       }

    .card-title {
        color: dodgerblue; }

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

나홀로 링크 메모장!

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

---

포스팅박스 열기

여기에 기사 제목이 들어가죠

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

여기에 코멘트가 들어갑니다.

<2> Quiz2

위의 sample 중간에 새로운 box는 Bootstrap 에서 Forms(Overview)를 확인해보기
form이라고 설정이 되어있는 코드 맨 앞과 맨 뒤를 div로 바꿔주기. 내가 배우는 수준은 이게 편함.

CSS border 참고 사이트

https://developer.mozilla.org/en-US/docs/Web/CSS/border
https://www.w3schools.com/css/css_border.asp

1. 전체 복사해서 가져온 Forms (overview) 코드에
   div class="posting-box" 명칭 정해주기.

2. Style 안에 posting-box 설정해주기.
   width: 500px;
   margin: 0px auto 20px auto;
   border: 3px solid black;
   border-radius: 10px;
   padding: 30px;

3. Forms(Overview) 코드에서 불필요한 것들 지우고
   텍스트 바꾸고 브라우저의 두 번째 텍스트 입력창은 가져온 것 부분적으로 지우고 Forms(FormControl)에서 Exampletextarea 코드만 찾아서 부분적으로 붙여주기.

   
   나의 Pycharm - index1-11.html 파일 참고!
   밑의 코드는 추가 된 내용만 기록

   아티클 URL

   간단 코멘트

   기사제출