풀페이지 구성의 사이트를 구성해보고자 너비 100vw와 높이 100vh로 구성하였습니다.

글상자들의 위치를 잡을 때 margin 혹은 position: absolute를 공부할 수 있었습니다.

메인 페이지 반응형+서브 페이지 (‘회사소개 → 회사역사’) 반응형으로 제작하였습니다.

메인 페이지 section별로 소제목, 소제목의 소개글의 일관성을 신경썼습니다.
이것은 디자인과 연관되는 부분입니다.
처음에는 각 section의 h4태그와 h3태그에 각각 다른 font-size와 font-weight을 줬었는데요,
완성하고 전체적으로 검토를 했을 때 요소간의 일관성이 떨어져 한 곳에 집중이 되지 않았습니다.

수정을 할 때 모든 section의 h4태그와 h3태그에 적용이 되도록 css에서 section h3 {} , section h4 {} 로 작성했습니다.
이렇게 수정을 하니 페이지 전체적인 통일을 느낄 수 있었고, 각 section에서 말하고자 하는 의미가 명확하게 느껴졌습니다.

기존 러쉬 홈페이지의 독특함은 어디에서 나온것인지 분석을 해보았습니다.

section별로 이미지의 크기가 다른 점과 각각 section의 컨텐츠가 사각형인 section도 있고 원의 모양인 section도 있었기 때문이라고 결론을 내렸습니다.

저는 통일성을 주면서 역동적인 것을 살리기 위해 section들은 사각형으로 구성하고, 대신 사각형의 크기들을 다채롭게 변형시켰습니다. 그 과정에서 display: grid를 사용했고,
비율별로 grid-template-columns, grid-template-rows를 사용하는 방법을 알게 되었습니다.

메인과 서브에 두가지 디자인을 넣어보았는데요, 첫번째 디자인으로 배운것은 display flex를 사용하는 방법, zindex 사용방법에 대해 알았습니다. section2에 맥도날드의 로고가 흰색 상자와 컨텐츠들 사이에 위치하기 위해서 zindex를 조정하였습니다.

두번째 디자인은 스와이퍼 데모 사이트의 소스 이용방법을 연습하기 위해서 스와이퍼 슬라이드 컨텐츠들을 넣었습니다. 또 section 2에 display grid를 연습하고 싶어서 디자인을 하였습니다.

display grid를 연습할 수 있었고, 첫번째 section에 공지사항같은 글이 많은 textbox는 viewmore이라는 글자보다는 아이콘으로 대체하는게 좋다는 것을 배웠습니다.

서브페이지에서는 FAQ 안에 포함되는 글을 카테고리별로 나누어서 카테고리를 클릭할 때마다 관련 내용들이 쓰이는 것을 연습할 수 있습니다.

롯데시네마 소속 디자인이지만 차후 이 페이지를 롯데시네마가 아닌 파묘 영화 자체의 홈페이지로 구성해볼 예정입니다.

서브페이지는 flex를 연습할 수 있습니다. flex-wrap: wrap으로 하고, flex 아이템들의 너비를 퍼센트로 조절하여 2개씩 떨어지도록 연습할 수 있습니다.

cafe 24를 사용해봤습니다. cafe 24의 모듈에 맞춰 스타일을 바꾸고. html을 변경할 수 있었습니다.

스크립트를 작성할 때 on() 메서드가 생소해서 어려웠던 경험이 있었습니다.
on 메서드는 jquery로 $(대상).on(이벤트, 핸들러) 와 같은 형식으로 사용이 되는데요, 여기서 이벤트는 click이나 mouseover, mouseout같은 이벤트 유형 (~했을 때) 이고, 핸들러는 앞의 이벤트가 생겼을 때 실행되는 함수 function(){} 입니다.
on 메서드는 여러개의 이벤트를 등록할 수 있다는 장점이 있어 on으로 작성했습니다.

img 태그에 width 100%, height 100%, object-fit :cover를 주는 것은 만능이 아니다라는 것을 알았습니다.
저는 section1번에서 동그란 원에 사진들을 여러 장 담아 애니메이션 효과를 주었는데요, 문제는 원의 위치가 section 내부에 존재하지 않고 브라우저 밖으로 벗어나게 만든 것이었습니다. 그리고 대상의 사진에서 위치도 정중앙이 아닌 측면에 위치하고 있었습니다.
이미지를 편집하지 않고 코드로 작업하느라 작업시간이 길어졌습니다. 이러한 경험으로 이미지 편집도 중요하다는 사실을 알게 되었습니다.