CSS 만들기

기능구현

 

페이지 영역 나누기

grid-template-areas:
    ". sort search"
    "category main main"
    ". main main";

영역이 여러개로 나눠져있는 페이지를 구현하기 위해 Grid-template-areas를 사용했다.

1분코딩님의 게시글을 많이 도움이 됐다.

https://studiomeal.com/archives/533

이번에야말로 CSS Grid를 익혀보자

 

영화티켓 위에 사진 올리기

.movieTicket {
  position: relative;
}
.card {
  position: absolute;
  z-index: 1;
}

영화티켓 이미지를 아래에 배치, card 를 z-index 를 이용해 위에 배치함.

알맞은 사이즈 배치 위해 개발자도구 켜서 계속 확인했다.

참고로 영화티켓이미지는 다운받은것을 페이지와 알맞도록 직접 편집했다.. ㅎㅎ 레트로한 맛이 좀 사나요?

---

발생한 오류

사실 개인프로젝트때부터 있었던 오류였는데 팀플까지 와서야 수정할 수 있었다..

Fetch 로 카드 불러올시 카드가 담아져야 할 메인 창을 벗어나 세로로만 배치가 되는 오류가 있었다.
Html 을 이용해 메인 안에 div 카드를 만들시에는 메인 class 에 적용한 css 가 제대로 되는것을 보고

js내에서 div class를 만들어 그 안에 카드를 만드는.... 뭐 그런것들을 해봤는데 결국 그런 방법으로는 해결되지 않았다.

 

Fetch 를 카드 클래스가 아닌 메인 클래스에 넣자 메인 CSS 가 제대로 적용 되었다.

CSS에 만들어놓은 속성들이 자식(card div)까지 포함되지 않아 이런 오류가 발생한것 같다.

고생 많이 했는데 너무 간단하게 풀리는걸보고 허탈하기도하고 개발자들의 이게 왜 되지가 이런거구나 하고 느꼈다.