Center
-
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의 속성값에 대하여 지난 시간 박스예..
-
CSS Flexbox : Justify-Content 속성값(Flex-start, Flex-end, Center, Space-around, Space-between)컴퓨터 알아가기/HTML CSS 2021. 4. 13. 19:30
지난 시간 Flexbox 관련 display 속성값으로 flex와 inline-flex 에 대해 살펴 보았습니다. 개념을 다시 정리하자면 상위 Class (부모)에 적용된 flex는 하위 Class(자식)에도 영향을 끼치는데 상위 Class 범위안에서 영향을 끼친다라고 정의할 수 있습니다. 만일 이 말이 무슨말인지 이해가 안가면 다시한번 지난 시간 내용을 꼭 보시기 바랍니다. 어찌되었던 flex 속성값을 주게되면 기준점은 왼쪽 상단 모서리로 부터 시작이 됩니다. 이제 오늘부터 중심축(Main Axis)을 중심으로 박스영역을 이동시키는 속성인 Justify-Content에 대해 공부해 볼 겁니다. ▒ Justify-Content ① justify-content: flex-start Justify-Conte..