Posts Label 태그에 개행(newLine) 넣기
Post
Cancel

Label 태그에 개행(newLine) 넣기

의사줌치 Jun 18, 2021 2021-06-18T17:15:00+09:00
Sep 13, 2023 2023-09-13T19:29:00+09:00 3 min

개요

  • Label 태그에 개행을 넣은 경험을 기록한다.
  • gonic-gin으로 환경을 만들어 실험환경을 구축한다.
  • js를 통해 문제를 해결한다.

Label 태그

  • Input 태그를 설명하는 문자열이 필요한 경우, Label 태그에 넣어 추가한다.
  • Label 태그 사용법
    • Label 태그의 for attribute에 Input 태그 id 할당
      • 1
2

          <input type="text" name="testInput" id="test-input-1">
  <label for="test-input-1">항목1</label>
    • Label 태그 안에 Input 태그를 넣어서 사용
      • 1
2
3

          <label>항목1
    <input type="text" name="testInput">
  </label>
  • 특징

실험 환경 구축

  • 개요
    • gonic-gin framework로 간단한 웹 서버 환경 구축
    • html 파일은 view 디렉토리 하위에 저장.
  • 디렉토리 구조
    • main.go
    • /view
      • test.html
  • main.go
    • 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

        package main

  import (
      "net/http"

      "github.com/gin-gonic/gin"
  )

  func main() {
      router := gin.Default()

      router.LoadHTMLGlob("view/*")
      router.GET("test", func(c *gin.Context) {
          c.HTML(
              http.StatusOK, 
              "test.html", 
              gin.H{"testText": "line1<br />line2"},
          )
      })

      router.Run(":8888")
  }
  • /view/test.html
    • 1
2
3
4
5
6
7
8
9
10
11
12
13

        <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Document</title>
  </head>
  <body>
      <input type="checkbox" id="test-input" />
      <label for="test-input">{{ .testText }}</label>
  </body>
  </html>

실험 시작

  • 실행 명령
    • 1

        go run main.go
  • test 페이지 확인
    • 브라우저를 켠다.
    • http://localhost:8888/test 에 접속한다.

실험 결과

  • 실패
    • br 태그가 텍스트로 그대로 노출된다.
    • gin.H로 받은 값이 input 태그의 innerText로 저장되어서 그런 것으로 추정된다.
    • 해당 텍스트를 innerHTML로 저장하는 스크립트를 추가하면 문제를 해결할 수 있다.

조치

  • /view/test.html
    • 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

        <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Document</title>
  </head>
  <body>
      <input type="checkbox" id="test-input" />
      <label for="test-input">{{ .testText }}</label>
      <script type="text/javascript">
          document.addEventListener("DOMContentLoaded", function () {
              reAssignTestInputLabel();
          });

          // reAssignTestInputLabel : testInput의 innerText를 innerHTML로 변경.
          function reAssignTestInputLabel() {
              var testInputElem = document.querySelector("#test-input + label");
              testInputElem.innerHTML = testInputElem.innerText;
          }
      </script>
  </body>
  </html>

조치 결과

  • 성공

참고

Javascript
javascript golang
This post is licensed under CC BY 4.0 by the author.
Recent Update
Contents

두 대의 공유기가 연결된 환경에서 포트포워드하기(in windows)

html-proofer HTML parsing error 해결