코드를 외부에 공개하지 말라고 되어 있어서.. 프로젝트 조건과 하면서 구글링으로 찾았던 부분들을 간단하게 정리했다. 정말 간단한 HOMEPAGE인데도 CSS 배치를 하는 부분에서 애를 많이 먹었다.. 갈 길이 멀다.. 😥

1. 웹 프로그래밍 기초

Project A - HOMEPAGE

웹 백엔드

톰캣서버를 통해서 자기소개 페이지가 동작되야 합니다. (ex http://localhost:8080/aboutme/index.html 에서 노출)
서블릿페이지하나를 생성해서, url을 입력했을 때 시간데이터가 화면에 노출돼야 합니다.

웹 프론트엔드

html layout tag를 사용합니다.
classname은 일정한 컨벤션을 유지합니다.
의미에 맞는 tag를 최대한 사용합니다. (div 사용은 최대한 자제)
position속성과 float를 사용해서 element를 배치합니다.
라이브러리를 사용한 레이아웃은 지양합니다. (부트스트랩 등)
id와 class등의 다양한 selector문법을 잘 활용해야 합니다.

어려웠던 부분

버튼에 링크 연결

<button class = "nav-btn" type="button" onclick="location.href='index.html'">홈</button>

가운데 정렬

margin: 0 auto; #위 아래는 여백을 주지 않고 좌우 여백 균등하게 분배

버튼 속성

btn{
    boder-radius: 10px; #테두리 둥글게
    background-color: black; #버튼 색
    color: white; #글자 색
}
btn: hover{ #버튼에 마우스를 올렸을 때 달라지는 효과
    cursor: pointer; #커서 모양
    background-color: black;
}

그림 옆에 텍스트 정렬
이미지에 float: left 속성을 준다.

Servlet 작성

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/html; charset=utf-8"); #한글을 사용할 때는 charset 지정해야 함
        PrintWriter out = response.getWriter();

        out.print("<html>");
        out.println("<head><title>info</title></head>");
        out.println("<body>");

        LocalDateTime currentDateTime = LocalDateTime.now(); #현재날짜와 시간
        String format = currentDateTime.format(DateTimeFormatter.ofPattern("yyyy/MM/dd HH:mm")); #원하는 방식으로 포맷
        out.println("<a href='index.html'>메인화면</a><br>");
        out.println("<h1 style=\"text-align: center\">현재시간 : "+format+"</h1>");

        out.println("</body>");
        out.print("</html>");

    }

이클립스 사용법
Dynamic Web Project 생성 -> Servlet, html, css 만들기 -> Run as Server

티스토리

Project A - HOMEPAGE 만들기

1. 웹 프로그래밍 기초

Project A - HOMEPAGE

웹 백엔드

웹 프론트엔드

어려웠던 부분