코드를 외부에 공개하지 말라고 되어 있어서.. 프로젝트 조건과 하면서 구글링으로 찾았던 부분들을 간단하게 정리했다. 정말 간단한 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
'스터디📖 > 웹 개발 기초' 카테고리의 다른 글
| 이후 스터디 자료는 깃허브에 업로드 (0) | 2021.08.09 |
|---|---|
| 2. DB 연결 웹 앱 - 1. JavaScript - FE (0) | 2021.08.09 |
| 1. 웹 프로그래밍 기초 - 5. Servlet - BE (0) | 2021.03.14 |
| 1. 웹 프로그래밍 기초 - 4. 개발환경 설정 - BE (0) | 2021.03.14 |
| 1. 웹 프로그래밍 기초 - 3. CSS - FE (0) | 2021.03.14 |
