반응형 웹 만들기 DAY1

반응형 웹 만들기 (공부준비)

그간 서버 언어만 공부했는데, 실용적으로 웹 언어도 공부해보려고 해요!
그래서 대세인 반응형 웹 실습을 해보려고 마음먹었습니다~~~  :)
DAY 1 ~ 20 까지 나눠주신 대로 차근차근 실습 진행하려고 합니다.

반응형 웹 만들기 책으로 공부하시는 분
공부하다가 낯설고 짜증나서 덮으신 분
생초보인 저를 보면서 에너지를 얻어가시길 바래요 (지식은... 구글신에게... ) 

우선 공부할 환경을 세팅했습니다.
이 책은 반응형 디자인 쪽 책이기 때문에, 웹서버 테스트 환경을 구축하는 것에 대해서는 자세히 말해주고 있지 않아서요~
(실습위해 웹호스팅 현금결제 or 1년무료사용 하다가는 스압으로 떨어져나가 공부 1달 미룬 장본인...)

✮ 이럴 때는 생활코딩 웹서버 설치를 참고하시면 좋습니다.
https://opentutorials.org/course/1688/9338

✮ 이 수업 하기 전에 이고잉님의 <웹 어플리케이션 만들기> 강의를 수강하고 오시는 것을 강추드립니다!
https://opentutorials.org/course/1688

✮ 그리고 간편한 공부환경 세팅은 아래 포스팅을 참고해주세요~ 

1. 웹서버 설치

웹서버 + PHP + MySQL(DB) 삼종 세트를 한번에 설치합니다.
Bitnami Mac 버전 MAMP 를 다운받았습니다.  OS에 따라 버전을 다르게 해서 다운받으셔요

- Bitnami MAMP Stack 다운로드
- localhost:8080/index.html 확인, 설치 완료!

2. 코드편집기 설치

저는 Sublime Text 를 사용했습니다.
라이센스 버전을 사용하지 않아서 (돈을 안내서) 가끔 구매버전 사용하라는 팝업창 뜨는것 말고는
기본 텍스트 편집기보다 훨씬 코.딩. 하는 마음이 듭니다. 코드 유형에 따라 색도 알록달록 'ㅁ'

- Sublime Text 다운로드
- 모든 것의 시작, helloworld.html 작성
- helloworld.html 띄워보기

3. 반응형 웹 만들기 

실습파일을 다운로드 받고, 비트나미 웹페이지 기본 디렉토리인 htdoc 로 이동시킵니다.
이 때, htdoc 를 즐겨찾기 폴더로 지정해놓으시면 코드 파일을 저장할때도, 불러올 때도 편합니다.  
그리고 꼭 직접 수정한 다음에 완성본과 비교하기를 바랍니다! 

- 실습파일 다운로드
- mampstack-5.4.40-0>apache>htdoc 파일 아래로 옮기기
- 실습파일 웹브라우저로 띄우기
- practice 실습파일 수정한 파일들을 별도의 mine 폴더에 위치시켜 완성파일과 비교하기 

이제 본격적으로 공부할 준비 완료!!!
mampstack 버전이 다르거나, 공부하는 책이 다를 수 있지만
알아서 응용해서 잘 따라오셨으리라고 믿습니다~ :D