UI 블록의 너비와 높이는 콘텐츠 목적 및 반응형 환경에 따라 다양하게 조정할 수 있습니다.
블록 사이즈(너비/높이) 조절하는 법
1. 블록 선택 및 사이즈 설정
사이즈를 조절할 블록을 선택합니다.
화면 우측의 툴바 → Size 섹션에서 Width(너비) 및 Height(높이) 옵션을 설정합니다.
선택 가능한 옵션
- Normal (기본 최대 너비)
- Fit (콘텐츠에 맞춤)
- Fill (전체 채우기)
- Fixed (고정 크기)
2. Normal (기본 최대 너비)
max-width 기준으로 요소의 최대 너비를 설정합니다.
예를 들어, Normal: 1200으로 설정 시
→ 화면이 넓으면 최대 1200px까지 확장되고,
→ 좁을 경우에는 화면 너비에 맞춰 자동 축소됩니다.(100% 반응형)
3. Fit (콘텐츠에 맞춤)
fit-content 속성으로, 내부 콘텐츠 크기만큼 너비 또는 높이가 설정됩니다.
콘텐츠의 양에 따라 블록 크기가 자동으로 유동적으로 변합니다.
4. Fill (전체 채우기)
너비는 100%, 높이는 100vh(viewport height)로 설정됩니다.
화면 전체 영역을 가득 채우는 배경, 섹션 레이아웃 등에 적합합니다.
5. Fixed (고정 크기)
px(픽셀) 단위로 정해진 크기를 지정합니다.
화면 크기와 무관하게 항상 같은 사이즈로 유지됩니다.
(예를 들어, Width: 400px, Height: 300px 등)
참고 !
Fit은 내부 콘텐츠 양이 자주 바뀌는 컴포넌트에,
Fill은 전체 화면 배경,
Fixed는 버튼/카드/아이콘 등 고정형 요소에,
Normal은 반응형 섹션에 주로 활용됩니다.
각 설정은 디바이스 크기, 레이아웃 목적에 맞게 조합해서 사용해 보세요!
도움말을 통해 문제를 해결하지 못하셨나요?
1:1 문의를 남겨주시면 빠르고 정확하게 도와드릴게요.
1대1 문의 바로가기
1:1 문의를 남겨주시면 빠르고 정확하게 도와드릴게요.
Weven Co., Ltd.
Address: (Sejong Head Office) Room 401, Building U, Industry-Academic Cooperation Building, 2639 Sejong-ro, Jochiwon-eup, Sejong Special Self-Governing City
(Seoul Branch Office) Room 319, Building B, High-tech Industry Center, 330 Seongam-ro, Mapo-gu, Seoul
(Eunpyeong Branch Office) 11-1, Yeonseo-ro 34-gil, Eunpyeong-gu, Seoul (Bulkwang-dong, Eunpyeong Startup Support Center)
(Gwangju Branch Office) 193-12, Geumnam-ro, Dong-gu, Gwangju, Room 503 (Geumnam-ro 4-ga, Gwangju AI Startup Camp Room 2)
Representative name: Kim Jeong-hwan
Business registration number: 589-81-02761
Mail order business report number: 2022-Asan, Chungnam-1090
COPYRIGHT WEVEN CORP. ALL RIGHTS RESERVED
