[html]基本ページ構造(html、css)

29823 ワード
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;
}
JQuery|動的ラベルの作成
ネットワーク4週目