구글 폰트
https://fonts.google.com/?subset=korean
Browse Fonts - Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
1. 처음 보게 되는 것들
2. 아무거나 클릭하게 되면 우측 노란 형광펜으로 표시한 "Select 어쩌구"가 나온다.
*우측에 @임포트 체크
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100&display=swap');
</style>
이런식의 style 태그로 묶인 코드가 나오는데, 이 코드를 드래그해서 복사해서 사용하면 된다.
CSS rules to specify families 에
있는 코드를 복사해서
이런식으로 스타일에 넣어주면 된다.
부트스트랩
부트스트랩 CDN :
웹사이트 서버가아닌 다른 공유공간에서 여러 웹사이트가 참조할 수 있게 하는 서비스를 의미한다. 따라서 별도의 다운로드가 필요 없음.
타이틀 밑에다가 붙여 놓는다. 헤드에서. cdn 사용.
=> 부트스트랩 꾸러미를 가져온 것.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
부트스트랩 버튼 :
Primary(파란색 버튼)
=
<button 어쩌구~~~~~ Primary </버튼>
써져 있는 코드다
통째로 복사
나는 다크(블랙버튼) 을 드래그 했다.
이것은 <바디> 밑에 넣는다.
부트 스트랩 사용 예시
일단 html:5 입력하고
간단하게 적었다
***구글 폰트 적용 안 했을 때 부트 스트랩 안 먹히는 경우가 있어서
그러한 부분들 꼭 확인해야 한다
<div 클래스명 마이 타이틀로 하고
제목 적고
버튼을 만들었다.
위에 <style>을 <head> 안에 넣고
.mytitle {
}
이렇게 하면 클래스 함수를 조정 가능하다.
https://getbootstrap.com/docs/5.3/components/card/
그냥 복사해 와서 약간씩만 수정 해 주는 것이다..
혼자 만들려면 힘들다 되게 ㅜㅜ 그래서 이런 것들을 가져다 쓰면 아주 좋다.
클래스 네임을 지정해준 것을 토대로
요론식으로
만들어 주면 된다.
뭐 요론 코드들 이용하면
앵간한 것들은 다 가능하다고 한다.
그냥 일단은 심플하게 이런 것들 안에서 해보자.
결과물
추가 부트 스트랩 사용기
jumbotron
입력하고 누르면 갑자기 쭈우욱~~~
스크롤이 내려가서 멈춘다!!
어쩌구 저쩌구 써있는 곳에
See our new Jumbotron example for a demo.
하이퍼링크를 눌러주면
Jumbotron example · Bootstrap v5.3
Add borders Or, keep it light and add a border for some added definition to the boundaries of your content. Be sure to look under the hood at the source HTML here as we've adjusted the alignment and sizing of both column's content for equal-height. Example
getbootstrap.com
F12 를 눌러 점보트론에 해당하는 곳을 선택해서 우클릭+ Edit html
이런 코드가 쭉 나온다. => 복사 =><body> 붙여넣기
그렇게 하고 나면
alt+b를 통해 이러한 html 화면을
볼 수 있게 된다.
그냥 수정해서 사용 하면 된다. 끝
또 다른 예
그냥 쓰고 싶은거 들어가서
simple headers
마음에 드는 것 클릭 => 우클릭 검사 => 에디트 html or html 수정
마우스 올려보면 자동으로 표시되는 것 확인.
html 수정에서 전부 드래그
메인보다 위에다가 넣어줬다. 이번엔
좌측 상단에 아주 잘 뜬다
안에 내용을 그냥 바꿔주기만 하면 된다.
