본문 바로가기

728x90

레이아웃2

[CSS] Flex 속성 알아보기 (List of flex properties) 안녕하세요 Foma 💻 입니다. 오늘은 CSS에서 쉽게 레이아웃을 할 수 있는 Flex에 대해 알아보도록 하겠습니다. 바로 시작할게요~ flex-basis 플렉스 안에 있는 요소의 기본 크기를 설정하는 속성 50px 100px 50px 1. px이나 em으로 직접 지정하기 파란색 박스 300px로 늘리기 (여기서 nth-of-type(2)는 flex안에 있는 요소 중 2번째를 의미합니다.) flex-basis: 300px; 하지만 글자의 길이보다 짧게 지정했을 땐 글자 길이 만큼만 조정됩니다. 2. 키워드로 지정하기 키워드로 지정하기 위해서 파란색 박스의 텍스트 길이를 늘리겠습니다. abcdefg hijklmnop qrstuvwxyz 1. fill 텍스트 길이에 딱 맞게 조정됩니다. flex-basis:.. 2022. 2. 22.

[Flutter] Flutter 레이아웃 쉽게 이해하기 - 1 (feat. Column,Row,MainAxisAlignment,CrossAlignment) 안녕하세요 Foma 💻 입니다! 정말 오랜만에 Flutter를 다시 공부하는데.. 레이아웃 하는 방법이 iOS와는 달라서.. 헷갈리더라구요. 그래서 레이아웃 하는 방법을 쉽게 이해하기 위해서 글을 정리해보려고 합니다! 바로 시작할게요~ Column 먼저 컬럼 위젯부터 다뤄보겠습니다. 컬럼은 "행"을 뜻하죠? 즉, 세로로 위젯들을 배치하고 싶을 때 사용하는 위젯입니다. 아래와 같이 아무런 옵션을 주지 않으면 왼쪽 상단에 배치되게 됩니다. Column(children: [CircleAvatar(radius: 50.0)]) 컬럼 안에 여러 개의 위젯을 넣으면 아래와 같이 세로로 배치되게 됩니다. Column(children: [CircleAvatar(radius: 50.0), CircleAvatar(radiu.. 2021. 12. 11.

이전 1 다음

728x90

티스토리툴바