[프로젝트/JAVA] 3일차 - package, html, css

728x90

1. Package 생성하기

① src/main/resources > templates 패키지안에 admin패키지를 만들어주자.

admin 패키지는 관리자페이지의 View를 관리할 Package가 될 것이다.

② templates 패키지에 마우스 오른쪽 버튼을 누르면 아래와 같은 화면이 표시된다.

③ New > Packages를 누르면 패키지를 생성할 수 있다.

④ 아래는 패키지 생성창의 기본화면이다.

Name : templates뒤에 .admin을 붙여준 후, Finish를 눌러주면 생성된다.

⑤ admin패키지가 제대로 만들어졌다면 아래와 같이 표시될 것이다.

⑥ 아래와 같이 계층적 구조로 보이지 않는다면 빨간색 네모박스 안의 버튼을 눌러

Package Presentation > Hierachical을 클릭해주자.

2. HTML 생성하기

① HTML은 Visual Studio Code(링크)로 만들어서 옮기는게 편하다.

② Visual Studio Code (이하 : vsc) 를 열어 main.html을 만들어준다.

③ 빈화면의 main.html안에 html이라고 입력하면 아래와 같은 자동완성 창이 표시된다.

④ html:5를 클릭하면 아래와 같이 html의 기본구성이 자동완성된다.

⑤ 만들어진 main.html을 admin 패키지안으로 옮겨주자.

⑥ <body>태그 안에 입력하는 내용들이 웹페이지에 실제로 보이는 화면이다.

아래 화면처럼 <body>태그 안에 <h1>Hello World</h1> 를 입력해보자.

⑦ 여기까지 입력 후, 저장을 눌러준다.

그리고 아래 화면처럼 main.html을 마우스 오른쪽 버튼을 눌러 Properties를 클릭해주자.

⑧ properties에는 내가 선택한 파일의 실제경로를 확인하고 찾아갈 수 있다.

빨간 네모박스를 누르면 main.html을 확인할 수 있고, 열어볼 수 있다.

⑨ main.html을 열어보면 <h1>태그안에 입력한 Hello World와, <title> 태그안에 있던 Document를 확인할 수 있다.

3. css

① HTML에 작성한 태그들의 스타일을 미리 저장해두는 스타일시트다.

② 스타일의 일관성을 유지하고 유지보수가 쉬워지는 장점이 있다.

③ main.html의 <head>태그 밑에 아래와 같이 코드를 작성해보자.

④ <h1>태그의 글자색을 tomato라는 색으로 바꾸는 css를 설정한 코드다.

main.html을 열어 어떻게 바꼈는지 직접 확인해보자.

⑤ font-size, padding 등 다양한 속성을 지정해서 태그의 디자인을 설정할 수 있다.

다음포스팅의 주제

[프로젝트/JAVA] 3일차 - static경로 설정해주기

2021.05.16 31번째 포스팅 입사 69일차. 오늘은 스프링부트 + 타임리프에서 static의 경로를 설정해보려고 한다. 일반적으로 이미지, css, 자바스크립트는 static안에 폴더를 만들어서 관리한다. css와 java

limreus.tistory.com

728x90