본문 바로가기

IOS

iOS Beginner Challenge Lesson4 by CodewithChris

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()
    }
}
반응형