Home Explore Help
Register Sign In
juhankim
/
ili_home
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

시멘틱 태그 html 작업 및 swiper 라이브러리 적용

inkoreakim 2 years ago
parent
697ad4311e
commit
779cd387a2
23 changed files with 247 additions and 132 deletions
Split View Show Diff Stats
  1. 11 2
      src/main/java/com/example/ili_web/config/MvcConfiguration.java
  2. 1 1
      src/main/java/com/example/ili_web/main/controller/MainController.java
  3. 108 0
      src/main/resources/static/css/style.css
  4. BIN
      src/main/resources/static/image/banner01.jpg
  5. BIN
      src/main/resources/static/image/export.jpg
  6. BIN
      src/main/resources/static/image/logo.png
  7. BIN
      src/main/resources/static/image/photo_trade.jpg
  8. BIN
      src/main/resources/static/image/service_item/Kho-luu-tru.png
  9. BIN
      src/main/resources/static/image/service_item/Phan-phoi-hau-can.png
  10. BIN
      src/main/resources/static/image/service_item/Thong-quan-hoan-thue.png
  11. BIN
      src/main/resources/static/image/service_item/Thuong-mai-dien-tu.png
  12. BIN
      src/main/resources/static/image/service_item/airplane.png
  13. BIN
      src/main/resources/static/image/service_item/cargo-ship.png
  14. BIN
      src/main/resources/static/image/service_item/chuyen-phat-nhanh-quoc-te.png
  15. BIN
      src/main/resources/static/image/service_item/customer-care-1-1.png
  16. BIN
      src/main/resources/static/image/service_item/delivery-truck.png
  17. BIN
      src/main/resources/static/image/service_item/distinction-1.png
  18. BIN
      src/main/resources/static/image/service_item/handshake-1.png
  19. BIN
      src/main/resources/static/image/service_item/train.png
  20. 0 0
      src/main/resources/templates/css/style.css
  21. 127 0
      src/main/resources/templates/html/land.html
  22. 0 129
      src/main/resources/templates/html/main/main.html
  23. BIN
      src/main/resources/templates/image/logo.jpg

+ 11 - 2
src/main/java/com/example/ili_web/config/MvcConfiguration.java
View File 

@@ -12,8 +12,17 @@ public class MvcConfiguration  implements WebMvcConfigurer {
 
 
     @Override
 
     public void addResourceHandlers (final ResourceHandlerRegistry registry) {
 
-        registry.addResourceHandler("/**")
 
-                .addResourceLocations("classpath:/templates/html/", "classpath:/static/")
 
+        registry.addResourceHandler("/html/**")
 
+                .addResourceLocations("classpath:/templates/html/")
 
+                .setCacheControl(CacheControl.noCache());
 
+        registry.addResourceHandler("/css/**")
 
+                .addResourceLocations("classpath:/static/css/")
 
+                .setCacheControl(CacheControl.noCache());
 
+        registry.addResourceHandler("/js/**")
 
+                .addResourceLocations("classpath:/static/js/")
 
+                .setCacheControl(CacheControl.noCache());
 
+        registry.addResourceHandler("/image/**")
 
+                .addResourceLocations("classpath:/static/image/")
 
                 .setCacheControl(CacheControl.noCache());
 
     }
 
 }

+ 1 - 1
src/main/java/com/example/ili_web/main/controller/MainController.java
View File 

@@ -13,6 +13,6 @@ public class MainController {
 
     @GetMapping("/")
 
     public String test () {
 
         log.info("Connect!!");
 
-        return "/main/main.html";
 
+        return "/html/land.html";
 
     }
 
 }

+ 108 - 0
src/main/resources/static/css/style.css
View File 

@@ -0,0 +1,108 @@
 
+@charset "utf-8";
 
+
 
+body {
 
+    font-family: Arial, sans-serif;
 
+    margin: 0;
 
+    padding: 0;
 
+}
 
+header {
 
+    background-color: white;
 
+    color: black;
 
+    padding: 20px;
 
+    display: flex;
 
+    justify-content: space-between;
 
+    align-items: center;
 
+}
 
+nav {
 
+    display: flex;
 
+}
 
+nav a {
 
+    color: black;
 
+    text-decoration: none;
 
+    margin: 0 10px;
 
+}
 
+nav a:hover {
 
+    text-decoration: underline;
 
+}
 
+.logo {
 
+    display: flex;
 
+    align-items: center;
 
+}
 
+
 
+/* 섹션 스타일링 */
 
+#section1 {
 
+    background-image: url('#');
 
+    background-size: cover;
 
+    color: white;
 
+    padding: 100px 0;
 
+    text-align: center;
 
+}
 
+#section1 h2 {
 
+    background-color: #333;
 
+    margin-bottom: 20px;
 
+}
 
+.services {
 
+    display: flex;
 
+    flex-wrap: wrap;
 
+    justify-content: center;
 
+}
 
+.service {
 
+    margin: 10px;
 
+}
 
+.service img {
 
+    width: 200px;
 
+    height: 200px;
 
+    object-fit: cover;
 
+}
 
+.highlight-service img {
 
+    width: 300px;
 
+    height: 200px;
 
+    object-fit: cover;
 
+}
 
+.nav-link.fw-bold {
 
+    color : dimgray;
 
+}
 
+/*#banner_01 {
 
+    height: 350px;
 
+}
 
+#header_img {
 
+    text-align: center;
 
+    justify-content: center;
 
+}
 
+
 
+ */
 
+#section1 {
 
+    width: 80%;
 
+    margin: 0 auto;
 
+}
 
+
 
+.services {
 
+    display: grid;
 
+    grid-template-columns: repeat(6, 1fr);
 
+    margin: 5px;
 
+}
 
+
 
+/* 화면이 작을 때, 1행으로 배치 */
 
+@media (max-width: 768px) {
 
+    .services {
 
+        grid-template-columns: repeat(3, 1fr); /* 3개의 열로 설정 */
 
+    }
 
+}
 
+
 
+.service {
 
+    text-align: center; /* 텍스트 중앙 정렬 */
 
+}
 
+
 
+.service img {
 
+    width: 100px; /* 이미지 크기 조정 */
 
+    height: auto; /* 높이 자동 조정 */
 
+}
 
+#section1 p {
 
+    color: black;
 
+    font-weight: bold;
 
+}
 
+
 
+.footer {
 
+    background-color: black;
 
+    color: white;
 
+}

BIN
src/main/resources/static/image/banner01.jpg
View File


BIN
src/main/resources/static/image/export.jpg
View File


BIN
src/main/resources/static/image/logo.png
View File


BIN
src/main/resources/static/image/photo_trade.jpg
View File


BIN
src/main/resources/static/image/service_item/Kho-luu-tru.png
View File


BIN
src/main/resources/static/image/service_item/Phan-phoi-hau-can.png
View File


BIN
src/main/resources/static/image/service_item/Thong-quan-hoan-thue.png
View File


BIN
src/main/resources/static/image/service_item/Thuong-mai-dien-tu.png
View File


BIN
src/main/resources/static/image/service_item/airplane.png
View File


BIN
src/main/resources/static/image/service_item/cargo-ship.png
View File


BIN
src/main/resources/static/image/service_item/chuyen-phat-nhanh-quoc-te.png
View File


BIN
src/main/resources/static/image/service_item/customer-care-1-1.png
View File


BIN
src/main/resources/static/image/service_item/delivery-truck.png
View File


BIN
src/main/resources/static/image/service_item/distinction-1.png
View File


BIN
src/main/resources/static/image/service_item/handshake-1.png
View File


BIN
src/main/resources/static/image/service_item/train.png
View File


+ 0 - 0
src/main/resources/templates/css/style.css
View File


+ 127 - 0
src/main/resources/templates/html/land.html
View File 

@@ -0,0 +1,127 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta content="width=device-width, initial-scale=1.0" name="viewport">
 
+    <title>플랫폼 메인 페이지</title>
 
+    <link href="/css/style.css" rel="stylesheet" type="text/css">
 
+    <link crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
 
+          integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" rel="stylesheet">
 
+    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
 
+
 
+</head>
 
+<body>
 
+<div class="container">
 
+    <header class="d-flex justify-content-center py-3" id="header_top">
 
+        <a class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none" href="/">
 
+            <div class="logo">
 
+                <img alt="로고" src="/image/logo.png" width="201px">
 
+            </div>
 
+        </a>
 
+
 
+        <ul class="nav nav-pills" style="color : black">
 
+            <li class="nav-item"><a class="nav-link fw-bold" href="#">회사소개</a></li>
 
+            <li class="nav-item"><a class="nav-link fw-bold" href="#">사업영역</a></li>
 
+            <li class="nav-item"><a class="nav-link fw-bold" href="#">정보광장</a></li>
 
+            <li class="nav-item"><a class="nav-link fw-bold" href="#">고객센터</a></li>
 
+        </ul>
 
+        <button class="btn btn-primary" id="login-btn" type="button">물류회원 전용라인</button>
 
+    </header>
 
+</div>
 
+<header id="header_img">
 
+    <div id="banner_parent">
 
+        <img alt="무역" class="img-fluid" id="banner_01" src="/image/banner01.jpg">
 
+    </div>
 
+</header>
 
+
 
+<section id="section1">
 
+    <div class="services">
 
+        <div class="service">
 
+            <img alt="서비스1" class="img-fluid" src="/image/service_item/cargo-ship.png">
 
+            <p>해상운송</p>
 
+        </div>
 
+        <div class="service">
 
+            <img alt="서비스1" class="img-fluid" src="/image/service_item/airplane.png">
 
+            <p>항공운송</p>
 
+        </div>
 
+        <div class="service">
 
+            <img alt="서비스1" class="img-fluid" src="/image/service_item/chuyen-phat-nhanh-quoc-te.png">
 
+            <p>서비스 설명</p>
 
+        </div>
 
+        <div class="service">
 
+            <img alt="서비스1" class="img-fluid" src="/image/service_item/customer-care-1-1.png">
 
+            <p>물류컨설팅</p>
 
+        </div>
 
+        <div class="service">
 
+            <img alt="서비스1" class="img-fluid" src="/image/service_item/delivery-truck.png">
 
+            <p>국제특송</p>
 
+        </div>
 
+        <div class="service">
 
+            <img alt="서비스1" class="img-fluid" src="/image/service_item/distinction-1.png">
 
+            <p>서비스 설명</p>
 
+        </div>
 
+        <div class="service">
 
+            <img alt="서비스1" class="img-fluid" src="/image/service_item/handshake-1.png">
 
+            <p>무역컨설팅</p>
 
+        </div>
 
+        <div class="service">
 
+            <img alt="서비스1" class="img-fluid" src="/image/service_item/Kho-luu-tru.png">
 
+            <p>서비스 설명</p>
 
+        </div>
 
+        <div class="service">
 
+            <img alt="서비스1" src="/image/service_item/Phan-phoi-hau-can.png" class="img-fluid">
 
+            <p>서비스 설명</p>
 
+        </div>
 
+        <div class="service">
 
+            <img alt="서비스1" src="/image/service_item/Thong-quan-hoan-thue.png" class="img-fluid">
 
+            <p>서비스 설명</p>
 
+        </div>
 
+        <div class="service">
 
+            <img alt="서비스1" src="/image/service_item/Thuong-mai-dien-tu.png" class="img-fluid">
 
+            <p>서비스 설명</p>
 
+        </div>
 
+        <div class="service">
 
+            <img alt="서비스1" src="/image/service_item/train.png" class="img-fluid">
 
+            <p>철도운송</p>
 
+        </div>
 
+    </div>
 
+</section>
 
+
 
+<section id="section2">
 
+</section>
 
+
 
+<section id="section3">
 
+    <h2>세 번째 섹션</h2>
 
+    <p>세 번째 섹션의 내용을 추가하세요.</p>
 
+</section>
 
+
 
+<footer class="footer">
 
+    <div class="container">
 
+        <div class="row">
 
+            <div class="col-md-6">
 
+                <h4>회사 소개</h4>
 
+                <p>CEO 인사말</p>
 
+                <p>회사연혁</p>
 
+                <p>경영이념</p>
 
+            </div>
 
+            <div class="col-md-6">
 
+                <h4>Contact Us</h4>
 
+                <p>연락처 및 위치 정보</p>
 
+            </div>
 
+        </div>
 
+    </div>
 
+    <div class="bottom-footer">
 
+        <div class="container">
 
+            <div class="row">
 
+                <div class="col-md-12">
 
+                    <p>&copy; 2024 Your Company. All rights reserved.</p>
 
+                </div>
 
+            </div>
 
+        </div>
 
+    </div>
 
+</footer>
 
+</body>
 
+<script crossorigin="anonymous"
 
+        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
 
+        src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
 
+</html>

+ 0 - 129
src/main/resources/templates/html/main/main.html
View File 

@@ -1,129 +0,0 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-<head>
 
-    <meta charset="UTF-8">
 
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-    <title>플랫폼 메인 페이지</title>
 
-    <style>
 
-        /* 전체적인 스타일링 */
 
-        body {
 
-            font-family: Arial, sans-serif;
 
-            margin: 0;
 
-            padding: 0;
 
-        }
 
-        header {
 
-            background-color: #333;
 
-            color: white;
 
-            padding: 20px;
 
-            display: flex;
 
-            justify-content: space-between;
 
-            align-items: center;
 
-        }
 
-        nav {
 
-            display: flex;
 
-        }
 
-        nav a {
 
-            color: white;
 
-            text-decoration: none;
 
-            margin: 0 10px;
 
-        }
 
-        nav a:hover {
 
-            text-decoration: underline;
 
-        }
 
-        .logo {
 
-            display: flex;
 
-            align-items: center;
 
-        }
 
-        #login-btn {
 
-            background-color: #4CAF50;
 
-            color: white;
 
-            padding: 10px 20px;
 
-            border: none;
 
-            border-radius: 5px;
 
-            cursor: pointer;
 
-        }
 
-
 
-        /* 섹션 스타일링 */
 
-        #section1 {
 
-            background-image: url('#');
 
-            background-size: cover;
 
-            color: white;
 
-            padding: 100px 0;
 
-            text-align: center;
 
-        }
 
-        #section1 h2 {
 
-            margin-bottom: 20px;
 
-        }
 
-        .services {
 
-            display: flex;
 
-            flex-wrap: wrap;
 
-            justify-content: center;
 
-        }
 
-        .service {
 
-            margin: 10px;
 
-        }
 
-        .service img {
 
-            width: 200px;
 
-            height: 200px;
 
-            object-fit: cover;
 
-        }
 
-        .highlight-service img {
 
-            width: 300px;
 
-            height: 200px;
 
-            object-fit: cover;
 
-        }
 
-    </style>
 
-</head>
 
-<body>
 
-<header>
 
-    <div class="logo">
 
-        <img src="../../image/logo.jpg" alt="로고" width="50px">
 
-        <h1>(주) 국제종합물류</h1>
 
-    </div>
 
-    <nav>
 
-        <a href="#">회사소개</a>
 
-        <a href="#">사업영역</a>
 
-        <a href="#">정보광장</a>
 
-        <a href="#">고객센터</a>
 
-    </nav>
 
-    <button id="login-btn">물류회원 전용라인</button>
 
-</header>
 
-
 
-<section id="section1">
 
-    <h2>환영합니다!</h2>
 
-    <div class="services">
 
-        <div class="service">
 
-            <img src="#" alt="서비스1">
 
-            <p>서비스 설명</p>
 
-        </div>
 
-        <!-- 9개의 서비스 이미지를 추가 -->
 
-        <div class="service">
 
-            <img src="#" alt="서비스10">
 
-            <p>서비스 설명</p>
 
-        </div>
 
-        <div class="highlight-service">
 
-            <img src="#" alt="추가서비스1">
 
-            <p>추가 서비스 설명</p>
 
-        </div>
 
-        <div class="highlight-service">
 
-            <img src="#" alt="추가서비스2">
 
-            <p>추가 서비스 설명</p>
 
-        </div>
 
-    </div>
 
-</section>
 
-
 
-<section id="section2">
 
-    <h2>두 번째 섹션</h2>
 
-    <p>두 번째 섹션의 내용을 추가하세요.</p>
 
-</section>
 
-
 
-<section id="section3">
 
-    <h2>세 번째 섹션</h2>
 
-    <p>세 번째 섹션의 내용을 추가하세요.</p>
 
-</section>
 
-
 
-<footer>
 
-    <p>푸터 내용을 추가하세요.</p>
 
-</footer>
 
-</body>
 
-</html>

BIN
src/main/resources/templates/image/logo.jpg
View File