1. index 작성: 틀 만들기
- head태그 안에 css 연결 태그 넣기 <link rel="stylesheet" href="이름.css">
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>index</title>
<link rel="stylesheet" href="/css/common.css">
</head>
<body>
<header>
<h1>헤더영역</h1>
<div class="wrap">
<ul>
<li><a href="/sign/signin">로그인</a></li> <!-- 컨트롤러 클래스파일로 맵핑 필요 -->
</ul>
</div>
</header>
<main>
<h1>메인영역</h1>
<div class="wrap">
</div>
</main>
<footer>
<h1>푸터영역</h1>
<div class="wrap">
</div>
</footer>
</body>
</html>
2. 스타일 초기화 및 기본 값 세팅 하기
- 태그 및 글자 스타일 제거
- 바디 컬러 및 폰트 스타일 적용
> padding 은 boader 기준으로 안쪽 여백, margins 은 바깥 여백 기준
> box-sizing 크기의 기준 : 따라서 border-box 기준이 헷갈리지 않다.
- content-box : 콘텐트 영역을 기준으로 크기를 정한다.
- border-box : 테두리를 기준으로 크기를 정한다.
- initial : 기본값으로 설정한다.
- inherit : 부모 요소의 속성값을 상속받는다.
@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Monoton&family=Noto+Sans+KR:wght@100;300;400;500;700;900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
*{padding: 0; margin: 0; box-sizing: border-box;} /* 태그마다 다른 padding과 margin이 달라서 통일(초기화)해줘야 함 */
li{ list-style:none;} /* 리스트 기존 스타일 제거 */
a{text-decoration: none; color: #222;} /* 글자 기존 스타일 제거 */
h1{position: absolute; left: -9999px;}
body{color:#222;
font-family: 'Noto Sans KR','Monoton','Roboto', sans-serif;
font-size: 16px;
}
3. 회원가입 페이지(SIGNUP 페이지 만들기) .HTML 틀잡기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="common.css">
</head>
<body>
<header>
<h1> 헤더영역 </h1>
<div class = "wrap">
로그인 페이지
</div>
</header>
</body>
</html>
4. 맵핑하기(jsp 에서 서블릿) , Controller
src/main/java 의 패키지 우클릭 > 클래스 파일 생성
package com.green.nowon.controller;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
// 맵핑 페이지 // 서블릿
@Controller
@RequestMapping("/sign/*") // /sign/으로 들어오는 모든 경로
public class SignController {
// /sign/* 경로 중 signup을 가지고 올때
@GetMapping("/signin")//즉,index 에서 연결하려고 적은 주소
public String signin(/* Model model */) { //model 은 필요시 적용
//문자열로 가지고 와야한다!
return "member/signin";// 실제 해당 파일의 주소 (확장명은 html 이 디폴트로 정의되어있음)
}
// Default 값
//#spring.thymeleaf.prefix=classpath:/templates/
//#spring.thymeleaf.suffix=.html
}
//SignController signController = new SignController();
'Spring' 카테고리의 다른 글
| [Spring] 데이터 소스를 통한 프로젝트 만들기 (0) | 2023.05.04 |
|---|---|
| [Spring] MyBatis Query 연동, 구축, 맵핑, 쿼리날리기 (0) | 2023.04.25 |
| [Spring] DB -스프링 웹 MVC 개념 (0) | 2023.04.24 |
| [Spring] DB 연결 하기 (2) AWS -EC2 : 배포방법 (0) | 2023.04.18 |
| [Spring] Web Page 만들기 (4) 회원가입 페이지 (DB 셋팅방법) (0) | 2023.04.13 |