CSS DSL

필수 의존성: io.ktor:ktor-server-html-builder, org.jetbrains.kotlin-wrappers:kotlin-css

코드 예시: css-dsl

CSS DSL은 HTML DSL을 확장하며, kotlin-css 래퍼를 사용하여 Kotlin으로 스타일시트를 작성할 수 있도록 합니다.

스타일시트를 정적 콘텐츠로 제공하는 방법은 정적 콘텐츠 제공하기에서 알아보세요.

의존성 추가

CSS DSL은 설치가 필요 없지만, 빌드 스크립트에 다음 아티팩트를 포함해야 합니다:

1. HTML DSL용 ktor-server-html-builder 아티팩트:

   Gradle (Kotlin)Gradle (Groovy)Maven

2. CSS 빌드용 kotlin-css-jvm 아티팩트:

   Gradle (Kotlin)Gradle (Groovy)Maven

   $kotlin_css_version을 필요한 kotlin-css 아티팩트 버전(예: 1.0.0-pre.625)으로 대체할 수 있습니다.

CSS 제공하기

CSS 응답을 보내려면, ApplicationCall을 확장하여 스타일시트를 문자열로 직렬화하고 CSS 콘텐츠 타입으로 클라이언트에 전송하는 respondCss 메서드를 추가해야 합니다:

suspend inline fun ApplicationCall.respondCss(builder: CssBuilder.() -> Unit) {
    this.respondText(CssBuilder().apply(builder).toString(), ContentType.Text.CSS)
}

그런 다음, 필요한 경로 내부에서 CSS를 제공할 수 있습니다:

get("/styles.css") {
    call.respondCss {
        body {
            backgroundColor = Color.darkBlue
            margin = Margin(0.px)
        }
        rule("h1.page-title") {
            color = Color.white
        }
    }
}

마지막으로, HTML DSL로 생성된 HTML 문서에 지정된 CSS를 사용할 수 있습니다:

get("/html-dsl") {
    call.respondHtml {
        head {
            link(rel = "stylesheet", href = "/styles.css", type = "text/css")
        }
        body {
            h1(classes = "page-title") {
                +"Hello from Ktor!"
            }
        }
    }
}

전체 예시는 다음에서 찾을 수 있습니다: css-dsl.