포토샵연대기 제작파일
- 22.04.28
- 준 완성작. negative-margin을 완벽히 숙지하지 못한 상태로 조금 더 레이아웃의 보완이 필요.
- 가온데 실선과 반응형이 원활하게 보이지 않는 이슈가 있음.
- Feedback
- 반응형은 모바일 페이지를 보여주는 것이 아닌, view-port에 따라서 유연하게 움직이는 것을 말함. view port를 줄이면서 숨막혀 보이지 않도록 좌,우에 padding을 주는것도 하나의 방법. 또한 모바일 페이지를 만드는 것이 아니라 유연하게 html문서를 보여주는 것이라고 생각.
- figma 혹은 photoshop으로 이미지를 보고 퍼블리싱을 했을때, 이 작업이 익숙해졌을 경우 그 다음단계는 유지 보수를 위한 css작업을 능숙하게 작업하는 것. 컨텐츠에 어떤 것이 들어와도 문제가 없도록 작업하는 것.
- 타임라인 작업이기 때문에 순서가 중요할 것. 따라서 해당 요소는 항목이 있는 목차인 ol, li를 활용하여 작업하는 것이 좋을것 같음.
- 가온데 정렬을 위한 공통 클래스를 설정하는것이 좋다. 예를들어 wrapper라는 클래스를 header와 main에 레이아웃용으로 집어 넣으면서 작업. wrapper에는 고정 width 값을 주고 자식 요소들을 퍼센티지화 하여 추후 레이아웃 유지보수할 시 wrapper만 손보면 바로 다 딸려올 수 있도록 모듈화 하는것이 중요. 일종의 '공공재'로 만드는것.
- wrapper에 쓰이는 공공재 레이아웃의 width 고정값으로는 960, 1200, 1400, 1800 등 여러 값이 존재함.
- 차분히 진행할 수 있는 것들을 하나씩 올려놓으면서 각개격파를 하자. html 마크업만 주르륵 해놓고 css작업 시작하는건 매우 힘듦. 나중에 수정사항이 있을 수 있으면 매우 골치아픔. 마크업은 최소한으로 시작하고 css와 동시에 작업 시작하자.
- nagative margin을 사용해야 함. 예를들어 전체 작업시 main의 패딩값이 30px 안으로 들어가 있음. 즉 header의 컨텐츠와 비교하면 30px 더 안쪽에 들어가 있는 것이므로 header와 값을 맞춰주기 위하여 main에 nagative margin값으로 -30px 넣어주어야 함.
- 자식가상요소 중 odd, even 등의 여러 자식 요소를 선택하기 위한 짝수,홀수 값등은 html길이가 매우 길어질 우려가 있음. 그러므로 추가적으로 class를 하나씩 더 달아서 공통 요소로 하나로 묶어둔 후 right일 경우, left일 경우의 값을 추가로 조정,
- position이 들어간 상태에서 top:0px bottom:0px으로 사용 공간을 늘린 다음 margin:auto 0px로 중간정렬 하는 방법도 괜찮음.