나의 첫 웹페이지가 완성되었다 !
물론 완벽하게 완성된 것은 아니고,
세포 단계 완성 정도..?
메인 페이지만 제작하였다.
[SH FILM]
가상의 필름 카메라 어플(SH FILM)을 소개하는 웹페이지
[Main Page 초안 완성 기간]
2022. 10. 21 ~ 2022. 10. 29
[사용 언어]
HTML, CSS
[header 영역]
<head> 태그 내 <link> 태그로 이미지를 삽입,
브라우저 창에 로고가 나타나게 하였다.
search
아래 밑줄만 효과를 주어 심플한 느낌을 내게 하였고,
fontawesome을 이용하여 search 창 우측 돋보기 아이콘을 추가하였다.
menu
display : flex; 속성을 이용하여 메뉴들을 가로로 배치하였다.
justify-content : flex-end;를 이용하여 메뉴들이 항상 우측 끝에 위치하게끔 하였으며,
각 메뉴들을 클릭하면 해당하는 페이지로 넘어가게끔 <a> 태그를 걸었으나
현재는 각각의 메뉴에 해당하는 페이지가 만들어져 있지 않다.
* 브라우저 창의 크기를 최대로 줄였을 때나, 모바일 화면으로 보았을 때
해당 메뉴바가 search 영역 아래에 위치하게끔 설정하고 싶다.
logo
main logo를 클릭하면 main page로 이동하는 효과를 주면 좋을 것 같아
<img> 태그를 <a> 로 감싸주었으나,
동그라미 로고 부분 뿐만 아니라
로고가 포함되어 있는 가로 영역이 전체 다 링크로 걸려져 있기 때문에
해당 부분을 수정해야 할 것 같다.
sub title
내 이니셜에 낑겨 맞추겠다고 어떻게든 쥐어짜본 sub title..
fade in 애니메이션 효과를 주었다.
@keyframes를 이용하여 fade in 을 작성하고
해당 sub title의 class에 fadeIn 을 부여했으며
2초 동안 애니메이션 효과가 나타나도록 설정하였다.
crome 브라우저를 위해 -webkit keyframes과 animation 코드도 추가하였다.
main photo
js를 배운다음 클릭하면 옆으로 넘어가는 이미지 효과를 주고 싶은 부분.
이미지 크기도 너무 크게 설정해놔서 조정 할 예정이다.
[Body 1 : Intro App]
intro app
은근 멘트 짜내는게 고역이라니까
SH FILM 부분은 text-decoration의 속성을 overline으로 하여 간지나는 느낌을 살려주었다.
제목 밑 '찰나의 ~ 간직하다' 문구는 글자 하나하나 좀 띄우는게 디자인적인 면에서 좋을 것 같아
letter-spacing 속성을 활용하였다.
App 다운로드 부분은 해당 버튼을 클릭하면 앱을 다운로드 할 수 있는 화면으로 넘어가길 바라서 <a>태그를 이용하였으나,
아직 그 화면은 만들어지지 않았다.
middle banner
SH FILM이 실제 어플이라면 나는 이 어플의 얼굴을 이렇게 만들고 싶다! 생각해서 급하게 만듦
다양한 버전이 있다.
여름과 겨울 에디션이라고나 할까
정말 단순한 디자인이지만 Simple is the Best의 공식은 영원하다.
display : flex;를 이용하여 이미지들을 나란히 배치했다.
어플들 아래 하늘 이미지의 구분선은 디자인적인 요소를 더해주기 위함이다.
[Body 2 : Intro TXT]
TXT
SH FILM의 메인은 감성이다.
왜냐하면 난 인스타쟁이이기 때문이다.
SH FILM만의 독특한 색감과 감성은 MZ 세대가 원하는 감성과 일맥상충한다
라는 느낌의 소개를 담아내고 싶었다.
기능이랑 편리함도 굉장히 심플하게 설명하려고 노력했음
'기능에 놀라다' 이 부분은 text-align : right; 속성을 줘서
브라우저 크기가 어떻든간에 우측에서 텍스트가 자리잡길 바랐다.
animation
fade in 효과를 주고 싶었는데
그냥 나타나는 것보다 각자 위치한 자리에서 스윽 하면서 나오는 효과를 주고 싶었다.
좌측에 기재되어 있는 문구는 좌측에서 우측으로 fade in하면서 슬라이딩하는 효과를,
우측은 그 반대의 효과를 주고 싶었다.
마찬가지로 @keyframes 을 이용하여 fade in - left / right 코드를 작성하였고
transform 부분을 추가하였다.
transform : translate3d(-100%, 0, 0);부분은 좌측에서 우측으로 슬라이딩하라는 내용이고
100%는 우측에서 좌측으로 슬라이딩임
title
각 소개의 제목 부분에서 원래 원고지 형식의 느낌을 주고 싶었는데
한 글자 글자마다 line 효과를 줄 수 있는지 아직 못찾아서 underline과 overline 효과만 주었다.
* 스크롤 내렸을 때 fade in 효과가 나타나게 하고 싶은데
js 중에서도 어려운 부분인 것 같아서 일단 보류.
나중에 js 기초 올리고 이것저것 하고 나서 도전해보겠다.
[Body 3 : Career]
background img
<img> 태그로 넣지 않고 background-image의 css 스타일을 작성하여 이미지를 넣었다.
background-image의 크기를 조절하는 것과 position 등
생각보다 그냥 이미지만 넣는 것이 아니라서 작성해야 할 코드들이 있구나를 알게 되었다.
초짜의 수준에서는 나름 신기했던 ..^^
apply buttom
apply buttom은 float을 left로 지정하여 왼쪽에 계속 머무르게 하였다.
padding을 7px 주어 border line과 txt의 간격이 생기게 하였고,
letter-spacing을 통해 글자마다 약간의 간격이 있게 지정해주었다.
border line이 너무 심심해서 심플한 디자인적인 요소를 가미했으면 좋겠다고 생각하여
box-shadow 효과를 주었다.
cursor : pointer;효과를 주어 이것이 버튼임을 명시하였다.
[Body 4 : News]
txt
여담이지만 저때 뉴스 멘트를 정할 때 스누피 맨투맨을 입고 있었다.
그리고 코로나로 인해 막혔던 일본 여행길이 풀렸던 때라 일본 여행 뽐뿌가 왔었지만 가지 못한 한을 풀기 위해 멘트를 적었다.
이 멘트들이 뉴스 기사라는 것을 인지시키기 위해 <article> 태그를 이용하여 코멘트들을 정리하였다.
display : table;
멘트는 스누피 멘트 1, 일본 시장 진출 멘트 2 이렇게 구성되어 있는데
table 형식으로 묶어서 각 문단들을 나란히 배치했다.
table-layout : fixed;를 이용해 고정시켜주고
각 문단별 display : table-cell;로 지정하였다.
* 모바일 화면이나 브라우저 창을 최대로 줄였을 때
가로로 배치되었던 각 문단들이 세로로 배치되게 하고 싶다.
[Body 5 : Contact]
logo
저 로고... 브라우저 창의 크기가 바뀌어도 저렇게 가운데로 위치시키고 싶은데
어떻게 가운데로 위치시켜야 할까 고민을 꽤 했었다.
내가 생각해낸 방법은 일단 logo <img>태그를 감싼 <li> 태그에 class명을 부여하고
<li> 영역과 <img>영역의 높이를 65px로 동일하게 고정시킨 다음
vertical-align : middle;을 지정해주는 것이다.
처음에 <img> 영역에서만 vertical-align : middle;을 지정해주었는데 안되길래
계속 개발자 도구를 켜보면서 이리저리 고민을 많이 했는데
결국은 <li>와 <img>의 수직 높이를 최대한 같게 만든 것이 신의 한수였다.
txt
tmi로 크리스마스 때 언젠간 꼭 방문하리라 마음 먹게 만들었던 레스토랑이 판교에 있어서
판교로 주소를 정한 것 같다.
진짜 취업하고 알뜰살뜰 모아서 한번 가야지
email은 가상의 주소이다.
contact button
항상 우측에 위치했으면 좋겠다고 생각했지만 생각보다 너무 뜬금없는 위치라
float : left;로 설정하게 되었다.
box-shadow도 여러가지 효과를 주고 싶었는데 저기에는 스머징 효과만 있는게 더 예뻐서
simple is the best로 효과를 주게 되었음.
이것이 버튼임을 명시하기 위해 cursor : pointer;를 주었다.
[Footer]
<hr>
contact와 실질적 footer의 내용을 구분할 만한 선이 있으면 좋겠다고 생각하여 넣게 되었다.
선의 색상이 기본 black으로 설정된 터라, 색상을 바꾸고 싶었는데
단순히 color로만 지정해주면 색이 바뀌질 않았다.
찾아본 결과, background : lightgray; 밑
height : 1px; 이렇게 높이까지 지정해줘야 색상이 변경된다는 것을 알았다.
그리고 border값이 설정되어 있는 채로 선이 얄쌍한 느낌이 안든게 마음에 들어서
0값으로 설정해주었다.
<footer>
footer 태그로 해당 컨텐츠들을 묶어주었고,
<section> 태그를 이용해 '개인정보 처리 방침, 기업 윤리 센터, 공고'와 'copyright' 부분을 두 갈래로 나누어주었다.
'개인정보 처리 방침, 기업 윤리 센터, 공고' 부분은 <span>으로 묶어 구역을 나누어주었다.
개인정보 처리 방침
해당 문구만 밑줄 및 커서 포인터 효과를 넣어주고 싶어서
따로 class명을 기입했다.
*나중에 해당 문구를 클릭하면 작은 브라우저 창이 나타나는 이벤트를 넣고 싶다.
'개인정보 처리 방침, 기업 윤리 센터, 공고'
해당 부분은 마지막 오른쪽 영역 제외한 나머지 오른쪽 부분에만 border line이 있으면 좋을 것 같아
.footer_contents > span:not(:last-child) 내 border-right 속성을 추가해주었다.
:not()이 생각보다 빈번하게 쓰일 수도 있겠다란 생각이 들었다.
copyright
copyright 문구 하나 마침표로 딱 찍고 나니
정말 엉성하고 수정해야 할 것도 많고, html과 css만으로 이루어진 페이지이나
내 손으로 그 어떤 강의도 보지 않고 초안을 구상해냈다는게 정말 보람차다.
여기에 js 기능을 추가하고 싶다.
그리고 코드의 재사용성이나 class명도 다시 한번 고민해봐야 할 부분들이 많다.
css 파일을 mainpage로 나누는게 맞을지,
txt와 icon, img.css 이렇게 따로 나누는게 맞을지
아직 고민이 많다.
특히 직접 코드를 작성해보니까
아직 기술이라곤 아무것도 없는 허접한 웹페이지가 분명한데도
생각보다 디테일이 추가된다는 것과
재사용성까지 고려하고 깔끔한 코드를 작성함과 동시에
합리적으로 코드줄을 줄일 수 있는 코드를 작성한다는 것이
내 생각보다 더 어려운 일이라는 것을 알았다.
난잡하게 코드를 쓰고 나서
웹페이지가 정상적으로 작동한다고 땡! 이게 아니라
앞으로 코드를 보는 사람들까지 다 고려해서 작성해야 한다는 것이
코드를 작성하는 것보다 더 많은 센스와 실력을 겸비해야 한다는 것을 알았다.
이젠 js 공부할 차례 !
js 공부하고 다시 돌아오겠다 ..!
그리고 학교 중간과제와 기말고사까지 공부하고
아직까진 회사에 붙어 있어야 하니 회사 공부도 해야 하고..
자바도 해야 하고.. 정말 할게많다 많다
react도 해야 하는디
저번에 mbti 사이트 만들기에서 배운
bootstrap은 써먹지 않았다.
그거보다는 기초부터 탄탄히 하고 나서 써먹는게 더 나을 것 같아서 안씀
'[Etc]' 카테고리의 다른 글
| [2023년 정보처리기사 3회] 필기 합격 (0) | 2023.08.02 |
|---|---|
| VSC 확장팩 추천 (0) | 2022.11.07 |
| [SH FILM] Main photo 초안 ~ 전체 뼈대 구상 (0) | 2022.10.22 |
| [제 45회 SQL 개발자(SQLD)] 합격 (0) | 2022.06.25 |
| VSC 단축키 (0) | 2022.05.16 |
