지난번 내용에 이어서 이번에 중점으로 다룰 내용은 완전 싹 갈아 엎어버렸다는 것이다... 몇일동안 영혼을 갈아넣어 작성했지만 볼수록 부족한 부분이 계속 눈에 들어오는데 어떻게 하면 고칠 수 있을지 감이 오질 않았기에 결국 처음부터 차근히 쌓아보자!라는 마음으로 다시 시작하게 되었습니다...
새로 작성하면서 처음 작성한 페이지와의 차이점은 "스크롤"로 페이지를 진행하는 방식으로 변경하였다는 점입니다. 이 방식을 쓰는데 참고한 페이지는 다음과 같습니다.
https://velog.io/@rhfovk/%EC%9E%90%EA%B8%B0%EC%86%8C%EA%B0%9C-%ED%8E%98%EC%9D%B4%EC%A7%80
지난번 작성 때와 큰 틀은 바꾸지 않았습니다. 다만 <div>를 써서 큰 틀을 작성하는게 아닌 semantic 요소를 사용해서 구조를 잡았습니다.
그럼 좀 더 자세히 보겠습니다.
header 파트의 경우 크게 logo
와 nav
로 나눠지도록 구성했습니다.
밑에 header__bugger
클래스로 정의된 <div>의 경우 약간의 기능을 주었는데 이건 후에 자세히 설명하겠습니다.
조금 더 신경 쓴 부분이 있다면 BEM방식을 여러번 고쳐쓰면서 고심끝에 작성했다는 것입니다.
이전에 썼을 때 쓰면서도 부족함이 가장 크게 와닿았던 부분이라 그 목적에 맞게 쓰기위해 노력했습니다.
main은 크게 세가지로 구분됩니다.
처음 페이지를 로드하면 보이는 home
소개하는 부분인 about
목표를 보여주는 goal
💡
class
가 있는데도id
를 사용한 이유는 페이지를 안에서 이동해야하는 스크롤 형태의 특성상 <a> 태그의href=""
속성과 연결하기 위해 사용하였습니다.
먼저 home 구역에 대해 알아보겠습니다.
home 구역에 비슷한 문장이 세 개가 있는데 이것은 후에 기능설명편에서 설명하도록 하겠습니다😁
크게 설정할 부분이 없이 <section>
내에 <p>
를 사용해 문장을 넣어주었습니다.
다음으로는 about 구역입니다. 꽤 장황하게 만들어져 있는것 같지만 보면 의외로 간단합니다.
구조로 나누어 보면 title
부분과 content
부분으로 나누어져 있고, content
부분은 세부분으로 content__info
, content__photo
, 다시 content__info
로 나눠지는 구조입니다.
title
은 말 그대로 페이지의 제목이 들어가는 부분입니다.
content
는 페이지의 내용이 들어가도록 했는데 자세한 위치는 css 코드리뷰 때 얘기하고 지금 간단히 보자면 샌드위치 형식으로 content__photo
위아래로 각각 content__info
가 있습니다.
눈에 띄는 것을 살펴보면 dot-box
라는 구역이 있는데 이게 뭐냐면 박스의 성질과 CSS 효과를 이용해서 화면에 보이는 박스형태를 구현한 것인데 다른 웹 페이지를 탐방하다가 아이디어를 얻고 얼른 내 페이지에 적용해본 것입니다.
아래 사이트를 참고했습니다!
살짝 맛보기로 보여드리자면
이런 식으로 박스형태로 감싸면서 각 꼭지점에 점이 위치하도록! 하는 CSS를 이용한 꾸미기 효과입니다😁
이렇게 about 구역을 완성하니 세팅해놓은 구조가 아깝기도 하고 재사용할 수 없을까 고민하다가 다음으로 이어지는 goal 구역도 이 구조를 사용하여 만들게 되었습니다!
main의 마지막 세번째! goal 구역입니다.
앞서 얘기했듯이 about 구역과 공유되는 파츠가 많습니다.
바뀐거라고 한다면 content
에 대한 내부 구성을 조금 손댄것 이외에는 느껴지는게 없을 정도입니다.
빠르게 넘어와 footer를 살펴보자면 크게 footer__icons
와 footer__top
으로 구분 지어집니다.(밑에 script가 왜 저기 있는지에 대해서는 역시 다음에 설명드리겠습니다)
footer는 간단하게 contact 구역의 역할을 수행하도록 했고
footer__icons
는 제가 사용하는 개발 관련된 페이지(블로그나, 깃허브, 인스타 등)
footer__top
은 마지막 페이지까지 왔을 때 처음으로 돌아갈 수 있는 버튼을 만들고자 작성했습니다.
원래는 바로 CSS 코드 리뷰도 하려고 했으나 생각보다 내용이 길어져서 따로 올리도록 하겠습니다! 읽어주셔서 감사하고 부족한 부분이 있거나 수정이 필요하다고 생각되신다면 언제든 댓글 달아주시기 바랍니다!