자기소개 페이지(2)

난나다·2022년 5월 22일
0

시작하기전에


지난번 내용에 이어서 이번에 중점으로 다룰 내용은 완전 싹 갈아 엎어버렸다는 것이다... 몇일동안 영혼을 갈아넣어 작성했지만 볼수록 부족한 부분이 계속 눈에 들어오는데 어떻게 하면 고칠 수 있을지 감이 오질 않았기에 결국 처음부터 차근히 쌓아보자!라는 마음으로 다시 시작하게 되었습니다...



본문


스케치

새로 작성하면서 처음 작성한 페이지와의 차이점은 "스크롤"로 페이지를 진행하는 방식으로 변경하였다는 점입니다. 이 방식을 쓰는데 참고한 페이지는 다음과 같습니다.

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



HTML 코드

지난번 작성 때와 큰 틀은 바꾸지 않았습니다. 다만 <div>를 써서 큰 틀을 작성하는게 아닌 semantic 요소를 사용해서 구조를 잡았습니다.
그럼 좀 더 자세히 보겠습니다.


1. header 코드

header 파트의 경우 크게 logonav로 나눠지도록 구성했습니다.
밑에 header__bugger 클래스로 정의된 <div>의 경우 약간의 기능을 주었는데 이건 후에 자세히 설명하겠습니다.

조금 더 신경 쓴 부분이 있다면 BEM방식을 여러번 고쳐쓰면서 고심끝에 작성했다는 것입니다.
이전에 썼을 때 쓰면서도 부족함이 가장 크게 와닿았던 부분이라 그 목적에 맞게 쓰기위해 노력했습니다.


2. main 코드

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 효과를 이용해서 화면에 보이는 박스형태를 구현한 것인데 다른 웹 페이지를 탐방하다가 아이디어를 얻고 얼른 내 페이지에 적용해본 것입니다.
아래 사이트를 참고했습니다!

http://woulduweb.com/business.php

살짝 맛보기로 보여드리자면
이런 식으로 박스형태로 감싸면서 각 꼭지점에 점이 위치하도록! 하는 CSS를 이용한 꾸미기 효과입니다😁

이렇게 about 구역을 완성하니 세팅해놓은 구조가 아깝기도 하고 재사용할 수 없을까 고민하다가 다음으로 이어지는 goal 구역도 이 구조를 사용하여 만들게 되었습니다!

main의 마지막 세번째! goal 구역입니다.

앞서 얘기했듯이 about 구역과 공유되는 파츠가 많습니다.
바뀐거라고 한다면 content 에 대한 내부 구성을 조금 손댄것 이외에는 느껴지는게 없을 정도입니다.


빠르게 넘어와 footer를 살펴보자면 크게 footer__iconsfooter__top 으로 구분 지어집니다.(밑에 script가 왜 저기 있는지에 대해서는 역시 다음에 설명드리겠습니다)

footer는 간단하게 contact 구역의 역할을 수행하도록 했고
footer__icons 는 제가 사용하는 개발 관련된 페이지(블로그나, 깃허브, 인스타 등)
footer__top 은 마지막 페이지까지 왔을 때 처음으로 돌아갈 수 있는 버튼을 만들고자 작성했습니다.



to be continue...


원래는 바로 CSS 코드 리뷰도 하려고 했으나 생각보다 내용이 길어져서 따로 올리도록 하겠습니다! 읽어주셔서 감사하고 부족한 부분이 있거나 수정이 필요하다고 생각되신다면 언제든 댓글 달아주시기 바랍니다!

0개의 댓글