2021. 12. 28. 20:54ㆍ코딩공부/스파르타코딩클럽 - 웹개발종합반
부트스트랩, 예쁜 CSS 모음집
https://getbootstrap.com/docs/4.0/components/alerts/
Alerts
Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
getbootstrap.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>
</head>
<body>
<button type="button" class="btn btn-primary">나는 버튼이다</button>
</body>
</html>
부트스트랩을 써보자
스파르타코딩클럽 | 부트스트랩 연습하기
Card title that wraps to a new line This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
s3.ap-northeast-2.amazonaws.com
위와 같은 페이지를 만들어보자
부트스트랩에서 jumbotron 검색, card columns 검색
크롬 검사에서 필요한 태그부분만 찾기
Quiz_함께 만든 페이지를 발전시켜보세요!
스파르타코딩클럽 | 부트스트랩 연습하기
여기 기사 제목이 들어가죠 기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...
s3.ap-northeast-2.amazonaws.com
페이지를 위에와 같이 바꿔보자
Quiz_나홀로메모장의 포스팅박스를 완성하기!
스파르타코딩클럽 | 부트스트랩 연습하기
s3.ap-northeast-2.amazonaws.com
위와 같이 포스팅박스를 완성해보자
힌트:
1. 부트스트랩 컴포넌트 페이지에서 forms를 참고하세요!
2. 가운데로 가져오려면 똑같이 width, margin를 활용합니다.
3. 경계선을 둥글게 그리는 방법을 찾기 위해 다음을 구글링해봅니다. - border - border-radius 4. 경계선과 내부 요소의 간격은 padding으로 조절하는게 좋습니다.
CSS border 구글링
https://www.codingfactory.net/10620
CSS / border / 테두리 만드는 속성
개요 border는 테두리를 만드는 속성입니다. 위, 오른쪽, 아래, 왼쪽 선을 한 번에 정합니다. 기본값 : medium, none, color 상속 : No 애니메이션 : Yes 버전 : CSS Level 1 문법 border: border-width border-style border-c
www.codingfactory.net
css border radius 구글링
https://www.codingfactory.net/10957
CSS / border-radius / 테두리 둥글게 만드는 속성
border-radius border-radius는 테두리를 둥글게 만드는 속성입니다. CSS3에서 정의되었으며, IE는 버전 9부터 지원합니다.(IE8에서 사용하는 방법) 8개의 속성 값을 넣어야 하지만, 값이 같다면 짧게 쓸 수
www.codingfactory.net
css padding 구글링
https://developer.mozilla.org/ko/docs/Web/CSS/margin
margin - CSS: Cascading Style Sheets | MDN
margin CSS 속성은 요소의 네 방향 바깥 여백 영역을 설정합니다. margin-top, margin-right, margin-bottom, margin-left의 단축 속성입니다.
developer.mozilla.org
부스트 트랩의 form에서 간단 코멘트 밑의 텍스트박스 모양과 같은 소스 참고하기
** 구글링 팁 : 검색어 뒤에 w3schools, mdn 같이 소스 모아논 사이트들을 붙여서 검색하면 좋다