오랜만에 쓰는 글이네요
너무 게을러진 나머지... 올리지 못하고 놀기만 했었네요 ㅎㅏ ㅎ ㅏ ㅎ ㅏ
다시 차차 공부하면서 올려보도록 하겠습니다 😳😳
아이폰 화면을 통해 텍스트를 나타낼 때는 주로 레이블(Label) 객체를 사용한다.
간단히 말하면 텍스트 박스와 같다고 할 수 있다.
1. Label 추가하기
메세지를 출력할 레이블을 추가해 보자.
Xcode 화면 상단의 [Library] 버튼을 클릭한 후 팝업 창에서 객체 목록 중 label을 찾아 선택해
스토리 보드로 끌어와 화면 위쪽 중앙에 배치해 보자.
![](https://blog.kakaocdn.net/dn/xlcJ5/btsf6ae3hcR/EzDJGufssWyXYhgcn1mTxk/img.png)
![](https://blog.kakaocdn.net/dn/9UwQm/btsf42uNwBs/LZIG6qY8lqulskKGl14InK/img.png)
레이블의 길이보다 길게 출력하고자 하는 내용이 더 길 경우 내용이 잘려서 안 보이게 된다.
그러므로 출력하고자 하는 메세지가 충분히 출력될 수 있도록 레이블 크기를 조절해 보자.
레이블을 선택한 후 레이블의 왼쪽 혹은 오른쪽에 마우스를 올리면 크기를 조절하는 아이콘이 나타난다.
마우스를 좌우로 움직여 레이블의 크기를 조절하여 가로폭에 맞게 늘릴 수 있다.
![](https://blog.kakaocdn.net/dn/eOiQbf/btsf2osaiK9/Zz2rYhWkIagQXE8sEYxKa0/img.png)
레이블을 선택한 상태에서 화면 오른쪽 인스펙터 영역의 [ Attributes inspector ] 버튼을 클릭한 후, 정렬(Alignment)을 가운데 맞춤으로 선택해 주었다.
![](https://blog.kakaocdn.net/dn/Cd54R/btsf0R9gVpz/XIL9kYVzKm4vvg8S7qAlkk/img.png)
2. 레이블의 글자 색상과 서체 변경하기
레이블을 선택한 후 오른쪽 인스펙터 영역의 색상(Color)을 원하는 색상으로 변경해 주었다.
![](https://blog.kakaocdn.net/dn/95uN9/btsf3sgipAx/XXu2wgKVGCmDhdD3Mlfit0/img.png)
같은 방법으로 서체(Font)와 글자 크기(Size)를 변경해 주자.
같은 방법으로 다양하게 배치해 볼 수 있다.
![](https://blog.kakaocdn.net/dn/btO6GT/btsf6F0hmN7/thKMHwgbAgfmBXj4NphQVK/img.png)
📝 저 같은 경우 아래와 같이 배치해 봤습니다!!
![](https://blog.kakaocdn.net/dn/c16U1D/btsf3PWNLAY/6kJkdqBQkW30UooujP0ed1/img.png)
3. 텍스트 필드(Text Field)와 버튼(Button) 추가하기
상단의 [Library] 버튼을 클릭한 후 팝업 창에서 'text'를 입력하여 텍스트 필드(Text Field)를 찾아 추가한다.
크기 조절은 Label과 같이 조절이 가능하다.
텍스트 필드와 같이 [Library]에서 'Button'을 찾아 추가한 후, 오른쪽 인스펙터 영역에서 Style을 Default로 변경한다.
버튼의 색상과 글씨의 색도 레이블과 동일하게 변경을 할 수 있으니 다양하게 바꿔보자.
![](https://blog.kakaocdn.net/dn/xdciQ/btsf42n5Abx/qXalhJGTWtKYlSbGaBBlR1/img.png)
추가로 위와 같이 작업을 하다 보면 경고 메세지가 뜨는것을 볼 수 있다.
경고 아이콘을 클릭하면 아래와 같이 경고 메세지가 나오는데, 이 경고 메세지는 자동 레이아웃에 관련된 메세지로 스토리보드에 객체를 배치시키면 나온다. 자동 레이아웃을 설정하지 않아서 객체가 다른 객체에 잘리거나 겹치게 된다는 내용의 메세지다.
📝 자동 레이아웃에 대한 자세한 설명은 나중에 따로 올리도록 하겠습니다 !! 😆😆
![](https://blog.kakaocdn.net/dn/txm2R/btsf6asDinr/OGok49MjOr07eVCih7efMk/img.png)
'iOS' 카테고리의 다른 글
이미지 뷰 앱 만들기 1 (5) | 2023.06.08 |
---|---|
버튼 클릭 시 동작 구현 및 결과 확인 (3) | 2023.06.05 |
아웃렛 변수와 액션 함수 추가하기 (5) | 2023.06.02 |
프로젝트 구성과 스토리보드 (1) | 2023.04.12 |
Swift 프로젝트 설정 (1) | 2023.04.05 |