프레젠테이션 영역 만들기

김인범's avatar
Nov 17, 2024
프레젠테이션 영역 만들기

웹페이지를 제작하기 위해 html파일을 만들어 봅니다.
notion image
파일 제작 위치
templates 에 .html (.mustache) 파일을 만들어 줍니다.

웹페이지 헤더부분: nav바 만들기

notion image
<nav>태그를 시작으로 <ul>태그 → <li>태그 를 만들어줍니다.
<li>태그 안에 <a> 태그를 넣어 다음에 만들 페이지로 이동가능하게 만들어줍니다.
notion image

바디 부분에 테이블 만들어주기

notion image
<nav> 태그 밑으로 웹페이지의 body부분을 만들어 줄 차례입니다.
<section> 태그 속에 <table>태그로 표를 만들어줍니다.
표의 머릿부분은 <tr>태그 속 <th>태그로 명시해줍니다.
표의 데이터 부분은 <tr> 태그 속 <td>태그로 명시해줍니다.
 
  • 결과
notion image
 
여기까지가 간단하게 프레젠테이션 영역을 만든 것 입니다.

웹 페이지에 한글이 깨져서 나오는 문제점

 
notion image
application.properties에서 UTF-8을 설정하지 않을 시,
웹 페이지 제작에 한글 번역이 안되는 문제점이 발생합니다.
 

해결법) application.properties UTF-8 설정

notion image
server.servlet.encoding.charset=utf-8
server.servlet.encoding.force=true
두 코드를 통해서 프로그램이 UTF-8을 읽을 수 있도록 설정해주면
notion image
위와 같이 한글이 똑바로 출력될 수 있습니다.
Share article

taker