STEP 1  환경설정

1. 부트스트랩 다운.

2. Jquery down 다운.

3. popper 다운.

 

STEP 2 프로젝트 & 폴더 생성

 :

  1. Lecture Evaluation 프로젝트 생성 (Dynamic Web Project로 생성)

  2. css,js 폴더 생성

 

STEP 3 파일 추가 & 생성

 :

   1.기타 기존 파일 추가.

   2. custom.css를 생성하여 원하는 부분을 수정하는게 일반적인 방법.

 

STEP 4 - index.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; "charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>강의평가 웹 사이트</title> 
    <!-- 부트스트랩 CSS 추가 -->
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <!-- 커스텀 CSS 추가 -->
    <link rel="stylesheet" href="./css/custom.css">
    
</head>
<body>
     <nav class="navbar navbar-expand-lg navbar-light bg-light">
     <a class="navbar-brand" href="index.jsp">강의평가 웹 사이트</a>
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
       </button>
       
       <div id="navbar" class="collapse navbar-collapse">
          <ul class="navbar-nav mr-auto">
                 <li class="nav-item active">
                      <a class="nav-link" href="index.jsp">메인</a>
                 </li>
                 <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" id="dropdown" data-toggle="dropdown">
                                               회원관리
                    </a>
                 <div class="dropdown-menu" aria-labelledby="dropdown">
                        <a class="dropdown-item" href="#">로그인</a>
                        <a class="dropdown-item" href="#">회원가입</a>
                        <a class="dropdown-item" href="#">로그아웃</a>
                 </div>
                 </li>
            </ul>
            <form class="form-inline my-2 my-lg-0">
               <input class="form-control mr-sm-2" type="search" placeholder="내용을 입력하세요" aria-label="Search">
                <button class="btn btn-outline-success my-2 my-sm-0" type="submit">검색</button>
            </form>
       </div>
     </nav>
   
     <!-- 제이쿼리 자바스크립트 추가 -->
     <script src="./js/jquery.min.js"></script>
     <!-- 파퍼 자바스크립트 추가 -->
     <script src="./js/popper.js"></script>
     <!-- 부트스트랩 자바스크립트 추가 -->
     <script src="./js/bootstrap.min.js"></script>
    
 </body>
</html>
http://colorscripter.com/info#e" target="_blank" style="color:#e5e5e5text-decoration:none">Colored by Color Scripter
 http://colorscripter.com/info#e" target="_blank" style="text-decoration:none;color:white">cs


-

navbar dropdown오류 잡느라고 하루 다보냈다.

 

첫 째 코드 오류 확인

둘 째 내 버전에 맞는 navbar 사용방법 확인

셋 째 제이쿼리 다운그레이드 (현재 jquery 3.5.0은 navbar dropdown 버그가 있다고함 여기서 해결되었으나 크롬에서 안돌아감)

넷 째 부트스트랩 다운그레이드

다섯 째 크롬 Dev tool setting에서 Enable javascript 설정 (모든 문제 해결) 


의미 있는 삽질이었다. 구글링에 대한 감을 많이 익혔다. 이전에는 한 두번 시도하다가

벽이 높게 느껴지면 다른 튜토리얼을 찾았다. 오류날 확률이 적은 최신 것으로. 하지만

이번만큼은 넘고 싶었다. 큰 문제를 작은 문제로 쪼갰다. 차근차근 짚어가며 해결방법을 찾았다.

조급함과 막막함이 사라졌다. 구글링도 계속하다보니까 검색하는 요령도 늘고 문서를 어떻게

봐야하는지도 알겠다. 재미가 조금씩 붙는거 같다. 모르는 용어를 줄이고 전체적인 흐름을 이해하려고

하는게 도움이 많이 된다. 
    
    
     
    

 

'JAVA > JSP' 카테고리의 다른 글

JSP 강의평가 웹사이트 - 로그인 및 회원가입 화면  (0) 2020.05.03
JSP 강의평가 웹사이트 - 메인화면 웹디자인  (0) 2020.05.03
JSP 강의평가 웹사이트 - JSP Mysql 연동  (0) 2020.05.01
JSP 강의평가 웹사이트 - 개발 환경 구축  (0) 2020.04.29
JAVA 리듬게임 - 게임 시작 화면  (0) 2020.04.29

티스토리툴바