[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="/">© 내꺼 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
반응형