인터넷은 어렵다(Interneting Is Hard)는 웹 제작을 처음 배우는 사람을 위한 학습 웹사이트다. HTML과 CSS를 중심으로 웹 페이지를 만드는 과정을 설명한다. 도표와 예제를 많이 사용해 보이지 않는 구조를 시각적으로 이해하도록 돕는다. 특히 요소의 관계와 선택자와 배치 같은 주제를 읽고 직접 따라 해 볼 수 있다. 박스 모델이나 문서 흐름이 막연하게 느껴질 때 다른 그림과 설명으로 다시 살펴보기 좋다. 아래 링크는 학습 자료를 열람할 수 있는 사본이며 현재 웹 기능의 지원 여부는 MDN과 함께 확인하는 편이 좋다.
필요한 장면부터 읽기
- 작품 사진을 올릴 때: 반응형 이미지와 작품 이미지의 여러 크기, 화면에 따라 달라지는 이미지의 구도.
- 항목 수가 늘어날 때: 플렉스박스와 줄바꿈하는 작품 목록.
- 원하는 스타일이 적용되지 않을 때: 선택자와 CSS 규칙이 겹칠 때.
- 문단 간격이 예상과 다를 때: 박스 모델과 여백이 더해지지 않는 까닭.
원문의 반응형 예제에 있는 maximum-scale=1.0은 확대를 제한하므로 새 예제에서는 빼고 width=device-width, initial-scale=1을 사용한다. 마우스를 올릴 때만 열리는 메뉴도 마우스와 키보드로 여는 메뉴처럼 다른 조작 방식을 포함해 바꾼다. (MDN의 뷰포트 안내)