🔖07. 폰트, 주석, 파일 분리
🔎구글 웹 폰트
https://fonts.google.com/?subset=korean
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
원하는 폰트 [Styles]
link태그 복사해 title태그 밑에다 복붙
css복사해 style태그 안에 *{ }에다 복붙
폰트 적용된걸 확인할 수 있다.
🔎주석
Ctrl + /(슬래시)
🔎파일 분리
<!-- style.css 파일을 같은 폴더에 만들고, head 태그에서 불러오기 -->
<link rel="stylesheet" type="text/css" href = "(css파일이름).css">
🔖08. 부트스트랩, 예쁜 CSS 모음집
🔎Bootstrap
예쁜 CSS를 미리 모아둔 것
남이 작성한 CSS를 내 HTML 파일에 적용하는 원리
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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<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>
<title>스파르타코딩클럽 | 부트스트랩 연습하기</title>
</head>
<body>
<h1>이걸로 시작해보죠!</h1>
</body>
</html>body 태그 안에 원하는 구현하고자하는 button, card 코드를 복붙하면, 적용되는 걸 확인할 수 있다.
'풀스택 개발일지' 카테고리의 다른 글
| [웹개발 종합반 1주차] Javascript (0) | 2022.10.20 |
|---|---|
| [웹개발 종합반 1주차] CSS 응용 (0) | 2022.10.19 |
| [웹개발 종합반 1주차] HTML, CSS (0) | 2022.10.19 |
| [Pycharm] Failed to create a virtual environment 오류 해결 (2) | 2022.10.18 |
| 👨💻 [내일배움단] 비개발자를 위한, 웹개발 종합반 (프로그래밍 실무, 풀스택) 26회차 (0) | 2022.07.15 |
댓글