Search
Duplicate

부트스트랩 적용

유형
화면단 수정
방법모름
Date
2023/02/08 → 2023/02/09
프로젝트
세미 프로젝트
부트스트랩 적용
평소에 프론트 관련 강의를 들었을때는 처음부터 하나하나 구성했기 때문에 부트스트랩을 사용해본적이 없었다. 그래서 늘 하던대로 css 나 html 인라인 style 을 적용해보는데 먹히지가 않았다. 그래서 뭔가 우선순위가 있을텐데 하면서 한참을 web app 폴더만 뒤적거렸다.
head.jsp 파일 발견
재현 님의 도움으로 head.jsp 파일에 부트스트랩이 적용되어있고, 아래 페이지에 가서 필요한 부분만 긁어오면 된다는것을 배우고 부랴부랴 작업을 시작했다.
head.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>멀티캠퍼스 웹개발 과정 :: 2조 세미프로젝트 입니다.</title> <c:set var="context" value="${pageContext.request.contextPath}"/> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script> <link href="${context}/resources/css/common.css" rel="stylesheet"> <%-- <link href="${context}/resources/css/reset.css" rel="stylesheet"> --%> <link href="${context}/resources/icon/css/all.css" rel="stylesheet"> <script src="${context}/resources/js/common.js"></script> <!-- favicon --> <link rel="apple-touch-icon" sizes="57x57" href="../../../resources/favicon/apple-icon-57x57.png"> <link rel="apple-touch-icon" sizes="60x60" href="../../../resources/favicon/apple-icon-60x60.png"> <link rel="apple-touch-icon" sizes="72x72" href="../../../resources/favicon/apple-icon-72x72.png"> <link rel="apple-touch-icon" sizes="76x76" href="../../../resources/favicon/apple-icon-76x76.png"> <link rel="apple-touch-icon" sizes="114x114" href="../../../resources/favicon/apple-icon-114x114.png"> <link rel="apple-touch-icon" sizes="120x120" href="../../../resources/favicon/apple-icon-120x120.png"> <link rel="apple-touch-icon" sizes="144x144" href="../../../resources/favicon/apple-icon-144x144.png"> <link rel="apple-touch-icon" sizes="152x152" href="../../../resources/favicon/apple-icon-152x152.png"> <link rel="apple-touch-icon" sizes="180x180" href="../../../resources/favicon/apple-icon-180x180.png"> <link rel="icon" type="image/png" sizes="192x192" href="../../../resources/favicon/android-icon-192x192.png"> <link rel="icon" type="image/png" sizes="32x32" href="../../../resources/favicon/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="96x96" href="../../../resources/favicon/favicon-96x96.png"> <link rel="icon" type="image/png" sizes="16x16" href="../../../resources/favicon/favicon-16x16.png"> <link rel="manifest" href="../../../resources/favicon/manifest.json"> <meta name="msapplication-TileColor" content="#ffffff"> <meta name="msapplication-TileImage" content="/ms-icon-144x144.png"> <meta name="theme-color" content="#ffffff"> </head>
HTML
복사