오늘은 어제의 테이블에 부트스트랩을 끼얹어보려고 합니다.
부트스트랩(bootstrap)은,
Bootstrap
The most popular HTML, CSS, and JS library in the world.
getbootstrap.com
bootstrapk.com/getting-started/
시작하기 · 부트스트랩
부트스트랩은 프레임워크와 함께 일하기 위해 편리한 방법으로 빌드시스템으로 Grunt 를 사용합니다. 그것은 우리의 코드를 컴파일하고, 테스트하고, 그 밖에 몇몇 처리를 도와줍니다. Grunt 설치�
bootstrapk.com
저는 부트스트랩을 다운로드 받지 않고,CDN방식으로 사용하려고 합니다.
<!-- 합쳐지고 최소화된 최신 CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- 부가적인 테마 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<!-- 합쳐지고 최소화된 최신 자바스크립트 -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>위 태그를 jsp파일에 추가합니다. (<head>태그 안에 넣는걸 추천합니다. 안그럼 위치가 이상하다고 노란줄이 생겨요.)
그냥 테이블에 class="table" 한개의 문구만 추가했는데, 그나마 볼만 해 졌습니다.
이번엔 날짜를 정리해보려고 합니다.
여기에서는 jstl의 fmt 태그를 이용할 예정입니다.
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!--위 값은 core jstl이 있는곳에 추가합니다.-->
<!--아래 값은 테이블의 td값이 있는곳에 추가합니다.-->
<fmt:formatDate value="${list.boarddate}" pattern="yyyy년MM월dd일"></fmt:formatDate>td의 ${list.boarddate} 를 위 값으로 바꾸고 fmt태그를 추가로 넣은다음 출력하면...
여기에서 <h4>태그의 게시판과 게시글이 왼쪽으로 쏠려있는게 거슬려서 제 스타일대로 바꾸었습니다.
style="margin: auto;"를 추가.
<h4 style="margin: auto;">게시판</h4>
<table class="table" style="width: 50%; margin: auto;">
바꾼 부분만 잘라서 쓰면 이렇게 되었습니다. ->margin:auto만 인라인 방식으로 추가했습니다.
'공부공부' 카테고리의 다른 글
| 게시판 만들기 12.게시판 수정 (0) | 2020.08.26 |
|---|---|
| 게시판 만들기 11.CURD의 첫걸음 - 상세보기 (1) | 2020.08.25 |
| 게시판 만들기 9.페이징 따라하기 (0) | 2020.08.24 |
| 게시판 만들기 8. 뷰단 만들기 (0) | 2020.08.22 |
| spring 게시판 만들기 7.흐름? (0) | 2020.08.16 |