[go] 템플릿 반응형 디자인

12 Dec 2023

반응형 디자인은 웹사이트나 웹 애플리케이션을 모바일, 태블릿, 데스크톱과 같은 다양한 디바이스에서 일관된 사용자 경험을 제공하기 위한 기술입니다. Go 언어를 사용하여 템플릿 기반의 반응형 디자인을 구현하는 방법을 살펴봅시다.

1. HTML 템플릿 작성

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>반응형 템플릿</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>반응형 템플릿</h1>
        </header>
        <nav>
            <ul>
                <li><a href="#">메뉴1</a></li>
                <li><a href="#">메뉴2</a></li>
                <li><a href="#">메뉴3</a></li>
            </ul>
        </nav>
        <main>
            <h2>컨텐츠 제목</h2>
            <p>컨텐츠 내용</p>
        </main>
        <footer>
            <p>저작권 정보</p>
        </footer>
    </div>
</body>
</html>

2. CSS 스타일 작성

/* style.css */

/* 미디어 쿼리를 사용하여 반응형 레이아웃 정의 */
@media only screen and (max-width: 600px) {
    body {
        font-size: 14px;
    }
    header {
        background-color: lightblue;
    }
    nav {
        display: none;
    }
}

3. Go 웹 애플리케이션 구현

package main

import (
	"net/http"
	"text/template"
)

func main() {
	http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
		tmpl := template.Must(template.ParseFiles("index.html"))
		tmpl.Execute(w, nil)
	})

	http.Handle("/static/", http.StripPrefix("/static/", http.FileServer(http.Dir("static"))))

	http.ListenAndServe(":8080", nil)
}

위의 예시는 간단한 HTML 템플릿과 CSS 스타일을 사용하여 반응형 레이아웃을 만들고, Go를 사용하여 해당 템플릿을 웹 애플리케이션으로 서빙하는 방법을 보여줍니다.

더 다양한 반응형 디자인을 위한 기술들(예: Bootstrap, CSS 프레임워크)을 적용할 수도 있습니다.