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

윌리엄 2017-05-11 (목) 00:06 6년전 3408  
  img.zip 937.7K 9 6년전

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

 

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

 

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

 

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

 

ed92fa211938478b6bdd85b3e25bb3ab_1494427

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

ed92fa211938478b6bdd85b3e25bb3ab_1494427

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

ed92fa211938478b6bdd85b3e25bb3ab_1494427

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

ed92fa211938478b6bdd85b3e25bb3ab_1494427

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

 

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

 

ed92fa211938478b6bdd85b3e25bb3ab_1494427 

 

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

 

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

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

77번 줄 : 궁금하다면?

 

ed92fa211938478b6bdd85b3e25bb3ab_1494427 

 

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

 

ed92fa211938478b6bdd85b3e25bb3ab_1494427 

 

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

 

ed92fa211938478b6bdd85b3e25bb3ab_1494427 

 

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

 

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

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

 

89번 줄 : Always Happy

 

ed92fa211938478b6bdd85b3e25bb3ab_1494427 

 

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

 

ed92fa211938478b6bdd85b3e25bb3ab_1494427
 

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

 

ed92fa211938478b6bdd85b3e25bb3ab_1494427 

 

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

 

99번 줄 : 행복함의 목적

109번 줄 : 성취

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

116번 줄 : 여행

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

123번 줄 : 버킷리스트

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

130번 줄 : 긍정

 

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

 

ed92fa211938478b6bdd85b3e25bb3ab_1494427 

 

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

 

ed92fa211938478b6bdd85b3e25bb3ab_1494427 

 

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

 

ed92fa211938478b6bdd85b3e25bb3ab_1494427 

 

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

 

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

 

ed92fa211938478b6bdd85b3e25bb3ab_1494427 

 

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

 

ed92fa211938478b6bdd85b3e25bb3ab_1494427 

 

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

 

ed92fa211938478b6bdd85b3e25bb3ab_1494427 

 

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

 

ed92fa211938478b6bdd85b3e25bb3ab_1494427 

 

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

 

ed92fa211938478b6bdd85b3e25bb3ab_1494427 

 

덮어쓴 이미지들입니다.

 

ed92fa211938478b6bdd85b3e25bb3ab_1494428 

 

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

 

ed92fa211938478b6bdd85b3e25bb3ab_1494428 

 

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

 

ed92fa211938478b6bdd85b3e25bb3ab_1494428 

 

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

 

248번 줄 : 궁금하다면 문의

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

254번 줄 : 111-7046-6666

 

258번 줄 :

 

ed92fa211938478b6bdd85b3e25bb3ab_1494428 

 

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

 

ed92fa211938478b6bdd85b3e25bb3ab_1494428 

 

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

 

ed92fa211938478b6bdd85b3e25bb3ab_1494428 

 

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

 

ed92fa211938478b6bdd85b3e25bb3ab_1494428 

 

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

 

ed92fa211938478b6bdd85b3e25bb3ab_1494428 

 

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

 

ed92fa211938478b6bdd85b3e25bb3ab_1494428 

 

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

 

 

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

메카리워즈 Image Map


모바일 버전으로 보기