나의 첫 자기소개 페이지의 큰 틀을 만들었다.
생활코딩 HTML과 CSS 강의를 보며 만들었고 강의 내용에서 나오는 레이아웃에서 중간 배치를 하며 조금 변형하였다.
작업기간
5월 18일 수요일 ~ 5월 20일 금요일
강의를 보며 조금씩 틀을 만들었고 강의가 끝난 뒤, 구현하고자 하는 전체적인 페이지를 만들었다.
레이아웃
메인페이지
<title>🐈SUJEONG KIM</title>:페이지 타이틀에 고양이 이모지를 넣었으며 직접 찍은 고양이 사진을 메인으로 중앙 배치
ABOUT ME
:전체적인 레이아웃이 중앙 배치이므로 나를 나타내는 사진과 함께 간단한 설명 기록
WHAT I LOVE
:내가 사랑하는 것들을 크게 세 가지 분류한 뒤, 각각의 특징을 표현하는 이모지 목록을 만들었고 클릭하면 그에 대한 설명이 나오도록 설정
CONTACT
<p>
<p style="margin-top:100px;"><a href="https://github.com/1eo21eoe" target="_blank" title="sujeong github">GITHUB</a>
<p style="margin-top:40px;"><a href="https://velog.io/@mumue1202" target="_blank" title="sujeong velog">VELOG</a>
<p style="margin-top:40px;"><a href="mailto:1eo21eoe@gmail.com">EMAIL</a>
</p>:깃허브, 벨로그, 이메일 세 가지로 컨텍 방법을 정한 뒤, 글자를 누르면 해당 페이지 이동 및 메일을 보낼 수 있도록 설정
- 깃허브 스타일에 margin-top값을 100px로 넣지 않고 헤더 부분과 간격을 줄 수 있는 방법은 없을까?(수정하고 싶은 부분 중 하나)
부족한 부분
- 간결한 코드 작성 미숙
: 하나의 페이지를 만드는 것 자체가 하나의 큰 산이었으므로 코드 실행을 위한 코드들이 꽤 있다고 생각을 한다. 이러한 부분은 계속하여 코드를 작성해 보고 합칠 수 있는 것은 합치면서 한 줄씩 줄여나가도록 할 것. 또한 다른 사람들이 봐도 쉽게 이해할 수 있도록 정리하며 코드를 작성할 수 있도록 습관을 들일 것. - control+c와 control+v
: 내가 원하는 배치를 구현하기 위해 검색을 했고 그 과정에서 그대로 복사와 붙여넣기를 한 부분이 있었다. 왜 그런 태그를 사용했는지 한 번 더 파악하며 내것으로 만들 수 있는 방안을 모색해 볼 것. - 최대한 깔끔하게 만들고자 하는 고집
: 나의 소개 페이지를 만들면서 여러 가지 태그를 사용해 보고 알아가는 시간을 가지도록 해야하는데 간결하고 최대한 깔끔하게 나타내고 싶어 스타일을 적용하거나 다양한 레이아웃 쓰는 것을 망설였다. 나의 스타일을 살리되 다양한 시도를 할 수 있도록 해야 한다.
추가하고 싶은 부분
- 다양한 폰트나 색상 적용을 통해 무채색의 페이지가 아닌 스타일의 변화가 있는 페이지를 만들고 싶다.
- 화면 전환 시, 동적 효과를 넣어 부드럽게 넘길 수 있도록 적용해 보고 싶다.
- 수정해 보고 싶은 부분이 있다. 텍스트와 텍스트 사이, 텍스트와 그림 사이 등 간격을 줄 때 마진이나 패딩 값을 주었는데 이 방법 말고도 다른 효율적인 방법이 있는지 알아볼 것.
