PricingLoginStart free
SwiftUI Academy · 강의

섹션과 목록 스타일

섹션으로 행을 그룹화하고 목록 스타일을 선택합니다.

레슨 4/413개 단계

섹션과 목록 스타일은(는) CoddyKit의 무료 SwiftUI Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 SwiftUI Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. SwiftUI Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

섹션으로 그룹화하기

긴 목록은 여러 묶음으로 나누면 더 읽기 쉽습니다. 섹션은 관련된 행을 하나의 제목 아래에 묶습니다. 🗂️

List {
    Section("Fruits") {
        Text("Apple")
    }
}

헤더와 푸터

섹션에는 행 위에 헤더를, 아래에 푸터를 표시할 수 있어 제목과 안내 문구를 넣기에 좋습니다.

Section {
    Text("Wi-Fi")
} header: {
    Text("Network")
} footer: {
    Text("Tap to connect")
}

여러 섹션

하나의 List에 여러 섹션 블록을 쌓으면 복잡한 화면을 훑어보기 쉬운 명확한 그룹으로 정리할 수 있습니다.

List {
    Section("On") { Text("Item A") }
    Section("Off") { Text("Item B") }
}

ForEach와 섹션 사용하기

섹션을 ForEach와 결합하면 문자별로 정렬한 연락처처럼 그룹화된 데이터 기반 목록을 만들 수 있습니다.

Section("A") {
    ForEach(aNames, id: \.self) { Text($0) }
}

목록 스타일 알아보기

listStyle 수정자는 목록 전체의 모양을 바꿉니다. 그룹화된 카드부터 가장자리까지 이어지는 일반 행까지 설정할 수 있습니다.

List { Text("Row") }
    .listStyle(.insetGrouped)

인셋 그룹 스타일

insetGrouped는 설정 화면에서 볼 수 있는 기본 둥근 카드 스타일로, 각 섹션 주위에 여백이 있습니다.

.listStyle(.insetGrouped)

일반 스타일

일반 스타일은 카드의 안쪽 여백을 없애 행을 화면 전체 너비로 표시하므로 피드와 채팅 화면에 적합합니다.

.listStyle(.plain)

그룹 스타일

그룹 스타일은 상자 형태의 섹션을 제공하지만 둥근 안쪽 모서리는 없으며, 전통적인 전체 너비 표 모양입니다.

.listStyle(.grouped)

섹션 헤더 스타일 지정하기

수정자를 사용해 헤더의 글꼴, 색상, 대소문자 표시를 디자인에 맞게 바꿀 수 있습니다.

header: {
    Text("Network").font(.headline)
}

접을 수 있는 섹션

헤더를 제어 요소로도 사용할 수 있어 행을 표시하거나 숨기는 확장 가능한 섹션을 만들 수 있습니다.

알맞은 스타일 선택하기

화면에 맞는 스타일을 선택하세요. 설정에는 insetGrouped, 콘텐츠 피드에는 일반 스타일이 적합합니다. 데이터는 그대로 유지됩니다. ✨

빠른 확인

각 개념을 알맞은 역할과 연결해 보세요.

인터랙티브 레슨에서 답해보세요

복습

섹션과 listStyle을 배웠습니다. 행을 제목이 있는 묶음으로 그룹화하고 insetGrouped나 일반 스타일처럼 모양을 바꿀 수 있습니다. 🎉

무료로 시작

AI 튜터와 함께 Swift을(를) 배우세요 — 무료

브라우저에서 실제 코드를 작성하고 실행하며, 24/7 AI 튜터로부터 즉각적인 도움을 받고, 웹이나 앱에서 중단한 부분부터 계속 학습하세요.

코스
30
레슨
120
무료로 학습 시작전체 코스 보기

자주 묻는 질문

“섹션과 목록 스타일” 강의는 무료인가요?

네 — “섹션과 목록 스타일” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 SwiftUI Academy 강의 전체를 잠금 해제할 수 있습니다. SwiftUI Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“섹션과 목록 스타일”에서 뭘 배우나요?

섹션으로 행을 그룹화하고 목록 스타일을 선택합니다. 브라우저에서 직접 실행하는 실습 코드로 SwiftUI Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

SwiftUI Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 SwiftUI Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.

“섹션과 목록 스타일” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 SwiftUI Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 SwiftUI Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

  1. 정적 목록 만들기
  2. ForEach로 반복하기
  3. 식별 가능성과 안정적인 ID
  4. 섹션과 목록 스타일
← SwiftUI Academy(으)로 돌아가기