인프런 커뮤니티 질문&답변

강의에서는 72로 나오는데, 다 만들고 나면 80으로 나옵니다. 반드시 강의와 만드시는 파일이 똑같을 필요는 없습니다. 특히 Hug로 쌓여져 있어서 값에 따라 달라질 수 있습니다.

우선 제 강의에서는 앱솔루트 포지션은 사용하지 않았습니다. 그 이유는 만약 사용하면 Title Description의 컨텐츠가 오버랩 되어서 불편해지기 때문입니다. 저의 경우는 텍스트 라인하이트가 괜찮아서 구지 값을 넣지 않았는데, 만약 타이틀 위에 값이 필요하다고 생각하면 살짝 윗 패딩값만 주면 됩니다.

아마 그것이 개발할 때도 개발자가 스타일링 하기에도 쉬울 것 같습니다.

감사합니다.

안녕하세요, 인프런 AI 인턴입니다. ifuwonder님.

아이콘 위치가 예상과 다르게 지정되는 문제와 관련하여 몇 가지 이유와 해결 방법을 설명드리겠습니다. 우선, 아이콘이나 다른 요소를 배치할 때, Auto Layout 설정과 Padding, Margin 등이 큰 영향을 미칠 수 있습니다.

1. Auto Layout 이해: Auto Layout을 사용하면, 요소들이 지정된 방향과 순서에 따라서 자동으로 배치됩니다. 이때 요소의 정렬(alignment) 설정이 좌우나 상하로 지정되어 있을 수 있습니다.

2. 앱솔루트 포지션 사용: 특정 요소의 위치를 Manual로 지정하고 싶을 때 앱솔루트 포지션을 사용하는 것은 좋은 방법입니다. 앱솔루트 포지션은 요소가 다른 Auto Layout의 규칙에 영향을 받지 않도록 해줍니다. 특히 요소가 다른 요소의 중앙에 오도록 배치하고 싶을 때 유용합니다.

3. 패딩 및 정렬 설정:

   • 아이콘 위치 조정: 아이콘을 타이틀의 상단에 맞추고 싶다면, Auto Layout의 정렬(alignment)에서 ‘top’을 선택하시고, 패딩을 조절하여 원하는 위치에 오도록 할 수 있습니다.
     
   • Close 아이콘 중심 배치: Close 아이콘을 중앙에 위치시키려면, 아이콘 자체를 포함하는 상위 프레임에서 ‘center’ 정렬로 설정하고, 상하 패딩을 동일하게 주면 됩니다.
     

4. 높이 차이: 두 분의 높이가 다른 이유는 Auto Layout 속성에서 높이를 ‘hug contents’로 설정했는지, 고정된 높이로 설정했는지에 따라 다를 수 있습니다. 모든 요소를 체크하여 ‘hug contents’가 붙어 있는지 확인하세요.

아래 관련 질문 URL에서 비슷한 상황을 다룬 답변을 참고하실 수 있습니다:
- 텍스트 상자 placeholder의 아이콘과 텍스트 배열 관련: 이 답변에서는 텍스트 필드 내의 요소 배치 이슈를 다루며, 배치 및 정렬 관련 문제에 대한 해결 방법이 포함되어 있습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.