HTML/CSS 5.6 · 5부. 실무
다음 단계
여기까지 배운 것을 정리하고 다음에 무엇을 볼지 고릅니다.
개념 설명
여기까지 배운 것
다섯 부를 지나며 화면을 만드는 데 필요한 것을 모두 다뤘습니다. 지금 할 수 있는 일을 정리합니다.
| 부 | 할 수 있게 된 것 |
|---|---|
| 1부 | 문서를 짜임 있게 적습니다. 목록 · 표 · 링크 · 그림 · 폼. |
| 2부 | 색 · 글꼴 · 여백 · 테두리를 정하고, 규칙이 겹칠 때를 다스립니다. |
| 3부 | Flexbox 와 Grid 로 화면 골격을 짭니다. |
| 4부 | 화면 폭에 맞추고 움직임을 더합니다. |
| 5부 | 모두가 쓸 수 있게 만들고, 문제를 스스로 찾습니다. |
이것으로 정적인 화면은 무엇이든 만들 수 있습니다. 6부에서 세 가지를 처음부터 만들어 봅니다.
상세 사용법
다음에 배울 것 — JavaScript
지금까지 만든 화면은 움직이지만 반응하지는 않습니다.
:hover 로 색이 바뀌고 애니메이션이 돌지만, 누른 값을
기억하거나 서버에서 자료를 받아 오지는 못합니다.
| 이런 일은 | 필요한 것 |
|---|---|
| 단추를 눌러 항목 추가하기 | JavaScript |
| 입력한 값 검사해 알리기 | JavaScript |
| 서버에서 목록 받아 오기 | JavaScript |
| 펼침 차림표 · 팝업 | 대개 JavaScript(간단한 것은 details 태그로도 됩니다) |
JS 커리큘럼 이 이어지는 트랙입니다. 그 트랙의 4부가 화면을 다루는 부분인데, 여기서 배운 선택자(2.2)를 그대로 사용합니다. 이미 준비가 되어 있는 셈입니다.
상세 사용법
CSS 를 더 편하게 하는 것들
실무에서 만나게 될 도구들입니다. 지금 배울 필요는 없습니다 — 무엇을 대신해 주는지만 알아 두면 됩니다.
| 이름 | 무엇을 대신하는가 | 언제 필요한가 |
|---|---|---|
| Sass · Less | 규칙 중첩, 파일 나누기, 계산 | CSS 파일이 아주 커졌을 때. @import(5.3)와 사용자 정의 속성(4.4)으로 상당 부분 됩니다. |
| Tailwind | 클래스 이름 짓기. 미리 만든 이름을 마크업에 붙입니다. | 여럿이 같은 규약으로 빨리 만들 때 |
| Bootstrap | 단추 · 폼 · 격자를 미리 만들어 둔 것 | 디자인보다 기능이 급할 때 |
도구를 먼저 배우면 그것이 무엇을 대신하고 있는지 알 수 없습니다. 지금처럼 직접 적어 본 뒤에 도구를 들이면, 어디까지 맡기고 어디부터 직접 할지 판단할 수 있습니다.
상세 사용법
더 살펴볼 만한 CSS
이 트랙에서 다루지 않았지만 알아 두면 좋은 것들입니다. 필요해질 때 찾아보십시오.
:has()— 자식을 기준으로 부모를 고릅니다. 오랫동안 없던 기능이라 옛 글에는 "불가능하다" 고 적혀 있습니다.- 컨테이너 쿼리 — 화면 폭이 아니라 부모 폭에 반응합니다. 같은 카드를 넓은 자리와 좁은 자리에 함께 놓을 때 유용합니다.
gap이 있는 다단 —columns로 글을 여러 단으로 흘립니다.- 인쇄 스타일 —
@media print로 인쇄할 때만 다른 규칙을 줍니다.
상세 사용법
어디서 찾아볼 것인가
| 무엇 | 어디서 |
|---|---|
| 속성의 정확한 뜻과 값 | MDN 문서. 한국어 번역도 있습니다. |
| 이 기능을 써도 되는가 | Can I use. 브라우저별 지원 상황이 나옵니다. |
| 남이 만든 것 | 개발자 도구로 직접 뜯어 보십시오(5.4). 가장 빠른 공부입니다. |
모든 속성을 외울 필요는 없습니다. 무엇이 가능한지 알고 있으면 찾아 쓸 수 있습니다. 이 트랙이 목표한 것이 그것입니다.
실습 문제
직접 해보기
1. 마음에 드는 화면 뜯어 보기
난이도 하
자주 가는 사이트를 하나 열고 개발자 도구로 확인하십시오. 정답이 없는 실습입니다.
- 화면 골격이 Grid 인가 Flexbox 인가
- 본문 폭을 어떻게 제한했는가
- 사용자 정의 속성(
--)을 쓰는가 - 창을 좁히면 어느 폭에서 배치가 바뀌는가
요소를 검사하면 Grid · Flex 배지가 붙어 있습니다(5.4).
:root 를 검사하면 정의된 이름들이 한눈에 보입니다.요약
정리
- 정적인 화면은 여기까지로 무엇이든 만들 수 있습니다.
- 값을 기억하거나 서버와 주고받으려면 JavaScript 가 필요합니다.
- 도구는 무엇을 대신하는지 알고 들이십시오.
- 모든 속성을 외우지 않아도 됩니다. 무엇이 가능한지만 알면 찾아 쓸 수 있습니다.