[LifeAsDog] 디자인과 레이아웃

👀 전체적인 디자인과 레이아웃

전체적인 디자인과 레이아웃을 설정하는데 많은 시간이 걸렸다. 내가 아직 CSS와 JS에 많이 익숙하지 않아서 그런 듯 하다. 정렬과 애니메이션을 더 공부해야할 것 같다.

✔ position: absolute 가로중앙정렬

position: absolute인 경우에는 text-align이라던지 margin-left: auto, margin-right: auto로 가로중앙정렬이 불가능하다. 따라서 아래와 같은 방법을 사용해야 한다.

position:absolute;
//왼쪽에서 부모를 기준으로 50% 이동 (해당 클래스의 왼쪽 모서리가 중앙에 정렬됨)
left: 50%;
//자신을 기준으로 -50% 이동
transform: translateX(-50%);

✔ 로고 디스플레이

가장 애를 먹은 부분이 하단에 내 블로그 로고를 고정된 위치에 디스플레이 하는 것이었다. 그냥 하단에 fixed나 absolute 등으로 박아놓으면 되지 않냐라고 할수도 있는데, 결과창이 나오면 결과창은 스크롤을 내려야 할 정도로 길기 때문에 fixed 또는 absolute로 디스플레이 할 시 결과창을 일부 가리는 현상이 발생했다.

따라서 로고를 두개 만들어서 하나는 result 바깥에, 하나는 result 안쪽에 넣어주었고, 결과창 전까지는 absolute 속성의 바깥 로고를, 결과창에서는 block 속성의 안쪽 로고를 사용해서 결과가 다 나오고 맨 끝에 로고가 디스플레이 되도록 변경했다.

<div class="box">
    <div class="main">
    <div class="question">
    ...
    <div class="result">
        <div class="result__logo" position: "block">
    <div class="box__logo" position: "absolute">

✔ setTimeout()

버튼을 눌렀을때 너무 바로바로 넘어가는 바람에 버튼에 hover했을때 나오는 애니메이션이 제대로 보이지 않았다. 따라서 setTimeout()을 통해 약간의 딜레이를 주어, 애니메이션이 보일 수 있도록 만들었다.

setTimeout(function(){
  $(".main")[0].style.display = "none";
  $("#questionSex")[0].style.display = "block";
}, 300);

✔ 페이지 새로고침

마지막에 테스트 다시하기 버튼에 새로고침 기능을 넣어야 했는데, *location.reload()를 통해서 새로고침이 가능했다.

<a class="result__button" type="button" onclick="setTimeout(function(){location.reload()}, 300)">다시하기</a>

✔ 샘플 페이지

아직 CSS 최종 정리 / SNS 공유기능 / MBTI별 일러스트 / 찰견궁합을 더해야 하지만, 대충 로직은 완성되었다. 아래 홈페이지에서 테스트 가능하다. 혹시 에러나 거슬리는 부분 제보해주면 감사륑! 조금 더 다듬어서 한번 홍보/바이럴을 해 볼 예정이다 쿠쿠

견생테스트: 나는 어떤 강아지일까?

✔ 👌 배울 것

1. CSS 가로/세로 정렬법
2. CSS object-fit 사용법
3. CSS 애니메이션 예제

👍 참고 사이트

1. div 가운데 정렬