[Boost Course] Project - A : 나를 소개하는 홈페이지 만들기

프로젝트 양식

부코_웹_PJT1_자기소개페이지.pdf

0.64MB

 

 

index.html 구현하기

 

요구 사항으로는 <div> 로 레이아웃을 구성하는 것이 아닌 HTML layout tag를 사용하도록 되어있습니다. 

 

HTML Layout Tag

레이아웃 태그는 간단하게 말하자면 레이아웃을 정의하기 위한 HTML의 시멘틱 elements들입니다. 

의미가 담겨있는 태그로서 직관성이 뛰어납니다. 본문의 메인화면 페이지를 만들기 위해서는 

• <header>
• <article>
• <footer> 

가 사용될 것 같습니다. 

URL 경로 

URL 경로는 http://localhost:8080/aboutme/ 입니다. 8080과 aboutme를 어떻게 설정하는 것일까요. 우선 8080 (포트 번호) 를 설정하는 법을 알려드리겠습니다. 

 

Run > Edit Configurations > Tomcat 서버를 들어가면 하단에 HTTP port를 설정할 수 있는 칸을 보실 수 있습니다. 해당 칸의 값을 변경하여 포트 번호를 변경할 수 있습니다. 

Deployment 탭에서 주소 명을 변경해 줄 수 있습니다. / 를 꼭 붙여주세요! 

버튼을 누르면 다른 웹 페이지로 이동

우리는 화면 상단에 있는 홈, 자기소개, 내사진 등의 버튼을 눌러서 해당 내용에 맞는 HTML 파일로 이동해야 됩니다. 어떻게 이동할까요?

<input type="button" value="홈" onclick="location.href='index.html'">

HTML 에서 Servlet으로, Servlet에서 HTML로

form 태그를 이용하여 Servlet으로 넘어가봅시다.

TodayServlet 이라는 파일을 만들고 @WebServlet(name = "Servlet", value = "/today") 라고 설정했습니다. 

 

<form action="today" method = get>
       <input type="submit" value="몇시에요">
</form>

몇시에요 버튼을 클릭하면 TodayServlet 파일로 넘어갑니다.

 

+ 추가

<a href="today"> 서블렛 연결 </a>

 

반대로 Servlet 파일에서 HTML 파일로 어떻게 넘어올까요? 

response.setContentType("text/html;charset=UTF-8");
PrintWriter pw = response.getWriter();
pw.println("<a href = 'index.html'> 메인으로</a>");

CSS 적용하기

CSS는 HTML 파일 내부에 쓰는 방법이 있고, 따로 css 파일을 만들어서 해당 파일에 쓰는 방법이 있습니다.

저는 따로 style.css 파일을 만들어서 css 속성을 적용해보도록 하겠습니다.

 

우선 style.css 파일과 html 파일을 연결하기 위해서는 다음과 같은 구문을 추가해야합니다. 

<link rel="stylesheet" type="text/css" href="style.css">

시작 페이지 변경

web.xml에 <welcome-file-list> 를 작성함에 따라 시작 페이지를 변경할 수 있습니다. 시작 페이지는 목록의 맨 위로 올리면 됩니다.

<welcome-file-list>
        <welcome-file>index.html</welcome-file>
        <welcome-file>aboutme.html</welcome-file>
        <welcome-file>photo.html</welcome-file>
</welcome-file-list>

주의할점 

• 프로젝트의 요구 사항으로는 webContent 밑에 파일을 넣으라고 명시되어 있습니다. 하지만 IntelliJ는 폴더 명이 webContent가 아닌 web이니 web에 모든 파일을 넣어주시면 됩니다. 
• form 태그는 자동으로 개행이 됩니다. 따라서 css에 form { display: inline; } 을 추가해줍니다.

참조

• https://www.w3schools.com/html/html_layout.asp (HTML Layout Tag)
• https://geonlee.tistory.com/96 (Semantic Element)
• https://minimal-dev.tistory.com/7