align-items
-
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 : Align-items 속성값 (Flex-start, Flex-end, Center, Baseline, Stretch)컴퓨터 알아가기/HTML CSS 2021. 4. 15. 19:30
지난시간까지는 Flexbox의 기본성질인 Justify-content에 대해 알아 보았습니다. 상위 Class 영역내에서 왼쪽 상단 모서리부터 시작이 되는 기본성질이었습니다. 아울러, 상위 Class영역안에서만 하위 Class 항목이 유연하게(flexible) 조절된다는 것도 이해 하였습니다. 이제는 수직적으로 배치하는 성질에 대해 알아볼 시간입니다. 역시 본 강의 또한 Codecademy에서 무료로 배우고 있습니다. 물론 영어로 되어 있지만 초보들에겐 좋은 강의인것 같습니다. 이외 여러가지 사이트에서 무료로 강좌를 열고 있네요. 참 고마운 분들입니다. (특히 baseline을 이해하는데는 다른 여러강좌를 참조했네요) ▒ Align-items 속성 Align-items의 속성값에 대하여 지난 시간 박스예..