🎈부트스트랩 사용법

아래 링크처럼 만들어보기
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

🎈부트스트랩에서 card들고 오기

• 부트스트랩에서 jumbotron카테고리에서 알맞은것을 복사해서 body안에 붙여넣는다.
• 부트스트랩 card에 들어가서 링크 내용물과 맞는 모양을 찾는다.
• 복사해올때 여러개의 card 디자인중 필요한거 하나만 살리고싶다면
  copy버튼을 눌러서 일단 다갖고 온다.
• body에 들어가서 가져온 "jumbotron" div를 접고 그밑에 붙여넣어준다.

🎈필요한 카드div 골라내기

• 구동해보면 여러개의 카드 버전이 나와있는데 그중에 필요한 카드 그림에 오른쪽버튼으로 검사를 한다.(네이버 뉴스 글자 바꿨을 때처럼)
• elements에서 마우스로 하나하나 대보면서 필요한 카드의 영역이 어디까지인지 필요없는건 어디부터인지 를 확인해 본다.
• 파이참으로 돌아가서 "card-columns" 안에 있는 div들을 다 접어주고 필요없는 div들은 삭제 해준다.

🎈사진 채워넣기

• 브라우저에 지금은 사진이 비워져있는데 파이참 card를 펼쳐보면 src="..."로 비어져있다.
• 이미지를 하나 찾아서 이미지 주소복사로 넣어준다.

🎈크기 맞추기

• 링크의 본문과 비슷해지려면 사이즈를 줄이고 가운데로 오게 하는 작업이 필요하다.
• 당장 wrap으로 묶어주자
• 먼저, body 안에 div를 생성 해주고 그 안에 잘접혀진
• div2개 (jump..,..columns)들을 ctrl+x로 생성한 div안에 넣어준다.
• style 안에 .wrap으로 width: 900px; margin: auto;를 먹여준다.

🎈완성