회고/Today I Learned

[TIL] 9.13 - 스파르타 내일배움캠프 1일차 (파이참 자동정렬 / 웹 기초 / 부트스트랩)

민돌v 2021. 9. 13. 22:22

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

 

 

 

 

 

 

 

 

저작자표시 (새창열림)