부트스트랩 홈페이지제작 -2

안녕하세요~

저번에 부트스트랩을 통한 홈페이지 제작을 하고 있습니다!

이전 포스팅으로는 부트스트랩 테마를 구매해서 고치는 내용에대해서 

대략적으로 설명을 드렸는데 

이번엔 실제로  html파일을 통해서 어떻게 고치고 어떻게 바뀌는지에 대해서 

알려드릴려합니다!

하지만 저는 프로그래밍 전문가는 아니다보니 다소 내용의 퀄리티가 떨어질수 있지만 

제가 현재 html을 통해서 웹작업을 하고 있다보니 작업을 하면서 느낀것 위주로 

말씀을 드릴게요!

일단, 부트스트랩 테마를 구매를 하던 무료다운을 하던지 

하게되면 파일을 받을수있습니다!

그중에 제일 먼저 건드린 파일은 index.html입니다. 

css나 js같은경우는 아직 먼지모르니깐 html부터 건드릴려 합니다. 

참고로 html 파일수정을 할려면 프로그램이 필요합니다. 

어도비의 드림위버를 사용해도 되고 어떤 프로그램이 좋은지는 잘모르겠군요. 

저는 어도비가 있다보니 드림위버를 통해서 작업하고 

맥으로 할경우에는 xcode를 사용합니다. 

서버작업을 하는 프로그래머 말로는 표시도 해주고 하는 좋은 

프로그램이 있다고 하지만 저는 그냥 다시 설치하기도 귀찮고 해서 

그냥 드림위버랑 xcode를 쓰기로 했습니다!

제가 구매한 부트스트랩테마의 인덱스 파일입니다. 

솔직히 자바를 조금 배웠기에 큼직큼직한 단어만 눈에 보이네요. 

그럼 여기서 수정을 하게되면 웹에서 바뀌게 된다고 쉽게 생각할수있습니다. 

어느부분을 수정을 해야하는지 알기만 하면 수정을 쉽게 할수있겠죠.

인덱스파일을 통해 웹페이지를 띄어보도록 할게요~

그리고 F12를 누르게 되면 위의 이미지와 비슷한 것들이 나오게됩니다!

이렇게 우측에서 HTML 코드를 확인이 가능합니다!

그럼 인제 거의 다 끝나갑니다.

 

F12를 누르고 나온 화면 우측위에 보시면 위와같은 표시가 있는데 

이중에 사각형에 화살표 표시를 누르고 웹화면에서 클릭을 하게되면 밑에처럼 

그에맞는 코드를 확인할수있습니다!

그러면 드림위버로 가서 위의 코드중 '로그인/회원가입' 을 찾아서 다른 텍스트로 수정하게 되면 

가볍게 텍스트 수정이 가능합니다.

처음 작업을 시작했을때 이런 반복을 여러번 하다보면 드림위버 코드를 보면 대충 알게됩니다.

어디를 뜻하는구나 이거 바꾸면 바뀌겠구나 감이 오는데 한번씩 이게 어디에 있는 코든지 모르겠다 싶을때 

위의 방법처럼 하면 됩니다.

그전 포스팅에서 이미지 바꿔치기는 말씀을 드렸고 요번에 텍스트 수정을 하게되면 

새로운 웹을 보는듯한 느낌이 듭니다. 이미지와 텍스트가 가장 눈에 띄니깐요. 

다음 포스팅으로는 구조를 옮기는 것에 대해서 말씀드리도록 할게요! 

이부분은 조금 어렵고 가장 골치아프더라고요. 

그것이 CSS와 JS와 연결되어서 어떤 클래스를 만들고 머 그런 

바닥구조인거라 깨지거나 넘어가거나 하는 상황이 많이 생겨서 

조금 많이 복잡하더라고요.

그치만 활용만 잘하고 웹구조만 파악한다면 손쉽게 웹제작을 할수있을듯 합니다!