intro
두둥! 사실 어제 끝내려고 했던 게 여기까지 였는데,
생각보다 이름을 받아 저장하고 표출하는 과정에서 애를 먹어서...
오늘에 이르게 되었다 ㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎ
모든게 쉽지 않아
아. 그전에 !!!
어제까지 작업했던 부분에 대해서 비록 css없는 단촐한 화면이지만,
그래도 작업결과를 보이기 위해 올린다.ㅎㅎ
참고로, 화면을 캡쳐해서 gif로 만들어주는 프로그램은
youngbinlee님의 블로그를 참고하였다
위의 블로그에서 소개한 소프트웨어는 ScreenToGif이다.
gif로 올리려다가... 뭔가 너무 끊기는 느낌이라 그냥 window기능 기능인 window키 + G키로 녹화했다.
자. 시작하기에 앞서, 오늘 하고자 하는 내용을 따온 곳은 Momentum이라는 곳의 배경화면 변경기법이다.
Momentum Dashboard
Replace new tab page with a personal dashboard featuring todo, weather, and inspiration.
momentumdash.com
현재 new Tab으로 애용하고 있는 momentum이다.
새로고침을 할때마다 새로운 이미지가 배경화면으로 설정되어 나타난다.
우선, 무슨 기능들이 필요할까?
- 배경화면으로 쓰고 싶은 이미지들의 이름을 array에 담아두고, random하게 고르기 --> // Math.floor() & Math.random()
- 화면이 새롭게 로드될때마다 콜백함수를 호출하기 --> // window.onload = cb;
1번을 실현시키기 위해서 검색,
2번을 실현시키기 위해서 검색,
그 밖에 검색(1)_MDN: Image() (사용x)
Image() class의 constructor는 새로운 HTML의 <img>요소 instance를 만들어 낸다. 기본적으로 document.createElement('img')와 같은 역할을 한다.
문법
var htmlImageElement = new Image(width, height);변수
- width : The width of the image (i.e., the value for the width attribute)
- height : The height of the image (i.e., the value for the height attribute).
사용법
var myImage = new Image(100, 200);
myImage.src = 'picture.jpg';
document.body.appendChild(myImage);This would be the equivalent of defining the following HTML tag inside the <body>:
<img width="100" height="200" src="picture.jpg">작업하다보니, 더 필요했던 기능들
배경화면이 색이 쎄다. 배경화면에도 투명도를 줘보자. --> opacity: 0.9를 줘서 해결!- 이미지가 커서 그런지, 로드가 좀 느림, 좀더 이미지가 빨리 업로드하게 할 수 없을까?
- 또는 이미지가 로드가 다 된 후에 html이 나타나도록 할 수 없을까?
- 화면 우측에 빈 공간이 보인다... 이는 어찌 해결할까... 휴
1번을 해결하기 위해 검색
- gtbowurrs님의 블로그 : [HTML, CSS] opacity로 요소, 배경화면 투명하게(흐리게)하는 방법, 자식 요소에 같이 적용되는 문제
위의 방식으로 해결하지는 않았지만, 알아두면 도움이 될 것 같아. 공부
나중에 더 구현해 보고 싶은 기능들
- 이미지를 업로드 받아, 업로드 받은 이미지들만으로 랜덤표출하기 --> 그 경우 입력받은 이미지의 개수를 어떻게 세서, random을 돌려줄 수 있을까?
- darkMode/dayMode선택할 수 있게 하여, 선택할 때마다 다른 이미지그룹을 호출하기
- Momentum의 화면에서 처럼 배경화면에 animation을 주기(fadeIn되어 나타나게하기) --> 참고
1번을 해결하기 위해 검색
'<Projects> > 1_Projects&ToDo Manager' 카테고리의 다른 글
| 002_이름 입력 받아 local Storage에 저장하기 (0) | 2020.09.08 |
|---|---|
| 001_첫번째 프로젝트 구상 : Project & ToDo Manager_아이디어 Sketch하기 (0) | 2020.09.08 |
