크롤한 웹데이터로 만들어보는 웹사이트

데브코스 TIL/[프로젝트]

크롤한 웹데이터로 만들어보는 웹사이트

예니ㅣ 2023. 11. 7. 16:01

1일차

처음해보는 프론트엔드 파트여서 일단 구조부터 만들어보고 있습니다!

<!DOCTYPE html>
<html lang="ko">
    <head>

        <meta charset="utf-8">      <!--한글 에러 방지-->

        <title>아파트 매매 동향</title>
        <link href="style.css" rel="stylesheet" type="text/css"/>
    
        </style>
    </head>
    

    <body>
        <header>
            <div id="logo" class="Logo">
                <h1>아파트 매매 동향</h1>
            </div>            
        </header>
        
        <!-- sidebar -->
        <div id="SideBar" class="SideBar" >
            <h2>
                <nav>
                    <ul class="box">
                        <li class="item">
                            <a href="#" id="NavLink1" >거래금액순</a>
                        </li>
                        <br><br>
                        <li class="item">
                            <a href="#" id="NavLink2">지역별</a>
                        </li>
                        <br><br>
                        <li class="item">
                            <a href="#" id="NavLink3">연도별</a>
                        </li>
                    </ul>
                </nav>
            </h2>
        </div>
        <div id="img_box"></div>
    </body>
</html>

2일차

구체적인 형태를 목표로 웹사이트를 구성하였습니다.

<!DOCTYPE html>
<html lang="ko">
    <head>

        <meta charset="utf-8">      <!--한글 에러 방지-->

        <title>주택 매매 가격 동향</title>
        <link href="style.css" rel="stylesheet" type="text/css"/>
    </head>
    

    <body>
        <div id="logo" class="Logo">
            <p>주택 매매 가격 동향</p>
        </div>            

        <main>
        
            <!-- 지역 선택 -->
            <div id="SideBar" class="SideBar">

                <h1>지역 선택</h1>
                <h2>
                    {% if regions %}
                
                    <ul class="tabs">
                        {% for region in regions %}
                        <li class="tab" data-tab="tab1">
                            <a href="{% url 'trades:templates:detail1' region.id %}">{{region.dong_name}}</a>
                        </li>
                        
                        {% endfor %}
                    </ul>
                    
                    {% else %}
                    <p>no regions</p>
                    {% endif %}
                </h2>
                
                <h3>
                    <ul>
                        <div id="tab1" class="tab_list">
                                <li>A시</li>
                                <li>A시</li>
                                <li>A시</li>
                                <li>A시</li>
                        </div>
                    </ul>    
                </h3>

            </div><!--

            --><div id="Contents" class="Contents">

                    <!-- 등락  -->
                    <div id="updown" class="updown">
                        <h1>등락</h1> 
                    </div>

                    <!-- 지도 -->
                    <div id="map" class="map">
                        <h1>지도</h1>
                    </div>

                </div>

        </main>
    </body>
</html>

:root {
    --blue: #4e73df;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #e74a3b;
    --orange: #fd7e14;
    --yellow: #f6c23e;
    --green: #1cc88a;
    --teal: #20c9a6;
    --cyan: #36b9cc;
    --white: #fff;
    --gray: #858796;
    --gray-dark: #5a5c69;
    --primary: #4e73df;
    --secondary: #858796;
    --success: #1cc88a;
    --info: #36b9cc;
    --warning: #f6c23e;
    --danger: #e74a3b;
    --light: #f8f9fc;
    --dark: #5a5c69;
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --font-family-sans-serif: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

html {
    font-family: sans-serif;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    background-color: antiquewhite;
}

article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
    display: block;
}

body {
    margin: 0;
    font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.5;
    color: #5a5c69;
    text-align: left;
    margin-right: 15px;  
}

li{
    padding: 10px 20px;
}

/* class */

.Logo{
    display: block;
    width: 100%;
    margin-left: 20px;
    margin-right: 30px;
    font-weight: 700;
    font-size: 3.5rem;
}

.SideBar{
    display: inline-block;
    width: 30%;
    display: inline-block;
    align-items: left;
    background: bisque;
}

.Contents{
    display: inline-block;
    float: right;
    width: 70%;
    display: inline-block;
}

.tabs{
    overflow: hidden;
    display: block;
    float: center;
    line-height: 5px;
    width: 30%;
    text-align: center;
    margin-left: 10px;
}

.tab_list{
    display: inline-block;
    width: 100px;
    text-align: left;
    margin-left: 10px;
}

.updown{
    width: 1000px;
    height: 300px;
    display: block;
    background: white;
}

.map{
    width: 1000px;
    height: 500px;
    display: block;
    background: #858796;
}

3일차

index.html과 main.html을 연결하고 style.css를 적용하였습니다.

추가적으로 들어가야 하는 데이터를 넣기 위해 style.css를 수정하고 views.html을 살펴볼 예정입니다!

{% load static %}

<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="utf-8" />
		<!--한글 에러 방지-->

		<title>주택 매매 가격 동향</title>

		<link
			rel="stylesheet"
			href="{% static 'css/style.css' %}"
			type="text/css"
		/>
	</head>

	<body>
		<header>
			<!-- 제목 -->
			<div id="Logo" class="Logo">
				<h1>주택 실거래 가격</h1>
				<h3>우리 동네에서 부동산 거래 변화가 가장 큰 곳은 어디일까?</h3>
			</div>
		</header>

		<main>
			<!-- 지역 선택 -->
			<div id="SideBar" class="SideBar">
				<h2>지역 선택</h2>
				<h5>
					{% if regions %}
					<ul class="tabs">
						{% for region in regions %}
						<li class="tab">
							{%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>

				<h3>
					<ul>
						<div id="tab1" class="tab_list"></div>
					</ul>
				</h3>
			</div>
			<!--

                내용
            -->
			<div id="Contents" class="Contents">
				<!-- 등락  -->
				<div id="updown" class="updown">
					<h1>등락</h1>
					<li>{{ trading_volume }}건의 거래</li>
					<li>평균 {{ average_price }} 만원</li>
					<li>가장 높은 매매가 : {{ highest_price }} 만원</li>
					<li>가장 낮은 매매가 : {{ lowest_price }} 만원</li>
				</div>

				<!-- 지도 -->
				<div id="map" class="map">
					<h1>지도</h1>
					{% include "map_visual/seoul_map.html" with my_map=map%}
				</div>
			</div>
		</main>
	</body>
</html>

html {
	font-family: sans-serif;
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	background-color: antiquewhite;
}

article,
aside,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section {
	display: block;
}

body {
	margin: 0;
	font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
		"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	font-size: 1rem;
	font-weight: 300;
	line-height: 1.5;
	color: #5a5c69;
	text-align: left;
	margin-right: 15px;
}

li {
	padding: 10px 20px;
}

/* class */

.Logo {
	display: block;
	width: 100%;
	margin-left: 20px;
	margin-right: 30px;
	font-weight: 700;
	font-size: 3.5rem;
}

.SideBar {
	display: inline-block;

	display: inline-block;
	align-items: left;
	background: bisque;
}

.Contents {
	display: inline-block;
	float: right;
	width: 70%;
	display: inline-block;
}

.tabs {
	overflow: hidden;
	display: block;
	float: center;
	line-height: 5px;
	text-align: center;
	margin-left: 10px;
}

.tab_list {
	display: inline-block;
	width: 100px;
	text-align: left;
	margin-left: 10px;
}

.updown {
	width: 1000px;
	height: 300px;
	display: block;
	background: white;
}

.map {
	width: 1000px;
	height: 500px;
	display: block;
	background: #858796;
}

4일차

main.html과 detail.index 완성했습니다!

index.html을 최대한 간단히 만들어서 main과 detail을 유동적으로 사용할 수 있도록 작성했습니다.

templates/trades/index.html

{% extends 'trades/main.html' %}

<!DOCTYPE html>
	<head>
	</head>

	<body>
		{% block Title %}{% endblock %}

		{% block SideBar %}{% endblock %}
		
		{% block Contents %}
			{% block updown %}{% endblock %}
			{% block map %}{% endblock %}
		{% endblock %}
	</body>
</html>

templates/trades/main.html

{% load static %}

<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="utf-8" />
		<!--한글 에러 방지-->

		<title>주택 매매 가격 동향</title>

		<link
			rel="stylesheet"
			href="{% static 'css/style.css' %}"
			type="text/css"
		/>
	</head>

	<body>
		<header>
			<button
				class="Button"
				type="button"
				onclick="location.href='{% url 'trades:index' %}';"
			>
				Home
			</button>

			<!-- 제목 -->
			<div id="Title" class="Title">
				<p id="Logo" class="Logo">주택 매매 가격 동향</p>
				<p id="SubLogo" class="SubLogo">
					우리 동네에서 부동산 거래 변화가 가장 큰 곳은 어디일까?
				</p>

				<h3 class="Location">
					{% if sido %}
						{% if gugun %}
						<p><u>현재 선택 지역 : {{sido}} {{gugun}}</p></u>
						{% else %}
						<p><u>현재 선택 지역 : {{sido}}</p></u>
						{% endif %}
					{% else %}
					<p><u>현재 선택 지역 : 전국</p></u>
					{% endif %}
				</h3>
			</div>
		</header>

		<main>
			<aside id="Side" class="Side">
				<!-- 거래 정보  -->
				<div id="Info" class="Info">
					<h3 class="SectionName">거래 정보</h3>
					<ul style="list-style-type: none">
						<li>
							<strong>매매 건수</strong> : {{trading_volume}} 건
						</li>
						<li>
							<strong>평균 매매가</strong> : {{average_price}} 만원
						</li>
						<li>
							<strong>최고 매매가</strong> : {{highest_price}} 만원
						</li>
						<li>
							<strong>최저 매매가</strong> : {{lowest_price}} 만원
						</li>
					</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 gugun %}
								<a
									href="{% url 'trades:detail' %}?dong_nm={{sido}}-{{gugun}}-{{region}}"
								>
								{{region}}
								</a>
								{% elif 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">
					<h3 class="SectionName">지도</h3>

					{% include "map_visual/sido_map.html" with sido_map=map%}
				</div>
			</section>
		</main>

		<footer>
			<p><em>프로그래머스 데이터엔지니어링 데브코스 프로젝트</em></p>
		</footer>
	</body>
</html>

templates/trades/detail.html

{% load static %}

<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="utf-8" />
		<!--한글 에러 방지-->

		<title>주택 매매 가격 동향</title>

		<link
			rel="stylesheet"
			href="{% static 'css/style.css' %}"
			type="text/css"
		/>
	</head>

	{% if region %}
	<body>
		<header>
			<button
				class="Button"
				type="button"
				onclick="location.href='{% url 'trades:index' %}';"
			>
				Home
			</button>

			<!-- 제목 -->
			<div id="Title" class="Title">
				<p id="Logo" class="Logo">주택 매매 가격 동향</p>
				<p id="SubLogo" class="SubLogo">
					우리 동네에서 부동산 거래 변화가 가장 큰 곳은 어디일까?
				</p>

				<h3 class="Location">
					<p><u>현재 선택 지역 : {{region}}</p></u>
				</h3>
			</div>
		</header>

		<main>
			<aside id="Side" class="Side">
				
				<!-- 거래정보  -->
				<div id="Info" class="Info">
					<h3 class="SectionName">거래 정보</h3>
					<ul style="list-style-type: none">
						<li>
							<strong>매매 건수</strong> : {{trading_volume}} 건
						</li>
						<li>
							<strong>평균 매매가</strong> : {{average_price}} 만원
						</li>
						<li>
							<strong>최고 매매가</strong> : {{highest_price}} 만원
						</li>
						<li>
							<strong>최저 매매가</strong> : {{lowest_price}} 만원
						</li>
					</ul>
				</div>
			</aside>
		</main>

		<footer>
			<p><em>프로그래머스 데이터엔지니어링 데브코스 프로젝트</em></p>
		</footer>
	</body>
	{% else %}
	<p>이 지역에 대한 거래 정보가 없습니다.</p>
	{% endif %}
</html>

static/trades/css/style.css

html {
	font-family: sans-serif;
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	background-color: antiquewhite;
}

article,
aside,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section {
	display: block;
}

body {
	margin: 0;
	font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
		"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	font-size: 1rem;
	font-weight: 300;
	line-height: 1.5;
	color: #5a5c69;
	text-align: left;
	margin-right: 15px;
}

header{
	width: 100%;
	height: 30%;
}

main{
	width: 100%;
	height: 65%;
}

footer{
	width: 100%;
	height: 5%;
	float: right;
	display: block;
	text-align: right;
}

li {
	padding: 10px 20px;
}

/* 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: 3rem;
	color: black;
}

.SubLogo {
	display: block;
	width: 100%;
	margin-left: 100px;
	margin-right: 30px;
	font-weight: 700;
	font-size: 1.2rem;
	color: rgb(126, 122, 122);
}

.Location{
	margin-left: 150px;
	color: #a9701a;
	font-size: 1.8rem;
}

.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;
}

.Info {
	width: 100%;
	height: 32%;
	display: block;
	background: rgb(254, 252, 252);
	font-size: 1.1rem;
	border-bottom: 4px solid;
}

.ChoiceBar {
	width: 100%;
	height: 68%;
	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: 15px;
	text-align: left;
	font-size: 1.2rem;
}

.Contents {
	display: inline-block;
	width: 70%;
}

.Map {
	width: 1000px;
	height: 800px;
	display: block;
	margin-bottom: 20px;
	border-left: 4px solid;
}

저작자표시

'데브코스 TIL > [프로젝트]' 카테고리의 다른 글

End-to-end 데이터 파이프라인 구성하기 (1)	2024.01.09
데이터 웨어하우스를 이용한 대시보드 구성 (1)	2023.12.06

현재글크롤한 웹데이터로 만들어보는 웹사이트

프로그래머스 데이터 엔지니어링 데브코스 2기 수강생 입니다

프로그래머스데브코스, _소개, _실습, 프로그래머스데브코스데이터엔지니어링, _Kafka, _HTML, _Spark, _redshift, _dbt, _SparkSQL, _selenium, _Airflow, _설치, _sql, _Docker, _DAG, _문제풀이, _AWS, 프로그래머스, _머신러닝,

Today :
Yesterday :

예니의 코딩일기