[html]基本ページ構造(html、css)
1. html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" lang="ko">
<head>
<title>경기나드리-여행tip</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="../../../static/tip/main.css"/>
<!--로컬테스트를 위한 css파일 경로설정-->
<link rel="stylesheet" href="/travelTip/tip/main.css"/>
<!--서버에서의 테스트를 위한 css파일 경로설정-->
</head>
<body>
<!-- <div th:text="${#request.contextPath}"></div>-->
<div class="container">
<div class="header-container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="page-move-container">
<div></div>
<div class="prev">< 이전메뉴</div>
<div class="this-page">여행 tip</div>
<div class="next" data-nexturl="/travelTip/tripStory">다음메뉴 ></div>
<div></div>
</div>
<div class="content-container">
<div></div>
<div class="section">여행이야기</div>
<div></div>
<div></div>
<div></div>
<div></div>
<div class="story-content">
<div>image</div>
<div>region</div>
<div>title</div>
</div>
<div class="story-content">
<div>image</div>
<div>region</div>
<div>title</div>
</div>
<div class="story-content">
<div>image</div>
<div>region</div>
<div>title</div>
</div>
<div></div>
<div></div>
<div class="section">여행코스</div>
<div></div>
<div></div>
<div></div>
<div></div>
<div class="course-content">
<div>image</div>
<div>region</div>
<div>title</div>
</div>
<div class="course-content">
<div>image</div>
<div>region</div>
<div>title</div>
</div>
<div class="course-content">
<div>image</div>
<div>region</div>
<div>title</div>
</div>
<div></div>
</div>
</div>
<script type="text/javascript" src="/travelTip/tip/main.js"></script>
<script type="text/javascript" src="../../../static/tip/main.js"></script>
</body>
</html>2. css
.container{
display: grid;
grid-template-rows: auto auto auto;
}
.container > .header-container{
display: grid;
grid-template-columns: 25% 12.5% 12.5% 12.5% 12.5% 25%;
text-align: center;
height: 100px;
align-content: center;
}
.container > .page-move-container{
display: grid;
grid-template-columns : 10% 10% 60% 10% 10%;
text-align: center;
height: 100px;
align-content: center;
}
.container> .content-container{
display: grid;
grid-template-rows: auto auto auto;
grid-template-columns: 8% 28% 28% 28% 8%;
}
.container> .content-container> .section{
font-size: 25px;
}
.container> .content-container> .content{
display: grid;
text-align: center;
grid-template-rows: auto auto auto;
}Reference
この問題について([html]基本ページ構造(html、css)), 我々は、より多くの情報をここで見つけました https://velog.io/@kh6197/html-기본형-페이지-구조-html-cssテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol