728x90
반응형
//
// ContentView.swift
// uiTest
//
// Created by JEONGGEUN LIM on 2023/01/15.
//
import SwiftUI
struct ContentView: View {
var body: some View {
// 이미지 두개가 세로방향으로 정렬될 수 있도록 VStack 안에 넣어준다.
VStack{
// 이미지 위에 워드가 정렬될 수 있도록 ZStack 안에 넣어준다.
ZStack{
Image("toronto") // Asset에 저장된 이미지를 불러온다.
.resizable() // 이미지 크기를 변경할 수 있도록 설정해준다.
.aspectRatio(contentMode: .fit) // 이미지 크기가 기존 사이즈 비율을 벗어나지 않도록 설정한다.
.cornerRadius(10) // 이미지 테두리를 둥그렇게 설정
// 워드 2개가 세로로 정렬될 수 있도록 VStack 안에 넣어준다.
VStack(alignment: .center){
Text("CN Tower")
.font(.system(size:50)) // 글씨 크기를 50으로 설정
.padding([.leading, .bottom, .trailing]) // 상단을 제외한 패딩을 설정
Text("Toronto") // 글씨 삽입
.padding([.leading, .bottom, .trailing]) // 상단을 제외한 패딩 설정
}
// Stack에도 Modifier를 설정할 수 있다.
.background(Color.black) // 텍스트 상자 Stack의 배경을 검은색으로 설정
.opacity(0.8) // 완전 검은색에서 투명도를 설정한다.
.cornerRadius(10) // 텍스트 박스 테두리를 둥그렇게 설정
.foregroundColor(Color.white) // 텍스트 색상을 모두 하얀색을 설정
}.padding() // ZStack에 패딩을 준다.
ZStack{
Image("london")
.resizable()
.aspectRatio(contentMode: .fit)
.cornerRadius(10)
VStack(alignment: .center){
Text("Big Ben")
.font(.system(size:50))
.padding([.leading, .bottom, .trailing])
Text("London")
.padding([.leading, .bottom, .trailing])
}
.background(Color.black)
.opacity(0.8)
.cornerRadius(10)
.foregroundColor(Color.white)
}.padding()
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
반응형
'IOS' 카테고리의 다른 글
SwiftUI-100Days - WeSplit (0) | 2023.04.07 |
---|---|
SwiftUI Document 따라쓰며 공부하기 - Maintaining the adaptable sizes of built-in views (0) | 2023.02.01 |
Swift - 클로저 {} by yagom (0) | 2023.01.11 |
IOS, Swift, Xcode - Basic App - ToDoList 단계별 뽀개기[2] -UIViewController (0) | 2023.01.11 |
IOS, Swift, Xcode - Basic App - ToDoList 단계별 뽀개기[1] - UIKit (0) | 2023.01.11 |