반응형
아이콘 추가
프로필 기본 이미지 생성
<!DOCTYPE html>
<!-- fragment 뷰 -> 자주 사용하는 조각ㅁ-->
<!-- 타임리프 네임스페이스 설정-->
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head th:fragment="head">
<meta charset="UTF-8">
<title>Demo</title>
<!-- CSS only-> npm으로 이전
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
-->
<!-- 부트스트랩, 폰트어썸, jenticon -->
<link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="/node_modules/font-awesome/css/font-awesome.min.css" />
<script src="/node_modules/jquery/dist/jquery.min.js"></script>
<script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="/node_modules/jdenticon/dist/jdenticon.min.js"></script>
<style>
.container {
max-width: 100%;
}
.tagify-outside {
border: 0;
padding: 0;
margin: 0;
}
#study-logo {
height: 200px;
width: 100%;
overflow: hidden;
padding: 0;
margin: 0;
}
#study-logo img {
height: auto;
width: 100%;
overflow: hidden;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Noto Sans KR", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
body,
input,
button,
select,
optgroup,
textarea,
.tooltip,
.popover {
font-family: -apple-system, BlinkMacSystemFont, "Noto Sans KR", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
table th {
font-weight: lighter;
}
mark {
padding: 0;
background: transparent;
background: linear-gradient(to right, #f0ad4e 50%, transparent 50%);
background-position: right bottom;
background-size: 200% 100%;
transition: all .5s ease;
color: #fff;
}
mark.animate {
background-position: left bottom;
color: #000;
}
.jumbotron {
padding-top: 3rem;
padding-bottom: 3rem;
margin-bottom: 0;
background-color: #fff;
}
@media (min-width: 768px) {
.jumbotron {
padding-top: 6rem;
padding-bottom: 6rem;
}
}
.jumbotron p:last-child {
margin-bottom: 0;
}
.jumbotron h1 {
font-weight: 300;
}
.jumbotron .container {
max-width: 40rem;
}
</style>
</style>
</head>
<!-- 네비바 만들기-->
<nav th:fragment="main-nav" class="navbar navbar-expand-sm navbar-dark bg-dark">
<!-- 배너-->
<a class="navbar-brand" href="/" th:href="@{/}">
<!--@는 경로설정인데 이 경우엔 root경로 -->
<img src="/images/logo_sm.png" width="30" height="30">
</a>
<!-- 네비게이션 아이템 검색 창-->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
<span class="navbar-toggler-icon"> </span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<!-- 스터디 찾기 버튼 href="#" th:href="은 타임리프 동작 X와 동작시-->
<form th:action="@{/search/study}" class="form-inline" method="get" action="#">
<input class="form-control mr-sm-2" name="keyword" placeholder="스터디 찾기" type="search" />
</form>
</li>
</ul>
<!-- 로그인, 가입 버튼 href="#" th:href="은 타임리프 동작 X와 동작시-->
<ul class="navbar-nav justify-content-end">
<li class="nav-item" sec:authorize="!isAuthenticated()">
<a class="nav-link" th:href="@{/login}">로그인</a>
</li>
<li class="nav-item" sec:authorize="!isAuthenticated()">
<a class="nav-link" th:href="@{/sign-up}">가입</a>
</li>
<li class="nav-item" sec:authorize="isAuthenticated()">
<a class="nav-link" th:href="@{/notifications}">
<!-- 폰트어썸 이용한 알림 아이콘-->
<i class="fa fa-bell-o" aria-hidden="true"></i>
</a>
</li>
<li class="nav-item" sec:authorize="isAuthenticated()">
<a class="nav-link btn btn-outline-primary" th:href="@{/new-study}">
<!-- 폰트어썸 이용한 + 아이콘-->
<i class="fa fa-plus" aria-hidden="true"></i>
</a>
</li>
<li class="nav-item dropdown" sec:authorize="isAuthenticated()">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
aria-expanded="false">
<!-- jenticon을 이용한 프로필 아이콘, 타임리프를 이용해 스프링시큐리티 표현식으로 닉네임-->
<svg data-jdenticon-value="user127" th:data-jdenticon-value="${#authentication width="24" height="24" class="rounded border bg-light"></svg>
</a>
<div class="dropdown-menu dropdown-menu-sm-right" aria-labelledby="userDropdown">
<ul>
<h6 class="dropdown-header">
<span sec:authentication="name">Username</span>
</h6>
<a class="dropdown-item" th:href="@{'/profile/' + ${#authentication.name}}">프로필</a>
<a class="dropdown-item">스터디</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" th:href="@{'/settings/profile'}">설정</a>
<form class="form-inline my-2 my-lg-0" action="#" th:action="@{/logout}" method="post">
<button class="dropdown-item" type="submit">로그아웃</button>
</form>
</ul>
</div>
</li>
</ul>
</div>
</nav>
<footer th:fragment="footer">
<div class="row justify-content-center">
<img class="mb-2" src="/images/logo_long_kr.jpg" alt="" width="100">
<small class="d-block mb-3 text-muted">© 2020</small>
</div>
</footer>
</html>반응형
'Server Programming > Spring Boot Full-Stack Programming' 카테고리의 다른 글
| [스프링 풀스택 클론 코딩] 인증된 사용자와 미인증 사용자 분류 (0) | 2022.08.30 |
|---|---|
| [스프링 풀스택 클론 코딩 - 회원가입] (1-16) 현재 인증된 사용자 정보 참조 (0) | 2022.08.30 |
| [스프링 풀스택 클론 코딩] npm 라이브러리를 이용한 아이콘 추가 / jdenticon을 이용한 이미지 생성 (0) | 2022.08.30 |
| [스프링 풀스택 클론 코딩] 타임리프의 fragment 기능 (0) | 2022.08.29 |
| [스프링 풀스택 클론 코딩 - 회원가입] (1-14) 뷰 중복 코드 제거 (0) | 2022.08.29 |
