Text 위젯 마스터
Text는 화면에 텍스트를 표시하는 가장 기본적인 위젯입니다. 웹에서 HTML의 텍스트 태그들과 비슷한 역할을 하지만, 더 강력한 스타일링 옵션을 제공합니다.
🎯 학습 목표
이 튜토리얼을 마치면 다음을 할 수 있게 됩니다:
- 텍스트 크기와 색상 조정하기
- 폰트 굵기와 스타일 변경하기
- 텍스트 정렬과 줄바꿈 처리하기
- 제목과 라벨 등 다양한 텍스트 컴포넌트 만들기
📚 기본 개념
Text 위젯의 구조
Text("표시할 텍스트", {
style: new TextStyle({
// 스타일 옵션들
}),
textAlign: TextAlign.center, // 정렬
maxLines: 2 // 최대 줄 수
})
TextStyle의 주요 속성
- fontSize: 글자 크기 (숫자)
- fontWeight: 글자 굵기 (‘bold’, ‘normal’ 등)
- color: 글자 색상 (문자열)
- fontStyle: 글자 스타일 (‘italic’, ‘normal’)
🚀 실습 1: 기본 텍스트 스타일링
가장 기본적인 텍스트 스타일부터 시작해봅시다.
import { Text, TextStyle } from "@meursyphus/flitter";
// 기본 텍스트
const basicText = Text("안녕하세요!");
// 스타일이 적용된 텍스트
const styledText = Text("멋진 텍스트", {
style: new TextStyle({
fontSize: 20,
color: '#FF5722'
})
});
💻 연습해보기
- fontSize를 다양하게 변경해보세요 (12, 16, 24, 32 등)
- 색상을 바꿔보세요 (예:
'#2196F3','#4CAF50','#9C27B0') - 텍스트 내용을 변경해보세요
🚀 실습 2: 폰트 굵기와 스타일
텍스트를 더 강조하거나 장식하는 방법을 배워봅시다.
import { Text, TextStyle, Column } from "@meursyphus/flitter";
const fontWeightExample = Column({
children: [
Text("일반 텍스트", {
style: new TextStyle({
fontSize: 18,
fontWeight: 'normal'
})
}),
Text("굵은 텍스트", {
style: new TextStyle({
fontSize: 18,
fontWeight: 'bold'
})
}),
Text("기울임 텍스트", {
style: new TextStyle({
fontSize: 18,
fontStyle: 'italic'
})
}),
Text("굵은 기울임", {
style: new TextStyle({
fontSize: 18,
fontWeight: 'bold',
fontStyle: 'italic'
})
})
]
});
fontWeight 옵션
'normal': 일반 굵기'bold': 굵게'100','200', …,'900': 숫자로 세밀한 조정
💻 연습해보기
- 다양한 fontWeight 값을 시도해보세요
- fontStyle과 fontWeight를 조합해보세요
- 같은 텍스트를 다른 스타일로 여러 번 표시해보세요
🚀 실습 3: 텍스트 정렬
텍스트의 정렬 방법을 배워봅시다.
import { Text, TextStyle, Container, Column, BoxDecoration, TextAlign } from "@meursyphus/flitter";
const textAlignExample = Column({
children: [
Container({
width: 300,
decoration: new BoxDecoration({ color: '#F5F5F5' }),
child: Text("왼쪽 정렬", {
textAlign: TextAlign.left,
style: new TextStyle({ fontSize: 16 })
})
}),
Container({
width: 300,
decoration: new BoxDecoration({ color: '#F5F5F5' }),
child: Text("가운데 정렬", {
textAlign: TextAlign.center,
style: new TextStyle({ fontSize: 16 })
})
}),
Container({
width: 300,
decoration: new BoxDecoration({ color: '#F5F5F5' }),
child: Text("오른쪽 정렬", {
textAlign: TextAlign.right,
style: new TextStyle({ fontSize: 16 })
})
})
]
});
textAlign 옵션
TextAlign.left: 왼쪽 정렬TextAlign.center: 가운데 정렬TextAlign.right: 오른쪽 정렬TextAlign.start: 시작 방향 정렬 (LTR에서는 왼쪽, RTL에서는 오른쪽)TextAlign.end: 끝 방향 정렬 (LTR에서는 오른쪽, RTL에서는 왼쪽)
💻 연습해보기
- 각 정렬 옵션을 시도해보세요
- Container의 크기를 변경해서 정렬 효과를 확인해보세요
- 긴 텍스트로 정렬 차이를 확인해보세요
🚀 실습 4: 줄바꿈과 말줄임
긴 텍스트를 처리하는 방법을 배워봅시다.
import { Text, TextStyle, Container, Column, BoxDecoration, TextAlign } from "@meursyphus/flitter";
const longTextExample = Column({
children: [
// 최대 2줄까지
Container({
width: 200,
decoration: new BoxDecoration({ color: '#E3F2FD' }),
child: Text("이것은 매우 긴 텍스트입니다. 여러 줄에 걸쳐서 표시될 것입니다.", {
maxLines: 2,
overflow: 'ellipsis',
style: new TextStyle({ fontSize: 14 })
})
}),
// 줄바꿈 없이 한 줄
Container({
width: 200,
decoration: new BoxDecoration({ color: '#FFF3E0' }),
child: Text("이것은 한 줄로만 표시되는 긴 텍스트입니다.", {
maxLines: 1,
overflow: 'ellipsis',
style: new TextStyle({ fontSize: 14 })
})
})
]
});
텍스트 오버플로우 옵션
'clip': 잘라서 숨김'ellipsis':...표시'fade': 점점 투명하게
💻 연습해보기
- maxLines 값을 바꿔보세요 (1, 3, 5 등)
- 다른 overflow 옵션을 시도해보세요
- Container 크기를 조정해서 효과를 확인해보세요
🚀 실습 5: 실전 텍스트 컴포넌트 만들기
지금까지 배운 내용으로 실제 앱에서 사용할 텍스트 컴포넌트들을 만들어봅시다.
import { Text, TextStyle, Container, Column, BoxDecoration, EdgeInsets } from "@meursyphus/flitter";
// 헤더 제목
const headerTitle = Text("Flitter 앱", {
style: new TextStyle({
fontSize: 28,
fontWeight: 'bold',
color: '#1976D2'
})
});
// 부제목
const subtitle = Text("Flutter 스타일의 웹 프레임워크", {
style: new TextStyle({
fontSize: 16,
color: '#757575',
fontStyle: 'italic'
})
});
// 본문 텍스트
const bodyText = Text("Flitter는 Flutter에서 영감을 받은 웹 프레임워크입니다. 선언적 UI와 강력한 렌더링 엔진을 제공합니다.", {
style: new TextStyle({
fontSize: 14,
color: '#424242',
height: 1.5 // 줄 간격
}),
maxLines: 3
});
// 강조 라벨
const highlightLabel = Container({
decoration: new BoxDecoration({
color: '#FF5722',
borderRadius: BorderRadius.circular(4)
}),
padding: EdgeInsets.symmetric({ horizontal: 8, vertical: 4 }),
child: Text("NEW", {
style: new TextStyle({
fontSize: 12,
fontWeight: 'bold',
color: '#FFFFFF'
})
})
});
const textShowcase = Column({
crossAxisAlignment: 'start',
children: [
headerTitle,
subtitle,
bodyText,
highlightLabel
]
});
💻 연습해보기
- 각 텍스트의 스타일을 변경해보세요
- 다른 색상 조합을 시도해보세요
- 새로운 텍스트 컴포넌트를 추가해보세요
🎨 실습 6: 카드 안의 텍스트 레이아웃
실제 카드 컴포넌트에서 텍스트들을 적절히 배치해봅시다.
import { Text, TextStyle, Container, Column, Row, BoxDecoration, EdgeInsets, BorderRadius, Border } from "@meursyphus/flitter";
const productCard = Container({
decoration: new BoxDecoration({
color: '#FFFFFF',
border: Border.all({ color: '#E0E0E0', width: 1 }),
borderRadius: BorderRadius.circular(12)
}),
padding: EdgeInsets.all(16),
child: Column({
crossAxisAlignment: 'start',
children: [
// 제품명
Text("iPhone 15 Pro", {
style: new TextStyle({
fontSize: 20,
fontWeight: 'bold',
color: '#212121'
})
}),
// 가격
Text("₩1,350,000", {
style: new TextStyle({
fontSize: 18,
fontWeight: 'bold',
color: '#FF5722'
})
}),
// 설명
Text("최신 A17 Pro 칩과 혁신적인 카메라 시스템을 갖춘 프리미엄 스마트폰입니다.", {
style: new TextStyle({
fontSize: 14,
color: '#616161',
height: 1.4
}),
maxLines: 2
}),
// 상태 표시
Row({
children: [
Text("재고 있음", {
style: new TextStyle({
fontSize: 12,
color: '#4CAF50',
fontWeight: 'bold'
})
})
]
})
]
})
});
💻 연습해보기
- 다른 제품 정보로 카드를 만들어보세요
- 텍스트 색상과 크기를 조정해보세요
- 추가 정보를 표시하는 텍스트를 넣어보세요
⚠️ 흔한 실수와 해결법
1. TextStyle 생성 실수
// ❌ 잘못된 방법
style: { fontSize: 16 } // 객체 직접 사용 금지!
// ✅ 올바른 방법
style: new TextStyle({ fontSize: 16 })
2. 색상 값 실수
// ❌ 잘못된 방법
color: 0xFF000000, // 숫자 형식 금지!
// ✅ 올바른 방법
color: '#000000', // 문자열 형식 사용
color: 'black', // CSS 색상명도 가능
3. 임포트 누락
// ❌ TextStyle 임포트 없이 사용
style: new TextStyle({ fontSize: 16 }) // 에러!
// ✅ 올바른 임포트
import { TextStyle } from "@meursyphus/flitter";
🏆 도전 과제
다음 요구사항을 만족하는 뉴스 카드를 만들어보세요:
- 헤드라인: 큰 굵은 제목 (fontSize: 18, bold)
- 부제목: 작은 회색 텍스트 (fontSize: 14, 회색)
- 날짜: 오른쪽 정렬된 작은 텍스트
- 본문: 2줄까지만 표시, 말줄임 적용
- 카테고리 태그: 작은 배경색 있는 라벨
📖 다음 단계
Text 스타일링을 익혔다면 이제 여러 위젯을 배치하는 방법을 배워봅시다!
🎯 다음 튜토리얼: Row와 Column 레이아웃
여러 위젯을 가로세로로 나란히 배치하는 방법을 익혀보세요.