[CSS] 레이아웃 방법 요약
개요
CSS를 사용하는 다양한 레이아웃 방법을 검증하고 고려합니다.
실시
@kura07 선생의 CSS Grid Layout 최고!(기초편)에 예시된 다음과 같은 구조는 각종 방법으로 실현된다.width 및 height 컴포넌트는 각각 고정되거나 가변적입니다.
또한 개인 코드의 쓰기 쉽기 때문에 HTML은 Pug로, CSS는 SCSS로 기술한다.
float + calc()
calc() 함수를 사용하여 가변 부분의 길이를 동적으로 계산합니다.float 어떤 요소로 어느 방향으로 향하는지, 필요에 따라clearfix 등의 대응을 해야 한다.
See the Pen calc() by Takuya HARA ( @takuyahara )
on CodePen .
브라우저 대응 상황
https://developer.mozilla.org/ja/docs/Web/CSS/calc#Browser_compatibility
@kura07 선생의 CSS Grid Layout 최고!(기초편)에 예시된 다음과 같은 구조는 각종 방법으로 실현된다.
width 및 height 컴포넌트는 각각 고정되거나 가변적입니다. 또한 개인 코드의 쓰기 쉽기 때문에 HTML은 Pug로, CSS는 SCSS로 기술한다.
float + calc()
calc() 함수를 사용하여 가변 부분의 길이를 동적으로 계산합니다.float 어떤 요소로 어느 방향으로 향하는지, 필요에 따라clearfix 등의 대응을 해야 한다.See the Pen calc() by Takuya HARA ( @takuyahara )
on CodePen .
브라우저 대응 상황
https://developer.mozilla.org/ja/docs/Web/CSS/calc#Browser_compatibility
Flexbox
세로 또는 가로 1차원으로 원소를 배열하는 방향을 지정합니다.종횡 배치가 착란한 상황에서 매번 포장 요소가 필요하다. 본 예에서 3개의 포장 요소를 사용했다p>
See the Pen Flexbox by Takuya HARA ( @takuyahara )
on CodePen .
브라우저 대응 상황
https://developer.mozilla.org/ja/docs/Web/CSS/flex#Browser_compatibility
Grid Layout
종횡의 2차원으로 배열 요소의 방향을 지정하기 때문에 포장 요소는 하나만 있으면 된다.표 레이아웃은 CSS가 구현한 것처럼 직관적이고 이해하기 쉽다.최신 속성이기 때문에 구식 브라우저에 대한 대응이 과제인가요p>
See the Pen
Grid Layout by Takuya HARA ( @takuyahara )
on CodePen .
브라우저 대응 상황
https://developer.mozilla.org/ja/docs/Web/CSS/grid-template#Browser_compatibility
おまけ
Table Layout
이전에 사용했던table 라벨의 레이아웃을 사용합니다.구식 브라우저에 직관적으로 대응하지만 의미의 관점에서는 추천하지 않는다p>
See the Pen
Table Layout by Takuya HARA ( @takuyahara )
on CodePen .
Reference
이 문제에 관하여([CSS] 레이아웃 방법 요약), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/TakuyaHara/items/919dd499d0b4adf65cc1텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
