align-content
-
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 Flexbox : Flex 속성축약, Flex-wrap, Align-content컴퓨터 알아가기/HTML CSS 2021. 4. 21. 19:30
지난시간까지 Flex-grow, Flex-shrink, Flex-basis의 3가지 속성에 대해 연습해 보았습니다. 이 3가지를 다음과 같이 CSS에서 나타낸다고 가정해 보겠습니다. 이럴 경우 순서대로 다음과 같이 나타낼 수 있습니다. 이는 속성값만 표시하면 grow, shrink, basis 순으로 CSS는 인식한다는 이야기입니다. 그렇다면 다음은 무엇을 뜻할까요? 정답은 Flex-grow값과 Flex-shrink값입니다. 그렇다면 다음은요? 정답은 Flex-grow와 Flex-basis 값입니다. 그런데 기억해야 될 사항은 Flex-shrink와 Flex-basis에 대한 속성 축약은 없습니다. ▒ Flex-wrap 상위 Class(Container)의 영역이 하위 Class(contents)영역보다..