CSS 레이아웃의 현재 상태(개요)

고맙습니다. 이전 시스템 개발에서 일부 이전 책상 배치@tomiiii3z를 사용했습니다.

↑ 빙하기의 빙층에서 발견@tomiiii3z(인간 코타그 테블레스)
직장인들이 최근 휴대전화 개발 분야에서 플렉스박스의 판면 디자인을 미리 알면 편리하다는 얘기가 있어서요.
나는 현재의 배치 방법을 조사했다.

테이블 탭 사용하기

물론 테이블 탭을 사용하여 표 요소를 출력할 수 있습니다
지면 디자인에 쓰면 나처럼 사는 시대착오적인 사람이 된다.
지금은 이미 편리한 세상이다.
플렉스박스나 Grid Layout 같은 편리한 것들이 존재한다.

↑ 탭으로 강제로 설정한 레이아웃

Flexbox 소개

CSS의 레이아웃 모드는 상자 레이아웃을 유연하게 할 수 있습니다.(인라인 아님 프레임)
흔히 볼 수 있는 가로 디자인을 쉽게 조합할 수 있다.
Flexbox는 React Native에서 레이아웃 방법으로 사용됩니다.

.container {
  display: flex;
  max-width: 750px;
  margin: 0 auto;
}

.dogeza-item {
  width: 100px;
  margin: 0;
  padding: 10px;
  box-sizing: border-box;
}

↑ 플렉스박스에 가지런히 배열된 흙 밑자리

Grid Layout 소개

격자 스타일을 사용하여 페이지를 열과 줄로 나눌 수 있습니다.
전체 페이지의 정렬 방식을 결정하는 데 적합하다.

<div class="wrapper">
  <div class="header"></div>
  <div class="sidebar1"></div>
  <div class="content"></div>
  <div class="sidebar2"></div>
  <div class="footer"></div>
</div>

.wrapper {
  display: grid;
  grid-template-columns: repeat(5, 100px);
  grid-gap: 0px;
  grid-template-rows: repeat(6, 100px);
}
.header {
  grid-column: 1 / 6;
  grid-row: 1;
}
.sidebar1 { 
  grid-column: 1;
  grid-row: 2 / 6;
}
.sidebar2 {
  grid-column: 5;
  grid-row: 2 / 6;
}
.content {
  grid-column: 2 / 5;
  grid-row: 2 / 6;
}
.footer {
  grid-column: 1 / 6;
  grid-row: 6;
}

일반적인 사이트 레이아웃 형태를 사용하지 않아도 꺼리는 테이블은 Grid Layout에서 구성할 수 있다.

이렇게 나도 원시인을 졸업했다!!

앞으로 테이블 라벨로 더 이상 레이아웃 안 해요!!
약속을 어기면 360도 카메라에 찍힌 토하좌 이미지를 바탕으로 제작된 VR 이미지를 올린다.
※ 어느 쪽이든 자세히 설명하는 사이트가 있습니다.자세한 내용은 저쪽을 참고하세요.
지금 기억하고 싶어!엔지니어를 위한 CSS 기초 강의~Flexbox 레이아웃 편~
https://nulab-inc.com/ja/blog/nulab/css-basics-for-engineer-flexbox/
다음 포석은 Grid Layout이 정하는 건가요?피쳐로 구분된 CSS 레이아웃 방법
https://ics.media/entry/15921
<영상 소재>
Icon-rainbow씨http://icon-rainbow.com/
상형 통조림http://pictkan.com/
프로파일 설계http://kage-design.com/wp/