2021/0428 SwiftUI : @Namespace / matchedGeometryEffect() 애니메이션 동기화 .matchedGeometryEffect 에 대해 알아보도록 합시다. MatchedGeometryEffect 만약 view계층의 서로 다른 부분에 동일한 view가 나타나는 등 두 view사이에 애니메이션 효과를 주려면 .matchedGeometryEffec()수정자를 사용하는 것이 좋습니다. 이 수정자를 사용하려면 동일한 view모두에 이 수정자를 연결해줘야 합니다. 이렇게 하면 두 개의 view상태를 전환 할 때 SwiftUI가 동기화된 view에 원활하게 애니메이션을 적용시킬 수 있습니다. 우선 간단하게 가장 쉬운 animation효과만 적용시켜서 예를 들어보겠습니다. import SwiftUI struct ContentView: View { @State private var isFlipped = .. SWIFTUI/Grammar 2021. 4. 30. iPad에서 Playground를 통해 SwiftUI 코드 작성 안녕하세요. 이번에 새로 iPad의 코딩 프로그램인 Playground가 업데이트되면서 SwiftUI를 사용할 수 있게 되었습니다. ( 제가 사용한 버전은 3.4.1 입니다 ) iPad에서 SwiftUI를 코딩할 수 있는 방법에 대해 알려드리고자 합니다. 아래 영상을 통해 확인 부탁드립니다:) 코드는 영상 하단부에 남겨놓도록 하겠습니다. 😁 App Store [ Playground ] for iPad 다운로드 App Store [ Playground ] for Mac 다운로드 TIP 주의 현재 한글은 정상적으로 지원을 하지 않는 것 같습니다. 이 부분 참고해주세요. import SwiftUI import PlaygroundSupport struct Home:View { var body: some View.. TIP/iOS & MacOS TIp 2021. 4. 29. SwiftUI : Text 목차 SwiftUI에서 가장 기본이 되는 Text에 대해 알아보도록 합시다. Text VStack(spacing: 20) { Text("서근개발블로그") Text(Image(systemName: "star.fill")) Text(Date(), style: .time) } Text view는 현재 플랫폼에 적합한 본문 글꼴을 사용하여 앱의 사용자 인터페이스에 문자열을 그려줍니다. font(_:) view modifier를 사용하여 제목이나 캡션과 같은 다른 표준 글꼴을 선택할 수 있습니다. Text의 스타일을 조금 더 세밀하게 조정해야 하는 경우 같은 modifier 를 사용하여 글꼴을 구성하거나, 커스텀 폰트를 선택할 수 있습니다. Text("서근의 블로그") .font(.system(size: 12, .. SWIFTUI/Controls 2021. 4. 29. SwiftUI : ScrollToTop 맨위로 버튼 ScrollToTop 스크롤을 내리면 우측 하단에 Top버튼이 나오고, 그 버튼을 누르면 상단으로 이동하는 버튼을 만들어 보겠습니다. NavigationView 생성 Home struct를 따로 만들어 놓고 body 부분에 Home을 호출 한 뒤 NavigationView로 감싸줍니다. import SwiftUI //MARK : Body struct ContentView: View { var body: some View { NavigationView { Home() .navigationBarTitle("티스토리") } } } //Home View struct Home: View { var body: some View { Text("some") } } 샘플 로우 생성 ScrollView를 사용하여 샘플 R.. SWIFTUI/Others 2021. 4. 28. SwiftUI Project11 : Shape를 활용하여 뷰 꾸미기 이번에는 Path와 Shape를 사용하여 화면을 구성해보겠습니다. Project11 1. 사다리꼴 만들기 우선 Trapezium이라는 struct를 선언하고 아래와 같이 코드를 작성합니다. struct Trapezium: Shape { func path(in rect: CGRect) -> Path { var path = Path() return path } } 그리고 커서를 화면 왼쪽 상단 끝으로 이동시켜줍니다. path.move(to: CGPoint(x: 0, y: 0)) 보통 이렇게 x와 y를 0으로 둘 수도 있지만 아래와 같이 CGPoint를 삭제하고 간단하게 작성할 수 있습니다. path.move(to: .zero) 이러한 박스를 만들어 주려고 하는데 이 도형을 만들기 위한 방법은 여러 가지가 있.. PROJECT/Simple 2021. 4. 24. SwiftUI : Path / Shape 목차 Path 와 Shape 에 대해 알아보도록 합시다. Path SwiftUI는 사용자가 원하는 Custom Shape를 그릴 수 있도록 Path를 제공하고 있습니다. Color, grandient및 shape와 마찬가지로 Path는 그 자체로 View입니다. 이것은 우리가 TextField와 Image처럼 사용할 수 있다는 소리죠. Paths는 위치 값을 가진 선, 곡선 및 기타 정보를 가진 목록입니다. 하지만 Shape는 다른 정보를 미리 알 수 없죠. Shape 내부에 path(in:) 메서드가 호출이 끝나야 최종 적인 사이즈를 알 수 있습니다. Paths는 절 때 경로 안에서 좌표값에 맞춰 도형을 그리지만 Shape는 path(in:)에서 주어진 Rect를 기반으로 상대 경로를 받아서 그리게 됩.. SWIFTUI/Image 2021. 4. 22. SwiftUI Project10 : 영화 캐릭터 정보 앱 #4 - 디테일뷰 목차 Project10의 네 번째 포스팅입니다. 디테일 화면 구현하기 전 포스팅에서 내비게이션 링크까지 연결을 했습니다. 이제 실제로 상세 화면을 구현할 차례입니다. [SwiftUI View] 템플릿을 통해서 ProductDetailView.swift라고 이름 짓고 다음 코드를 채워 넣어주겠습니다. 우선 아래 코드를 넣어주고 하나하나씩 구현하도록 할게요. // ProductDetailView.swift import SwiftUI struct ProductDetailView: View { // 정보를 전달받기 위한 프로퍼티 선언 let product: Product var body: some View { VStack(spacing: 0) { productImage //영화의 이미지가 올 부분 orderVi.. PROJECT/Simple 2021. 4. 20. SwiftUI Project10 : 영화 캐릭터 정보 앱 #3 - JSON 목차 ProJecr10의 세 번째 포스팅입니다. 저번 포스팅에서 컬리 익스텐션을 만들고, ProductRow를 설정해서 화면을 구현해봤습니다. 이번에는 리스트를 이용하여 전체 캐릭터 정보 목록을 나타내고, 강 상품의 상세화면으로 들어가 보기까지 해보겠습니다. 1. 테이터 변환 먼저 캐릭터 정보가 들어있는 JSON을 하나 만들어주도록 하겠습니다. [View] 템플릿을 선택하고 이름은 ProductData.json이라고 설정 후 생성해줍니다. 그리고 그 안에 있는 내용은 모두 지운 뒤 이래 코드를 입력해줍니다. // ProductData.json [ { "name": "소스케", "ImageName": "Sosuke", "movie": "벼랑위의 포뇨", "price": 124000, "description.. PROJECT/Simple 2021. 4. 19. (애드센스) 두 번만에 승인된 후기 및 꿀팁 목차 블로그를 시작하고 거의 한 달 정도 됐을 때 관심도 없던 애드센스를 한번 신청해볼까 하는 마음에 이리저리 포스팅을 찾아보고 있었습니다. 여러 블로그에서 공통되게 말하는 승인받는 팁은 이러했습니다. 한 번에 승인 받는 팁 방문자수 하루에 200명 이상 구글 애널리틱스 사용 일주일에 3~4개 이상 포스팅 포스팅 최소 단어 1000~1200개 전문성을 가지고 있는 블로그 총 포스팅 100개 이상 3개월 이상 운영된 블로그 신청 이렇게 요구조건이 충족된 블로그는 애드센스 신청 후 최대 14일 후에 승인이 된다고 보면 됩니다. 일단 저는 블로그를 시작한 지 한 달 정도 된 새내기 블로거였고 그 대신 포스팅 수가 100개 정도였습니다. 물론 어떤 게시글은 1000 단어 이상이 된 포스팅도 많았고, 300단어 .. TIP/CSS & Tistory 2021. 4. 18. SwiftUI Project10 : 영화 캐릭터 정보 앱 #2 - 모델생성 Project10의 두 번째 포스팅입니다. 저번 게시글에 이어서 만들어 보겠습니다. 컬러 익스텐션 만들기 이번에는 컬러 익스텐션을 만들어서 컬러를 다루도록 하겠습니다. SwiftUI에서는 일명 HEX 코드를 그냥 사용할 수 없습니다. 그렇기 때문에 값을 추출해 변환하는 기능을 추가해야만 합니다. 따라서 헥스 코드를 입력받아 Color 타입을 만들어내는 생성자를 추가해주겠습니다. 컬러 익스텐션 만드는 방법에 대해 알아보러 가기 이 앱에서 자주 쓰일 색을 아래와 같이 추가해주겠습니다. // ColorExtension import SwiftUI extension Color { static let lightRed = Color(hex: "c64756") static let DarkGreen = Color(hex.. PROJECT/Simple 2021. 4. 17. SwiftUI Project10 : 영화 캐릭터 정보 앱 #1 목차 Project10의 첫 번째 포스팅입니다. 영화 캐릭터 정보 앱 이번 프로젝트에서는 지브리 스튜디오의 캐릭터의 정보를 앱에 나타내면서 SwiftUI 기능 사용해보겠습니다. 뷰 구성하기 우선 아래 이미지 파일을 다운받아서 Assets 폴더에 업로드해주겠습니다. 그리고 위 이미지 같은 뷰를 작성해보겠습니다. 이 뷰는 HStack 이 최상위에서 뷰를 감싸고 있고 VStack 이 자식 뷰로 캐릭터 정보를 감싼 형태입니다. // Home HStack { Image("Sosuke") .resizable() .scaledToFill() .frame(width: 150) .clipped() VStack(alignment: .leading){ HStack { Text("소스케") .font(.headline) .f.. PROJECT/Simple 2021. 4. 16. (티스토리) 코드블럭 - 언어명 표시 / 접기 / 펼치기 이번에는 티스토리에서 코드블럭을 사용할때 상단에 어떤 언어를 사용하고 있는지를 확인할 수 있는 스크립트를 구현하고 적용하는 방법에 대해 알아보겠습니다. 만약 티스토리 스킨편집에 대한 기초 지식이 없으시다면 아래 글을 먼저 읽고 와주세요! (티스토리) 스킨 편집 기초 상식 안녕하세요. 제 블로그에는 티스토리에서 스킨을 적용하기 위해 다양한 포스팅이 존재합니다. 이번에는 티스토리에서 어떻게 스킨을 어떻게 편집하는지 아주 간단하게 알아보려고 합니다. 스 seons-dev.tistory.com 코드블럭 언어명 표시 및 접기 버튼 추가 사용법은 아주 간단합니다. 아래 코드를 바로 위에 로 감싸서 넣어주기만 하면 됩니다. 사용방법 ... 코드 스타일 설정 이제 사용자의 스킨에 맞게 코드블럭 언어창의 색을 변경해줄 .. FRONT-END/CSS 2021. 4. 16. (티스토리) 본문에 형광펜 효과 주는 방법 본문에 형광펜 효과 주기 HTML 태그 중에는 B, I, U, S 태그가 있습니다. 글씨를 굵게 / 기울임꼴 / 밑줄 / 취소선을 표현하는 태그입니다. 티스토리 블로그에서는 이 태그를 활용하여 특정 문구를 강조하는 형광펜 효과를 낼 수 있습니다. 태그명 우선 각자의 태그 명을 알아보도록 하겠습니다. 굵게 단축키 : (윈도우) 컨트롤 + B / (맥) 커멘드 + B .tt_article_useless_p_margin>p>b 기울임꼴 단축키 : (윈도우) 컨트롤 + i / (맥) 커멘드 + i .tt_article_useless_p_margin>p>i 밑줄 단축키 : (윈도우) 컨트롤 + U / (맥) 커멘드 + U .tt_article_useless_p_margin>p>u 취소선 단축키 : (윈도우) 컨트.. FRONT-END/CSS 2021. 4. 15. (HTML/CSS/Javascript) 코드 정리해주는 사이트 모음 HTML / CSS / Javascript 코드 정리해 주는 사이트 아래 사이트를 참고하여 깔끔하고 보기좋은 코드를 정리할 수 있습니다 :) 1. ⭐️ Online JavaScript Beautifier : 사용자에게 맞게 코드를 정렬해주는 사이트 Online JavaScript beautifier HTML , formatting: Keep indent level of the tag Add one indent level Separate indentation beautifier.io 2. Cleancss : CSS 코드 정리 CSS Formatter Format your CSS to clean it up and beautify it. Make your CSS easier to read and validat.. FRONT-END/CSS 2021. 4. 15. (티스토리) 스크롤시 부드럽게 이동하기 이 방법은 최신 브라우저가 아니면 적용이 되지 않을 수 있고 브라우저 설정에 따라 액션이 달라질 수 있으므로 아직은 완전한 방법이 될 수 없습니다. 그래도 간단히 적용하고 싶으신 분들은 하셔도 괜찮습니다. 참고로 CCZ스킨은 이 방법을 이용하였습니다. 스크롤 시 부드럽게 이동 CSS 우선 방법은 아주 간단합니다. HTML편집기로 들어가서 CSS에디터를 선택하여 아래 코드를 넣어줍니다. /*부드러운 스크롤 효과*/ html { scroll-behavior: smooth; } 브라우저별 호환성 표 jQuery 티스토리 스킨은 대부분 jQuery를 사용하고 있기 때문에 바로 사용할 수 있습니다. 관리 페이지 > 꾸미기 > 스킨 편집 > html 편집 > HTML 에디터 에 들어갑니다. 그리고 body태그 안쪽.. FRONT-END/CSS 2021. 4. 14. 이전 1 2 다음 한국어 (기본) English Русский 日本語 👉🏻 잠깐만요! 이 글도 한 번 보고 가세요 이전글 다음글 티스토리툴바 서근 개발노트구독하기