[SH FILM] Main photo 초안 ~ 전체 뼈대 구상

 

Main photo 초안까지는 완성했고

기왕 하는 김에 전체적인 구역을 나누어 footer까지 간단한 내용과 구성을 구상하였다.

 

생각보다 해놓은건 없는데 시간이 좀 걸렸다.

 

아직 초보라 그래..

 

그래도 다섯시간동안 카페에서 이거 만들면서

진짜 뽝 집중했다.

 

뭔가 집가면서도 아쉬웠음

---

[구현한 기능]

0. 전체적인 뼈대 구상

구현한 기능은 아니지만 전체적인 뼈대를 구상했다.

스노우 어플 웹페이지를 좀 많이 참고한 것 같다.

그리고 기왕이면 예쁜게 좋아서 계속 디자인도 같이 고민하고 있다.

먼저 크게 ' header 영역 / main 영역 / footer 영역 ' 3가지 영역으로 나누었다.

 

-header 영역

메뉴바, search창, 메인 로고, 서브 텍스트, 메인 포토

 

-main 영역

SH FILM 소개, 주접 멘트 3개, career, news, contact

 

-footer 영역

copyright, 개인정보 처리방침, 기업윤리 센터, 공고

 

1. 이미지 크기 자동 조절

main 이미지를 display : block과 max-width : 80%를 이용하여 

브라우저 창의 크기에 따라 자동으로 사진이 비율을 맞춰 조절되도록 하였다.

 

2. fadeIn animation

메인 웹페이지의 메인 로고 밑 서브 텍스트 부분을

@keyframes을 이용해 fade in 애니메이션 효과를 주었다.

 

3. 글자 자간, 어간 변경

메인 웹페이지의 메인 로고 밑 서브 텍스트의 letter-spacing, word-spacing의 값을 부여하여

글자의 자간과 어간의 간격을 원 상태보다 더 벌어지게 하는 효과를 주었다.

---

[구현 예정 기능]

1. main photo - 화면 슬라이드 넘기기 기능 추가

저번에 상단바 완성했다고 포스팅했을때도 쓰긴했지만

일단 java script를 이용해 여러 photo들을 슬라이드로 넘기는 기능을 추가할 예정이지만

일단 그럴싸하게 페이지를 완성한 다음 추가할 것 같다.

 

2. main 영역 초안 완성

 2-1) SH FILM

         일단 제목과 내용 부분에 뭔가 배경 색을 넣고 싶다.

         margin과 padding 값 0px로 해놓고 배경 색을 넣을 것이다.

 2-2) 주접 소개 3가지 추가

          애플 홈페이지 가보면 '놀라운 고화질' 어쩌고 하는 주접문구들을 흔히 볼 수 있는데

          그게 뭔가 또 갬성 있어 보여서 주접 문구를 추가하게 되었다.

          '감성을 담다'는 좌측 위주, '화질에 놀라다'는 우측, '편리함에 반하다'는 좌측으로 배치해줄 것이고

          좌측 위주 배치된 문구는 0에서 좌측 원래 자리로 슝 하고 나타나는 애니메이션을 추가하고 싶다.

          옆에서 나타나기 같은 기능을 추가하고 싶다.

          아 디자인이 고민이다. 기왕 만드는거 진짜 감성 있고 나름 예쁜 페이지를 만들고 싶은디

 2-3) career

          이 가상의 회사에 다니고 싶은 사람 지원해달라는 부분이다.

          디자인이 굉장히 걱정인데 일단 위 주접 문구 3인방 디자인이 정해져야 얘도 정해질 것 같다.

          다음부터는 디자인 미리 정한 다음에 해야지..

          지원해달라는 문구 밑에 '지원하기' 버튼 형식을 추가할 예정인데 일단 새창을 띄우는 기능을 추가하기엔

          아직 내가 너무 baby라서 cursor : pointer 효과만 줄 것이다.

 2-4) news

          뉴스는 총 2개의 간략한 기사들을 좌우 영역으로 구분지어 생성할 것이다.

 2-5) contact

          일단 배경은 진회색으로 간다..!

          그리고 좌측에 텍스트만 있는 버전의 로고를 png 파일로 넣고 색상을 흰색으로 수정할 것이다.

          또한 로고 기준 우측 옆에 addr와 tel, fax의 정보를 적는 내용 영역을 줄 것이다.

          로고와 정보 가운데 흰색이나 오트밀 색상의 ' | ' (공간 분리 표시)를 표현할 것이다.

          정보 밑에 'SH FILM에게 연락하기' button을 만들건데 나중에 해당 버튼을 클릭하면 이메일로 바로 연동되는

          그런 기능을 추가하고 싶지만 아직 깜냥이 안돼서 cursor : pointer 효과만 줄 것이다.

 

3. footer

개인적으로 footer 부분은 맨 밑에 조그맣게 있는 걸 좋아하는데 지금 막 디자인이 떠올랐다.

흰색 바탕 중 copyright 부분을 가운데에 작게 넣고 그 밑에 나란히 '개인정보 처리 방침 | 기업 윤리 센터 | 공고' 이렇게 넣을 생각임

저런거는 각각 cursor : pointer 효과를 줄 예정이다.

---

아 진짜 훨씬 재밌다.

 

비록 주먹구구식이고 정말 초보자 입장이지만

진짜 내 손으로 뭔가 결과를 만들어낸다는 그 성취감을 제대로 느낄 수 있게 해주는 것 같다.

 

진짜 재밌당