|
Phase 1 | ROS로 조명 및 공조 시스템 제어하기 |
직접 만든 HTML 호스팅하기
지난 포스팅에서 python manage.py runserver 명령을 통해 서버를 실행해봤습니다. 이번에는 Dashboard가 될 페이지를 만들어 보고, 127.0.0.1:8000에 진입했을 때, 그 html 파일이 불러와지도록 해보겠습니다
~/catkin_ws/src/cranberry_web/dashboard/templates/dashboard 에 index.html 파일을 만들어 작성합니다.
Hello World from Django!작성이 완료되었으면, 이제 세팅을 해보겠습니다.
각 파일에 다음의 내용을 추가합니다. 이미 존재하는 항목이라면 건너 뛰고, 내용이 아래와 다르다면 아래처럼 수정하시기 바랍니다.
# Written 2020-09-20 by whiteknight
# https://whiteknight3672.tistory.com
--------------# in cranberry_web/cranberry_web/settings.py
import os
ALLOWED_HOSTS = [u'127.0.0.1'] # 127.0.0.1 을 통해서만 접근할 수 있도록 합니다.
INSTALLED_APPS = ['main_page'] #'main_page' 항목을 추가합니다.
STATIC_URL = '/main_page/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
----------------------------------------------------------------------
--------------# in cranberry_web/cranberry_web/urls.py
from django.urls import path, include
urlpatterns = [
path('', include('dashboard.urls')), #path 항목을 추가합니다.
]
# 초기 페이지에 진입 시, dashboard.url로 연결되게 합니다.
# 이 항목을 추가함으로서 cranberry_web/dashboard/urls.py를 불러오게 됩니다.
----------------------------------------------------------------------
--------------# in cranberry_web/dashboard/urls.py
from django.urls import path
from . import views
urlpatterns = [
path('', views.dashboard, name = 'dashboard'),
]
# 초기 페이지 진입 시 cranberry_web/dashboard/views.py 를 불러옵니다.
----------------------------------------------------------------------
--------------#in cranberry_web/dashboard/views.py
def dashboard(request):
return render(request, 'dashboard/index.html', {}) # 항목을 추가합니다.
# 브라우저에 dashboard.html을 표시합니다.
----------------------------------------------------------------------
화면처럼 index.html에 추가한 내용이 웹서버를 통해 표현이 됩니다.
HTML + CSS = 벽체 제작 + 인테리어 마감
이제 Django로 HTML, CSS, Javascript 모두 사용할 준비가 되었습니다. 이제 본격적으로 코드를 짜 보겠습니다. HTML + CSS 모두를 사용하는 게 어려울 수 있습니다. 그러나 이 두 언어는 DIY 레벨에서는 한 2시간이면 충분히 활용 가능합니다. 애초에 이 둘은 프로그래밍 언어가 아니라, 마크업 언어로, 어떤 연산이나 기능을 구현하는 언어가 아닙니다. 쉽고, 간단합니다. (물론 이 언어들도 현업에서 사용하려면 공부를 많이 해야합니다.) 게다가 우리에게는 구글과 Stackoverflow라는 좋은 친구가 있습니다. 좀만 검색해도 5분 안에 마주친 문제를 해결할 수 있습니다.
HTML
HTML 문서 개발작성을 진행해 보겠습니다. 원활한 개발작성을 위해 별도의 코드 에디터를 사용하는 것을 추천합니다. Atom, Brackets, Sublime Text, VSCode 등이 있으며, 어느 것을 사용해도 좋습니다.
~/catkin_ws/src/cranberry_web/dashboard/templates 경로에서 index.html 파일을 이어서 작성합니다.
<!-- Written 2020-09-20 by whiteknight -->
<!-- https://whiteknight3672.tistory.com -->
{% load static %}
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Cranberry</title>
<link rel="stylesheet" href="{% static 'css/style.css' %}">
<!--<script src="{% static 'js/roslibjs/build/roslib.js' %}"></script>-->
<!--<script src="{% static 'js/script.js' %}"></script> -->
</head>
<body>
<header>
<div class="app_title">Cranberry</div>
<nav>
<ul class="nav__links">
<li><a href="#">Dashboard</a></li>
<li><a href="#">Settings</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
</header>
<div class="wrapper">
<!-- Light Card -->
<card class="light_card">
<div class="card_title">Light Control</div>
<div class="card_content">
<div class="light_box">
<div id ="lamp" class="lamp"></div>
<div id="label" class="label">living room</div>
</div>
</card>
</div>
</body>
</html>{%load static%} | html에서 static 폴더에 접근할 수 있도록 합니다. 이를 통해 html의 <head> 에서 dashboard.html에 적용할 CSS와 Javascript 파일을 불러옵니다.
<nav> | 웹페이지 상단에 내비게이션 바를 생성합니다.
<lt class = "light_card"> | 조명을 제어할 카드를 생성합니다.
<div class="wrapper"> | 카드가 놓일 배경이 되는 자리입니다.
<card class="light_card"> | 조명을 제어할 카드에 해당하는 영역입니다. 이 안에 카드 내용을 채웁니다.
<div class="card_title">, <div class="card_content"> | 카드를 제목과 내용으로 나눕니다.
<div class="light_box"> | 카드 내용 란에 조명과 조명의 이름을 담는 곳입니다.
이렇게 웹페이지에 표시할 내용을 트리 형태로 쭉 펼치는 느낌으로 html을 작성합니다. 이후 index.html을 웹브라우저에서 열어보면 다음과 같이 출력되는 것을 볼 수 있습니다.
이게 아닌데...
일단 원하는대로 만들어진것은 같습니다. 그런데, 어딘가 많이 부족해 보입니다. 지금 이 상태로 사용하기 위해 이 페이지에 Dashboard라는 이름까지 붙이지는 않았습니다. 이렇게 나오는 건 HTML을 불러와서 컨텐츠를 표시는 했으나, 각 요소들의 디자인, 요소들 간의 관계를 따로 정의 하지 않았기 때문입니다. CSS를 통해 각 요소들 간의 관계와 디자인을 정의해보겠습니다.
CSS
CSS는 요소들 간의 관계를 정의해 요소들의 위치를 정의하고, 각 요소들이 색상, 그림자 들의 스타일을 적용하는 역할을 합니다. 각 요소에 대한 설정은 (type)(attribute){setting} 의 형식으로 진행합니다.
~/catkin_ws/src/cranberry_web/dashboard/static/css에서 style.css 파일을 만들어 아래 내용을 작성해보겠습니다.
/*Written 2020-09-20 by whiteknight */
/*https://whiteknight3672.tistory.com*/
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
}
li, a, button{
font-family: "Montserrat", sans-serif;
font-weight: 500;
font-size: 16px;
color: #fdfdfd;
text-decoration: none;
}
header{ /* 태그 이름이 header인 요소에 대해 스타일 적용 */
background-color: rgb(146, 170, 169);
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 10%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.5);
}
.logo{ /* 클래스 이름이 logo인 요소에 대해 스타일 적용*/
cursor: pointer;
}
.nav__links{
list-style: none;
}
.nav__links li{
display: inline-block;
padding: 0px 20px;
}
.nav__links li a{
transition: all 0.3s ease 0s;
}
.nav__links li a:hover{
color: #0088a9;
}
button{
padding: 9px 25px;
background-color: #3CAEA3;
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
}
body{
background: rgb(247, 247, 247);
/* color: #555555; */
font-size: 14;
}
.wrapper{
padding: 20px;
width : 100%;
display: flex;
flex-wrap: wrap;
}
card{
width: 33.3%;
padding: 5px;
margin : 10px 10px 10px 10px;
height: fit-content;
background: #ffffff;
/* background: -webkit-linear-gradient(135deg, #fffcdc, #d9a7c7); /* Chrome 10-25, Safari 5.1-6 */
/* background: linear-gradient(135deg, #fffcdc, #d9a7c7); W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.301);
border-radius: 10px; /* 5px rounded corners */
}
.card_title{
margin-top: 5px;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
text-align: center;
font-size: 18px;
font-weight: 600;
}
.card_content{
display: flex;
flex-wrap: wrap;
margin-left: auto;
margin-right: auto;
height: fit-content;
width: 100%;
}
.light_box{
margin-left: auto;
margin-right: auto;
margin-top: 10px;
margin-bottom: 10px;
}
@media(max-width: 470px){ /*반응형 대응을 위한 스타일*/
.light_box{
width: 50%;
}
}
#lamp{ /* id 이름이 logo인 요소에 대해 스타일 적용*/
width: 30px;
height: 30px;
margin-top: 10px;
margin-bottom: 10px;
margin-left:auto;
margin-right: auto;
background-color: rgb(80, 80, 80);
box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.5);
border-radius: 50%;
transition: all 0.3s ease-in-out 0s ;
}
#lamp:hover{
background-color: rgb(255, 230, 0);
box-shadow: 0 0 10px 5px rgba(172, 126, 0, 0.781);
}
#label{
padding-left: 10px;
padding-right: 10px;
margin-left:auto;
margin-right: auto;
height: 100%;
margin: 0 auto;
font-size: 15px;
text-align: center;
}
@media (orientation:portrait){
.card_content{
min-height: 50px;
}
}
name{ ... } | name 태그에 대해 스타일을 적용합니다.
.name{ ... } | name 클래스에 대해 스타일을 적용합니다.
#name{ ... } | name id 에 대해 스타일을 적용합니다.
이외의 스타일 값들은 대부분 간단한 영어만으로 어느정도 해석이 가능하기에 굳이 설명을 하진 않겠습니다. 여기서 주목할 것은 card와 .card_content에 대한 스타일 값입니다. 카드 디자인에서의 핵심은 이들을 어떻게 배치되게 할 지 정하는 것입니다. flex-wrap : wrap 값을 줌으로써 카드들이 페이지 크기에 따라 자동으로 줄이 넘어가도록 했습니다. CSS flex 속성에 대해서는 다음 글에서 자세히 확인해보실 수 있습니다.
이번에야말로 CSS Flex를 익혀보자
이 튜토리얼은 “차세대 CSS 레이아웃” 시리즈의 첫번째 포스트입니다. 이번에야말로 CSS Flex를 익혀보자 이번에야말로 CSS Grid를 익혀보자 벌써부터 스크롤의 압박이 느껴지고,‘좀 편안하게 누
studiomeal.com
시연해보기
이렇게 HTML과 CSS로 웹페이지를 작성하고, 디자인을 구현해 보았습니다. 이제 시연해볼 차례입니다. 다만 CSS 파일을 작성했다고 index.html을 실행시킨다 해도 전혀 달라지는 게 없습니다. index.html에서 우리는 CSS파일을 로컬 경로에서 불러온 것이 아닌, Django에서 불러오도록 설정해 놨기 때문입니다.
<link rel="stylesheet" href="{% static 'css/dashboard.css' %}">따라서 HTML에 CSS 스타일이 적용된 페이지를 경험하기 위해, Django 웹서버를 실행합니다:
python manage.py runserver이제 127.0.0.1:8000에 접속하면 CSS가 페이지를 어떻게 변화시키는지 확인 가능합니다. 웹페이지의 가로 너비를 조절해서 Dashboard의 카드가 어떻게 변하는지 확인해 보시고, 카드에 있는 회색 원에 마우스를 올려 놓아 보세요. 수정을 원하신다면 이 상태에서 수정하시고 웹브라우저를 새로고침하시면 바로 적용됩니다.
Done!
내용이 좀 길어졌고, 작성하는 데도 오랜 시간이 걸렸습니다. 잘 모르겠다면 그냥 위의 코드를 그대로 복사해서 붙여넣고 서버를 실행시켜 보셔도 좋습니다. 구현해야 할 것과 배워야 할 것이 많기 때문에 세세한 부분들에 대한 것들은 여러분께 맡기겠습니다. 감사합니다.
긴 글 읽어주셔서 감사합니다.
글이 도움이 되셨다면 왼쪽 아래의 공감버튼과 광고 클릭 부탁드립니다. 고마움을 표현할 수 있는 가장 쉬운 방법입니다.
