HTML/CSS 커리큘럼

화면에 무엇이 있는지를 적습니다. 아직 꾸미지 않습니다.

• 1.1 웹 페이지는 무엇으로 이루어지는가 HTML·CSS·JavaScript 가 각각 맡는 일과 브라우저가 하는 일을 봅니다.
• 1.2 첫 페이지 만들기 문서의 뼈대를 갖추고, 파일을 만들어 브라우저로 엽니다.
• 1.3 글을 담는 태그 제목과 문단을 적습니다. 공백과 줄바꿈이 왜 무시되는지도 봅니다.
• 1.4 목록과 표 항목을 늘어놓는 두 가지를 봅니다. 표는 자료를 담는 자리입니다.
• 1.5 링크와 이미지 다른 곳을 가리키는 두 태그와, 주소를 적는 방법을 봅니다.
• 1.6 폼과 입력 요소 값을 받는 자리입니다. 라벨과 이름을 어떻게 다는지 봅니다.
• 1.7 의미를 담는 태그 보이는 모양은 같지만 기계가 읽는 뜻이 다릅니다.
• 1.8 속성과 실습 id 와 class 로 이름을 붙입니다. 1부를 한 번에 정리합니다.

화면에 있는 것에 색과 크기를 입힙니다. 배치는 3부에서 다룹니다.

• 2.1 CSS 를 붙이는 방법 규칙의 모양과, 화면에 붙이는 세 가지 방법을 봅니다.
• 2.2 선택자 규칙을 어느 요소에 적용할지 가리킵니다. JavaScript 도 같은 표기를 씁니다.
• 2.3 의사 클래스와 의사 요소 마크업에 없는 것을 고릅니다. 상태와, 요소의 앞뒤 자리입니다.
• 2.4 색과 단위 색을 적는 네 가지와, px · em · rem · % 의 기준을 봅니다.
• 2.5 글꼴과 텍스트 글꼴을 고르고 크기와 줄 간격을 정합니다.
• 2.6 박스 모델 요소가 차지하는 자리는 네 겹입니다. 폭이 어긋나는 까닭도 봅니다.
• 2.7 배경과 테두리 상자에 색과 선을 입힙니다. 표를 읽기 좋게 만듭니다.
• 2.8 상속·명시도·계단식 규칙이 겹칠 때 무엇이 이기는지 봅니다. 안 먹는 까닭이 대개 여기 있습니다.
• 2.9 display 와 문서 흐름 요소가 놓이는 방식과 여백 상쇄를 봅니다. 3부 배치의 출발점입니다.

요소를 원하는 자리에 놓습니다. Flexbox 와 Grid 를 함께 사용합니다.

• 3.1 Flexbox 기초 부모에 한 줄을 더하면 자식이 나란히 놓입니다.
• 3.2 Flexbox 정렬 남는 자리를 어디에 둘지 정합니다. 두 축을 구분합니다.
• 3.3 Flexbox 크기 자리가 남거나 모자랄 때 항목이 늘고 주는 방식을 정합니다.
• 3.4 Grid 기초 가로와 세로를 함께 정합니다. 격자 목록과 화면 골격에 사용합니다.
• 3.5 Grid 배치 어느 칸에 놓을지 정합니다. 영역에 이름을 붙이면 CSS 가 곧 배치도입니다.
• 3.6 position 흐름에서 꺼내어 겹쳐 놓습니다. 배치의 기본 수단은 아닙니다.
• 3.7 겹침과 z-index 겹쳤을 때 무엇이 위에 오는지, 값을 키워도 안 되는 까닭을 봅니다.
• 3.8 실습 — 페이지 골격 Grid 로 골격을 잡고 Flexbox 로 머리말을 배치합니다. 3부를 한 번에 사용합니다.

화면 폭에 맞춰 배치를 바꾸고, 값이 변하는 과정을 보이게 합니다.

• 4.1 뷰포트와 미디어 쿼리 화면 폭에 따라 규칙을 달리 적용합니다. meta viewport 가 먼저입니다.
• 4.2 유연한 크기 고정 값을 걷어냅니다. clamp 로 중단점 없이 값이 변합니다.
• 4.3 반응형 이미지 그림이 넘치지 않게 하고, 자리를 정해 채웁니다.
• 4.4 사용자 정의 속성 값에 이름을 붙여 한 곳만 고치면 되게 합니다.
• 4.5 전환과 변형 값이 바뀌는 과정을 잇고, 요소를 옮기고 키웁니다.
• 4.6 애니메이션 계기 없이 스스로 움직이게 합니다. 움직임 줄이기 설정을 지킵니다.
• 4.7 실습 — 반응형 카드 목록 4부에서 배운 것을 하나씩 얹어 카드 목록을 완성합니다.

모두가 쓸 수 있게 만들고, 커진 CSS 를 다스리고, 문제를 스스로 찾습니다.

• 5.1 접근성 키보드·화면 읽기 프로그램·색 구분을 챙깁니다. 대부분 앞에서 배운 것입니다.
• 5.2 폼 꾸미기 브라우저가 그리는 것을 어디까지 바꿀 수 있는지 봅니다.
• 5.3 CSS 를 구조로 두기 파일을 나누고 이름을 지어 커진 CSS 를 다스립니다.
• 5.4 개발자 도구 무엇이 적용됐고 무엇이 졌는지 봅니다. 짐작 대신 확인합니다.
• 5.5 자주 하는 실수 증상에서 출발해 원인을 찾습니다. 옛 코드에서 만나는 것들도 봅니다.
• 5.6 다음 단계 여기까지 배운 것을 정리하고 다음에 무엇을 볼지 고릅니다.

새 문법 없이, 배운 것을 어떤 차례로 조립하는지 봅니다.

• 6.1 소개 페이지 사진·소개글·연락처를 한 장에 담습니다. 미디어 쿼리 없이 만듭니다.
• 6.2 소개 랜딩 구역이 여럿인 화면입니다. 바탕은 끝까지, 글은 가운데로 둡니다.
• 6.3 글 읽는 화면 읽기 좋은 화면을 만듭니다. 줄 길이와 여백이 배치보다 먼저입니다.