오여진-CSS

---

title: "오여진-CSS"
excerpt: "앱 디자인"

categories:

• 개발일지
  tags:
• 오여진

toc: true
toc_sticky: true
sidebar_main: true

date: 2021-09-24
last_modified_at: 2021-09-24

---

확장앱 바디의 css형식 변환

photoshop 프로그램을 통해 제작한 확장앱 바디의 각각의 아이콘과 배경들의 레이어들을 css형식으로 변환하였고 이들을 통합해 하나의 index.css 파일로 만들었다.

/* CSS Document */

.아이콘_1 {
  border-width: 10.2px;
  border-color: rgb(0, 0, 0);
  border-style: solid;
  background-color: rgb(0, 0, 0);
  position: absolute;
  left: 22px;
  top: 76px;
  width: 81.6px;
  height: 81.6px;
  z-index: 10;
}

.아이콘_2 {
  border-width: 10.2px;
  border-color: rgb(0, 0, 0);
  border-style: solid;
  background-color: rgb(0, 0, 0);
  position: absolute;
  left: 150px;
  top: 76px;
  width: 81.6px;
  height: 81.6px;
  z-index: 9;
}

.아이콘_3 {
  border-width: 10.2px;
  border-color: rgb(0, 0, 0);
  border-style: solid;
  background-color: rgb(0, 0, 0);
  position: absolute;
  left: 277px;
  top: 76px;
  width: 81.6px;
  height: 81.6px;
  z-index: 8;
}

.아이콘_4 {
  border-width: 10.2px;
  border-color: rgb(0, 0, 0);
  border-style: solid;
  background-color: rgb(0, 0, 0);
  position: absolute;
  left: 22px;
  top: 199px;
  width: 81.6px;
  height: 81.6px;
  z-index: 7;
}

.아이콘_5 {
  border-width: 10.2px;
  border-color: rgb(0, 0, 0);
  border-style: solid;
  background-color: rgb(0, 0, 0);
  position: absolute;
  left: 150px;
  top: 198px;
  width: 81.6px;
  height: 81.6px;
  z-index: 6;
}

.아이콘_6 {
  border-width: 10.2px;
  border-color: rgb(0, 0, 0);
  border-style: solid;
  background-color: rgb(0, 0, 0);
  position: absolute;
  left: 277px;
  top: 199px;
  width: 81.6px;
  height: 81.6px;
  z-index: 5;
}

.아이콘_7 {
  border-width: 10.2px;
  border-color: rgb(0, 0, 0);
  border-style: solid;
  background-color: rgb(0, 0, 0);
  position: absolute;
  left: 22px;
  top: 321px;
  width: 81.6px;
  height: 81.6px;
  z-index: 4;
}

.아이콘_8 {
  border-width: 10.2px;
  border-color: rgb(0, 0, 0);
  border-style: solid;
  background-color: rgb(0, 0, 0);
  position: absolute;
  left: 150px;
  top: 321px;
  width: 81.6px;
  height: 81.6px;
  z-index: 3;
}

.아이콘_9 {
  border-width: 10.2px;
  border-color: rgb(0, 0, 0);
  border-style: solid;
  background-color: rgb(0, 0, 0);
  position: absolute;
  left: 277px;
  top: 321px;
  width: 81.6px;
  height: 81.6px;
  z-index: 2;
}

.배경 {
  background-image: url("배경.png");
  position: absolute;
  left: 0px;
  top: 55px;
  width: 400px;
  height: 385px;
  z-index: 1;
}

드림위버의 사용을 통한 작업

확장앱을 개발하며 가장 많이 등장하는 파일의 형식은 .js, .css, .html 이었다. 이 파일형식들을 모두 사용할 수 있는 프로그램을 찾다 가장 고전적인 프로그램인 드림위버를 찾았다.

먼저 드림위버라는 프로그램을 사용하기 위해 새로운 사이트를 만들었고, 그 사이트에서 이미지 파일(우리는 아이콘)을 저장할 파일인 icons 파일을 만들었다. 또한 우리가 필요한 index.html, index.css, manifest.json, popup.js 등의 파일을 만들어 팀원들이 각각 만든 소스들을 입력하였다.