Auto Layout
![[Udemy] 섹션6: Auto Layout and Responsive UIs (오토레이아웃, 반응형 UI) - Auto Layout [Udemy] 섹션6: Auto Layout and Responsive UIs (오토레이아웃, 반응형 UI) - Auto Layout](https://blog.kakaocdn.net/dna/Ek0hu/btraJArIfS2/AAAAAAAAAAAAAAAAAAAAABV5gKS6UntJd1FuJN2iDWSGf_s_vlPh6BLvKoUjOQzf/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1756652399&allow_ip=&allow_referer=&signature=KHNFO34Uw3hXxdVvDSPoBy5%2BaxM%3D)
![[Udemy] 섹션6: Auto Layout and Responsive UIs (오토레이아웃, 반응형 UI) - Auto Layout [Udemy] 섹션6: Auto Layout and Responsive UIs (오토레이아웃, 반응형 UI) - Auto Layout](https://blog.kakaocdn.net/dna/bFmHDU/btraSZbXR3y/AAAAAAAAAAAAAAAAAAAAAG3tnrGMXx645wk8OC09brJZnZlDyUyYWkT6mA23XiZW/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1756652399&allow_ip=&allow_referer=&signature=HuS5Uu3elZx11XbFXAw3yitDKJ8%3D)
오토 레이아웃 사용법
main stroyboar
d에서 앱 화면을 구성하고 난 후, 아이폰 8 또는 아이폰 미니 등으로 기기를 변경해보면 각 화면마다 디자인이 다르게 설정된 것을 알 수 있다. 이것을 해결하기 위한 방법이 오토 레이아웃임!
오토 레아 아웃을 사용하기 위해서는 Constraints
를 활용해야 한다.
![[Udemy] 섹션6: Auto Layout and Responsive UIs (오토레이아웃, 반응형 UI) - 오토 레이아웃 사용법 [Udemy] 섹션6: Auto Layout and Responsive UIs (오토레이아웃, 반응형 UI) - 오토 레이아웃 사용법](https://blog.kakaocdn.net/dna/kAMHI/btraQrfNDWK/AAAAAAAAAAAAAAAAAAAAAG2E-MRInEuk9t8iuCdP689y5kbzA815JNVPMr4UFoyU/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1756652399&allow_ip=&allow_referer=&signature=XBU59vn6%2F3TsZSUAD6e93srMEZw%3D)
Add New Constraints
의 선이 빨간색이 되도록 선택 -> 하단 Add 4 Constraints
클릭
![[Udemy] 섹션6: Auto Layout and Responsive UIs (오토레이아웃, 반응형 UI) - 오토 레이아웃 사용법 [Udemy] 섹션6: Auto Layout and Responsive UIs (오토레이아웃, 반응형 UI) - 오토 레이아웃 사용법](https://blog.kakaocdn.net/dna/M7Cn9/btraKEHrCdo/AAAAAAAAAAAAAAAAAAAAAFJDzd3669dXiqLWGm-ns2XVok5gj9z4KG7Syy19hBPb/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1756652399&allow_ip=&allow_referer=&signature=TJRpjgkW5Wzn3ZLABYywl9daSJs%3D)
![[Udemy] 섹션6: Auto Layout and Responsive UIs (오토레이아웃, 반응형 UI) - 오토 레이아웃 사용법 [Udemy] 섹션6: Auto Layout and Responsive UIs (오토레이아웃, 반응형 UI) - 오토 레이아웃 사용법](https://blog.kakaocdn.net/dna/cDfC5F/btraMqoonpZ/AAAAAAAAAAAAAAAAAAAAAGicMh5NT4TtBSt_pzZ-7qfsRpeiYbulaQQnqWmpttZw/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1756652399&allow_ip=&allow_referer=&signature=SO0luPzM5oAtWIa8diitRC0aLPU%3D)
가로모드 시 배경화면이 잘리는 현상을 오토 레이아웃을 통해 해결해볼까 한다.
![[Udemy] 섹션6: Auto Layout and Responsive UIs (오토레이아웃, 반응형 UI) - 오토 레이아웃 사용법 [Udemy] 섹션6: Auto Layout and Responsive UIs (오토레이아웃, 반응형 UI) - 오토 레이아웃 사용법](https://blog.kakaocdn.net/dna/EUpr8/btraQqHU1U0/AAAAAAAAAAAAAAAAAAAAAEOVxJEkar6ncl-7jTGixeIuK9Aa9-7dRhUHco30B498/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1756652399&allow_ip=&allow_referer=&signature=UWuGsKGTXA%2F84pP25Ke%2BHbVAngI%3D)
View Controller Scene
Background
선택 -> Add New Constraints
의 선이 빨간색이 되도록 선택 -> 하단 Add 4 Constraints
클릭
View Controller Scene
> Constraints
의 Top / Bottom / Trailing / Leading 중 하나를 클릭 > 오른쪽 inspector
의 Constraint
메뉴로 들어감 > Safe Area.Trailing
을 Superview
로 변경 > Constant
를 0으로 수정 > 4개의 Constraints
반복 적용
![[Udemy] 섹션6: Auto Layout and Responsive UIs (오토레이아웃, 반응형 UI) - 오토 레이아웃 사용법 - View Controller Scene [Udemy] 섹션6: Auto Layout and Responsive UIs (오토레이아웃, 반응형 UI) - 오토 레이아웃 사용법 - View Controller Scene](https://blog.kakaocdn.net/dna/dlY1Eg/btraSZbYOV1/AAAAAAAAAAAAAAAAAAAAABaQEG9ZpjsUGarjd5xia-G3N7e6guMh7mXKnGJMNwYp/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1756652399&allow_ip=&allow_referer=&signature=lsItElMbEVupdbt9FJgxY4PP2Ko%3D)
![[Udemy] 섹션6: Auto Layout and Responsive UIs (오토레이아웃, 반응형 UI) - 오토 레이아웃 사용법 - View Controller Scene [Udemy] 섹션6: Auto Layout and Responsive UIs (오토레이아웃, 반응형 UI) - 오토 레이아웃 사용법 - View Controller Scene](https://blog.kakaocdn.net/dna/brDDcw/btraGbTfw5y/AAAAAAAAAAAAAAAAAAAAAK92LhFVYc5uZqhtEPeCrxtdgEyDwSN_c0gx9gwateps/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1756652399&allow_ip=&allow_referer=&signature=J2jxBae1wdeuPKxlFOtyVNjsxRc%3D)
![[Udemy] 섹션6: Auto Layout and Responsive UIs (오토레이아웃, 반응형 UI) - 오토 레이아웃 사용법 - View Controller Scene [Udemy] 섹션6: Auto Layout and Responsive UIs (오토레이아웃, 반응형 UI) - 오토 레이아웃 사용법 - View Controller Scene](https://blog.kakaocdn.net/dna/WBDY4/btraSX6iLg8/AAAAAAAAAAAAAAAAAAAAAKccxyYgmRT2a0nBoKM9pafy6dW333tn4XUEFYC6-Okp/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1756652399&allow_ip=&allow_referer=&signature=M7j5CYnv3M0dCrxu45Um0tnIDcU%3D)
![[Udemy] 섹션6: Auto Layout and Responsive UIs (오토레이아웃, 반응형 UI) - 오토 레이아웃 사용법 - View Controller Scene [Udemy] 섹션6: Auto Layout and Responsive UIs (오토레이아웃, 반응형 UI) - 오토 레이아웃 사용법 - View Controller Scene](https://blog.kakaocdn.net/dna/r2249/btraMqu8XIT/AAAAAAAAAAAAAAAAAAAAAFalwBLfFb3BKbXOLPbsdp1PWZ2s59gmbVQlGx1Eda4j/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1756652399&allow_ip=&allow_referer=&signature=BaVzsQAK%2BwKLJ7snUZAfOS34Tmc%3D)
Alignment and Pinning
Alignment
> Horizontally in Container
Alignment
> Vertically in Container
이제 Logo를 맞춰봐야 한다! 로고 같은 경우에는 Constraints
으로 몇 포인트 몇 포인트로 정확하게 값을 주면 아이폰 기기에 해상도가 전부 다르기 때문에 개발자가 원하는 정확한 위치(예를 들어 가운데)에 맞출 수 없다. 그렇기 때문에 Add New Alignment Constraints
를 사용해요 Horizontally
와 Vertically
를 체크해서 정확히 화면의 중앙으로 로고가 올 수 있도록 해주는 것이 베스트!
![[Udemy] 섹션6: Auto Layout and Responsive UIs (오토레이아웃, 반응형 UI) - Alignment and Pinning [Udemy] 섹션6: Auto Layout and Responsive UIs (오토레이아웃, 반응형 UI) - Alignment and Pinning](https://blog.kakaocdn.net/dna/4cfSq/btraPtZcIGy/AAAAAAAAAAAAAAAAAAAAAH-9b1j0iICXKsnKUkvEZFFr54SDvc-T55vMnEm-rvc8/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1756652399&allow_ip=&allow_referer=&signature=2k9Vrrly7dwvm8xLJrxzwBe5%2FVg%3D)
![[Udemy] 섹션6: Auto Layout and Responsive UIs (오토레이아웃, 반응형 UI) - Alignment and Pinning [Udemy] 섹션6: Auto Layout and Responsive UIs (오토레이아웃, 반응형 UI) - Alignment and Pinning](https://blog.kakaocdn.net/dna/AqOAV/btraMqu84ia/AAAAAAAAAAAAAAAAAAAAAIMxiq0_t4AvIZ2C9tWpx1tt04v8CtV4jjv3CJm8TYnh/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1756652399&allow_ip=&allow_referer=&signature=N8lbbt07ueWUzDUyQA0i4zExHxc%3D)
![[Udemy] 섹션6: Auto Layout and Responsive UIs (오토레이아웃, 반응형 UI) - Alignment and Pinning [Udemy] 섹션6: Auto Layout and Responsive UIs (오토레이아웃, 반응형 UI) - Alignment and Pinning](https://blog.kakaocdn.net/dna/bLJMNI/btraNI3oI3b/AAAAAAAAAAAAAAAAAAAAAJ0o-cSb3TwXP7sSJcnr8aKlDGoLX2fGPvquNg6AqctI/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1756652399&allow_ip=&allow_referer=&signature=VnsPNkkxPVHtsTSB3r47PnMXyNw%3D)
Working with Containers and Subviews
방금 했던 거보다 조금 더 복잡한 오토 레이아웃을 잡아보자!
![[Udemy] 섹션6: Auto Layout and Responsive UIs (오토레이아웃, 반응형 UI) - Working with Containers and Subviews [Udemy] 섹션6: Auto Layout and Responsive UIs (오토레이아웃, 반응형 UI) - Working with Containers and Subviews](https://blog.kakaocdn.net/dna/bYNjEK/btraLukgmoa/AAAAAAAAAAAAAAAAAAAAALhYDG-8kpJtBJiP074ejm5cvZ_ba9KuVNWd8UUbtGhl/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1756652399&allow_ip=&allow_referer=&signature=bHj9NTyaNGb%2FR3qUCPrCpMwewn8%3D)
![[Udemy] 섹션6: Auto Layout and Responsive UIs (오토레이아웃, 반응형 UI) - Working with Containers and Subviews [Udemy] 섹션6: Auto Layout and Responsive UIs (오토레이아웃, 반응형 UI) - Working with Containers and Subviews](https://blog.kakaocdn.net/dna/xvuKe/btraQp97fAB/AAAAAAAAAAAAAAAAAAAAADzq31QWSEK_YGeetRGPK0kPfsDhUTgz40HdgybqfPtl/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1756652399&allow_ip=&allow_referer=&signature=bXqk13JjBlResAC9tiD%2BO%2FoZ0Yo%3D)
왼쪽 Dice View를 보면 오른쪽과 같이 세 개의 뷰로 나눠볼 수 있다.
View
1. 로고
2. 다이스
3. 버튼
로고, 다이스, 버튼을 하나씩 선택하고 이 element
를 view
에 embed in
해야 한다.
embed in 하는 방법 ( 세 가지 )
첫 번째. Label
> uiview
검색 > 빈 view
추가
두 번째. element
클릭 > 상단 메뉴 Editor
> Embed in
> View
세 번째. element
클릭 > 하단 Embed In View
> View
![[Udemy] 섹션6: Auto Layout and Responsive UIs (오토레이아웃, 반응형 UI) - Working with Containers and Subviews - embed in 하는 방법 ( 세 가지 ) [Udemy] 섹션6: Auto Layout and Responsive UIs (오토레이아웃, 반응형 UI) - Working with Containers and Subviews - embed in 하는 방법 ( 세 가지 )](https://blog.kakaocdn.net/dna/6b8Ik/btraPuqgwOY/AAAAAAAAAAAAAAAAAAAAAFAdb4O_aPfIkX5wuOVPTm1wBpD-dnwTfXUAPUL0QXse/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1756652399&allow_ip=&allow_referer=&signature=aL1cNAFs1QwI%2FRwQ83scSEnip0s%3D)
Stack
수직이나 수평하게 요소들을 정렬할 때 사용
세 개의 subviews
를 모두 선택 > embed in view
클릭 후, Stack View
를 선택 > Stack Views
를 superview
에 대해 constraints
를 준다.
Inspector
의 Stack View
메뉴의 Alignment
와 Distribution
을 설정해서 모든 view
의 크기를 동일하게 설정해줄 수 있다.
![[Udemy] 섹션6: Auto Layout and Responsive UIs (오토레이아웃, 반응형 UI) - Working with Containers and Subviews - Stack [Udemy] 섹션6: Auto Layout and Responsive UIs (오토레이아웃, 반응형 UI) - Working with Containers and Subviews - Stack](https://blog.kakaocdn.net/dna/dqUE6y/btraGOKd21U/AAAAAAAAAAAAAAAAAAAAAOfDYuR-ABb1ogvFkP4Sr0nygzE8Jm1eZd0JwDDETv8V/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1756652399&allow_ip=&allow_referer=&signature=%2BJnZ5aq4DwGgsyHyE7GvcgTKqso%3D)
![[Udemy] 섹션6: Auto Layout and Responsive UIs (오토레이아웃, 반응형 UI) - Working with Containers and Subviews - Stack [Udemy] 섹션6: Auto Layout and Responsive UIs (오토레이아웃, 반응형 UI) - Working with Containers and Subviews - Stack](https://blog.kakaocdn.net/dna/pSoaQ/btraNJ2iNAi/AAAAAAAAAAAAAAAAAAAAAGazzsS8HLruCCtiwm3dZApYrb6pp4zI741L8hnkHVFS/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1756652399&allow_ip=&allow_referer=&signature=AUb239EhEZ%2B61LjCi0%2BYWUt3kjE%3D)
Containers
이제 View
안의 element
들을 가운데로 설정해주기 편해짐! contraints
설정을 위에 했던 것처럼 지정해준다.
그런데 Dice쪽은 이미지가 두 개 이기 때문에 이 image를 모두 잡은 뒤에 embed in Stack view
로 한 번 더 잡아준다.
![[Udemy] 섹션6: Auto Layout and Responsive UIs (오토레이아웃, 반응형 UI) - Working with Containers and Subviews - Containers [Udemy] 섹션6: Auto Layout and Responsive UIs (오토레이아웃, 반응형 UI) - Working with Containers and Subviews - Containers](https://blog.kakaocdn.net/dna/bdaQGI/btraLukgUaE/AAAAAAAAAAAAAAAAAAAAAJKTK3G2c1ZfTzuWt6cz4Q8dsR_-KC4XMr9xBlH160fi/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1756652399&allow_ip=&allow_referer=&signature=IDITIbCFcjZ3sKdeNU97HzVeQl4%3D)
Height / Width 최소 프레임 지정
한 가지 문제는 버튼 쪽의 텍스트인데 우선 이 버튼의 width
와 height
를 잡아준다.
![[Udemy] 섹션6: Auto Layout and Responsive UIs (오토레이아웃, 반응형 UI) - Working with Containers and Subviews - Height / Width 최소 프레임 지정 [Udemy] 섹션6: Auto Layout and Responsive UIs (오토레이아웃, 반응형 UI) - Working with Containers and Subviews - Height / Width 최소 프레임 지정](https://blog.kakaocdn.net/dna/2DcMb/btraJzsSImL/AAAAAAAAAAAAAAAAAAAAAPX7dV5ISkZBIXC231wCuGrw9gV7YEe_5hW_Kgoxety9/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1756652399&allow_ip=&allow_referer=&signature=DFizztcMlrswMFEn6YdzEVCIQZY%3D)
이제 width의 최솟값을 100으로 설정한다.
오른쪽 inspector
> Horizontal
섹션 > width Edit
![[Udemy] 섹션6: Auto Layout and Responsive UIs (오토레이아웃, 반응형 UI) - Working with Containers and Subviews - Height / Width 최소 프레임 지정 [Udemy] 섹션6: Auto Layout and Responsive UIs (오토레이아웃, 반응형 UI) - Working with Containers and Subviews - Height / Width 최소 프레임 지정](https://blog.kakaocdn.net/dna/bbevmG/btraLsNvwpc/AAAAAAAAAAAAAAAAAAAAAIlXXl4mPrGHTU6uKR56eaTo5Y14oIyGg9CoPASsNLi1/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1756652399&allow_ip=&allow_referer=&signature=yOxlT1OsMrda5fiGMu8QNaeM3zE%3D)
이렇게 하면 width
는 100으로 고정되어있기 때문에 100 프레임 이하로는 줄어들지 않게 된다.
마지막으로 view
의 배경화면을 Default
로 설정하면 끝!
![[Udemy] 섹션6: Auto Layout and Responsive UIs (오토레이아웃, 반응형 UI) - Working with Containers and Subviews - Height / Width 최소 프레임 지정 [Udemy] 섹션6: Auto Layout and Responsive UIs (오토레이아웃, 반응형 UI) - Working with Containers and Subviews - Height / Width 최소 프레임 지정](https://blog.kakaocdn.net/dna/u0KIh/btraNx8jboF/AAAAAAAAAAAAAAAAAAAAAONowfwGMjzvBM6YOmHIF_lvyeGIE3qfaaFhGc9n0Blq/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1756652399&allow_ip=&allow_referer=&signature=lV8hOjW%2BG5vxSgZOFzKBB1Rud0E%3D)
Challenge
https://github.com/appbrewery/Calculator-Layout-iOS13
GitHub - appbrewery/Calculator-Layout-iOS13: Learn to Code While Building Apps - The Complete iOS Development Bootcamp
Learn to Code While Building Apps - The Complete iOS Development Bootcamp - GitHub - appbrewery/Calculator-Layout-iOS13: Learn to Code While Building Apps - The Complete iOS Development Bootcamp...
github.com
![[Udemy] 섹션6: Auto Layout and Responsive UIs (오토레이아웃, 반응형 UI) - Working with Containers and Subviews - Challenge [Udemy] 섹션6: Auto Layout and Responsive UIs (오토레이아웃, 반응형 UI) - Working with Containers and Subviews - Challenge](https://blog.kakaocdn.net/dna/bl7nnh/btraGODuUqe/AAAAAAAAAAAAAAAAAAAAAOIX1yKWaTXsFLrP7BNyHCpj8W2GvDSK81ey6-Yl6kHK/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1756652399&allow_ip=&allow_referer=&signature=DycDzdI9rpNdj9xbv%2BKFquPcufM%3D)
![[Udemy] 섹션6: Auto Layout and Responsive UIs (오토레이아웃, 반응형 UI) - Working with Containers and Subviews - Challenge [Udemy] 섹션6: Auto Layout and Responsive UIs (오토레이아웃, 반응형 UI) - Working with Containers and Subviews - Challenge](https://blog.kakaocdn.net/dna/eBywuy/btraNye9eda/AAAAAAAAAAAAAAAAAAAAADHFSW4EEYOMIRe8YA-VQbfHM0D8AgIeeN4lRRcfT-pg/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1756652399&allow_ip=&allow_referer=&signature=USyn03prIWyV%2Bznhe3ZuGOTKKIM%3D)
이 레이아웃을 오토레이아웃을 사용해서 정확한 뷰가 나올 수 있도록 연습!
각 줄의 elements
모두 잡음 > Stack View
로 묶음 > 0을 포함한 Stack View
를 또 다른 Stack View
로 묶는다.
![[Udemy] 섹션6: Auto Layout and Responsive UIs (오토레이아웃, 반응형 UI) - Working with Containers and Subviews - Challenge [Udemy] 섹션6: Auto Layout and Responsive UIs (오토레이아웃, 반응형 UI) - Working with Containers and Subviews - Challenge](https://blog.kakaocdn.net/dna/bHDiZr/btraQrz95fl/AAAAAAAAAAAAAAAAAAAAAJOEwXYoqgLQT4o2C0l-tHb3yR96geSgb_3CG4gUbdpH/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1756652399&allow_ip=&allow_referer=&signature=tW8KaX1Vq%2FpGZUh2QHZcJNsFZUw%3D)
부모 뷰인 Stack View
의 spacing
을 1로 설정 > 자식 뷰인 모든 Stack View
를 잡음 > Distribution
를 Fill Equally
로 설정
![[Udemy] 섹션6: Auto Layout and Responsive UIs (오토레이아웃, 반응형 UI) - Working with Containers and Subviews - Challenge [Udemy] 섹션6: Auto Layout and Responsive UIs (오토레이아웃, 반응형 UI) - Working with Containers and Subviews - Challenge](https://blog.kakaocdn.net/dna/SXbxI/btraPt5XaLk/AAAAAAAAAAAAAAAAAAAAADJoQEFCDMwWU5WAQe2snaRMEZahVLv-ZN9GCbaG-l09/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1756652399&allow_ip=&allow_referer=&signature=2J%2BUUUfnpzDg4BW1N3ktt%2BkCcE4%3D)
최 하단 0, . , = 중 '.
' 과 '=
' 를 잡아 또 다른 Stack View
로 embed in
함 > Distribution
를 Fill Equally
로 설정
![[Udemy] 섹션6: Auto Layout and Responsive UIs (오토레이아웃, 반응형 UI) - Working with Containers and Subviews - Challenge [Udemy] 섹션6: Auto Layout and Responsive UIs (오토레이아웃, 반응형 UI) - Working with Containers and Subviews - Challenge](https://blog.kakaocdn.net/dna/rx2QP/btraL2Oh8yr/AAAAAAAAAAAAAAAAAAAAANrBvh94xXphqFJzjVJbf6aBmVHZwz1qs1iRgWqZFM-5/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1756652399&allow_ip=&allow_referer=&signature=jzpTMAgZW%2BjM1B%2BNC5iiLWbzn%2F8%3D)
최상단 '0
' element
선택 > View
로 embed in
함 > 배경화면 Default
> 0의 constraints
좌,우 를 20
으로 지정
![[Udemy] 섹션6: Auto Layout and Responsive UIs (오토레이아웃, 반응형 UI) - Working with Containers and Subviews - Challenge [Udemy] 섹션6: Auto Layout and Responsive UIs (오토레이아웃, 반응형 UI) - Working with Containers and Subviews - Challenge](https://blog.kakaocdn.net/dna/7JFUr/btraPtEVzUa/AAAAAAAAAAAAAAAAAAAAAGEgKcSlVZ_HbyH-GIjS8N2CxKsnxLphKeoTjtZqCq5Z/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1756652399&allow_ip=&allow_referer=&signature=y1LV%2B5I83Ygyz%2Bv5E%2FxQhibf74s%3D)
![[Udemy] 섹션6: Auto Layout and Responsive UIs (오토레이아웃, 반응형 UI) - Working with Containers and Subviews - Challenge [Udemy] 섹션6: Auto Layout and Responsive UIs (오토레이아웃, 반응형 UI) - Working with Containers and Subviews - Challenge](https://blog.kakaocdn.net/dna/djjix8/btraNx8j3K8/AAAAAAAAAAAAAAAAAAAAAAx4dp6J8rkopdURyPRsMX_SN9_pJ80l2PmuFowbGhGI/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1756652399&allow_ip=&allow_referer=&signature=ec1q3FrPQEi4UsEUyeyybM%2FbsK8%3D)
완성!
![[Udemy] 섹션6: Auto Layout and Responsive UIs (오토레이아웃, 반응형 UI) - Working with Containers and Subviews - Challenge [Udemy] 섹션6: Auto Layout and Responsive UIs (오토레이아웃, 반응형 UI) - Working with Containers and Subviews - Challenge](https://blog.kakaocdn.net/dna/decX6e/btraGblqn7S/AAAAAAAAAAAAAAAAAAAAANb0eGqrbGlJ-y9BXOyMKoQ7cWg-tkR_V5fS2EYCWTV7/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1756652399&allow_ip=&allow_referer=&signature=mz%2FfHhr2S4Gb0LvgQoOvk2dh8fo%3D)
![[Udemy] 섹션6: Auto Layout and Responsive UIs (오토레이아웃, 반응형 UI) - Working with Containers and Subviews - Challenge [Udemy] 섹션6: Auto Layout and Responsive UIs (오토레이아웃, 반응형 UI) - Working with Containers and Subviews - Challenge](https://blog.kakaocdn.net/dna/uLLzW/btraLbkqN0U/AAAAAAAAAAAAAAAAAAAAABV5barUgDkY1up3BSdueIdbXrffSV6trKjjB504VRQe/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1756652399&allow_ip=&allow_referer=&signature=go4hQBrHZnS8YK8CzMVPTVitliQ%3D)
개발 용어 정리
Portrait : 세로
Landscape : 가로
![[Udemy] 섹션6: Auto Layout and Responsive UIs (오토레이아웃, 반응형 UI) - 개발 용어 정리 [Udemy] 섹션6: Auto Layout and Responsive UIs (오토레이아웃, 반응형 UI) - 개발 용어 정리](https://blog.kakaocdn.net/dna/o4wyR/btraJyAIVSx/AAAAAAAAAAAAAAAAAAAAAG4sffN_49vkJwSIcvqdL_4uIeVqasoxRw73_EAut0dp/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1756652399&allow_ip=&allow_referer=&signature=lU%2F6MQ8ebUqzIv0AZL1ZRkIYTL8%3D)
'SWIFT > Udemy iOS' 카테고리의 다른 글
[Udemy] 섹션9: MVC 패턴, Struct, mutating ( 퀴즈 앱 ) (0) | 2021.08.02 |
---|---|
[Udemy] 섹션8: Egg Timer / ProgressView ( Control Flow and Optionals ) (0) | 2021.07.31 |
[Udemy] 섹션7: Play Sound 및 Bundle - 실로폰 만들기 (0) | 2021.07.30 |
[Udemy] 섹션 4: Swift 프로그래밍 - IBOutlet, IBAction (2) | 2021.07.29 |
[Udemy] 섹션 2: Xcode 스토리보드 및 인터페이스 빌더 (0) | 2021.07.29 |