부트스트랩으로 간단하게 홈페이지를 만들기 - 2. 부트스트랩 소스 수정 방법 및 브래킷에서 확인을 하기

윌리엄 2017-05-10 (수) 23:33 4년전 2635  

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

 

부트스트랩 소스 수정하는 방법 및 브래킷에서 확인을 하는 방법에 대해 알아보도록 해요. 부분 부분만 알아도 손 쉽게 수정이 가능합니다. 부트스트랩의 다양한 템플릿을 이와 같이 비슷한 방법으로도 수정이 가능합니다.

 

부트스트랩 소스 수정 방법


폴더 내의 index.html 파일을 브래킷을 통해 열었습니다. index.html이 부트스트랩을 보여지는 부분입니다. 수정을 하는 부분에 대해 알려드리겠습니다.

 

ed92fa211938478b6bdd85b3e25bb3ab_1494426 

 

보통 인터넷 익스플로러, 구글 크롬, 파이어폭스의 공통점은 웹사이트 접속 시에 제목을 볼 수 있다는 것입니다. 소스 내에서도 12번 줄에 title에 사이트 제목을 확인할 수 있습니다.

 

ed92fa211938478b6bdd85b3e25bb3ab_1494426 

 

부트스트랩의 왼쪽 상단 제목 및 메뉴의 이름이 있는 부분입니다.

 

ed92fa211938478b6bdd85b3e25bb3ab_1494426 

 

메인 화면의 글을 수정을 할 수 있는 부분입니다. <h1>, <p>, <a> 태그 안의 글 들을 수정할 수 있는 부분입니다. 물론 배경 이미지까지도 수정이 가능합니다.

 

ed92fa211938478b6bdd85b3e25bb3ab_1494426 

 

About 메뉴에 대한 글을 수정을 하는 부분입니다. <h2>, <p>, <a>태그 안에 있는 글을 수정을 할 수 있습니다.

 

ed92fa211938478b6bdd85b3e25bb3ab_1494426 

 

Services 메뉴에 대한 글을 수정을 할 수 있는 부분입니다. <h2>, <h3>, <p> 태그 안에 있는 글 들을 수정할 수 있습니다.

 

ed92fa211938478b6bdd85b3e25bb3ab_1494426 

ed92fa211938478b6bdd85b3e25bb3ab_1494426 

 

Portfolio 메뉴에 대한 이미지를 수정을 할 수 있는 부분입니다. 다른 이미지를 비슷한 크기로 하여 덮어쓰기를 하면 덮어쓴 이미지로 바뀌게 됩니다. 이 때 이미지 이름을 기존의 이미지 이름과 같아야 합니다.

 

ed92fa211938478b6bdd85b3e25bb3ab_1494426 

 

메인의 이미지가 있는 폴더입니다. 부트스트랩의 img 안에 header.jpg 파일이 메인의 이미지입니다. 이를 다른 이미지로 바꾸어주고 이름도 똑같이 header.jpg로 하면 됩니다.

 

ed92fa211938478b6bdd85b3e25bb3ab_1494426 

 

Contact 메뉴를 수정을 할 수 있는 부분입니다. <h2>, <p>, <a> 태그 안에 있는 글을 수정을 할 수 있습니다.

브래킷에서 확인을 하기
ed92fa211938478b6bdd85b3e25bb3ab_1494426
 

 

 

해당 하는 부분을 수정을 하고 저장한 후에 결과를 확인을 하고 싶다면 상단 오른쪽에 번개 아이콘을 클릭을 하면 소스의 결과를 확인을 할 수 있습니다. 다음 글에는 기존의 부트스트랩에서 다르게 바꾸어 보기에 대한 글입니다.

 

 

 

 

 

메카리워즈 Image Map


모바일 버전으로 보기