250x250
Notice
Recent Posts
Recent Comments
Link
«   2024/12   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
Tags more
Archives
Today
Total
관리 메뉴

탁월함은 어떻게 나오는가?

[Q1] 홈페이지 제작시 CSS가 적용되지 않는 문제를 해결방법을 기록 본문

[Snow-ball]프로그래밍(컴퓨터)/프로그래밍 실수

[Q1] 홈페이지 제작시 CSS가 적용되지 않는 문제를 해결방법을 기록

Snow-ball 2021. 2. 21. 10:26
반응형

html, css, spring을 이용해서 홈페이지 제작하고 있다.

메인페이지인 mainPortfol 접속을해서 회사소개(Rsume)를 클릭하면 연결되하고 싶었다. 연결이 안되다가 연결이 됬다. 하지만, 문제가 발생했는데 css가 적용되지 않는 것이다.

 

 

 

 

1)mainPortfolio.html

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/css/portfolio/mainPortfol.css">
 
</head>
<body>
 
    <div id="header" role="banner">
        <fieldset>
            <legend class="visually-hidden">내가 원하는 이상형 검색</legend>
            <div class="search_box">
                <div id="box1">
                <!-- maxlength : <input> 태그의 maxlength 속성은
                <input> 요소에 입력할 수 있는 최대 문자수를 명시합니다 -->
                <input type="text" maxlength="225" tabindex="1" placeholder="검색어 입력" />
                <button type="submit" tabindex="2" >
                    검색
                </button>
                <a style="float: right" href="/">로그아웃</a>
                <a style="float: right"
                   th:href="@{/loginMemberShip/home?register}">로그인</a>
                <a style="float: right"
                   th:href="@{/joinmembership/home?register}">회원가입</a>
                </div>
            </div>
        </fieldset>
 
        <div class="navbar">
            <a href="#home">홈</a>
            <a>나에게 호감을 표현한</a>
            <a>상대에게 호감을 표현한</a>
            <a>실시간 매칭 서비스</a>
            <div class="dropdown">
                <button class="dropbtn">
                    마이 페이지
                </button>
                <div class="dropdown-contents">
                    <a href="#">구매 내역</a>
                    <a href="#">배송 상태</a>
                    <a href="#">포인트</a>
                </div>
            </div>
 
            <div class="dropdown">
                <button class="dropbtn">
                    특별한 데이트!
                </button>
                <div class="dropdown-contents">
                    <a href="#">흩날리는 벚꽃을 같이?!</a>
                    <a href="#">야구는 치맥이지!</a>
                    <a href="#">처녀귀신 love 호박귀신</a>
                </div>
            </div>
        </div>
    </div>
 
 
    <div id="main" role="main">메인</div>
    <main>
        <div class="main-container">
            <div class="main_hot">
            <div class="temp-box">주위에 접속중인 매력적 친구<img src="img/hot2.png" class="main_hot"/>
                </a></div>
            </div>
            <div class="temp-box">상대가 나에게 호감을 표현한 친구</div>
            <div class="temp-box">내가 상대에가 호감을 표현한 친구</div>
            <div class="temp-box">AI추천으로 호감을 표현하면 높은 성공확률 보이는 친구</div>
        </div>
    </main>
 
 
 
 
 
 
    <div id="footer" role="contentinfo">
        <div class="notice_box">
            <a href="/">공지사항</a>
            <a href="/">서비스 전체보기></a>
        </div>
        <div class="aside_box">
                <div class="area_user_row">
                    <span class="text_bold-13">Partners</span>
                    <ul>
                        <li><a href="/">비즈니스 광고</a></li>
                        <li><a href="/">공유업체 등록</a></li>
                    </ul>
                </div>
            <div class="area_col">
                <div class="ac_content">
                    <div class="text_bold-13">내꺼 브라우저</div>
                    <div class="ac_link"><a href="/">내꺼 어플 다운받기</a></div>
                </div>
                <a href="/"><img src="images/icon_whale.png" class="ac_img"/></a>
            </div>
        </div>
        <div class="bottom_box">
            <ul>
 
                <!--
                /portfolio/personalPortfolio
                /real_board/list
 
                <li><a th:href="@{/Resume/home?register}">회사소개(Resume)</a></li> -->
                <li><a href="/real_board/personalPortfolio">회사소개(Resume)</a></li>
                <li><a href="/">인재채용</a></li>
                <li><a href="/">제휴제안</a></li>
                <li><a href="/">이용약관</a></li>
                <li><a href="/">개인정보처리방침</a></li>
                <li><a href="/">청소년보호정책</a></li>
                <li><a href="/">내꺼 정책</a></li>
                <li><a th:href="@{/real_board/list?register}">고객센터</a></li>
                <li><a href="/">&copy; 내꺼 Corp.</a></li>
            </ul>
        </div>
    </div>
</body>
</html>
 cs

 

 

 

 

 

 

 

 

2) ResumeController

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
package com.example.demo.controller.resume_portfoilo;
 
import com.example.demo.entity.TestMember;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
 
@Controller
@RequestMapping(value = "/Resume")
public class ResumeController_portfolio {
    private static final Logger log =
            LoggerFactory.getLogger(ResumeController_portfolio.class);
 
    @GetMapping("/home")
    public String getHome() {
        log.info("getHome()");
 
        return "html_css/portfolio/mainPortfol";
    }
 
    @GetMapping("/personalPortfolio")
    public String getPersonalPortfolio(Model model) throws Exception {
        log.info("getPersonalPortfolio()");
 
        //model.addAttribute("list", service.list());
 
        return "spring/real_board/personalPortfolio";
    }
 
 
    @RequestMapping(value = "/home",
            method = RequestMethod.GET, params = "register")
    public String getRegisterForm(Model model) {
        log.info("/home?register");
 
 
        return "spring/real_board/personalPortfolio";
    }
 
 
    @RequestMapping(value = "/home",
            method = RequestMethod.GET, params = "mainPortfol")
    public String getMainPortfolForm(Model model) {
        log.info("/home?mainPortfol");
 
        model.addAttribute("testMember", new TestMember());
 
        return "html_css/portfolio/mainPortfol";
    }
}
 cs

 

 

 

 

 

 

 

 

3)personalPortfolio.html

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/portfolio/personalPortfolio.css">
 
</head>
<body>
<!--
 
<form action="../thyme/personalPortfolio.html" th:action="@{/Resume/register}"
      th:object="${testMember}" method="post">
-->
 
<div id="container">
 
    <nav>
        <ul id="menu">
            <li><a href="#"><a href="#content1">Education</a></a></li>
            <li><a href="#"><a href="#content2">TechnicalStack</a></a></li>
            <li><a href="#"><a href="#content3">기타정보</a></a></li>
            <li><a href="#"><a href="#content4">소개/AboutMe</a></a></li>
        </ul>
    </nav>
 
    <center>
        <span style="color: #a77777">
            <div id="top-box1"><h1>LEE Jung Hyun (이정현)</h1></div></span>
        </br></br></br></br>
 
        <span style="color: white">
        <h3><img src="img/gmail.png" width="30" height="30"> akdl911215@gmail.com</h3>
        <h3><img src="img/phone.jpeg" width="30" height="30"> +82 - 10 - 5093 - 9902</h3>
        <h3><img src="img/adree.png" width="30" height="30"> 서울시 중랑구 상봉동</h3>
        <h3><p><a href="https://github.com/akdl911215/" target="_blank"><img src="img/github.png" width="30" height="30"> https://github.com/akdl911215/</a></p></h3>
        <h3><p><a href="https://akdl911215.tistory.com/" target="_blank"><img src="img/tstory.jpg" width="30" height="30"> Blog: https://akdl911215.tistory.com/</a></p></h3>
        </span>
    </center>
 
         <section>
 
             <div id="education">
         <h2 id="content1">Eeducation</h2>
         <ul>
             <p><li>방송통신대학교 - 컴퓨터과학과</li></p>
             <p><li>비트캠프 - 디지털컨버전스기반 UXUI Front 전문 개발자양성과정</li></p>
         </ul>
         <p><a href="#menu">위로</a></p>
             </div>
         </section>
         </br></br>
 
         <section>
             <div id="technicalStack">
             <h2 id="content2">Technical Stack</h2>
             <table>
                 <thead>
                 <tr>
                     <th>Java <img src="img/java.png" width="25" height="25"></th>
                     <th>JavaScript <img src="img/JavaScript.png" width="25" height="25"></th>
                     <th>C <img src="img/C.png" width="25" height="25"></th>
                     <th>C++ <img src="img/C++.png" width="25" height="25"></th>
                 </tr>
                 </thead>
                 <thead>
                 <tr>
                     <th>Spring <img src="img/spring.png" width="25" height="25"></th>
                     <th>Linux <img src="img/linux.png" width="25" height="25"></th>
                     <th>Github <img src="img/github.png" width="25" height="25"></th></th>
                     <th>HTML <img src="img/html.png" width="25" height="25"></th>
                 </tr>
                 </thead>
                 <thead>
                 <tr>
                     <th>Microsoft Word <img src="img/word.png" width="25" height="25"></th>
                     <th>Photoshop <img src="img/photoshop.png" width="25" height="25"></th>
                     <th>Com Mix <img src="img/commix.jpeg" width="25" height="25"></th>
                     <th>Power Point <img src="img/Powerpoint.png" width="25" height="25"></th>
                 </tr>
                 </thead>
             </table>
                 <p><a href="#menu">위로</a></p>
                 </br></br>
             </div>
 
         </section>
 
         <section>
         <div id="information">
         <h2 id="content3">기타정보</h2>
         <ul>
             <p><li>전자기기기능사 자격증 취등(2009.12)</li></p>
             <p><li>1종 자동차 운전 면허증 취득(2010.03)</li></p>
             <p><li>육군 병장 만기 전역(2012.06)</li></p>
             <p><li>제17회수도권생활체육복싱대회우승트로피(2015.01)</li></p>
             <p><li>심리상담사 1급자격증 취득(2018.06)</li></p>
         </ul>
             <p><a href="#menu">위로</a></p>
         </div>
         </br></br>
         </section>
 
         <section>
         <div id="AboutMe">
         <h2 id="content4">소개 / About Me</h2>
             <p>브라우저 인터넷을 통해 사람들을 편안해지고 싶어하는 마음을 효율적으로
                 개선해주는 매력에 빠진 주니어 개발자입니다.</br> 단! 한번의 클릭으로 주문도
             가능해지고, 언제 어디서든 편안하게 쇼핑도 가능하고,</br> 언제 어디서든 친구들을
             만날 수 있는 다양한 기술과 상상들이 현실이 되는 매력에 개발에 관심을 가지고
             학습하고 있습니다.</br></br>
 
             새로운 기술에 대한 거부감없이 적극적으로 학습하며 기술 및 학습하고 실수했던
             내용들을 정리하는 블로그를 통해서 꾸준한 성장을 노력하고 있습니다.</p>
             <p><a href="#menu">위로</a></p>
         </div>
         </br></br>
         </section>
     </div>
     <div class="grid">
         <div class="grid_item first"></div>
         <div class="grid_item two"></div>
         <div class="grid_item third"></div>
     </div>
     </body>
     </html>
 cs

 

 

 

 

 

 

해결 방법 및 코드 :

 

 

..

...

 

 

 

 

 

 

 

 

 

 

베타존 : 네이버쇼핑 스마트스토어

나를 꾸미다 - 인테리어소품 베타존

smartstore.naver.com

 

 

반응형

'[Snow-ball]프로그래밍(컴퓨터) > 프로그래밍 실수' 카테고리의 다른 글

엔티티(Entity)와 DTO에 long선언을 Long 으로 변경했을때 nullPointException 에러 발생  (0) 2021.06.05
Error: Invariant failed: You should not use <Route> outside a <Router> 에러 발생시 해결  (0) 2021.04.20
Handler dispatch failed; nested exception is java.lang.IllegalAccessError: class jung.uss.controller.FileController (in unnamed module @0x12f12744) cannot access class jdk.internal.jline.internal.Log (in module jdk.internal.le) because module jdk.intern..  (0) 2021.04.13
Cause: java.sql.SQLSyntaxErrorException: ORA-00947: 값의 수가 충분하지 않습니다. 에러핸들링  (0) 2021.04.09
CRUD중 Create(insert)만들면서 ERROR 500 에러 발생 및 해결  (0) 2021.03.28
'[Snow-ball]프로그래밍(컴퓨터)/프로그래밍 실수' Related Articles more
Comments