인터넷은 어렵다(Interneting Is Hard)는 웹 제작을 처음 배우는 사람을 위한 학습 웹사이트다. [[HTML]]과 [[CSS]]를 중심으로 웹 페이지를 만드는 과정을 설명한다. [[도표로 배우는 웹 제작|도표와 예제]]를 많이 사용해 보이지 않는 구조를 시각적으로 이해하도록 돕는다. 요소의 관계와 선택자, [[박스 모델]], [[문서 흐름]]과 배치 등을 다룬다. 아래 링크는 학습 자료를 열람할 수 있는 사본이며 현재 [[브라우저 호환성|웹 기능의 지원 여부]]는 [[MDN]]과 함께 확인하는 편이 좋다.

- [열람 가능한 학습 자료 사본](https://internetingishard.netlify.app/)

## 필요한 장면부터 읽기

- 작품 사진을 올릴 때: [반응형 이미지](https://internetingishard.netlify.app/html-and-css/responsive-images/)와 [[작품 이미지의 여러 크기]], [[화면에 따라 달라지는 이미지의 구도]].
- 항목 수가 늘어날 때: [플렉스박스](https://internetingishard.netlify.app/html-and-css/flexbox/)와 [[줄바꿈하는 작품 목록]].
- 원하는 스타일이 적용되지 않을 때: [선택자](https://internetingishard.netlify.app/html-and-css/css-selectors/)와 [[CSS 규칙이 겹칠 때]].
- 문단 간격이 예상과 다를 때: [박스 모델](https://internetingishard.netlify.app/html-and-css/css-box-model/)과 [[여백이 더해지지 않는 까닭]].

원문의 반응형 예제에 있는 `maximum-scale=1.0`은 확대를 제한하므로 새 예제에서는 빼고 `width=device-width, initial-scale=1`을 사용한다. 마우스를 올릴 때만 열리는 메뉴도 [[마우스와 키보드로 여는 메뉴]]처럼 다른 조작 방식을 포함해 바꾼다. ([MDN의 뷰포트 안내](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/meta/name/viewport))

#웹사이트 #HTML #CSS #교육