지난번에 DB연동을 마치고 기본 html페이지를 띄워보는 것 까지 진행했습니다.
이번에 할 일은 이 페이지에 스타일(css)을 적용시켜보고 이벤트를 연결시켜보고 (javaScript) 파라미터를
서버와 주고받아보는 작업(타임리프) 입니다.
먼저, css와 자바스크립트는 사용하는 방법이 3가지가 있습니다.
첫번째는 html의 <style></style>로 미리 정의해놓고 사용하는 방법입니다.
Internal Style Sheet라고 합니다.
<!DOCTYPE html>
<html lang="en">
<style>
:root {
--bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--bs-body-font-family: var(--bs-font-sans-serif);
--bs-body-font-size: 2rem;
--bs-body-font-weight: 1000;
--bs-body-bg: #6c757d;
--bs-light: #f8f9fa;
}
body{
margin: 100px;
font-family: var(--bs-body-font-family);
font-size: var(--bs-body-font-size);
color: var(--bs-light);
font-weight: var(--bs-body-font-weight);
background-color: var(--bs-body-bg);
}
button{
border-radius: 100px;
}
p{
border: 3px solid red;
width: 220px;
}
</style>
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
</head>
<body>
<p> Hello World!! </p>
<button >Time</button>
<button >alert</button>
</body>
</html>
이렇게, 미리 정의해놓은 <style></style>내부이 스타일이 body의 내용들에 반영되는걸 알 수 있습니다.
두번째는 Inline Style Sheet입니다.
가장 기본적인 적용 방법으로
<p style="color:blue">Hello World!!</p> 같이 실제 엘리먼트 내부에 삽입해서 사용하는 방법입니다.
어려운 내용은 아니니 따로 설명은 생략하겠습니다.
마지막으로, Linking Style Sheet가 있습니다.
외부에 따로 css파일을 저장하고 그 파일의 주소를 읽어와서 사용하는 방법입니다.
(이부분 작업을 하다가 제가 실수를 했다는걸 하나 발견했습니다..
css폴더와 js폴더는 static폴더 아래에 위치해야 기본적으로 설정된 classPath와 잘 연동되어
적용이 가능하게 되었습니다... css폴더와 js폴더는 static폴더 안으로 넣어주세요.
그리고, 경로를 쓸때는 resources폴더와 static폴더는 이미 기본 경로로 입력이 되어 있습니다. 그러므로
/resources/static/css/style.css (x)
/static/css/style.css (x)
/css/style.css (o)
참고로 이상하게 내부 브라우저에서는 이렇게 하면 적용이 안 되는것처럼 나오더군요
하지만, 직접 크롬이나 Edge같은 브라우저를 키시고 local:8080을 입력하시면
이렇게 잘 나옵니다.
자바 스크립트 또한 css와 사용방법이 똑같습니다.
Time을 누르면 현재 시간을 아래에 출력하고, alert를 누르면 메세지 박스가 뜨는 코드를 만들어 보겠습니다.
1. Internal Style Sheet
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<link rel="stylesheet" type="text/css" href="/css/style.css">
<script>
function GetTime() {
const Target = document.getElementById("time");
if (Target.innerText == "") {
let today = new Date();
Target.innerText = today.toString();
}
else Target.innerText = "";
}
function alert_box(){
alert("Hello!!");
}
</script>
</head>
<body>
<p> Hello World!! </p>
<button onclick="GetTime()">Time</button>
<button onclick="alert_box()" >alert</button>
<h1 id="time"></h1>
</body>
</html>
2. 외부 스크립트 불러오기
위에서 얘기한것처럼 /resources/static 이라는 경로는 기본적으로 입력 되어 있습니다.
그래서, js와 css파일 또는 이미지 같은 것들이 반드시 static 폴더 안으로 들어가야 하는 것입니다.
(이 기본경로는 수정이 가능하지만, 많은 사람들이 규칙을 정한 것이므로 그냥 따르는게 좋아보입니다.)
이렇게 static안에 js폴더와 그 안에는 script.js 파일을 넣어주고 이 외부 js스크립트를 body의 끝부분에서 불러왔습니다.
기본경로까지 포함하면 resources/static/js/script.js가 되는 것입니다.
script.js는 이렇게 만들었습니다.
document.getElementById("btnTime").addEventListener("click", Time_Response);
document.getElementById("btnAlert").addEventListener("click", alert_box);
function Time_Response(){
const Target = document.getElementById("time");
if (Target.innerText == "") {
let today = new Date();
Target.innerText = today.toString();
}
else Target.innerText = "";
}
function alert_box(){
alert("Hello!!");
}
버튼에 onclick이나 이런 이벤트를 따로 두지않고, click이라는 이벤트에 대한 eventListner를
js파일의 생성과 동시에 수행합니다. 동작방식은 위에 했던것들과 정확하게 똑같습니다.
'스프링부트를 이용한 웹페이지 만들기 도전!! > 인텔리J' 카테고리의 다른 글
| IntelliJ를 이용해서 스프링부트를 시작해보자!! (6) - Dto, Dao, Service (2) | 2022.04.20 |
|---|---|
| IntelliJ를 이용해서 스프링부트를 시작해보자!! (4) - 창띄우기 (1) | 2022.04.11 |
| IntelliJ를 이용해서 스프링부트를 시작해보자!! (3) - 프로젝트 구조 (0) | 2022.04.11 |
| IntelliJ를 이용해서 스프링부트를 시작해보자!! (2) - 설치 및 프로젝트 생성 (0) | 2022.04.11 |
| IntelliJ를 이용해서 스프링부트를 시작해보자!! (1) (0) | 2022.04.08 |
