HTML과 CSS로 코딩을 배우자(Learn to Code HTML & CSS)는 셰이 하우가 만든 웹 제작 학습 웹사이트다. 첫 웹 페이지 만들기에서 시작해 글자와 배경과 목록과 폼을 다루는 과정으로 이어진다. 입문 과정과 고급 과정을 나누어 익숙한 정도에 맞춰 읽을 수 있다. 각 단원은 구조와 표현을 구체적인 제작 과제와 연결한다. 박스 모델과 타이포그래피를 자신의 HTML 문서에 적용하며 순서대로 연습하기 좋다.
목적에 따라 읽기
- 글을 조판할 때는 타이포그래피 단원과 글줄의 길이와 줄 높이를 함께 읽는다.
- 전시 안내를 만들 때는 표와 폼 단원에서 전시 일정표를 HTML로 만들기, 신청 폼은 질문의 순서다로 이어갈 수 있다.
- 배경과 배치를 고를 때는 이미지 없이 만드는 배경, 겹쳐 놓은 요소의 기준점, 회전한 글자의 자리를 비교한다.
- 움직임을 더할 때는 움직임의 시간표와 마우스 없이 읽는 순서에서 조작 조건도 확인한다.
배치 단원에는 float와 inline-block으로 여러 열을 만드는 예제가 있다. 기존 코드를 이해할 때 참고하되, 새 배치는 플렉스와 그리드도 함께 검토한다. 강의의 설명 순서와 지금 사용할 구현 방법을 구분해 읽는다. (MDN의 CSS 배치 안내)