Merge pull request #54 from EstateTrend-DevCourse/feature/templates

main.html 최종 마무리 했습니다.
EstateTrend-DevCourse · Nov 10, 2023 · 0cacc22 · 0cacc22
2 parents 4834eb6 + bcfd156
commit 0cacc22
Show file tree

Hide file tree

Showing 3 changed files with 116 additions and 78 deletions.
diff --git a/trades/static/css/style.css b/trades/static/css/style.css
@@ -90,76 +90,100 @@ li {
 }
 
 /* class */
+.Title{
+	line-height: 20px;
+}
+
+.Button{
+	float: right;
+	background: black;
+	color: white;
+	margin-right: 50px;
+	font-size: 1.1rem;
+	width: 70px;
+	height: 40px;
+	border-radius: 10%;
+}
 
 .Logo {
 	display: block;
 	width: 100%;
 	margin-left: 20px;
 	margin-right: 30px;
 	font-weight: 900;
-	font-size: 2.5rem;
+	font-size: 3rem;
 	color: black;
 }
 
 .SubLogo {
 	display: block;
 	width: 100%;
-	margin-left: 20px;
+	margin-left: 100px;
 	margin-right: 30px;
 	font-weight: 700;
-	font-size: 1.5rem;
+	font-size: 1.2rem;
+	color: rgb(126, 122, 122);
 }
 
-.Button{
-	display: inline-block;
-	float: right;
-	background: black;
-	color: white;
-	margin-top: 10px;
-	margin-right: 50px;
+.Location{
+	margin-left: 150px;
+	color: #a9701a;
+	font-size: 1.8rem;
 }
 
-.SideBar {
-	width: 25%;
+.SectionName {
+	width: 250px;
+	text-align: center;
+	margin-left: 10px;
+	font-size: 1.3rem;
+	background: #ead192;
+}
+
+.Side{
+	width: 30%;
+	height: 800px;
 	display: inline-block;
 	float: left;
+	font-size: 1rem;
 }
 
-.Contents {
-	display: inline-block;
-	width: 75%;
+.Info {
+	width: 100%;
+	height: 30%;
+	display: block;
+	background: rgb(254, 252, 252);
+	font-size: 1.1rem;
+}
+
+.ChoiceBar {
+	width: 100%;
+	height: 70%;
+	display: block;
+	float: left;
+	overflow-y: scroll;
+	background: rgb(223, 221, 221);
+	font-size: 1.2rem;
 }
 
 .tabs {
 	overflow: hidden;
 	display: block;
 	float: center;
-	line-height: 5px;
+	line-height: 15px;
 	text-align: left;
+	font-size: 1.2rem;
 }
 
-.SectionName {
-	width: 100px;
-	text-align: center;
-	margin-left: 10px;
-	font-size: 1.3rem;
-	background: #ead192;
-}
-
-.updown {
-	width: 1000px;
-	height: 250px;
-	display: block;
-	background: rgb(254, 252, 252);
-	border-left: 2px solid;
+.Contents {
+	display: inline-block;
+	width: 70%;
 }
 
-.map {
+.Map {
 	width: 1000px;
-	height: 650px;
+	height: 800px;
 	display: block;
-	/* background: #858796; */
 	margin-bottom: 20px;
-	border-left: 2px solid;
+	border-left: 4px solid;
 }
 
diff --git a/trades/templates/trades/index.html b/trades/templates/trades/index.html
@@ -5,7 +5,7 @@
 	</head>
 
 	<body>
-		{% block Logo %}{% endblock %}
+		{% block Title %}{% endblock %}
 
 		{% block SideBar %}{% endblock %}
 

diff --git a/trades/templates/trades/main.html b/trades/templates/trades/main.html
@@ -26,54 +26,30 @@
 			</button>
 
 			<!-- 제목 -->
-			<div id="Logo" class="Logo">
-				<p>주택 매매 가격 동향</p>
+			<div id="Title" class="Title">
+				<p id="Logo" class="Logo">주택 매매 가격 동향</p>
 				<p id="SubLogo" class="SubLogo">
 					우리 동네에서 부동산 거래 변화가 가장 큰 곳은 어디일까?
 				</p>
-			</div>
-		</header>
-
-		<main>
-			<!-- 지역 선택 -->
-			<aside id="SideBar" class="SideBar">
-				<h3 class="SectionName">지역 선택</h3>
-
-				<h5>
-					{% if regions %}
-					<ul class="tabs">
-						{% for region in regions %}
-						<li class="tab" style="list-style-type: none">
-							{%if sido%}
-							<a
-								href="{% url 'trades:index' %}?sido_nm={{sido}}&gugun_nm={{region}}"
-							>
-								{{region}}
-							</a>
-							{% else %}
-							<a
-								href="{% url 'trades:index' %}?sido_nm={{region}}"
-							>
-								{{region}}
-							</a>
-
-							{% endif %}
-						</li>
-						{% endfor %}
-					</ul>
 
+				<h3 class="Location">
+					{% if sido %}
+						{% if gugun %}
+						<p><u>현재 선택 지역 : {{sido}} {{gugun}}</p></u>
+						{% else %}
+						<p><u>현재 선택 지역 : {{sido}}</p></u>
+						{% endif %}
 					{% else %}
-					<p>no regions</p>
+					<p><u>현재 선택 지역 : 전국</p></u>
 					{% endif %}
-				</h5>
-			</aside>
-			<!--
+				</h3>
+			</div>
+		</header>
 
-                내용
-		-->
-			<section id="Contents" class="Contents">
+		<main>
+			<aside id="Side" class="Side">
 				<!-- 등락  -->
-				<div id="updown" class="updown">
+				<div id="Info" class="Info">
 					<h3 class="SectionName">거래 정보</h3>
 					<ul style="list-style-type: none">
 						<li>
@@ -94,16 +70,54 @@ <h3 class="SectionName">거래 정보</h3>
 					</ul>
 				</div>
 
+				<!-- 지역 선택 -->
+				<div id="ChoiceBar" class="ChoiceBar">
+					<h3 class="SectionName">지역 선택</h3>
+
+					<h5>
+						{% if regions %}
+						<ul class="tabs">
+							{% for region in regions %}
+							<li class="tab" style="list-style-type: none">
+								{%if sido%}
+								<a
+									href="{% url 'trades:index' %}?sido_nm={{sido}}&gugun_nm={{region}}"
+								>
+									{{region}}
+								</a>
+								{% else %}
+								<a
+									href="{% url 'trades:index' %}?sido_nm={{region}}"
+								>
+									{{region}}
+								</a>
+
+								{% endif %}
+							</li>
+							{% endfor %}
+						</ul>
+
+						{% else %}
+						<p>no regions</p>
+						{% endif %}
+					</h5>
+				</div>
+			</aside><!--
+
+                내용
+		--><section id="Contents" class="Contents">
+
 				<!-- 지도 -->
-				<div id="map" class="map">
-					<h1>지도</h1>
+				<div id="Map" class="Map">
+					<h3 class="SectionName">지도</h3>
+
 					{% include "map_visual/sido_map.html" with sido_map=map%}
 				</div>
 			</section>
 		</main>
 
 		<footer>
-			<p><em>프로그래머스 데브코스 데이터엔지니어링 프로젝트</em></p>
+			<p><em>프로그래머스 데이터엔지니어링 데브코스 프로젝트</em></p>
 		</footer>
 	</body>
 </html>
-Original file line number
+Diff line change
@@ Expand Up / @@ -5,7 +5,7 @@ @@
     	</head>
     	<body>
-    		{% block Logo %}{% endblock %}
+    		{% block Title %}{% endblock %}
     		{% block SideBar %}{% endblock %}
@@ Expand Down @@