컨테이너 모델 소개

전체 온라인 콘텐츠는 컨테이너 모델을 사용하여 구성됩니다. HTML 구성 요소(문단 블록, 구분 요소, 섹션 등)는 컨테이너 내에 표시되며, 웹 사이트 디자인은 이러한 요소를 차곡차곡 쌓아 컨테이너처럼 구성합니다.

이 튜토리얼에서는 다음을 다룹니다.

1. 웹에서 컨테이너 활용
2. 적응형 디자인을 위한 컨테이너 적용
3. 중첩된 컨테이너 구현
4. 컨테이너 사용자 정의

웹에서 컨테이너 활용

모든 HTML 구성 요소(예: 단락, 구분 요소, 섹션)는 웹의 컨테이너에 표시됩니다. 컨테이너 내의 해당 엔터티를 포함하는 각 구성 요소를 둘러싸는 보이지 않는 테두리를 상상해 보세요. 이러한 숨겨진 컨테이너를 사용하여 구성 요소와 웹 사이트 레이아웃을 디자인할 수 있습니다(예: 구성 요소 컨테이너 주위에 공간을 추가하거나 구성 요소 컨테이너에 테두리를 추가할 수 있음). 이러한 컨테이너는 속성에 따라 서로 옆에 위치하거나 서로 쌓여 있습니다.

적응형 디자인을 위한 컨테이너 적용

온라인 콘텐츠는 요소를 수동으로 어디에나 배치할 수 있는 프레젠테이션처럼 작동하지 않습니다. 프레젠테이션은 단일 해상도로 보도록 설계되었으며 다양한 장치와 브라우저에서는 응답성이 부족합니다.

웹 레이아웃은 텍스트 document와 더 유사하게 작동합니다. 콘텐츠는 페이지의 왼쪽 상단에서 자연스럽게 스트리밍되어 document의 오른쪽 가장자리에 도달하면 다음 줄(예: 래핑)로 향합니다. 콘텐츠는 다양한 해상도에 맞춰 반응합니다. 예를 들어 텍스트 document 창의 크기를 조정하면 내용 형식은 변경하지 않고 자동으로 조정됩니다. 치수 내용의.

처음에는 컨테이너 모델이 융통성이 없어 보일 수 있지만 다양한 장치와 화면 크기에 맞는 반응형 디자인을 만들 때 상당한 적응성을 제공합니다. 반응형 디자인에 대해 자세히 알아보세요.