기본적으로 bootstrap에서 양식을 가져와서 쓸 수 있다.
Bootstrap
강력하고 확장 가능하며 기능이 풍부한 프론트엔드 툴킷. Sass로 빌드 및 커스터마이징하고, 사전 빌드된 그리드 시스템 및 구성 요소를 활용하고, 강력한 JavaScript 플러그인으로 프로젝트에 생기
getbootstrap.kr
Bootstrap의 컴파일된 CSS 또는 JS만 필요하다면 CDN 링크를 가져와서 붙여 쓸 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>button</title>
<link rel="stylesheet" href="../css/bootstrap.css" />
<script src="../js/bootstrap.bundle.min.js"></script>css폴더에 bootstrap.css 파일을 만들고
js폴더에 bootstrap.bundle.min.js 파일을 만들어서 양식을 가져와서 쓸 수 있다.
<style>
button {
background-color: dodgerblue;
border: none;
cursor: pointer;
color: white;
/*모서리를 둥글게 */
border-radius: 10px;
}
</style>
</head>
<body>
<button>로그인</button>
<button class="btn btn-primary">Click</button>
<button class="bt">비밀번호</button>
<button class="btn btn-primary">Click</button>
</body>
</html>스타일에 버튼 태그는 기본적으로 블루 배경에 테두리는 없음 , 커서를 대면 마우스포인터 모양이 바뀌게 , 글색은 흰색이다.
border-radius로 모서리를 라운딩지게 할 수 있다.
본문의 btn btn-primary와 bt 는 bootstrap의 css파일에 정의되어 있어서 쓸 수 있다.
'Visual Studio Code > Visual Studio Code icia 33일차' 카테고리의 다른 글
| Visual Studio Code form에 대해서 - 2 (0) | 2023.04.07 |
|---|---|
| Visual Studio Code Form에 대해서 (0) | 2023.04.07 |
| Visual Studio Code Grid에 대해서 (0) | 2023.04.07 |
| Visual Studio Code MediaQuery에 대해서 (0) | 2023.04.07 |
| Visual Studio Code float로 layout 지정하기 (0) | 2023.04.07 |
