2020년 웹 페이지 레이아웃

작성자 Facundo Corradini✏️
디자이너와 개발자가 다른 세계에서 왔다고 생각한다면 10년이나 20년 전의 상황을 봐야 한다.인터넷 초기에 우리는 사이트를 구축하는 동시에 사이트가 무엇인지, 그리고 어떻게 일을 해야 하는지 알아내려고 했다.
인쇄 배경에서 온 디자이너는 이미 알고 있는 차원 화포의 특성(과 한계성)에 익숙해져 본질적으로 완전히 다른 매체로 설계하여 그것들을 복제하려고 한다.개발자들은 초기 CSS의 극히 제한된 기능과 격렬하게 투쟁하여 완전히 다른 브라우저에서 이러한 디자인을 실현하려고 시도하고 있다.
이 모든 과정에서 사용자는 접근할 수 없고 사용하기 어렵고 미적 감각이 없는 인터넷 체험을 얻었다.
시간의 추이에 따라 우리는 핵심 규칙 집합에 동의했다. 이 규칙 집합은 대칭열의 개념을 바탕으로 한다. 예를 들어 960.gs, 이 규칙은 나중에 많은 유행하는 구조에서 실현되었다. 예를 들어 Bootstrap을 포함한다.이것은 절차를 간소화하고 디자이너, 개발자, 사용자가 편안함을 느끼는 통용 언어를 제공했다.
그러나 나는 네트워크 구조가 이때부터 정체되었다고 느낄 때 나만 있는 것이 아니라고 확신한다.우리는 모두'모든 사이트가 똑같아 보인다'는 모방을 보았기 때문에 이 모방들이 똑같아 보이기 시작했다.

초기 이래로 CSS는 이미 긴 길을 걸었고 개발 주기는 지난 몇 년 동안 크게 빨라졌다.마지막으로 웹 레이아웃은 더 이상 해커 공격이 아니다.
우리는multicol,flex,grid를 사용하여 전대미문의 자유를 얻었다.우리는 마침내 대칭열의 범례를 돌파하고 우리가 꿈에도 생각하지 못했던 각종 기능을 사용할 수 있게 되었다.우리는 더 이상 21세기 초에 처하지 않는다.
새로운 규범은 우리가 몇 년 전에 사용할 수 없거나 응답성이 부족해서 포기한 구조를 구축할 수 있도록 한다.그래서 이 개념들을 재검토할 때가 됐다고 생각합니다.아마도 우리는 알 수 없는 인터넷 화포에 적응하기 위해 유사한 인쇄물의 구조를 가지고 돌아올 수 있을 것이다.

올해 초, 제인 시몬스(Jenn Simmons)는 이 잡지들을 영감으로 발표하여 그들이 어떻게 인터넷을 위해 일하는지 알고 싶어 했다.나는 계속해서 그것들을 코드로 바꾸었다. 그러면 우리는 모든 사람들이 하는 일과 다른 웹 레이아웃을 구축하는 핵심 개념을 탐색할 수 있다.2020년처럼 네트워크 구조를 구축하는 방법은 다음과 같다.


제인 시몬스

일하지 마.일하지 마.오늘은 일요일입니다.카페에서 좀 추워요.무작위 잡지를 읽다.아... 아, 잠깐만, 우리 CSS에서 이렇게 해도 돼요?이 계발을 받은 시범은 얼마나 멀리 갈 수 있습니까?세상에, 우리는 배제 규범을 실시하고 개선해야 한다.그리고 리지. - 일 그만!!근데 우리 시연하자!
16:2019년 1월 13일 오후 58시
십육
304

사고가 민첩하고 점진적인 구조

정의에 따라 네트워크 설계는.인터넷은 다양한 사이즈의 기기에서 접근할 수도 있고, 각종 브라우저를 통해 접근할 수도 있다. 작은 모바일 기기, 심지어 시계, 거대한 4K 스마트 텔레비전까지 도형 디스플레이를 기반으로 하지 않는 여러 가지 대체 방법은 말할 것도 없다.
따라서 잡지 지면을 인터넷으로 바꾸는 첫 번째 도전은 그 어떤 장치에도 어떻게 적응해야 하는지를 고려하는 것이다.이런 방법이 더 이상 유효하지 않은 경계는 어디에 있습니까?대체 방안은 어떻게 해야 합니까?브라우저는 실현될 때 어떤 기술적 제한에 부딪힐 수 있습니까?
이런 구조를 감안하여 나는 도전적인 부분을 확정했다.

다중 레이아웃은 더 넓은 장치에서 작업할 수 있지만 비교적 작은 화면 크기로는 통하지 않을 것이다.

제목 자체에'중심 부동'이 있는 것은 대부분의 브라우저가 어떻게 처리해야 할지 모르는 것이다.

두 열 사이의 소개 단락은 좀 까다로울 수 있다.

다행히도 우리가 처음부터 점진적인 증강 방법을 고려했다면 해결 방안은 거의 스스로 해결할 수 있었다.우리는 모든 서로 다른 층을 점진적인 강화로 간주할 수 있다. 미디어 조회를 사용하여 서로 다른 뷰포트 크기의 레이아웃에서 안전한 방식으로 새로운 기능을 추가하고, 기능 조회를 사용하며, 심지어는 접근 가능한 상품을 추가한다. 예를 들어 prefers-reduced-motion 또는 dark mode with prefers-color-scheme모든 층은 한 층을 덮어쓰고 주어진 설비에 최상의 사용자 체험을 창조할 수 있다.
개인적으로 저는 웹 사이트에서 CSS가 없으면 모든 것을 불러오는 것을 좋아합니다.이것은 합리적인 순서로만 의미 표시를 사용할 수 있다는 것을 의미한다.브라우저의 기본 스타일로 계속 벗겨져도 웹을 사용할 수 있도록 합니다.

<article class="print-like">
  <header class="intro">
    <h1 class="title">Print-like Layouts on the web</h1>
    <p class="summary">We've been stuck for decades in the simetrical columns paradign. Let's try to spice things up a little.</p>
    <address class="author">By <a rel="author" href="https://twitter.com/fcorradini">Facundo Corradini</a><br/>
    </address>
  </header>
  <img class= "main-image" src="https://placeimg.com/640/480/animals/sepia" alt="random image"/>
  <section class="main-text">
    <p>...</p>
    <p>...</p>
    <p>...</p>
  </section>  
</article>

CSS가 없어도 문서 구조는 브라우저가 어느 정도 사용할 수 있는 기본값을 제공할 수 있도록 보장합니다.
논리적 순서의 의미 표기는 우리가 제목, 소개, 단락에서 벗어나 점점 더 넓은 화면과 서로 다른 기능의 구조를 강화할 수 있다는 것을 의미한다.
가장 좋은 것은 이동 레이아웃은 일반적으로 브라우저의 기본 레이아웃과 큰 차이가 없다는 것이다.물론 우리는 조판, 간격 등 방면에 대량의 정력을 투입했지만 전통적인 블록 구조를 제외하고 이동 내용은 그 어떠한 형식으로도 나타나지 않았다. 왜냐하면 요소는 하나하나 흐르기 때문이다.
약간의 조형은 소형 이동 설비에 그럴듯한 구조를 제공했다.
그리고 우리는 좀 큰 화면 사이즈를 생각할 수 있다.뷰포트가 충분히 넓으면 두 열을 수용할 수 있지만 넓지 않아 전체 배치를 수용할 수 없다면 어떻게 해야 합니까?
제목과 프로필을 우선시하는 것은 일리가 있지만, 단락을 두 열로 하고, 너비는 가변적이며, 필요에 따라 증가한다.
미디어 검색에서 텍스트 용기를 여러 열 레이아웃으로 변환하기만 하면 됩니다.

@media screen and (min-width: 600px){
  .print-like{
    display: grid;
  }
  .main-image{
    grid-row: 3/4;    
  }
  .main-text{
    column-count: 2;
  }
  .main-text :first-child{
    margin-top:0;
  }
  .main-text :last-child{
    margin-bottom: 0;
  }
}

여러 열 + CSS 메쉬를 사용하여 이미지를 끝까지 이동합니다.
뷰포트가 충분히 커서 모든 열을 수용할 수 있을 때 (중간 용기 포함) 열 간격 속성을 사용하여 중간의 제목과 프로필 공간을 지우고 간단한 격자 설명을 사용하여 용기에 요소를 배치할 수 있습니다.최초의 디자인은 3분의 1을 바탕으로 했지만 중심 기둥을 고정된 너비로 유지하고 측면 기둥을 용기에 적응시키는 것을 선택했다. 마치 우리가 대칭 기둥 모델을 깨뜨릴 때 무슨 일이 일어날지 실험과 같다.

@media screen and (min-width: 900px){
  .print-like{
    grid-template-columns: 1fr 300px 1fr;
    align-items: center;
  }
  .intro{
    grid-row:1;
    grid-column: 2/3;
    max-width: 0px;
  }
  .main-text{
    column-gap: 310px;
    grid-row: 1;
    grid-column: 1/4;
  }
  .main-image{
    grid-column: 1 / -1;
    margin: 0 auto;
  }
}

CSS 격자 선언은 격자 간격이 지워진 공간에 제목과 프로필을 배치할 수 있도록 합니다.
마지막 터치는 지면을 만드는 터치입니다. 제목을 둘러싼 텍스트입니다.불행하게도 CSS 배제를 사용해서 이 효과를 만들어야 합니다. float: center 이런 것이 없기 때문입니다.이것은 IE11과 Edge만이 이런 체험을 제공할 수 있다는 것을 의미하는데, 이것은 매우 풍자적이다.그러나 다른 브라우저는 최종적으로 이 기능을 실현하기로 결정할 때 코드가 작동할 수 있는 완전한 레이아웃을 제공합니다. (규범이 바뀌면 미세한 조정이 있을 수 있습니다.)

@media screen and (min-width: 900px){
  @supports (-ms-wrap-flow: both){
    .title{
      -ms-wrap-flow: both; /* CSS exclusions! */
      position: absolute;
      right: 25%;
      padding: 10px 20px;
    }
  }
}

(MS Edge) 메쉬, 다중 색상 및 제외를 지원하는 브라우저의 시각화
이러한 모든 레이어의 최종 레이아웃은 다음과 같습니다.

결론

우리가 명확하게 말하자면, 나는 현재의 모델이 틀렸다고 말하는 것이 아니라, 사이트가 잡지처럼 보여야 한다는 것도 아니고, 심지어는 멀티코어를 사용하기 위해 변호하는 것도 아니다.나는 단지 약간의 혁신이 우리의 포석을 돋보이게 할 수 있다고 생각했을 뿐이다.우리는 마침내 적당한 도구가 생겨서 웹 페이지의 구조를 더욱 다양화시켰다.
편집자: 이 문장에 무슨 문제가 있습니까?정확한 버전 을 찾을 수 있습니다.

여기 있다 플러그: , 웹 어플리케이션용 DVR

 
LogRocket
 
는 프런트엔드 로그 기록 도구로 자신의 브라우저에서처럼 문제를 재생할 수 있다.LogRocket은 오류가 발생한 원인을 추측하거나 화면 캡처와 로그 저장을 물어보지 않고 세션을 다시 재생할 수 있도록 합니다.프레임워크가 어떻든지 간에 모든 응용 프로그램과 완벽하게 어울릴 수 있으며, 플러그인은 Redux, Vuex, @ngrx/store의 추가 상하문을 기록합니다.
 
LogRocket은 Redux 작업과 상태를 기록하는 것 외에도 콘솔 로그, JavaScript 오류, 스택 추적, 헤더+본문이 있는 네트워크 요청/응답, 브라우저 메타데이터와 사용자 정의 로그를 기록합니다.또한 DOM은 페이지의 HTML과 CSS를 기록하여 가장 복잡한 단일 페이지 응용 프로그램이라도 픽셀 수준의 비디오를 재구성합니다.
 
LogRocket .
게시물Try it for free이 먼저 Web layouts like it’s 2020에 올라왔다.