html과 css만으로 랜딩페이지 만들기 후기

https://singular-shortbread-f5b80f.netlify.app/

AppLab.kr

https://github.com/junsu1220/appLab

GitHub - junsu1220/appLab

사용기술: HTML, CSS

1. HTML & CSS 역량을 보여줄 수 있는 프로젝트를 하자
2. 웹디자인 시안을 받고 그대로 만들어보자.
3. 최대한 HTML & CSS 기술을 많이 녹여보자.

포토비를 우선 들어간다.
포토비에서 레이어의 의미를 알아내는것까지는 시간이 조금 걸려도
잘했으나
레이어를 따로 추출하는 것을 알아내는것은 쉽지 않았다.
포토샵을 설치하기는 싫었고 포토비에서 해결하고 싶었는데
그냥 느낌적으로 이거다 싶었던게 레이어 저장이었다...
레이어 추출은 한번에 모든 레이어를 다 저장하는 것 같은데 
내 똥컴으로는 힘들었다.

각 레이어들의 픽셀 위치 찾기... 이것도 힘들었지만 결국 찾아내었다.
진짜 그냥 다 눌러가며 나의 UX감각을 믿으며 찾아내었다.

header부분을 짜는데 당장 헤더의 탑부분을 가운데 정렬하는데만 
시간이 꽤 소요됐다... 예전의 경험을 되살려서 이제는 처음부터 끝까지
우선 어떻게 코딩할지 계획을 짜고 그 계획을 검토하고 시작해 봐야겠다.

다시 세분화해서 하나하나 도전하며 짜고있는데 공부와 실전은 확실히
다르다.. 박스모델을 상당히 잘 짜야한다는 생각을 했고
width와 height 그리고 백그라운드 컬러를 이용해서 부모 자식요소를
잘만들어야 한다. 

top을 만들고 당장 오른쪽으로 가지않은건 내가 로고와 homekey를 합친
menuBox 라는 div를 만들고 단순히 저장하지 않았기 때문이다. 
정신나갈거 같다.

ul.homekey의 서브메뉴들을 flex해서 가로정렬해야하는데 나는 그
homekey를 flex하지 않고 그 부모요소인 menuBox만 flex해서 계속
왜 안나오냐고 했다... 단순 선택자 문제였는데 어쩐지 백그라운드 컬러도
이상하더라 알고나니 진짜 허탈하다

text-align은 부모요소에서 가운데 정렬해주는 것이다. 
자식요소의 p 태그에서 width를 지정해준다.

mainText로 대표되는 이미지를 묶음으로 저장하면 한번에 그냥
그룹으로 옮기면 끝이지만 그러면 try for free와 watch video를 해결할 
수 없기 때문에 하나씩 옮기기로 했다.

우선 전체 부모그룹을 만들어주고 그 부모 그룹내에서 앱솔루트로
하나씩 위치를 잡아준다. 이때 try for free와 watch video는 a 태그로
만들어 준다.

이미지 중 하나의 이미지가 계속 안나왔다.
이미지를 삽입하면 아주 조금 자리를 차지하는것같아 사이즈를 늘려보고
z-index를 99로 주기도 해봤지만 변화가 없길래 뭔가 했는데
알고보니 파일명에 '#'이 들어가서 였다 해결되어서 다행이다.

그냥 정적이면 너무 액션이 없으니 돌아가는 메뉴를 하나 만들어 보려고
했다. 여기서 어려웠던점이 하나의 그룹으로 두개의 매뉴를 감싸는건데
머리로는 분명 이해했던 내용이었는데 실제로 하려고하니
이상하게 자꾸 두개의 그룹을 따로따로 움직이려 했다.
무의식중에 귀차니즘이 발동한 것 같다.
새롭게 섹션그룹을 만들어주고 그 안에 두개의 메뉴를 넣어 hover
기능으로 처음부터 다시 구현했다.
키포인트는 hover를 맨 끝의 두개의 메뉴가 아닌 메뉴를 묶은 섹션그룹에
주어야 한다는 점이다.. 알고나면 쉽지만 실제로 구현할때는 
떠오르기 쉽지 않다...

항상 명심할 것은 박스모델을 만들때 앱솔루트를 이용한다면
width 와 height를 꼭 설정할것이다.

hover를 이용하면 다양한 애니메이션을 손쉽게 만들 수 있다.
css를 이용한 배경은 박스를 3개 사용하여 제일 부모에 
백그라운드 이미지를 하고 그 이후에 flex를 이용하여 가운데 정렬하면
된다. 여기서는 특별히 이미지가 오른쪽이 살짝 잘렸기에 패딩값을
추가했다.