1 구글 웹폰트 사용하기
1.1 크롬 브라우저를 열고 'google fonts' 검색
1.2 언어를 한국어로 변경
1.3 원하는 폰트와 폰트두께 선택
1.4 우측 상단 Selected family 클릭
1.5 Use On Web에서 @import 체크
1.6 태그 복사해서 붙여넣기
<style></style> 태그 안의 내용만 복사하여 폰트를 사용할 문서의 <style>태그 안에 붙여넣기
1.6.1 태그 복사해서 붙여넣기2
해당 구역의 태그를 복사하여 전체적용 (*{}) CSS에 붙여넣기
1.7 적용
@import url('https://fonts.googleapis.com/css2?family=Stylish&display=swap');
* {
font-family: 'Stylish', sans-serif;
}
♬ *은 모두 다 적용한다는 뜻이라 붙여줘야함~!!2 CSS 파일 분리
2.1 분리하는 법
<style> ~ </style> 부분이 너무 길어지면 보기가 어려워짐.
그럴 땐 아래와 같이 파일을 분리해둘 수 있음
<!-- style.css 파일을 같은 폴더에 만들고, head 태그에서 불러오기 -->
<link rel="stylesheet" type="text/css" href = "(css파일이름).css">3 부트스트랩
3.1 부트스트랩이란?
예쁜 CSS를 모아놓은 것 (PPT 템플릿 같은 느낌)
3.2 적용하기
1) 같은 폴더 안에 index.html 파일을 하나 생성
2) <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>
♬ <head> 부분에 해당 코드 붙여넣기 했음3) 필요한 부트스트랩 찾기
https://getbootstrap.com/docs/5.0/components/accordion/
4) 원하는 코드 복사하여 <body> 태그 안에 붙여넣기
4-1) 예시
<body>
<div class="mymovie">
<h1>나의 인생 영화</h1>
<button>영화 등록하기</button>
</div>
<div class="mycard">
<div class="row row-cols-1 row-cols-md-4 g-4">
<div class="col">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to
additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to
additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to
additional content.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to
additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
</div>
</body>
♬ <body> 태그에 복사한 부트스트랩 코드를 붙여넣기함
<img src="..."> 부분에 이미지 주소 넣기5) 원하는대로 수정
'MarkUp > HTML&CSS' 카테고리의 다른 글
| [CSS] 이미지 상대경로 / 절대경로 (0) | 2023.03.05 |
|---|---|
| [HTML&CSS] 2주 학습 톺아보기 - 기본 정리 (0) | 2023.03.04 |
| [HTML] 자주 쓰는 특수문자 (0) | 2023.02.26 |
| [HTML/CSS] 기초 (0) | 2023.02.20 |