HTML·CSS 워밍업

Vue 수업에 들어가기 전 워밍업으로 한 마크업·CSS 연습이다. 날짜 폴더마다 그날 과제와 메모가 있다.

• 12월 13일 — 포털 메인 페이지: 헤더·내비게이션·슬라이드·본문을 960 그리드로 짠다. 위 화면이 이것이다.
• 12월 14일 — 회원가입 폼, float, float 이미지, after, background, bg
• 12월 15일 — 레이아웃, fun, script, iife
• 12월 17일 — 그림 카드: 객체와 document.write 로 그림 설명을 찍는다.

12월 16일 파일은 prompt 와 alert 를 띄우는 실행 순서 실험이라 여기 넣지 않았다.

그때 적은 메모

12월 13일

1. 960 그리드
2. 구현 시작할 때 처음 시작 방법
3. 마크업 할 때 구조를 짜다 말고 내용을 채우다가 distraction 됐다. 내용은 채우되, 구조적인 마크업을 한다는 사실을 계속 인지하자.
4. 네비게이션 버튼들을 리스트로 묶지 않고 버튼으로 마크업했다. 리스트 목록은 ul 로 묶자.
5. 검색 버튼은 form 태그에 input 을 넣는다.
6. container 에 width 를 부여하면 왜 유연하게 조절이 안 되는지?
7. display: inline-block 대신 display: flex 로 정렬하는 방법
8. background-color: rgba(77, 15, 15, 0.4) 로 배경만 투명하게
9. for ([초기문]; [조건문]; [증감문]) — 조건이 참일 때 반복하고, 거짓이면 끝난다. 조건문을 생략하면 참으로 본다.

12월 14일

1. p 태그는 display: block
2. 단독 태그 input 은 value 에 이름을 쓴다.
3. position: absoulte 오타를 인라인으로 쓰니 발견이 어려웠다.
4. fieldset 기본 속성값 없애느라 바빴다.
5. 상위 태그 fieldset, form 이 둘이라 어디에 적용할지 헷갈렸다.
6. border-radius 하면 배경이 살짝 보이는 것은 border: hidden; overflow: hidden;
7. label { display: inline-block } — 인라인은 크기 조절이 안 된다.
8. margin: 0 auto 로 가운데 배치가 안 되면 width 를 먼저 넣는다. block 은 영역을 다 먹기 때문이다.

12월 15일

1. html, body { width: 100%; height: 100%; } — height 100% 면 세로 스크롤이 생기지 않는다.
2. font: normal 14px/1 — 숫자만 넣으면 배수로 들어가고, / 뒤 숫자는 행높이다.