9.13
웹 프로그래밍 A-Z기초 1주차
1) 파이참 자동 정열 (깔금하게 정리)
* 탭 - 영역관리? 는 되지않고 줄만 나누어진다...ㅠ
ctrl+alt+L
(이런 느낌)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>로그인페이지</title>
</head>
<body>
<h1>로그인 페이지</h1>
<p>ID: <input type="text"/></p>
<p>PW: <input type="text"/></p>
<button>로그인하기</button>
</body>
</html>2) CSS 속성
1. background - size : cover
백그라운드 이미지를 지정해 줄 때, cover에 맞게 사이즈 조정
2. margin : auto
객체 가운데 정렬 (양쪽 여백을 동등하게 줘서 해결)
.wrap {
margin: 10px auto;
width: 300px;
}3. class의 이름을 2개 붙히는게 가능하다..! (클래스 중첩)
<button class="mybtn red-font">로그인하기</button>이렇게 지정을 해주면
.mybtn 과 .red-font 2개의 class 이름은 모두 설정이 먹는다
3) 부트스트랩 사용하기
- 부트스트랩이란, 쉽게 CSS를 적용할 수 있게 만든 일종의 오픈소스...? 개념으로 이해해도 될거 같다.
1. bootstrap 시작시 템플릿을 설정해 주어야 한다.
<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>
2. 소스 가져다 쓰기
그 다음 부트스트랩 홈페이지에서 원하는 css 를 가져다 쓰면 된다 끝!
https://getbootstrap.com/docs/4.0/components/buttons/
Buttons
Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
getbootstrap.com
'회고 > Today I Learned' 카테고리의 다른 글
| [TIL] 9.19 -스파르타 내일배움캠프 7일차 (TIL에 대해서) (0) | 2021.09.19 |
|---|---|
| [TIL] 9.17 - 스파르타 내일배움캠프 5일차 (Og 태그 달기, 리눅스 PS 명령어) (2) | 2021.09.18 |
| [TIL] 9.16 - 스파르타 내일배움캠프 4일차(AWS 서버 구매 및 배포/ AWS ,mongoDB 연동하기, 포트포워딩, nohup) (0) | 2021.09.16 |
| [TIL] 9.15 - 스파르타 내일배움캠프 3일차 (Flask Get, Post 메서드 / Meta 태그) (0) | 2021.09.15 |
| [TIL] 9.14 - 스파르타 내일배움캠프 2일차 (Jquery /크롤링 / MongoDB(파이썬 연동), Robo3T) (0) | 2021.09.14 |