웹개발종합반 1주차 - 부트스트랩, 예쁜 CSS 모음집 / Bootstrap(부트스트랩)을 써보자! / Quiz_함께 만든 페이지를 발전시켜보세요!
2021. 12. 28. 20:54ㆍ코딩공부/스파르타코딩클럽 - 웹개발종합반
부트스트랩, 예쁜 CSS 모음집
https://getbootstrap.com/docs/4.0/components/alerts/
부트스트랩은 시작 템플릿이 필수이다
<!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>
</head>
<body>
<button type="button" class="btn btn-primary">나는 버튼이다</button>
</body>
</html>
부트스트랩을 써보자
위와 같은 페이지를 만들어보자
부트스트랩에서 jumbotron 검색, card columns 검색
크롬 검사에서 필요한 태그부분만 찾기
Quiz_함께 만든 페이지를 발전시켜보세요!
페이지를 위에와 같이 바꿔보자
Quiz_나홀로메모장의 포스팅박스를 완성하기!
위와 같이 포스팅박스를 완성해보자
힌트:
1. 부트스트랩 컴포넌트 페이지에서 forms를 참고하세요!
2. 가운데로 가져오려면 똑같이 width, margin를 활용합니다.
3. 경계선을 둥글게 그리는 방법을 찾기 위해 다음을 구글링해봅니다. - border - border-radius 4. 경계선과 내부 요소의 간격은 padding으로 조절하는게 좋습니다.
CSS border 구글링
https://www.codingfactory.net/10620
css border radius 구글링
https://www.codingfactory.net/10957
css padding 구글링
https://developer.mozilla.org/ko/docs/Web/CSS/margin
부스트 트랩의 form에서 간단 코멘트 밑의 텍스트박스 모양과 같은 소스 참고하기
** 구글링 팁 : 검색어 뒤에 w3schools, mdn 같이 소스 모아논 사이트들을 붙여서 검색하면 좋다