반응형 Study with Yedol/CSS18 CSS Grid Layout 아이템 적용 속성 Grid layout 속성은 Flex Layout과 마찬가지로 컨테이너에 적용하는 속성과 아이템에 적용하는 속성 이렇게 두 가지로 나뉜다. 오늘은 gir layout을 구성하는 아이템 적용 속성들에 대해 다뤄볼 것이다. 아이템 적용속성에는 크게 grid-column, grid-row, justify-self, align-self로 나뉜다. 앞선 컨테이너 적용 속성과 비슷한 속성들이 쓰였다. 다른 점은 단지 속성명과 적용되는 것이 아이템이라는 것!! gird에서 아이템을 배치하는 방법에는 라인 기반과 영역기반으로 나뉜다. 라인기반은 gird line을 기준으로 하여 item의 위치를 설정하는 것이고, 영역기반은 영역별 이름을 이용해 위치를 설정하는 것이다. 오늘은 라인기반을 위주로 살펴볼 것이다. 1. g.. 2024. 1. 14. CSS Grid layout 컨테이너 속성 Grid 레이아웃이란? 2차원(가로, 세로)의 레이아웃 시스템이다. 가로,세로에 관계없이 item을 container에 배치하여 레이아웃을 만든다. grid 레이아웃의 장점 행과 열을 모두 정렬하고 이동하는데 많은 도구를 제공하여, 안정된 디자인과 자유로운 요소배치를 가질 수 있다. 이러한 grid 레이아웃의 특징을 이용하여 웹페이지를 구성한다면 고차원적이면서 편리한 화면 설계가 가능하다. grid 레이아웃의 속성 grid는 flex layout과 마찬가지로 컨테이너에 적용하는 속성과 아이템에 적용하는 속성으로 나뉜다. flex layout과 grid layout 차이 flex : 가로 또는 세로를 주축으로 하여 레이아웃 배치(1차원) grid : 가로와 세로에 관계없이 레이아웃 배치(2차원) 1. gr.. 2024. 1. 12. CSS Flex레이아웃 item 적용 속성 Flex레이아웃으로 화면을 구성하는 방법에는 2가지가 있다. 1. 컨테이너에 적용하는 속성 2. 아이템에 적용하는 속성 이렇게 두 가지로 나뉘는데, 오늘은 2. 아이템에 적용하는 속성에 대해 다뤄보겠다. 배우면서 복습하는 차원에서 포스팅을 하는 거라 많이 부족하지만😰 누가 봐도 최대한 이해가 될 수 있도록 작성해 보겠습니다!!😝😝 아이템에 적용하는 속성 아이템에 적용하는 속성에는 flex-basis, flex-grow, flex-shrink 속성이 있다. 1. flex-basis : 메인 축상의 길이로, 아이템들의 기본 크기를 설정한다. 컨테이너의 flex-direction 값에 따라 달라진다. flex-direction이 row일 때는 너비(기본값), column일 때는 높이. 1️⃣auto : 기본값.. 2024. 1. 8. CSS Flex 레이아웃 컨테이너 적용 속성 CSS의 레이아웃을 구성하는 요소에는 여러 가지가 있다. 화면배치를 쉽고 유연하게 사용하기 위해서는 이러한 속성들을 이용한다. 이전에는 float나 inline-block 등을 이용한 방식들이 쓰였지만 현재는 flex와 gird를 보편적으로 많이 쓴다. ❗참고❗ float란? 원래는 웹페이지에서 이미지를 어떻게 배치할 것인가에 대한 속성으로 쓰였지만, 현재는 레이아웃용으로 태그와 클래스 등의 요소들을 웹페이지에서 어떻게 구성할 것인가로 많이 쓰인다. inline-block란? display속성에서 inline속성과 block속성의 특징을 모두 가지고 있는 속성 inline 속성 처럼 흐름을 따라 나열되지만, block속성처럼 width, height를 이용해 크기 설정이 가능하다. 이를 활용하여 레이아웃.. 2024. 1. 7. 이전 1 2 3 4 5 다음 반응형
