시작 태그, 내용, 종료 태그로 이루어진 요소를 배웁니다.
요소는 시작 태그부터 종료 태그까지의 전체 단위입니다. 요소 안에는 텍스트나 다른 요소를 넣을 수 있으며 부모와 자식 관계가 생깁니다. img, input처럼 종료 태그가 없는 빈 요소도 있습니다.
section은 main의 자식이고, 그 안의 h1과 p는 section의 자식이면서 서로 형제입니다. img는 section이 닫힌 뒤 main 바로 아래에 오므로 section과 형제가 됩니다. img에는 감쌀 내용이 없어서 src로 그림을, alt로 대체 텍스트를 지정하는 것만으로 요소가 완성되고, CSS의 width: 100%가 그림을 main의 안쪽 폭에 맞춥니다.
img 끝의 />에서 슬래시는 HTML에서 아무 효과가 없어 써도 되고 빼도 됩니다. 반면 div나 span 같은 일반 요소에 <div />처럼 쓰면 슬래시가 무시되어 요소가 닫히지 않으므로, 뒤에 오는 내용이 전부 그 안으로 들어갑니다.
태그를 교차해서 닫으면 구조가 깨집니다. 나중에 연 태그를 먼저 닫는 중첩 순서를 지키세요.
직접 바꿔보세요section 안에 ul과 li 세 개를 중첩해보세요.