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 응답을 보내려면, 스타일시트를 문자열로 직렬화하고 CSS 콘텐츠 유형(content type)으로 클라이언트에 전송하는 respondCss 메서드를 추가하여 ApplicationCall을 확장해야 합니다:

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

그런 다음, 필요한 라우트(route) 내부에서 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.