CSS는 어떻게 사용하나요?
<head> ~ </head> 안에 <style> ~ <style> 공간을 만들어 작성
☞ 그럼 CSS는 HTML 안에 포함되어 있는건가?
배경관련
- background-color
- background-image
- background-size
사이즈
- width
- height
폰트
- font-size
- font-weight
- font-famliy color
간격
- margin (바깥 여백)
- padding (안쪽 여백)
→ margin 과 padding 헷갈리지 말기
→ margin 시계방향 순 ( 위, 왼쪽, 아래, 오른쪽)
기타 외 것들은 검색해서 사용
폰트
구글웹폰트 : https://fonts.google.com/?subset=korean
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
1) 마음에 드는 폰트를 클릭
2) + Select this style 클릭
3) link 태크는 <head>사이에, CSS를 복사해서 <style> 사이에 넣기
→ 이때 CSS를 * { } 이걸로 넣으면 전체 적용
CSS 파일 분리
style 부분이 길어질 때, style.css 파일을 같은 폴더에 만들고 head 태그에서 불러오기
→ link rel="stylesheet" type="text/css" href = "(css파일이름).css"
bootstrap
css를 미리 모아둔 것 ( 꾸미기 위해 사용함, 현업에서도 완성된 스트랩을 가져다 씀 )
코드스니펫] 부트스트랩 시작 템플릿
<html lang="en">
<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>
<body>
<h1>이걸로 시작해보죠!</h1>
</body>
</html>→ https://getbootstrap.com/docs/4.0/components/alerts/
Alerts
Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
getbootstrap.com
'HTML, CSS' 카테고리의 다른 글
| [HTML, CSS] 1-2 Javascript 기초문법 1 (0) | 2022.02.23 |
|---|---|
| [HTML,CSS] Quiz : 페이지 발전 (0) | 2022.02.23 |
| [HTML,CSS] Quiz : 간단한 로그인 페이지 만들어보기 (0) | 2022.02.22 |
| [HTML,CSS] 1주차 : HTML 기초 (0) | 2022.02.22 |
| [HTML,CSS] PyCham 단축키 모음 (0) | 2022.02.22 |