flexbox
-
CSS Flexbox : 간단한 홈페이지 레이아웃 꾸며보기컴퓨터 알아가기/HTML CSS 2021. 5. 13. 19:30
이제 HTML도 CSS도 전문가 수준은 아니지만 어느정도 개념을 잡았으니 홈페이지 화면(Main Page)을 한번 꾸며 볼까 합니다. 우선 다음과 같은 순서로 진행해 볼까 합니다. ① 어떤 주제로 할건가 ② Main Page의 태그는 어떤 구성으로 할 건가 ③ 필요 이미지가 있는가 ▒ Main Page 만들기 저는 과일가게에서 판매되는 과일을 홍보해 보고자 합니다. 과일에 대한 이미지도 필요할 거고 이름 가격 등등이 필요할 건데 이번 시간에는 레이아웃에 중점을 두기 위하여 Main Page의 큰 틀만 만들어 보는 것으로 목표를 두겠습니다. 구성은 다음과 같이 해 보겠습니다. 다른 HTML을 사용한 적이 없기때문에 태그안에 4개의 Division으로 나눴습니다. 다음과 같이 HTML로 구성해 보았습니다. ..
-
CSS Flexbox : Flex-grow, Flex-basis컴퓨터 알아가기/HTML CSS 2021. 4. 20. 19:30
지난시간까지 Flexbox의 성질에 대해 알아 보았습니다. 저처럼 기본에 대한 내용만 확인하고자 하면 지난시간까지 한 Justify-content는 가로로 위치를 배치하는 것이고 Align-items는 세로로 위치를 배치하는 개념이다라고 생각하면 될 것 같습니다. 이제부터는 하위 Class에 Flex 속성을 주어 자체가 어떻게 변할 수 있는지 좀 더 알아보도록 하겠습니다. ▒ Flex-grow Flex-grow 속성은 하위항목에 적용하여 상위 Class(container)영역안에서 flexible하게 위치를 자동으로 조정하도록 합니다. 글 보다는 다음 예제를 통해서 이해를 하도록 하겠습니다. 우선 HTML 에 3개의 박스 영역을 만듭니다. CSS를 다음과 같이 해봅니다. 이제 영역의 색상을 달리하여 이해..
-
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..
-
CSS Flexbox : Display 속성 (Flex, Inline-flex)컴퓨터 알아가기/HTML CSS 2021. 4. 12. 19:30
이번 시간부터는 최신트렌드인 Flexbox Layout에 대해 공부하고자 합니다. 그동안 Box와 Display 개념을 배우고 이미 알고 있기때문에 최근에 CSS3용으로 개발된 레이아웃 배치하는 Flexbox에 대해 공부를 한다면 CSS의 기본은 어느정도 알고 간단고 보면 됩니다. Flexbox 레이아웃에는 Flex Containers 와 Flex Items 두가지 중요요소가 있습니다. Flex Containers의 모든 하위 항목은 Flex Items 입니다. 지금부터 각 속성에 대해 하나씩 보도록 할게요. 그리고나서 간단한 홈페이지를 만들면서 연습해보고자 합니다. 이는 저에게도 도전이 될 것 같습니다. ▒ display: flex Flex Container는 화면 크기 변화에 대응하는 웹사이트를 만드..