728x90
bootstrap으로 html작성시
항상 기본적으로 <head></head>부분에 넣
meta 태그 속성은 대부분 name과 content속성으로 이루어져 있습니다. 그 중에서 viewport는 웹 페이지의 크기를 결정합니다.
meta 태그 : 문서 자체를 설명할 때 쓰이는 태그
name : "viewport" 웹페이지의 크기를 결정하는 태그이름
content : 메타태그가 설명하려는 "vidwport", 즉 웹페이지의 크기에 대한 내용
- width=device-width : 웹 페이지의 크기가 실제 모니터, 휴대폰 액정의 크기를 따르도록 설정
- initial-scale=1 : 보여지는 화면의 zoom 정도를 1배율로 한다는 의미. 이 값을 키우면 화면이 확대되어 보인다. 이는 폰에서만 작동한다.
- shrink-to-fit=no : Safari(사파리) 브라우저의 경우 11이전 버전은 viewport 크기보다 콘텐츠 크기가 크면 자동으로 shirink(줄어들다) 되어서 콘텐츠의 크기를 화면에 꽉채워 표시하기 때문에 이 속성을 방지하기 위해서 사용
<!doctype html>
<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>
코드블록
.
.
.
</body>
</html>
728x90
'작고 소중한 팁' 카테고리의 다른 글
| 주피터 노트북 설치, 사용가능 언어들, 사용 방법 (0) | 2022.01.02 |
|---|---|
| [깃허브]깃허브 레파지토리 삭제했을 때 복구하는 방법(초간단!) (0) | 2021.06.23 |
| [html]파이참에서 코드 들여쓰기 정렬/태그 안에 변수사용(${변수}) (0) | 2021.06.21 |
| [코딩기초] 뭔가 궁금할 때 정확한 검색을 위해 : W3Schools/MDN (0) | 2021.06.21 |
| [bootstrap]Forms 사용법 (0) | 2021.06.21 |