flex2 크롬으로 Layout(grid, flex) 디버깅 Styles의 Layout 탭에 대해서 살펴보자 Layout 탭에는 grid와 flex로 선언된 엘리먼트가 나타난다. Overlay display settings에서 show track sizes를 체크하고 grid overlays에서 원하는 요소를 체크해보면 viewport에서 아래 사진처럼 layout 정보를 보여준다. show track sizes에서 1fr - 238px 과 같이 나타나는데 1fr은 사용자가 지정한 값이고 238px은 computed된 px 값이다. grid나 flex는 복수 선택이 가능하며 엘리멘트 옆에 색상 네모칸은 해당 레이아웃을 viewport에서 하이라이팅 해줄 때 색상이다. 가장 오른쪽에 있는 화살표 버튼을 누르면 viewport에서 엘리먼트가 있는 곳으로 바로 이동이 .. 2021. 5. 5. CSS Flex 블락 엘리먼트를 가로로 배치하려면 어떻게 할까? 레이아웃을 짜다 보면 박스들에 대한 정렬이나 위치 조정이 굉장히 복잡할 때가 있다. 블락 엘리먼트를 가로로 정렬할 때 float을 사용하고 clear해주는 방식을 써봤을텐데 이런 것을 굉장히 쉽게 해주는 것이 flex이다. box 모델에서 block과 inline을 배웠고 flex를 배워보도록 하자. flex 기본 예제 A, B, C가 div인데 가로로 배치된 것을 볼 수 있다. 세로 길이는 꽉 채워진 상태임을 알 수 있다. .box에 display를 flex로 설정하였다. 그러니 자식 요소들은 블락 요소임에도 가로로 배치가 되었다. flex의 자식요소는 item이라고 부른다. 위를 보면 item의 배치는 가로로 배치되며 왼쪽에서 부터 차곡차곡 배치된다. .. 2020. 6. 22. 이전 1 다음
