Trip Or Travel: 뼈대(HTML) 및 header 제작

디자인 컨셉

헤더를 제작을 시작하기에 앞서 굉장히 오랜 시간이 걸렸다. 생각했던 디자인들이 맘에 안들고.. 이미지를 svg로 적용하는 건 처음이라 신기해서(?) 내용들 찾아보다 보니, 만드는 시간은 3시간 (중간에 말도 안되는 실수로 인해 1시간을 버렸다) 서칭하는 시간은 2배이상 사용한 것 같다. 시간을 헛으로 날린 느낌도 나지만… 언젠가 도움이 될 것이라고 믿는다..ㅎ

일단 이번 프로젝트의 디자인 컨셉은 바다 + 녹은 아이스크림 == 여름 이다. 여행일지를 기록하는 서비스이기 때문에 여행하면 떠오르는 바다의 느낌이 났으면 좋겠다고 생각했다. 그래서 해변가의 바다가 일렁이는 느낌을 주고 싶었다. 그러다보니 녹은 아이스크림 같다는 생각이 들어서 아이스크림 녹은 느낌 + 바다색(파랑)으로 header을 제작했다.

HTML 작성

뼈대를 header, posting-box, map, card로 4등분했다. 그리고 각각 필요한 내용들을 넣어주었다. 처음에 뼈대를 어떻게 만들어 줘야 할지 감이 안 잡혔는데 서칭을 하며 공부를 하다보니 감이 잡혔다. 그냥 만들고 싶은 기능으로 크게 나누면 되는 것 같다.

header 제작

헤더를 제작하는데 너무나 많은 시간이 들었다. 대략 3시간 정도? 막상 만들고 나보니 그렇게 오래걸릴 것은 아니였는데 이상한 실수들을 계속해서 시간을 많이 버린 것 같다. 진짜 조심해야지…

TIL

• :root
  css를 제대로 작성하기 전에 :root를 통해서 색상, 글 크기, 사이즈 등을 저장해둔다. 색상이나 글 크기, size는 동일하게 주는 경우가 대부분이기에 root에 저장해두면 나중에 수정을 해야 할 때 root에서 값만 바꿔주면 사용됐던 모든 곳을 하나하나 수정하지 않아도 된다.

  :root {
    /*color*/
    --blue-color: #87d7ff;
      
    /*font size*/
    --font-title: 80px;
    --font-large: 20px;
  
    /*size*/
    --padding: 15px;
  }
  
  /* 사용할 때 */
  body {
    background-color: var(--blue-color);
  }
  

• 텍스트(+button) 중앙 배치
  페이지의 이름과 부제목은 span태그를 이용하였다. 페이지 이름과 부제목을 div를 통해 묶었다. 이 div에 margin: auto;를 주면 페이지 중앙으로 이동하게 된다. 하지만 글들이 한 줄로 정렬이 되기에 (span특성) 부제목을 block(inline-block이 더 맞는 것 같다)으로 변경하고 text-align을 주면 각 글들이 중앙으로 배치하게 된다.
  이 방법 말고도 각 span들을 div로 묶지 않고 각 span들을 inline-block으로 만들고 text-align을 사용해도 된다.
  button은 가로, 세로를 가운데로 정렬해주기 위해서 margin: auto;를 해줬다. 해주지 않으면 가로로 길게 늘어지게 된다.

  .div {
    margin: auto;
  }
  
  .div .span {
    display: block; /*inline-block*/
    text-align: center;
  }
  
  .button {
    margin: auto;
  }
  

• hover시 button색상 변경
  hover시에 버튼의 색상이 노랑색으로 변경되도록 작성하였다.

  .button:hover {
    background-color: var(--button-color);
  }
  

  

• svg파일 만드는 사이트
  해변가의 파도와 같으면서 아이스크림이 녹는 느낌의 곡선을 주고 싶기에 png나 jpg파일 보다는 svg파일이 낫겠다는 생각을 했다. 아무래도 벡터니까 좀 더 부드럽게 잘 될테니까? 그래서 마구 서칭을 하다가 곡선을 svg파일로 만들 수 있는 사이트를 발견했다. (png파일로도 제작할 수 있다.)
  이 사이트는 앞으로 디자인할 때 유용하게 사용할 것 같다! 디자인 감각이 없는 나도 뭔가 있어보이게 만들어 준다. 이 사이트 말고도 다양한 사이트가 많았는데, 추후에 따로 정리하는 걸로…
  다양한 svg파일제작 사이트

• background-image
  header 디자인 위에 다른 아이템들을 배치해주기 위해서 background-image를 사용하였다. 이때 나는 이미지가 반복되는 것을 원하지 않기에 no-repeat을 사용했으며, 사이즈가 화면에 맞게 늘어나길 원해서 background-size에 cover을 주었다.

  body{
    background-image: url("이미지 경로.확장자 | 위치/이름.확장자");
    background-repeat: no-repeat;
    background-size: cover;
  }
  

마무리

프로젝트를 진행하며

이번에 페이지를 제작하면서 가장 크게 느낀 것은 나 정말 사소한 실수를 많이 한다. 였다. 몰라서 틀리는 거면 괜찮은데.. html에 css연결을 안해서 애 먹었다던가… div 닫는 태그 위치를 잘 못 둬가지고 안 나왔다던가… 진짜 신경쓰자!

블로그를 하며

이번에 내가 한 것을 다시 보면서 이 글을 작성하고 있는데 장점을 찾았다. 배우고 기억해둬야 하는 것들을 작성하면서 필요 없는 코드들을 찾을 수 있었다. 한 3개정도? 지운 것 같다. 그리고 막상 정리해서 글을 쓰려니까 ‘어? 이래도 원하는 대로 나오나?’ 생각이 들어서 코드를 만지작하다보니 새롭게 알게된 사실들도 있었다. text-align인데 inline은 안 먹히고 inline-block이여야 된다는 점 등등..

이번에 블로그를 작성하면서 좀 귀찮기는 하지만 장점이 많다는 것을 몸소 느끼다 보니 더더욱 계속해서 블로그를 해야 겠다고 느꼈다. 그러니 일단 이번의 나의 큰 목표는 꾸준히 블로그 작성하기! 내가 꼭 계속 실천하기를 빌면서 글을 끝내겠다.