부트스트랩으로 간단하게 홈페이지를 만들기 - 3. 기존의 부트스트랩에서 다르게 바꾸어 보기

안녕하세요. 윌리엄입니다.

기존의 기본적으로 제공을 하는 부트스트랩을 조금 다르게 바꾸어 볼 수도 있습니다. 예를 든다면 이렇게 말이죠.. "라이프타임"이라는 주제로 바꾸어 볼 수도 있습니다. 각 해당하는 부분의 글과 이미지는 원하는대로 하여도 됩니다.

이제 기존의 부트스트랩을 다르게 바꾸어 보도록 해요. 우선 부트스트랩 폴더 내에 있는 index.html파일을 브래킷으로 엽니다.

기존의 부트스트랩을 다르게 바꾸어 보기

메인의 상단에 있는 이름, 메뉴 이름을 바꾸어 봅시다.



12번째 줄의 <title> 부분을 위와 같이 바꾸어 주고 저장을 합니다.



46번째 줄, 53번, 56번, 59번, 62번 줄에 있는 메뉴의 이름을 각 각 위와 같이 바꾸어 주고 저장을 합니다.



소스의 결과를 확인하면 상단의 메인 이름, 메뉴 이름들이 바뀌었는 것을 확인할 수 있습니다.

메인의 글 들을 바꾸어 보도록 해요.

74번줄, 76번줄, 77번줄에 있는 글을 위와 같이 수정을 하고 저장을 합니다.

74번 줄 : 물이 모이면 모일 수록 바다가 됩니다.

76번 줄 : 세상에는 사람 마다 사는 방법이 다릅니다. 어느 사람들은 정말 행복한 인생의 꿈을 꿉니다.

77번 줄 : 궁금하다면?

메인에 있는 글들이 바뀐 것을 확인을 할 수 있습니다.

소개 메뉴의 글 들을 바꾸어 보도록 해요.

86번줄, 88번줄, 89번줄에 있는 글을 위와 같이 수정을 하고 저장을 합니다.

86번 줄 : 왜 라이프타임인가요?

88번 줄 : 인간은 태어나고 언젠가 떠납니다. 피할 수 없는 신이 내린 선물입니다. 그렇지만 행복한 시간을 보내는 것이 후회하지 않는 삶을 살았다고 할 수 있습니다. 여태 동안 후회를 하였다고 해도 늦지 않았습니다. 행복한 시간 보내세요.

89번 줄 : Always Happy

소개 메뉴가 수정된 것을 확인할 수 있습니다.

목적 메뉴를 수정을 해보아요. 

99번줄, 109번줄, 110번줄, 116번줄, 117번줄, 123번줄, 124번줄, 130번줄, 131번줄에 있는 글을 위와 같이 수정을 하고 저장을 합니다.

99번 줄 : 행복함의 목적

109번 줄 : 성취

110번 줄 : 가슴 깊이 간직했던 꿈을 이루세요.

116번 줄 : 여행

117번 줄 : 함께 하는 것도 좋지만 혼자하는 여행은 더 많은 것을 경험하게 됩니다.

123번 줄 : 버킷리스트

124번 줄 : 죽기 전에 꼭 이루고 싶은 목록을 만드세요.

130번 줄 : 긍정

131번 줄 : 원하는 대로 이루어지지 않더라도 희망을 가지세요.

목적 메뉴의 수정된 결과를 확인할 수 있습니다.

발자취 메뉴를 수정을 해보아요. 그림만 수정을 하면 됩니다. 그림 사이즈는 비슷하게 수정을 하면 됩니다.

부트스트랩 이미지 파일에 portfolio라는 폴더가 있고 fullsize, thumbnails 폴더가 있습니다. 우선 원하는 이미지 6개를 부트스트랩에 있는 이미지 크기로 수정을 한 후에 이름을 똑같이 합니다.

첨부파일에 img.zip 파일을 다운받고 압축을 풀면 똑같은 이름을 가진 이미지들이 있습니다. 이 이미지들을 기존의 부트스트랩에 fullsize 폴더에 덮어쓰기를 합니다.

덮어 쓸 때 다음 총 5개의 충돌에 대해 이 작업 수행을 체크를 한 후에 덮어쓰기를 클릭을 합니다.

덮어 쓴 이미지를 확인을 할 수 있습니다.

마찬가지로 thumbnails폴더의 이미지도 덮어쓰기를 합니다.

다음 5개에 충돌에 대해 이 작업 수행에 체크를 한 후에 덮어씁니다.

덮어쓴 이미지들입니다.

부트스트랩 결과에서 새로 고침을 하면 발자취 메뉴의 그림들이 바뀐 것을 확인할 수 있습니다.

연락처 메뉴를 수정을 해보아요.

248번줄, 250번줄, 254번줄, 258번줄에 있는 글을 위와 같이 수정을 하고 저장을 합니다.

248번 줄 : 궁금하다면 문의

250번 줄 : 행복한 인생을 즐기세요. 무엇 보다 취미를 즐기다 보면 운이 좋아 새로운 기회를 만들 수 있습니다. 믿거나 말거나

254번 줄 : 111-7046-6666

258번 줄 :

연락처 메뉴가 바뀐 것을 확인을 할 수가 있습니다.

메인의 이미지를 바꾸어 보도록 해요. 원하는 이미지를 다운로드를 받아도 됩니다. img.zip파일 안에도 있습니다.

기존의 부트스트랩 폴더에 img 안에 header을 새로운 이미지로 덮어쓰기를 하면 됩니다. 파일 이름을 똑같이 하여야 합니다.

파일을 덮어쓰기를 하면 됩니다.

덮어 쓴 파일을 확인할 수 있습니다.

결과 확인 사이트를 새로 고침을 하면 메인 메뉴의 이미지가 바뀐 것을 확인을 할 수 있습니다.

부트스트랩에 대한 글을 마치겠습니다. 다른 부트스트랩 템플릿도 이와 비슷한 방법으로 수정을 하면 됩니다. 나 만의 멋진 홈페이지를 만들 수 있는 비결이기도 합니다. 부트스트랩 템플릿으로 멋지게 만들어 보시길 바래요.