부트 스트랩(bootstrap) - 오픈소스 프론트엔드 프레임워크
<head> 안에 프레임워크 가져오는 코드 작성 </head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
부트스트랩 컴포넌트 5.0
<body>안에 만들어둔 걸 찾아서 붙여 넣기 </body>
https://getbootstrap.com/docs/5.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
만들어보기
1. 전략세우기 - <div> 안에 <h1>, <button>
2. div의 내용물 정렬시키기 (4줄 늘 같이 사용)
display: flex;
flex-direction: column; /*내용물을 세로로 정렬. 값이 row면 가로*/
align-items: center;
justify-content: center;3. div태그 안 button 지정하기
.mytitle > button {
/*mytitle아래에 있는 모든 button을 지칭*/
background-color: transparent; // 배경색 없애기
border: 1px solid white; // 테두리: 1픽셀 실선
border-radius: 50px; //테두리 둥글게
}4. button에 마우스를 올렸을 때 살짝 굵어지게
.mytitle > button:hover {
border: 2px solid white;
}5. 배경 어둡게 하기
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(이미지주소);6. 포스터 (부트스트랩사용)
7. 포스팅박스 만들기 (부트스트랩 Floation labels사용)
그림자 효과: box-shadow: 0px 0px 3px 0px gray;
github에 파일 업로드
주의) github을 이용해서 배포할 때는 파일이 하나여야되고, 파일 이름이 index여야 한다.
new -> Repository name 설정 - Create Repository - uploading an existing file - index파일 넣기 - Commit changes
공개 설정 : Settings - Pages - Branch를 main으로 변경하고 저장 - 배포 기다리기
수정하기 - Code - index.html파일 클릭 - 연필모양 클릭 후 수정 - Commit changes - 기다리면 수정됨
'[스파르타 코딩클럽] > 비개발자를 위한, 웹개발 종합반' 카테고리의 다른 글
| Fetch연습2 (0) | 2023.02.20 |
|---|---|
| 서버-클라이언트 통신(GET,POST)/JSON/Fetch연습 (0) | 2023.02.20 |
| JavaScript 기초/split/JQuery기초/append (0) | 2023.02.20 |
| CSS기초/구글 웹폰트 사용법 (0) | 2023.02.19 |
| 웹 브라우저 원리/ HTML 기초 (0) | 2023.02.19 |
