Grid
-
CSS Grid Layout : Align items, Align content, Justify self, Align self, Grid auto rows, Grid auto columns, Grid auto flow컴퓨터 알아가기/HTML CSS 2021. 5. 20. 19:30
지난 시간까지는 justify-items와 justify-content 속성에 대해 이해를 해봤습니다. 이제부터는 Grid Layout을 공부해보도록 하겠습니다. ▒ Align items와 Align content속성 이제는 items와 content속성을 같이 봐야 할 것 같습니다. Grid 영역내에 어떻게 변하는지 지난 시간 기준으로는 items는 Box item에 직접 영향을 미치고 content는 전체 Grid에 전체 영향을 미쳤습니다. 이제 Align items와 Align content를 같은 개념으로 보면 상하로 변동이 있을겁니다. 다음 브라우저를 기준으로 설명해 보겠습니다. 상기 브라우저에 대해 잠깐 설명하면 이동하는 위치를 보기 위해서 태그 높이를 더 주었습니다. 상기 그림은 Defaul..
-
CSS Grid Layout : Justify items, Justify content컴퓨터 알아가기/HTML CSS 2021. 5. 19. 19:30
Grid Layout을 이해하기 위해서는 축 개념을 바로잡고 있어야 합니다. 지금까지 x축과 y축의 이해를 높혔습니다만 한가지 반드시 기억해야할 점은 Row는 행이라는 뜻인데 무조건 수평으로 나뉘는 개념으로 이해하시면 됩니다. 수평으로 나눈다라는 것은 높이를 수평으로 계속 자른다라는 개념이고 Column은 그 반대 개념이겠죠? 이 개념이 이해되기전에는 어떠한 진도도 나가지 않는게 나중에 훨씬 더 빨리 진도가 나갑니다. ▒ Justify items 속성 justify-items 속성은 수직축을 중심으로 좌우로 위치를 조정하는 속성입니다. Flexbox와 같은 개념입니다. 속성값으로는 Grid의 왼쪽 기준인 start, 오른쪽 기준인 end, 중앙배치인 center, 해당 Grid까지 확장하는 stretch..
-
CSS Grid Layout : Grid-template-area 속성, Overlapping(중첩) 요소처리컴퓨터 알아가기/HTML CSS 2021. 5. 18. 19:30
이제부터는 CSS Grid Layout에 대해 조금 더 들어가 보겠습니다. ▒ grid-template-area 속성 본 속성을 사용하면 grid-row-start, grid-row-end, grid-column-start, grid-column-end, grid-area 속성값으로 사용되는 섹션에 이름을 지정하고 관리할 수 있게 해줍니다. 다음 HTML과 CSS를 기준으로 이야기를 풀어 나가겠습니다. 상기 HTML코드를 보면 이제 홈페이지의 기본구성을 볼 수 있습니다. 및 태그가 위 아래 배치가 되고 웹사이트를 찾아갈 수 있게 만드는 Navigation 섹션인 태그 그리고 본문으로 구성되어 있는 태그로 이루어져 있습니다. CSS코드를 아래와 같이 만들고 웹페이지를 한번 보겠습니다. ① 수직과 수평 Gr..
-
CSS Grid : Repeat함수, Minimax함수, Grid gap, Grid items, Grid area컴퓨터 알아가기/HTML CSS 2021. 5. 17. 19:30
▒ Repeat( ) 함수 Grid의 속성값으로 repeat( ) 함수를 사용할 수 있습니다. 행과 열을 만들때 좀 더 간소화한 코딩을 위한 겁니다. 다음과 같은 예가 있습니다. 위 예는 넓이가 300px을 3개로 나누는데 각각의 크기는 100px이라는 뜻입니다. 즉 다음은 같은 CSS 코드입니다. repeat(3, 100px) = 100px 100px 100px 그럼 repeat(2, 300px 500px)은 어떻게 해석이 될까요? => 300px과 500px을 2번 반복하라의 뜻입니다. 즉, 300px 500px 300px 500px 총 4개의 수직으로 나뉘어지겠죠. 지난 시간 다루었던 다음 그림을 repeat( )함수로 바꾸어 보겠습니다. 위 그림을 보면 수직으로는 반복이 힘들고 수평으로는 같은 F..
-
CSS Grid : Grid-template-columns, Grid-template-rows, Grid-template, Fraction 속성컴퓨터 알아가기/HTML CSS 2021. 5. 14. 19:30
Grid 격자에 대해 공부해 보도록 하겠습니다. 쉽게 표현하자면 하나의 큰 영역(container)안에 바둑판같은 격자(box)를 형성한다고 보면 되겠습니다. 우선 순위는 행 기준인데 행과 열을 지정함으로써 격자가 생기겠지요. 즉 container가 상위 영역이고 box가 하위 영역이어야하고 상위 영역을 Parent, 하위 영역을 Children이라고 영문은 되 있더라구요. Flexbox 처럼 display속성에 grid를 주면 상위 영역안으로 하위 영역이 배치가 되는 구조라고 보시면 됩니다. 다음 HTML과 CSS 그리고 이에 따른 브라우저의 모양을 기준으로 설명 드리겠습니다. (기준은 Codecademy가 메인이고 추가 여러 소스에서 공부하고 같이 내용을 담도록 하겠습니다. ) 위 예제에서 상위 영역..