- 3.1. 1. 고정 / 반응형 엘리먼트 구분 (O)
- 3.2. 2. header / body / footer 공간 구분하여 레이아웃 형성 (O)
- 3.3. 3. Header 정리 (O)
- 3.4. 4. X 위치 절대위치로 잡기
- 3.5. 5. IE11 이슈 해결 - node.remove() 메소드 없음
- 3.6. 6. 페이지 이동바 제작
- 3.7. 7. #textNode -> p 엘리먼트 씌우기 (O)
- 3.8. 8. ★ 레이아웃 알고리즘 짜기
- 3.9. 9. 스크린 크기에 따른 폰트 사이즈 조정
- 3.10. 10. columns 응용할 방법 찾기 or flex로 변경
- 3.11. * 페이지 이동은 화면 왼쪽 / 오른쪽 클릭시 이동하는 걸로
- 3.12.
- 3.13. * 크롬 버그 page-break 개발자 도구에서 바로 적용 안됨
레이아웃 엔진 짜기
현재 Github에서 진행 중
결국에는 비율 문제 아닌가?
화면이 작고 크고는 폰트와 이미지의 크기를 늘리고 줄이면 되는 문제
비율 분류(3분류)
- 가로 크게
- 세로 크게
- 정사각형 (1:1 비율)
크기 분류(3분류)
- 모바일
- PC
- 빔 프로젝트
이미지의 개수(이건 선택 IF)
- 1개
- 2개
- 3개
- 4개
- 5개 이상
생각 스케치
엘리먼트
엘리먼트로 나누고 최상위로 분류(depth 없음)
엘리먼트 분류(이미지/ 텍스트)
불필요 엘리먼트 날리기
단
엘리먼트 개수에 따라 단 나누기(2단 3단 4단)
배치
우선순위에 따른 배열(이미지(상)/ 텍스트(하))
그룹화
관련성 엘리먼트 묶기
grid-area로 묶어주면 Nice
생각 주의사항
- 이미지는 일부만 보여져도 된다
- 폰트 CSS 좌우·상하 단어 줄바꿈 등 모두 찾아서 고려
- 여러 디바이스 화면 고려(troy 사이트 사용)
- 전체 레이아웃은
grid로 형성하고, 이후 하위 레이아웃은flex로 해야함
공부해야할 것
font관련 CSS 모두 파악일단
grid레이아웃 극한으로 배워야 한다 (∵ 써먹을 것은 써먹어야하기 때문)media query에 대해서도 극한으로 학습 (반응형)foundation,bootstrap,ant design등 에서 영감 받을 수 있는 것 확인codepen에서 영감받을 수 있는 것 확인 (빡고수들이 많기 때문에 분명히 존재할 것임)
CSS / 폰트 관련
letter-spacing 자간
word-spacing 어간
line-height 행간
transform 변형
작업 진행
1. 고정 / 반응형 엘리먼트 구분 (O)
고정: 언론사 / 제목 / 시간 / + 페이지 이동바(하단)
반응: 이미지 / 본문글
2. header / body / footer 공간 구분하여 레이아웃 형성 (O)
header: 언론사 / 제목 / 시간
body: 본문
footer: 페이지 이동바
3. Header 정리 (O)
가운데 정렬 : 언론사 / 제목 / 시간(작게)
4. X 위치 절대위치로 잡기
5. IE11 이슈 해결 - node.remove() 메소드 없음
parent.removeChild(childNode)로 해결
6. 페이지 이동바 제작
7. #textNode -> p 엘리먼트 씌우기 (O)
8. ★ 레이아웃 알고리즘 짜기
columns를 쓰면 안됨 (∵ 각 단을 다른 크기로 배정할 수 없음)
이미지 여러개 처리 방법
한 이미지 뷰어에서 처리
이미지 엘리먼트 대신, 이미지 뷰어 순서 참조 넣기
9. 스크린 크기에 따른 폰트 사이즈 조정
10. columns 응용할 방법 찾기 or flex로 변경
* 페이지 이동은 화면 왼쪽 / 오른쪽 클릭시 이동하는 걸로
조건: 모바일 뷰에서는 작동하지 않기(상하 스크롤로 이동하기 때문에)
모바일 뷰어에서는 끝까지 페이지 스크롤시, 다음 페이지 여부 묻기 (만화 사이트 형식 참고)
* 크롬 버그 page-break 개발자 도구에서 바로 적용 안됨
columns를 해체했다 다시 켜야 적용됨