팀 미니 프로젝트 Second Day

 

1. 개별 자기소개 페이지만들기

 

오늘은 메인페이지에서 링크타고 들어갈 자기소개 페이지를 만들었다.

팀원들이랑 상의 해봤을때 한명의 레이아웃을 채택하여 통일감을 줄까도 생각했었다. 

그렇게 하면 프로젝트적으로는 더 완성도가 높을 수도 있지만, 

자기소개 페이지는 각자의 개성을 살려서 만들면 더 자기자신을 잘 표현할 수 있겠다고 생각했다.

그래서 오늘은 개성을 살려서 지금까지 배운걸 혹은 더 공부를 해서 원하는 페이지를 만들어보기로 했다.

 

 

우선은 어제 MOCKUP할때 그린 기본 레이아웃을 참고해서 나는 스크롤없이 원페이지로 끝내기로 계획을 하고,

메인페이지의 뼈대를 가지고와서 제목만 남기고 전부 삭제해서 뼈대를 만들어 나갔다.

 

 

 

이렇게 배경사진도 제일 좋아하는 드림카로 설정해두고 글씨가 잘보이도록 

배경을 어둡게하는 코드를 이용해서 작성했다. 

background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4)), url("ferrari.jpg");

 

문득 우측 상단에 네비게이션이 하나 들어가면

좋겠다는 생각이 들어서 부트스트랩에 있는

네비게이션 코드를 찾아서 하나 가져와서 사용하기도 했다.

필요한 내용의 텍스트들의 배치, 꾸미기를 완성하고

Mbti 이미지와 내사진 하나를 넣고 레이아웃은 완성시켰다.

 

 

간결하게 하되 나에 대한걸 확실히 알리고 싶어서 페이지를 너무 화려하게 꾸미지 않았다. 

또 하나는 각자 만드는 페이지인만큼 애니메이션 효과를 한번 공부해서 페이지에 적용하고 싶어서

목업때 그린 레이아웃에서 크게 벗어나지 않게 빠르게 만들었다. 

 

 

2. Animation 기능

 

먼저 페이지에 적용하고 싶었던 효과가 있었는데, 은은하게 제목을 제외한 내용, 이미지들이

천천히 나타나게 효과를 주고싶었다. 그래서 구글과 유튜브에 html text 나타나게 하기를

검색해서 보이는대로 전부 들어가서 코드들 보고, 영상을 보고 따라서 해봤다.

 

가장 도움이 되었던건 ANZI 님의 영상을 토대로 코드를 가져와서 적용시킨 결과 !

 

 

이렇게 원하던대로 순차적으로 나오는 애니메이션 효과가 적용된 페이지가 완성되었다. 

 

 

 

#구현 실패 한 부분

 

첫 효과를 적용시키고 자신감이 붙어서 Javascript를 이용해서 소제목들을 버튼으로 만들어 

눌렀을때 내용이 나오게끔 만들려고 했었다.

먼저 소제목에 button 태그를 달고 배경과 테두리를 없애 버튼같지 않게 만든후 id값도 만들고

이제 내용을 안보이게 display를 none; 으로 수정을 한 그때 생각지도 못한 결과가 나왔다. 

소제목들과 이미지들의 위치가 모두 내용문단들 기준으로 margin을 이용해서 고정시켜놓은것이었기 때문에

내용을 안보이게 적용하니.. 소제목들과 이미지가 전부 위치가 날라가버린것이었다...

전부 위치가 고정이 되어야 내가 원하는 효과를 만들 수 있었다는것이었다.

전부 수정을 해서 완성 시키고 싶었지만, 메인페이지에도 애니메이션 효과를 넣어야했고,

프로젝트준비 기간이 짧아서 다음을 기약했다.

 

잠시나마 자신감에 찼던 나는 금방 다시 원점으로 돌아왔다.

하지만 실패는 성공의 어머니라는 말이 있듯이

다음에는 페이지 만들때 문단과 이미지들의 위치를 한곳에 

고정시키는 법을 배워서 성공시키겠다는 복수를 다짐했다.

 

 

 

#소심한 복수

 

 

당장에 처음 구상한 효과를 할 수는 없었지만 아쉬운마음이 계속 남아서 조금 더 간단한 효과를 적용시켰다.

 

이렇게 hover시 내용들과 이미지가 강조되게끔 css효과를 구글링과 팀원의 도움을 받아서 

완성시켰다.

 

 

3. 느낀점

 

# 비록 개인페이지를 각자만들어서 팀원들이 전부 개성넘치는 페이지를 만들었지만,

직접 html 뼈대를 만들고 다양한 효과를 구현시키고 한 부분에 있어서 개인의 능력이

발전 할 수 있는 시간이어서 도움이 정말 많이 되었다.

 

# 검색을 정말 많이 하다보니 정말 다양한 효과들을 구현시킬 수 있다는걸 알았고,

머리로는 하고싶어도 구현시키는것은 정말 어렵구나라는것을 더 몸소 느꼈다.

 

#이번에는 CSS위주로 효과를 구현 시켰는데, 다음에는 Javascript와 jQuery도 다양하게 활용하는 법을

배워서 이번에 못한 효과나 , 두가지를 이용한 다른 새로운 효과를 구현 해보고싶다고 느꼈다.