[Archive] 디자인 구성 및 애니메이션 pt.2

2021. 2. 1. 13:46

👀 구현의 실제

구현을 하려다 보니 내가 알고있는 선에서는 해결가능하기 어려운 문제가 몇가지 있었다. 그 중 가장 큰 것이 데이터베이스 구현에 관한 문제였다. 모든 사용자의 데이터(제목, 내용, 이미지)를 중앙 데이터베이스에 저장하는 방법이 아마 가장 이상적인 방법일 것이다. 하지만 개인 프로젝트의 특성상 그렇게 서버를 운영하기에는 어려울 것 같았고, 서버에 대한 지식도 충분하다고 생각되지 않는다고 생각된다. 따라서 차근차근 하나씩 하나씩 단계를 밟아 나아가기로 결정했다.

첫번째는, 로컬에 파일을 저장할 수 있도록 하는 프로그램을 만드는 것이다. 사실 프로그램이라기보다는 html, css, js 파일 자-체를 사용자에게 제공하는 것이라고 하는것이 더 알맞겠지만! 알집으로 파일을 지정한 위치에 풀어주는 실행파일을 만들어주는 기능을 찾았고 (링크), 이를 이용해 사용자의 컴퓨터에 html, css, js 파일을 로컬에 설치하고, html 파일을 실행함으로써 사용자가 아카이빙을 할 수 있는 환경을 만들어 주는 것이다.
두번째는, 저렇게 구현해 놓은 간단한 웹앱을 데이터베이스 기반으로 변환하는 작업이 될 것이다. MySQL, 더 나아가 클라우드 SQL을 사용해서 중앙 데이터베이스를 구축하고, 중앙 데이터베이스를 기반으로 사용자들의 취향을 아카이빙 할 수 있는 환경을 만들어 주는 것이다. 이는 언제 어디서든 사용자의 계정만 있으면 동기화를 할 수 있다는 말이기도 하다.

따라서 지금은 로컬에서 완벽하게 작동하는 웹앱을 만들고, 이것을 데이터베이스 기반으로 변환하는 작업을 해 나가는 것이 내 단기목표이다.

✔ opactiy, visibility, display

opacity, visibility, display라는 속성이 모두 숨기거/보이기를 관장하는 속성들이지만 각각의 속성이 조금 다르다는 걸 알게 되었다. 그중에서도 가장 눈에 보일만한 차이점은 바로 영역을 차지하는가에 대한 특징.

1
<div id="box-1" style="opacity: 0;">1</div>
2
<div id="box-2" style="visibility: hidden;">2</div>
3
<div id="box-3" style="display: none;">3</div>
<br>
End

위에 보이는 코드는 아래와 같이 디스플레이된다

1

2

3
End

다시말해 display:none은 영역이 사라지게 되는 것이고, visibility:hidden과 opacity:0는 영역이 존재하지만 보이지 않는 것이라고 생각하면 되겠다.

그 외에도 다른 차이점들이 있지만 여기서는 이것만 정리하고 넘어가도록 한다.

✔ overflow:hidden 속 position:absolute

position:absolute 속성을 가진 요소에서는 overflow:hidden을 부모로 두어도 부모요소를 넘어가는 부분이 있어도 잘리지 않았다.이는 부모요소의 position 속성이 존재하지 않기 때문에 발생하는 것으로,

부모요소의 position 속성을 relative로 부여하면 해결할 수 있다.

✔ siblings 가져오기

node에 nextElementSibling 또는 previousElementSibling과 같은 메소드는 존재하나, 모든 siblings를 리턴하는 메소드는 존재하지 않았다. 따라서 getSiblings()라는 메소드를 만들어서 사용하였다.

function getSiblings(self){
  let siblings = [];
  let childs = self.parentNode.children;
  for(let i = 0; i < childs.length; i++){
    if(childs[i] != self){
      siblings.push(childs[i]);
    }
  }
  return siblings;
}

✔ object 태그

텍스트 파일을 가져오는 데 있어서 object 태그를 사용하였다. 사실 이것보다 훨씬 나은 방법이 있을 것 같은데, 혹은 object 태그를 사용하고, 속에 있는 HTML 또는 text만 가져오는 메소드가 있을것도 같은데, 이는 구글링을 해보아야겠다.

✔ 스크롤바 숨기기

아래 CSS를 사용해서 스크롤바를 숨길 수 있다.

.box {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}
.box::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera*/
}

👍 참고 사이트

저작자표시

COMMENT