HStack과 VStack에서 alignment와 spacing 방향이 이해가 잘 안갑니다.

Question

스킬 창 아래 부분은 HStack에 VStack(앉아, 엎드려, 하우스)과 VStack(손, 코) 두개의 VStack 구조로 되어 있잖아요. 여기서 alignment와 spacing 방향이 너무 혼동됩니다. 처음에 간단한 구조는 이해하는 것 같았거든요. 살짝 구조가 복잡해지니까 혼동됩니다.   우선 제가 이해하고 있는 부분은 아래와 같습니다. HStack은 수평 구조이기 때문에 alignment는 top, center, bottom이고 spacing은 수평 간격이 조정되고   VStack은 수직 구조이기 때문에 alignment는 leading, center, tailing이고 spacing은 수직 간격이 조정 되는 것이 맞을까요? 혹시 맞다면 이 정도만 이해하고 있으면 될까요? 이 부분의 대한 설명 좀 부탁드려도 될까요?

Alex Kim · Answer

설명 너무 감사드립니다. 알려주신 방법으로 해보겠습니다. ^^ 그리고 제가 인강에서 배운거 돌아서면 잊어버리고 해서 반복해서 코드 쳐보느라 진도가 많이 느린데요. 이 방법이 맞을까요? 퇴근하고 와서 swift 문법 강의랑 같이 하려는데 복습하느라 진도가 안나가네요. ㅠㅠ

nightdaycoding · Answer

안녕하세요 Alex kim님! "HStack은 수평 구조이기 때문에 alignment는 top, center, bottom이고 spacing은 수평 간격이 조정되고 VStack은 수직 구조이기 때문에 alignment는 leading, center, tailing이고 spacing은 수직 간격이 조정 되는 것이 맞을까요?" 너무 정확히 이해하고 계십니다!! 개념은 정확히 알고 계신데 이해가 와닿지 않으시면 팁이 하나 있는데요. HStack(alignment: .top, spacing: 30) { VStack(alignment: .leading, spacing: 10) { Text(" - 앉아") .background(Color.yellow) Text(" - 엎드려(앉아와 자주 혼동함)") .background(Color.yellow) Text(" - 하우스(집으로 들어가기)") .background(Color.yellow) } .background(Color.blue) VStack(alignment: .leading, spacing: 10) { Text(" - 손") .background(Color.yellow) Text(" - 코") .background(Color.yellow) } .background(Color.blue) }     이렇게 각각 뷰에 background 색상을 넣고 spacing과 alignment를 조정해보면 이해하는데 도움이 될거 같습니다. 저도 뷰를 배치할때 이해가 안되면 저렇게 .background() 모디파이어를 넣어서 보거든요   한번 이렇게 해보시고 이해가 안되면 또 질문 주시기 바랍니다. 즐거운 코딩 되시기 바랄게요~ 감사합니다.