격자 배우기 5가지 기교

When it comes to structuring your webpage using HTML and CSS, the most commonly used instruments are Flexbox and Grid. This week, my course has been covering Grid in a bit more detail, and I've had a chance to hear several points of confusion among those learning it for the first time, so rather than step you through how to implement Grid, I've decided to drop five tips for understanding it better, which will help you wrap your head around this effective and important concept.

For what it's worth, if you do want a step-by-step guide, I can highly recommend A Complete Guide to Grid . Grid를 사용할 때마다 나는 하나의 옵션 카드에서 그것을 열 것이다. 그러면 나는 빠른 참고를 할 수 있지만, 그것을 사용하기 몇 번 전에, 너는 그것을 하나하나 훑어보아야 할 것이다.Grid에 익숙하고 "span"속성에 대한 연습을 원한다면 this fun CSS Grid game where you use Grid properties to water a garden 를 시도하십시오.
현재 우리는 이 점을 토론했고 두 개의 자원을 얻었습니다. 당신이 알아야 할 격자에 대한 내용을 보여 드리겠습니다.

Grid is used to structure an entire page

What properties apply to containers, and what properties apply to inner elements

Grid works in two directions, Flexbox works in one

You can name Grid areas to make styling easier

It is common practice to use Flexboxes within Grid

...그 밖에 저는 마지막으로 코드의 가독성, 미관을 유지하고 귀하의 사이트를 방문하는 모든 사람에게 유용하도록 bonus tip 를 추가했습니다.
이러한 격자 힌트를 이해하고 이를 사용하여 페이지의 구조를 지도할 수 있다면, 페이지를 구축하는 것이 훨씬 쉬워질 것이며, 장기적으로 보면 코드가 더욱 깨끗하고 유지보수하기 쉬워질 것이다.

1. 전체 페이지를 만드는 데 사용되는 격자 이해

격자의 주요 용도는 전체 페이지를 구축하는 것이다.격자(또는 Flexbox)가 나타나기 전에 페이지의 구조는 HTML을 사용하여 완전히 이루어져야 합니다.이것이 바로 me as a little girl learning HTML in the 1990s 같은 프로그래머가 iframe과table 요소를 어떻게 사랑하게 되었는지이다. 왜냐하면 그들은 몇 안 되는 사이트 구조와 형식을 제공하는 방법 중의 하나를 대표하기 때문이다.

이제 이 신기한 도구가 생겼다. 그것은 당신의 요소를 깔끔한 구조로 배열할 수 있다.자기가 운이 좋다고 생각해!
격자에서 단일 요소를 찾을 수 있지만, 그것을 사용하는 가장 좋은 방법은 전체 페이지를 구축하는 것이다.다음은 다음과 같은 예입니다.

격자에서 이것은 세 줄의 두 열로 구성된 여섯 개의 단원 격자로 눈썹과 꼬리가 두 열을 뛰어넘는다.

격자를 사용하면 이 구조를 보호할 수 있고 페이지에서 아무런 이동도 일어나지 않는다는 것을 알 수 있습니다.
Back to Top

2. 용기에 적용되는 것과 내부 부품에 적용되는 것을 명확히 한다

격자를 배울 때 가장 흔히 볼 수 있는 초보자 문제 중 하나는 격자 용기와 격자 요소가 어떤 속성을 응용했는지 곤혹스러워하는 것이다.다음은 몇 가지 빠른 안내서입니다.

display: grid 메쉬 컨테이너 전용

전체 장소에 적용되는 모든 격자 속성은 용기

에 놓아야 한다

특정 상자의 모든 내용에만 적용됩니다(예: -self 또는 grid-column/grid-row로 끝나는 모든 내용) 단일 격자 요소 스타일에 적용됩니다

Back to Top

3. Grid 양방향 작업, Flexbox 단방향 작업

초보자로서 Flexbox와 Grid를 구분하는 것은 곤혹스러울 수 있다.확실히 모바일 디자인이 점점 우선시됨에 따라flexbox는 전체 페이지 구조에 사용되는데 격자는 왜 존재하는가?무슨 차이가 있습니까?
간단히 말하면, Flexbox는 한 방향(행 또는 열)에서 작동합니다. 예를 들어, 여러 요소가 Flexbox 행을 채우려면 각 요소의 너비 또는 flex-basis 을 지정해야 합니다.
격자에서 구조 너비와 높이 규격은 용기 스타일의 일부로서 단일 요소에서 완성된 것이 아니라 페이지 전체 구조를 볼 수 있는 위치를 제공합니다.이런 의미에서 보면 페이지 구조에 대한 명확한 개술이 훨씬 간단하다.예:

#container {
   display: grid;
   grid-template-columns: 150px auto 300px;
   grid-template-rows: 50px auto 50px;
}

여기에 열 너비가 설정되어 있습니다. 왼쪽 150px, 오른쪽 300px, 중간 공간은 나머지 부분을 채울 것입니다.마찬가지로 줄도 설정되었습니다. 맨 위 50px, 맨 아래 50px, 중심이 나머지 부분을 채웁니다.
flexbox에서 같은 효과를 얻기 위해서는 네 개의 용기 (예를 들어 열 용기와 세 개의 단독 flexbox 줄) 가 필요하거나 flex-wrap 를 특정한 블록 크기와 결합해서 사용해야 합니다.그것은 매우 혼란스러워질 수도 있다. 이런 구조를 찾을 때 그물을 사용하면 많은 시간을 절약할 수 있다.
간단하게 말하면 격자는 두 방향에서 작업하고 기본 구조는 용기 요소에서 완성되며 Flexbox는 한 방향에서만 작업하며 이 방향을 초과하는 모든 구조는 단일 요소에서 이루어져야 한다.

4. 격자 영역의 이름을 지정하여 스타일을 쉽게 만들 수 있습니다.

메쉬가 구조를 보다 쉽게 볼 수 있다는 것을 설명하기 위해 메쉬에는 CSS에서 특정 메쉬 영역을 겨냥하기 쉽도록 메쉬 영역을 명명할 수 있는 좋은 기능이 있습니다.
다음은 위에서 살펴본 구조 예입니다.

#container {
   display: grid;
   grid-template-areas: 
      "header header"
      "sidebar main"
      "footer footer"
}

페이지를 보지 않아도 CSS에서 사용 중인 레이아웃을 볼 수 있습니다.요소를 해당 메쉬 영역에 연결하려면 grid-area 속성을 사용하여 해당 섹션에 지정된 이름만 사용하십시오.
예:

header {
   grid-area: header;
}

footer {
    grid-area: footer;
}

보시다시피, 이것은 줄과 열 표시기나 경계 집합을 사용하는 것보다 더 쉽게 읽을 수 있습니다.
Back to Top

5. 일반적으로 전력망 내에서 Flexbox 사용

Grid와 Flexbox 간의 차이점을 논의한 후에 이 두 가지를 혼동해서는 안 된다고 생각할 수도 있습니다.절대 그렇지 않아!메쉬 구조에서 Flexbox를 사용하는 것은 일반적인 방법입니다.
앞의 예시를 예로 들면, 머리글과 꼬리는 flex-direction: row 속성을 가진 Flexbox 용기일 수 있고, 본문과 사이드바는 flex-direction: column 속성을 가진 Flexbox 용기일 수 있다.페이지의 모든 부분에서 파란색 화살표를 사용하여 구부러진 방향을 표시하는 방법을 보여 줍니다.

또한 Flexbox 및 flex-direction: row 를 사용하여 이미지와 텍스트 조합을 포지셔닝할 수 있습니다.여기서 빨간색 화살표는 이러한 Flexbox를 나타냅니다.

Back to Top

추가 팁: 격자에서 의미 HTML 요소를 사용해야 합니다

테크닉 4를 읽을 때: 격자 영역을 단순화하기 위해 명명할 수 있습니다. 이것은 의미 HTML 요소를 사용하지 않는다는 것을 의미할 수 있습니다. 예를 들어 <main>, <sidebar>, <nav> 등입니다. 격자 영역 이름이 어떻든 의미 요소를 사용하는 것은 좋은 생각입니다.스크린 리더와 같은 시스템이 실제로 격자 스타일을 시력 손상자의 구조 지침으로 삼지 않았기 때문이다.이러한 도움말은 페이지의 실제 HTML 프레임워크에서만 표시됩니다.
이외에도 코드를 되돌아보거나 다른 사람이 코드를 볼 수 있도록 할 때 의미 HTML 요소를 사용하면 곤혹스럽게 바다를 쳐다보는 것이 아니라 현재 벌어지고 있는 일을 더욱 쉽게 느낄 수 있습니다.
따라서 격자 구조와 상관없이 의미 HTML 태그를 계속 사용하십시오!
Back to Top