S3 : 부트스트랩을 이용한 반응형 페이지 생성

수업을 듣고 배운 내용과 연습한 내용을 정리하였습니다

개인 공부 후 자료를 남기기 위한 목적임으로 내용 상에 오류가 있을 수 있습니다.

 

잘못된 부분이 있거나 질문사항은 댓글로 남겨주시면 성심성의껏 답변해드리겠습니다. 감사합니다!

---

* 부트스트랩이란?

부트스트랩(Bootstrap)은 웹사이트를 쉽게 만들 수 있게 도와주는 HTML, CSS, JS 프레임워크이다. 하나의 CSS로 휴대폰, 태블릿, 데스크탑까지 다양한 기기에서 작동한다. 다양한 기능을 제공하여 사용자가 쉽게 웹사이트를 제작, 유지, 보수할 수 있도록 도와준다.

 

- 출처 : 위키백과 -

 

 

교재 <당신이 지금 알아야 할 AWS - 이영호, 한동수 지음>를 토대로 실습을 진행하였습니다.

 

 

 

* 실습요약

1. 부트스트랩 홈페이지 접속

2. 부트스트랩 템플릿 다운로드

3. S3 버킷 생성

4. 부트스트랩 템플릿 파일 업로드

5. 정적 웹 사이트 설정

6. 엔드포인트 URL을 통한 부트스트랩 index.html 확인

 

 

 

 

1) 부트스트랩 홈페이지 접속

 

 

startbootstrap.com/

Free Bootstrap Themes, Templates, Snippets, and Guides

 

 

 

2) 부트스트랩 템플릿 다운로드

 

화면을 내려보면 무료로 제공하는 템플릿을 확인할 수 있습니다. 실습에는 "Freelancer" 템플릿을 사용하겠습니다.

 

 

 

 

우측 "Free download" 버튼을 클릭하여 다운로드 한 후 압축을 풉니다.

 

 

 

index.html 파일이 있는 것을 확인합니다. 만일 html 파일의 이름이 다르다면 파일 이름을 기억해야 합니다.

HTML에 대한 지식이 있다면 HTML이나 CSS를 수정하고, 그렇지 않다면 index.html 파일 내에 영문으로 나오는 텍스트를 간단히 변경해도 됩니다.

 

 

 

 

 

3) 버킷 생성

블로그 호스팅으로 사용할 버킷을 생성해보겠습니다. 대시보드에서 "버킷 만들기"를 선택합니다.

고유한 버킷 이름과 리전을 선택한 후, 따로 태그나 암호화는 하지 않고, 퍼블릭 액세스를 위해 액세스 설정과 관련된 내용들의 체크박스만 아래와 같이 설정합니다.

검토를 마친 후 "버킷 만들기"를 클릭합니다.

 

 

 

 

 

 

4) 부트스트랩 파일 업로드

생성된 버킷을 선택하고 부트스트랩에서 다운받은 파일들을 드래그합니다. 압축 형태가 아니라, 압축이 해제된 상태로 업로드해야 합니다.

 

 

 

 

index.html 객체의 퍼블릭 액세스를 허용한 후, 스토리지 클래스는 스탠다드로 설정합니다.

 

 

 

5) 정적 웹 사이트 설정

버킷의 "속성" 버튼을 클릭한 후, 맨 아래쪽에 "정적 웹 사이트 호스팅"을 클릭하고 아래와 같이 설정합니다.

정적 웹 사이트 호스팅은 S3 버킷을 홈페이지처럼 사용할 수 있는 기능입니다.

업로드한 부트스트랩 파일은 index.html 파일을 기본으로 하므로, 인덱스 문서에 index.html 을 입력하고 저장합니다.

 

 

 

버킷의 웹 사이트 엔드포인트 URL로 접속하면 다운받은 부트스트랩 템플릿을 확인할 수 있습니다.

 

 

지금까지 S3을 이용해서 나만의 홈페이지를 호스팅해보았습니다.

실제로 홈페이지를 구축하기 위해서는 운영체제와 미들웨어 등 많은 준비가 필요하지만, S3를 이용하면 클릭 몇 번으로 홈페이지를 호스팅할 수 있습니다.