모든 것에 대한인지 적 사실 / 컴퓨터 / 블록 레이아웃 : 무엇이고 왜 필요한가요?

블록 레이아웃 : 무엇이며 왜 필요한가요?

레이아웃은 언제부터 여행을 시작합니다.코드는 HTML로 작성되었고 마크 업은 테이블을 사용하여 수행되었습니다. 시간이 지남에 따라 우리는 이것에서 벗어나 마크 업이 CSS로 옮겨졌습니다. 현재 여러 유형의 레이아웃이 있습니다. 제작자에게 엄청난 기회를 제공하는 Flex-box, Bootstrap 도구 상자 및 최신 그리드는 현대적인 것으로 간주 될 수 있습니다. 웹 개발의 전환 옵션 중 하나는 블록 레이아웃입니다. 이전에는 전체 페이지에 대한 마크 업을 만드는 데 사용되었지만 이제는 사용되지 않는 것으로 간주되지만 여전히 특수한 경우에 널리 사용됩니다.

블록 레이아웃이란?

그녀는 쓸모없고 불완전한 것을 대체했습니다.표의. 페이지는 소위 레이어 또는 블록으로 구성되며 닫는 <div> 태그는이를위한 빌딩 블록 역할을합니다. 이것은 부모 요소의 전체 너비와 콘텐츠에 맞는 높이에 걸쳐있는 블록 태그입니다. 나중에이 조판은 "놀라운"이라고 불렸다. 페이지 방향의 기본은 소위 클래스입니다.

현재 이러한 유형의 레이아웃은더 이상 사용되지 않으며 <div> 태그 자체는 의도 한 대로만 사용해야합니다. 코드를보다 쉽게 탐색 할 수 있도록 의미 상 올바른 태그가 많이 있습니다. 예를 들어, 탐색 메뉴에 대한 특수 <nav> 태그가 있습니다.

명확성을 위해 블록 레이아웃은 다음과 같이 나타낼 수 있습니다.

</ div>

클래스 래퍼가있는 Div는상위 컨테이너, 즉 래퍼입니다. 요소 클래스가있는 요소는 복잡한 구조의 빌딩 블록입니다. 코드에서 부모 요소와 비교하여 여백과 다른 여백이 사용되어 요소의 구조와 계층을보다 쉽게 정의 할 수 있습니다.

테이블 사용

사이트의 테이블 레이아웃은 오랫동안모든 프로그래머에게 골칫거리입니다. 사이트의 블록 모델로 전환 한 후, 의도 된 목적을 위해 테이블을 일반적으로 사용하는 것은 한동안 권장되지 않았습니다.

물론이 접근 방식은부적절하고 심지어 유해합니다. 그것은 단순한 일을 더 복잡하고 불편한 방식으로 수행하도록 강요합니다. 이제 테이블은 관련 데이터를 표시하는 데만 사용됩니다. 즉, 직접적인 목적에 따라.

역할 분리

이전에 모든 구성이 HTML로 이루어 졌다면블록 레이아웃은 역할의 완전한 분리를 가져 왔습니다. 현재 HTML은 마크 업, 논리적 형식 및 페이지 와이어 프레임에만 사용됩니다. 스타일이 완전히 제거되고 문서에 포함 된 별도의 파일에 포함됩니다. CSS는 요소의 위치를 지정하고 매력적이고 반응이 빠른 디자인을 만드는 데 사용됩니다. 블록을 참조하기 위해 요소 이름이 지정된 클래스가 사용됩니다. 예를 들어 헤더 블록의 경우 헤더 클래스를 할당합니다. 또한 코드를 더 쉽게 탐색 할 수 있습니다. 요즘에는 HTML5에 나타난 특수 태그에 의해 부분적으로 수행됩니다.

<div> 블록 사용

블록 레이아웃에서 태그가 활발하게 사용됩니다.<div>. 건물 건설의 벽돌과 유사합니다. 그러나 사이트의 기초 인 구조를 구성하는 동시에 유일한 것은 아닙니다. 문, 창, 환기, 발코니 등과 마찬가지로 다른 HTML 요소가 레이아웃에 사용됩니다. 링크, 양식, 그림, 목록 및 표입니다.

<div> 태그를 사용하면 코드를 만들 수 있습니다.더 작고 직관적입니다. 블록 레이아웃으로의 전환을 통해 불필요한, 즉 스타일에서 html을 제거 할 수있었습니다. 오버로드 및 탐색이 어려운 테이블 레이아웃을 완전히 제거 할 수있게되었습니다.

CSS 블록 레이아웃을 적극적으로 사용합니다.사용 가능한 도구를 사용하여 픽셀 정밀도로 모든 페이지 구성을 만들 수 있습니다. 이 레이아웃을 픽셀 퍼펙트라고합니다. 레이아웃과 사이트의 완벽한 일치를 의미합니다. 위 사진에서 블록 레이아웃을 사용하면 모든 것이 그렇게 단순하지는 않다는 것을 알 수 있습니다. 처음에는 테이블 없이는 불가능했습니다. 기본 페이지 구성을 만드는 데 사용되었으며 블록은 개별 요소에 적용되었습니다. 이것은 그들이 블록에 높이를 설정하는 방법을 배우기 전까지였습니다.

장점

사이트의 블록 레이아웃에는 다음과 같은 장점이 있습니다.

테이블 레이아웃의 경우처럼 픽셀 너비의 투명 테두리가 없습니다.
블록은 서로에 대해 쉽게 배치 할 수 있습니다.
블록의 크기를 조정할 수있어 반응 형 디자인이 가능합니다.
겹치는 기능은 페이지 레이아웃을 방해하지 않지만 흥미로운 효과를 추가 할 수 있습니다.

추가 개발

현재 div의 블록 레이아웃은특정 상황에 대한 특별한 경우로만 사용이 제한되어 있습니다. 레이아웃에서 배치 및 배치로 대체되었습니다. 많은 단점이 있었지만 일반적으로 블록 레이아웃 이상을 허용했습니다.

그런 다음인라인 블록 요소. 이것은 프로그래머의 작업을 크게 촉진했습니다. 이 방법은 두 가지 유형의 블록 모두의 이점을 가지고 있으며보다 반응적이고 반응이 빠른 디자인을 허용합니다. 이 모든 방법이 "놀라운 레이아웃"이라는 이름을 부여한 div 요소로 구성되어 있다는 점은 주목할 가치가 있습니다.

현재 페이지 구축Flex-box 및 부트 스트랩이 사용됩니다. 코드를 크게 줄이고 고품질의 반응 형 디자인을 더 빠르고 쉽게 만들 수 있습니다. 전체 페이지를 나누지 않고 블록을 이동할 수 있습니다.