디자인을 보고 HTML 구조 파악하기
-
1 : 시맨틱 구조
-
2 : 내부 구조
nav-wrapper(전체영역) → nav-list(각각의 태그 영역) & nav-icon(스타트업 지도 아이콘)
<오늘 했던 예시>
card-wrapper(카드 여러장 영역) → card(카드 한장 영역) → card-banner(이미지영역) & card-body(내용영역) (→ hashtag, title, desc ...)
CSS 구조 파악하기
-
1 : 정렬
FLEXBOX 정렬을 추천함 (flexbox를 이용하면 페이지를 반응형으로 디자인 할 수 있다. 반응형 디자인이란 페이지의 가로 길이를 줄였다 늘렸다 함에 따라서 내부 개체들의 정렬이 자연스럽게 조절되는 것)
<오늘 했던 예시>
세로기준 중앙 정렬 가로기준 양끝 정렬 [로고 ↔ 리스트(리스트1,리스트2,리스트3,리스트4)] 이라고 볼 수도 있고, 오른쪽 정렬에 로고만 왼쪽으로 뺀 형태로 볼 수도 있다.
가로세로기준 중앙 정렬
가로기준 왼쪽 정렬
HTML 살을 붙이기
CSS 살을 붙이기
이벤트 부여하기 (JS) → 다음 세션
반응형 디자인(휴대폰, 태블릿, PC용) → 언젠가 기회가 되면...