2018. 2. 7. 13:12ㆍ부트스트랩으로디자인하라
1. 부트스트랩을 설치해보자
CSS스타일과 JQuery를 기반으로 한 자바스크립트 그리고 컴포넌트들로 구성되어 있어 원하는 기능이 있으면 단순하게 HTML 코드에 부트스트랩에서 정의된 선택자만 입력하면 편리하고 빠르게 사이트를 개발할 수 있습니다. 또한 부트스트랩은 Responsive 즉 반응형 웹이 기본으로 적용되기 때문에 데스크탑 버전의 웹사이트에서부터 모바일용 웹사이트까지 한꺼번에 개발할 수 있습니다.
2. 설치방법
-1. 사용자의 웹 서버에 파일을 업로드하는 방법 : 직접 다운로드 받아 사용자의 웹 서버에 업로드하는 방식으로 가장 많이 사용
-2. CDN(Content Delivery Network)을 이용하는 방법 : CDN을 이용하여 해당 파일들을 불러서 사용하는 방법으로 속도가 느려 질 수 있는 단점이있음
-3. Bower라는 패키지 매니저를 이용하는 방법 : Bower라는 프로그램을 설치하여 관리하는 방법
http://bootstrapk.com/getting-started/
3. Hellow World 출력하기
브라우저 화면에 "Hellow World"라는 문자를 표시를 하기 위한 템플릿입니다.
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>앙큼한유채`s 일상 Story</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <h1>Hello, world!</h1> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </body> </html>
|
4. 해설
<html lang="ko-kr"> : 웹 페이지에서 사용되는 글은 한글이라는 것을 브라우저에 알려주는 역할을 합니다.
<meta charset="utf-8"> : 캐릭터셋을 utf-8로 설정하게 되면 브라우저에서 다양한 언어를 사용해도 해당 언어가 제대로 보이게 됩니다. 이전에 한글은 euc-kr이라는 캐릭터셋을 사용했는데, 영어는 제대로 보이지만, 일본어나 중국어를 표기하면 화면상에서 이상한 문자로 나왔었습니다.
<meta http-equiv="X-UA-Compatible" content="IE=edge"> : 현재 사용하는 IE브라우저의 버전을 최신 버전으로 처리하는 곳입니다. 간혹 최신 버전의 IE를 사용하는 도중에 IE7 호환모드로 사용자도 모르게 변경되는 경우가 있는데, 웹 페이지 상단에 이 코드를 적용해 주면 최신 버전의 IE모드로 변경됩니다.
<meta name="viewport" content="width=device-width, initial-scale=1"> : 반응형 웹 페이지를 적용해 주는 부분입니다. 모바일이나 데스크탑은 해상도가 다른데, 각 해상도에 맞춘 웹 페이지로 처리해 주는 부분입니다.
'부트스트랩으로디자인하라' 카테고리의 다른 글
| 2. 부트스트랩에서 사용하는 CSS - 1 (0) | 2018.02.13 |
|---|---|
| 1. 부트스트랩소개와 사용방법 - 3 (0) | 2018.02.09 |
| 1. 부트스트랩소개와 사용방법 - 2 (0) | 2018.02.08 |