그리드2 [프론트엔드][CSS] TIL Day-16 Grid 그리드(Grid layout) CSS Grid는 수평선과 수직선으로 이루어진 집합체(격자무늬)로 웹페이지를 위한 이차원 레이아웃 방법이다. 플렉스는 수평이나 수직 중 하나를 기준(1차원)으로 해서 요소를 배치하지만, 그리드는 수평과 수직 어느 방향이든(2차원) 배치할 수 있다. 콘텐츠를 행과 열에 배치할 수 있으며 복잡한 레이아웃을 직접 직관적으로 구축할 수 있는 기능들(아래에 기술할 예정)이 많이 있다. ∨ 사용해서 좋은 점? - 한 화면을 여러 개의 칼럼으로 구성해서 밑으로 늘어뜨리는 그리드 레이아웃은 이미 많은 시각 매체에서 사용하여 그리드 레이아웃 웹사이트 디자인은 사용자에게 안정감을 준다. - 실제 내용을 넣지 않은 상태에서도 사이트 레이아웃, 즉 사이트 전체나 콘텐츠 영역의 너비, 각 요소의 위치 등의 사이트 구조를 먼저 .. 2022. 4. 18. [프론트엔드][CSS] TIL Day-14.1 이미지를 가운데로 정렬하여 넣는 법 그리드를 연습하던 중, 주어진 소스로 만들어진 그리드의 각 박스 안의 이미지를 가운데로 정렬하고 싶다는 생각이 들었다. 이미지를 가운데로 정렬하는 방법은 다음 두 가지가 있다. 첫번째는, 이미지 요소 위의 부모요소에 스타일을 주는 방법이다. 아래의 경우와 같이, css에서 img요소의 부모요소인 figure에 text-align 속성에서 center 값을 주는 것이다. ↓ 혹은 figure 태그 안에서 바로 스타일을 줄 수 있지만, 이럴 경우 해당 태그만 스타일링이 되므로 여러개에 동일하게 스타일링을 한다면 위와 같이 css에서 스타일을 주는게 좋겠다. ↓ 두번째는, 아래와 같이 img 요소를 블록으로 지정한 뒤, margin 속성을 사용하여 0 auto라는 값을 주는 것이다. 이 때, 0은 상하의 값이.. 2022. 4. 14. 이전 1 다음
