갑자기 만들고 싶은 사이트가 생겨 홈페이지 만드는 블로그도 같이 작성하려고 합니다.
홈페이지를 만들기 위해서 저는 Atom과 Bitnami를 사용할 예정입니다.
(Bitnami는 Apache Server와 Mysql를 편리하게 설치해주는 프로그램입니다.
설치는 http://inboda.tistory.com/14?category=649277 를 참고 해주세요.)
우선 디자인을 잘 못하는 저는 부트스트랩을 사용할 예정입니다.
아래 사이트를 참고하세요.
부트스트랩 사이트에 들어 가시면 아래와 같이 나옵니다.
그러면 시작하기를 눌러주세요.
다운로드 받아서 파일을 넣어 놓을 수도 있지만 저는 CDN를 통해 별도의 다운로드 없이 진행하려고 합니다.
처음에는 속도에 차이가 클 것 같아 다운로드 받아서 사용했지만 CDN을 이용해도 속도의 차이가 느껴지지 않더군요.
혹시나 사이트를 들어가서 복사 붙여넣기가 귀찮으신 분들을 위해서 테스트만 복사한 내용입니다.
<!-- 합쳐지고 최소화된 최신 CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- 부가적인 테마 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<!-- 합쳐지고 최소화된 최신 자바스크립트 -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
해당 내용을 과감하게 Atom을 실행해서 head 부분에 붙여넣기를 해줍니다.
**Bitnami와 Atom의 사용법을 잘 모르시는 분들을 위해 간단하게 설명을 드리면
우선 Bitnami가 설치되어 있는 경로로 들어가 apache2 -> htdocs 안에 폴더를 만들고 Atom에 들어가 htdocs 폴더를 추가해줍니다.
그 후 새로운 폴더를 만들고 해당 폴더에서 우클릭하여 New File로 index 파일을 만들어 줍니다.
저는 index.php 파일로 만들었으며 만들고나서 html을 치고 엔터를 치면 아래와 같이 기본 형태가 만들어 집니다.
다시 부트스트랩 사이트로 돌아가 마음에 드는 아래로 내리다보면 예제들이 있습니다.
예제들을 보고 마음에 드는 예제를 선택합니다.
해당 예제로 들어가 우클릭 후 검사를 눌러 소스를 확인합니다.
그 후 소스를 복사하여 Atom으로 돌아가 body부분에 붙여 넣습니다.
그러면 메인페이지의 기본 형태가 만들어 집니다.
결과를 확인하기 위해서 'localhost:8080/만든폴터' 로 들어가시면 index 파일을 불러와 확인이 가능합니다.
index.php 혹은 index.html 파일이 아니라고 한다면 만든폴더 뒤에 '/파일이름' 까지 넣으셔야 됩니다.
**주의사항은 MAC 사용자들은 localhost 뒤에 :8080을 꼭 넣으셔야 합니다.
혹 8080을 붙였는데 안들어 가시는 분들은 bitnami에서 포트 설정이 어떻게 되어 있는지 확인하시고 해당 포트를 넣으시면 됩니다.
아래 사진을 참고해 주세요.
이상으로 마치겠습니다.
'Mac으로 개발하기 > 홈페이지 만들기' 카테고리의 다른 글
홈화면 따로 빼기 (0) | 2018.06.03 |
---|---|
Home화면 구성하기 (0) | 2018.05.23 |
네비게이션바 수정하기 (0) | 2018.04.29 |