기획
1. 기본적인 일정관리
2. 매일 배경화면이 다르게 구현
3. 현재 사용자 위치와 기온 출력
4. 오늘 할일 랜덤 추천받기 (TTS text to speech)
5. 오늘 할일 음성으로 추가하기
목적
파이널프로젝트에서 외부 API를 많이 활용해봤으니, 브라우저에 있는 WEB API를 활용해보고 싶었습니다.
VsCode를 사용합니다.
1. 시작 전에 드라이브에 폴더를 미리 만들어놓습니다.
CODE -> TODOAPP -> resources 를 만들고 그 안에 css, icon, js폴더를 추가해놓습니다.
2. VsCode에서 TODOAPP 폴더를 열고, liver-server를 다운로드 받습니다.
3. TODOAPP 안에 todo-list.html 을 생성합니다.
4.아이콘을 활용하기 위해 Font Awesome을 설치합니다.
https://fontawesome.com/download
Font Awesome
The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.
fontawesome.com
여기에서 Free For Web을 다운받습니다.
다운받아서 압축을 풀고 그 중에서 css와 webfont를 폴더를 vscode의 icon폴더 안에 옮깁니다.
5. css폴더 안의 all.css를 사용하기 위해 todo-list.html 파일의 head 안에 코드를 작성합니다.
6. 그 밖에 필요한 css 파일을 미리 작성해놓습니다.
1) reset.css을 추가합니다.
css reset을 위해 필요한 reset.css를 만들고, 아래 블로그의 코드를 복사해서 붙여줍니다.
https://meyerweb.com/eric/tools/css/reset/
CSS Tools: Reset CSS
CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if you're inter
meyerweb.com
여기에 추가로 코드를 붙여넣어서 완성된 reset.css입니다.
reset.css
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,
blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,
img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,
dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,
thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,
hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: "";
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* 추가로 붙여넣은 코드 */
/* 레이아웃 작성을 위한 css */
div,
ul,
li {
box-shadow: 0 0 0 1px lightgray inset;
}
button {
border: 0 none;
background-color: transparent;
cursor: pointer;
outline: 0;
}
a {
color: black;
text-decoration: none;
cursor: pointer;
}2) todo.css를 만듭니다.
여기에서 display 속성은 flex를 이용합니다.
todo.css
.top {
height: 5vh;
display: flex;
flex-direction: row;
/* 여러 요소가 있을때 위치 잡기space-evenly */
/* justify-content: space-evenly ; */
}
/* **************top ***************** */
.content {
height: 90vh;
}
/* **************content ************* 1vh 당 1%*/
.footer {
height: 5vh;
display: flex;
align-items: center;
}
.footer > span {
margin-left: 20px;
}
3) common.css를 만듭니다. (공통 css)
7. 만들어놨던 reset.css , common.css , todo.css 를 html.css에 추가합니다.
반응형으로 만들기 위한 코드도 추가했습니다.
todo-list.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!-- all.css추가하기 -->
<link rel="stylesheet" href="./resources/icon/css/all.css" />
<link rel="stylesheet" href="./resources/css/reset.css" />
<link rel="stylesheet" href="./resources/css/common.css" />
<link rel="stylesheet" href="./resources/css/todo.css" />
</head>
<body>
<!-- 반응형 -->
<div class="top"></div>
<div class="content"></div>
<div class="footer"></div>
</body>
</html>
'프로젝트' 카테고리의 다른 글
| [프로젝트] 관리자 페이지 만들기 (0) | 2023.04.08 |
|---|
댓글