버터감자
오늘도 내 하루는
버터감자
전체 방문자
오늘
어제
  • 분류 전체보기 (139)
    • 🏃‍♀️ Do it ! (80)
      • TIL (73)
      • Project (5)
      • Certificate (2)
    • 📓 TechNote (52)
      • RPA (1)
      • Python (2)
      • JAVA (13)
      • Spring (11)
      • SQL (7)
      • Git & GitHub (6)
      • CS (0)
      • HTML & CSS & JavaScript (2)
      • Tools (9)
      • API (1)
    • 🔔 Error (7)
      • Error (7)

블로그 메뉴

  • 홈
  • 태그

공지사항

인기 글

태그

  • 세션
  • 부트스트랩
  • 객체지향
  • 홈페이지
  • 데이터베이스
  • 코틀린
  • 이것이자바다
  • 만들기
  • 안드로이드
  • 버블소트
  • 함수
  • 배열
  • 포트폴리오
  • 문제풀이
  • foreach
  • 톰캣
  • opacity
  • 오라클
  • 스프링
  • 큐
  • SQL
  • 스택
  • 이클립스
  • callback
  • 게시판
  • 변수
  • dml
  • final필드
  • 기본쿼리
  • sqld

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
버터감자

오늘도 내 하루는

📌[BootStrap] 이클립스에서 부트스트랩(템플릿) 적용하기
📓 TechNote/Tools

📌[BootStrap] 이클립스에서 부트스트랩(템플릿) 적용하기

2023. 1. 23. 01:16
728x90

✔ 이클립스에서 부트스트랩(템플릿)을 적용해 보자!

 


1. 다양한 부트스트랩 사이트에서 원하는 템플릿 다운로드하기

 


2.  다운로드한 부트스트랩 폴더 내의 index.html 실행시킨다


3. index.html에서 페이지소스보기 후 전체 소스 복사하여,

적용하고 싶은 파일의 home.jsp에 붙여 넣기 한다.


4. 다운로드한 부트스트랩의 압축을 모두 푼 후 하단 위치(resources)로 붙여 넣기 해준다.


5. home.jsp에 끝이. css로 끝나는 css파일 링크들의 형식을 하단과 같이 바꿔준다.

 

수정전 코드

    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/templatemo.css">
    <link rel="stylesheet" href="assets/css/custom.css">

 

수정 후 코드

    <link rel="stylesheet" type = "text/css" href="${pageContext.request.contextPath}/resources/css/bootstrap.min.css">
    <link rel="stylesheet" type = "text/css" href="${pageContext.request.contextPath}/resources/css/templatemo.css">
    <link rel="stylesheet" type = "text/css" href="${pageContext.request.contextPath}/resources/css/custom.css">

적용 코드

<link rel="stylesheet" type = "text/css" href="${pageContext.request.contextPath}/본인부트스트랩경로">

6. 끝이. js로 끝나는 코드도 하단과 같이 바꿔준다.

 

수정 전 코드

    <!-- Start Script -->
    <script src="assets/js/jquery-1.11.0.min.js"></script>
    <script src="assets/js/jquery-migrate-1.2.1.min.js"></script>
    <script src="assets/js/bootstrap.bundle.min.js"></script>
    <script src="assets/js/templatemo.js"></script>
    <script src="assets/js/custom.js"></script>
    <!-- End Script -->

수정 후 코드

    <!-- Start Script -->
    <script src="<c:url value = "/resources/js/jquery-1.11.0.min.js" />"></script>
    <script src="<c:url value = "/resources/js/jquery-migrate-1.2.1.min.js" />"></script>
    <script src="<c:url value = "/resources/js/bootstrap.bundle.min.js" />"></script>
    <script src="<c:url value = "/resources/js/templatemo.js" />"></script>
    <script src="<c:url value = "/resources/js/custom.js" />"></script>
    <!-- End Script -->

 

적용 코드

<script src="<c:url value = "본인 부트스트랩 경로" />"></script>

7. 이미지형식이 존재한다면 하단과 같이 바꿔준다. 

 

수정 전 코드

<link rel="apple-touch-icon" href="assets/img/apple-icon.png">
<link rel="shortcut icon" type = "image/x-icon" href="assets/img/favicon_02.ico">

수정 후 코드

<link rel="apple-touch-icon" type = "image/png" href="${pageContext.request.contextPath}/resources/img/apple-icon.png">
<link rel="shortcut icon" type = "image/x-icon" href="${pageContext.request.contextPath}/resources/img/favicon_02.ico">

 

적용 코드

<link rel="stylesheet" type = "image/확장자" href="${pageContext.request.contextPath}/본인 부트스트랩 경로">

톰캣 실행 후 다운로드한 부트스트랩과 동일하게 나온다면 성공 😊

'📓 TechNote > Tools' 카테고리의 다른 글

📌[Eclipse] 이클립스 서버 실행시 크롬으로 보는 방법  (0) 2023.01.23
📌[Oracle] Oracle SQL Developer에서 '행 번호' 표시하기  (0) 2023.01.23
📌[Eclipse] 이클립스에서 vscode 열기  (0) 2022.11.10
🔧[Installation] MySQL 설치하기  (0) 2022.09.22
🔧[Installation] Apache Tomcat 설치하기  (0) 2022.09.22
    '📓 TechNote/Tools' 카테고리의 다른 글
    • 📌[Eclipse] 이클립스 서버 실행시 크롬으로 보는 방법
    • 📌[Oracle] Oracle SQL Developer에서 '행 번호' 표시하기
    • 📌[Eclipse] 이클립스에서 vscode 열기
    • 🔧[Installation] MySQL 설치하기
    버터감자
    버터감자
    🌱 새싹 개발자의 코딩 블로그 🌱

    티스토리툴바