Frontend/JavaScript 실전 노트

import Adsense from ”@/components/Adsense.astro”;

Javascript – div 높이 조절

div 높이를 자바스크립트로 조절하고 싶어 여러가지 찾아 봤다.

근데 가장 중요한 키는 + "px" 라는 사실이 허망하군 암튼 머 아래 코드를 참고

설명>div_content div의 내용에 따라 height 크기가 변경되면 왼쪽에 있는 div_left div height 크기도 자동으로 변경된다. 출처: https://okkks.tistory.com/entry/javascript-다른-div-높이가-변경되면-자동으로-div-height-크기-조절하기

<script type="text/javascript">function setDivHeight(objSet, objTar)    {           var objSet   = document.getElementById(objSet);        var objTarHeight= document.getElementById(objTar).offsetHeight;        objSet.style.height  = objTarHeight + "px";    } //--></script>

Javascript – onsubmit 함수 만들기

form submit 이전에 자바스크립트로 먼가를 체크하거나, 경고창을 띄워주기 위해 submit 전에 함수를 먼저 호출해서 처리할 수 있도록 해보자.

너무 기본적인 내용이지만, 코드를 중심으로 남겨둔다.

먼저, html 코드에는 onsubmit 이벤트를 넣어 두도록 한다. 코드를 보자.

<form class="user" method="post" name="form1" onsubmit="return submit_form();">    ...    <input  autocomplete="new-password" class="form-control form-icon-input" type="password" id="id_password1" name="password1" placeholder="Password" required>    <input  autocomplete="new-password" class="form-control form-icon-input" type="password" id="id_password2" name="password2" placeholder="Password" required></form>

여기서 중요한 것은 form 태그에 있는 onsubmit="return submit_form();" 이랑 form name 이다. 이렇게 해두고 아래와 같이 javascript 코드를 추가하면 원하는 대로 할 수 있다.

<script type="text/javascript">    function submit_form() {        var form = document.form1;        if (form.password1.value != form.password2.value) {            alert("패스워드를 확인해주세요!");            form.password2.focus();            return false;        }        text="사용자 등록을 진행하시겠습니까?";        if (!confirm(text)) {            return false;        }        return true;    }</script>

리턴을 false 로 하면 form.submit() 을 수행하지 않으므로 맘대로 로직을 짜서 활용해 보세요 😀

참고 코드

크롬에서 자동완성이 되지 않도록 하고 싶다면, 아래 코드를 html 태그에 에 추가하면 된다. 위의 예제에서 살펴 볼 수 있다.

 autocomplete="new-password"

@vdekr9

Javascript – select box 다루기

맨날 봐도 또 보고 해야 한다. 머리로 다 안외워져

JQuery, javascript 로 select input 다루기

<figure class=“kg-card kg-bookmark-card”><div class=“kg-bookmark-content”><div class=“kg-bookmark-title”>jquery – select option 선택값 가져오기</div><div class=“kg-bookmark-description”>[jquery] select box 선택값 가져오기 // select box ID로 접근하여 선택된 값 읽기 $(”#셀렉트박스ID option:selected”).val(); // select box Name로 접근하여 선택된 값 읽기 $(“select[name=셀렉트박스name]”)..</div><div class=“kg-bookmark-metadata”><span class=“kg-bookmark-author”>TISTORY</span><span class=“kg-bookmark-publisher”>오잉봉</span>``</div>``</div><div class=“kg-bookmark-thumbnail”></div></figure>// select box ID로 접근하여 선택된 값 읽기
$(“#셀렉트박스ID option:selected”).val();
// select box Name로 접근하여 선택된 값 읽기
$(“select[name=셀렉트박스name]”).val();
// 선택된 값의 index를 불러오기
var index = $(“#셀렉트박스ID option”).index($(“#셀렉트박스ID option:selected”));
// 셀렉트 박스에 option값 추가하기
$(“#셀렉트박스ID”).append(“<option value=’1′>1번</option>”);
// 셀렉트 박스 option의 맨앞에 추가 할 경우
$(“#셀렉트박스ID”).prepend(“<option value=’0′>0번</option>”);
// 직접 index 값을 주어 selected 속성 주기
$(“#셀렉트ID option:eq(1)”).attr(“selected”, “selected”);
// value 값으로 selected 속성 주기
$(“#셀렉트ID”).val(“1”);
$(“#id”).val(“1”).prop(“selected”, true);
// 첫번째, 마지막 item 삭제하기
$(“#셀렉트ID option:first”).remove();
$(“#셀렉트ID option:last”).remove();

JQuery – select 변경 form sumbit

select box 값을 변경하면 자동으로 form submit() 해 버리고 싶은데, 어떻게 하나요? 엄청 간단하게 알려주세요. 🙂

<figure class=“kg-card kg-bookmark-card”><div class=“kg-bookmark-content”><div class=“kg-bookmark-title”>How to Submit Form on Select Change</div><div class=“kg-bookmark-description”>I have the following form. I’d like it to be submitted automatically via jQuery when the user makes a selection, without needing to press the submit button. How do I do this? <form action=”″ me…</div><div class=“kg-bookmark-metadata”><span class=“kg-bookmark-author”>Stack Overflow</span><span class=“kg-bookmark-publisher”>Rick Helston</span>``</div>``</div><div class=“kg-bookmark-thumbnail”></div></figure>정답은 아래 코드를 참고하세요

$(document).ready(function() {  $('#선택박스아이디').on('change', function() {     document.forms[myFormName].submit();  });});// 혹은$(document).ready(function() {   $('#선택박스아이디').change(function() {     var parentForm = $(this).closest("form");     if (parentForm && parentForm.length > 0)       parentForm.submit();   });});

쉽죠 끝.

on(‘change’) vs .change()

참고로 이벤트 등록을 2가지 형태로 할 수 있는데, 머가 맞는거니?

둘다 맞는데, 머 정답이라기 보다는 그냥 on(이벤트, function() {}); 형태로 사용하는 것을 강권합니다.

<figure class=“kg-card kg-bookmark-card”><div class=“kg-bookmark-content”><div class=“kg-bookmark-title”>JQuery 클릭 이벤트 on(“click”) 과 click() 의 차이</div><div class=“kg-bookmark-description”>JQuery on(“click”)과 click() on(“click”) 과 click() 의 차이점은 동적으로 이벤트를 바인딩할 수 있는지의 차이다. on(“click”)은 동적으로 가능하고 click()은 최초에 선언된 element에만 동작한다. 아래 예..</div><div class=“kg-bookmark-metadata”><span class=“kg-bookmark-author”>TISTORY</span><span class=“kg-bookmark-publisher”>eatyourKimchi</span>``</div>``</div><div class=“kg-bookmark-thumbnail”></div></figure>동적으로 생성된 요소의 경우 이벤트도 발생하게 하려면 on 을 써야 한다네요. 진짜끝

JS – billboard 차트 라이브러리 써보기

#billboard.js #chart #js #라이브러리 #사용법

여러 개 찾아보다가, 좀 페이지가 덜 지저분하게 라인을 짧게 쓸수 있는 차트 라이브러릴 찾다가 빌보드차트를 건드려보기로 – D3 라이브러리 기반이라고 한다. d3js.org 도 참고하자.

홈페이지는 여기 : https://naver.github.io/billboard.js/

<figure class=“kg-card kg-bookmark-card”><div class=“kg-bookmark-content”><div class=“kg-bookmark-title”>billboard.js</div><div class=“kg-bookmark-description”>Re-usable easy interface JavaScript chart library, based on D3 v4+</div><div class=“kg-bookmark-metadata”></div>``</div><div class=“kg-bookmark-thumbnail”></div></figure>## 간단한 사용법

아주 간단하게 쓰는 방법을 정리해 보자. 그런데 메인 페이지에서 이미 쉽게 정리해서 알려주고 있다.

Step 1. Load billboard.js and D3.js

D3 차트 라이브러리를 기반으로 하니깐, 이것을 따로 다운로드 받고 링크하고, billboard.js 를 가져와서 제대로 동작한다.

{% raw %}

<!-- Step 1) Load D3.js --><script src="https://d3js.org/d3.v6.min.js"></script><!-- Step 2) Load billboard.js with style --><script src="$YOUR_PATH/billboard.js"></script><!-- Load with base style --><link rel="stylesheet" href="$YOUR_PATH/billboard.css"><!-- Or load different theme style --><link rel="stylesheet" href="$YOUR_PATH/theme/insight.css">

테마가 있으니깐 2~3개 정도 나는 datalab theme를 사용하기로 따라서, 내가 실제로 적용한 코드는 아래와 같다.

D3.js 는 버전 6에서 가장 최신을 다운로드 받았다. https://github.com/d3/d3/releases/tag/v6.7.0

<script src="{% static 'vendor/d3/d3.min.js' %}"></script><script src="{% static 'vendor/billboard/billboard.min.js' %}"></script><link rel="stylesheet" href="{% static 'vendor/billboard/datalab.min.css' %}">

Step 2. Setup your chart holder

차트를 넣고 싶은 html에 아래와 같이 코드를 추가하고,

<div id="chart"></div>

Step 3. Generate a chart with options

var chart = bb.generate({    bindto: "#chart",    data: {        type: "bar",        columns: [            ["data1", 30, 200, 100, 170, 150, 250],            ["data2", 130, 100, 140, 35, 110, 50]        ]    }});

Step 4. 옵션 좀 추가

실제 내가 작성한 코드는 아래와 같다. 박스 완료 수량을 표기하는 건데, boxcount 에서 box_done 만큼 완료되었는지 표시하는 막대 차트를 만들어 보았다.

결과 모양은,

<figure class=“kg-card kg-image-card”></figure>다 기본으로 쓰면 되지만, 일단

title 추가해서 차트 위에 표기
axis:{rotated: true,} 옵션으로 방향을 옆으로 보이게 수정
x 축 라벨 이나 텍스트를 표기 안하도록 show:false 처리
y 축 범위를 지정, max min 값 추가
y 축 tick 에 count 지정해서 1 씩 기준 선이 보이도록 수정, 여기서 주의할 점은 max+1 값을 지정해 둔다는 것!</u>

y 축 숫자를 1씩 증가하면서 보여지도록 stepSize 값 지정

y축 padding 지정하여 딱 붙여서 막대 그래프가 표현되도록 수정

var chart3 = bb.generate({    title: {        text: "완료수량 {{ box_done }} / {{ boxcount }}"    },    data: {    columns: [        ["박스완료",{{ box_done }}],    ],    type: "bar", // for ESM specify as: bar()  },  axis: {    rotated: true,    x: {        tick: {            show: false,            text: {                show: false            }        }    },        y: {        padding: {            top: 0,            bottom: 0        },        tick: {            count: {{boxcount}}+1,            stepSize:1,        },        max:{{boxcount}},        min:0    }  },  bindto: "#chart-container3"});

{% endraw %}

예제 제공 페이지

사실 예제를 보고 그냥 쉽게 따라할 수 있다. 그중에 나한테 맞는 걸 고르는 게 일이다.

<figure class=“kg-card kg-bookmark-card”><div class=“kg-bookmark-content”><div class=“kg-bookmark-title”>billboard.js – examples</div><div class=“kg-bookmark-description”>Examples of billboard.js. billboard.js is a re-usable easy interface JavaScript chart library, based on D3 v4+.</div><div class=“kg-bookmark-metadata”><span class=“kg-bookmark-author”>billboard.js</span><span class=“kg-bookmark-publisher”>NAVER Corp.</span>``</div>``</div></figure>

Bootstrap5.0 Theme 구입

기록해두자. 처음 사보는 테마

먼가 무료버전 말고 사서 하는 것은 첨인데, 많은 공이 들어가 있는데 쓰는 기능은 한 20%정도일듯 😁

<figure class=“kg-card kg-image-card”></figure>테마의 자세한 내용은 아래 링크로 방문해 보세요.

<figure class=“kg-card kg-bookmark-card”><div class=“kg-bookmark-content”><div class=“kg-bookmark-title”>Phoenix – Admin Dashboard & WebApp Template</div><div class=“kg-bookmark-description”>Phoenix is a in-house Bootstrap 5 premium quality free admin dashboard template. Enriched with effective features and attractive layouts.</div><div class=“kg-bookmark-metadata”><span class=“kg-bookmark-author”>ThemeWagon</span><span class=“kg-bookmark-publisher”>ThemeWagon</span>``</div>``</div><div class=“kg-bookmark-thumbnail”></div></figure>이런 회사에서는 외주 용역을 같이 수행한다고 하네요. 구매하면 마케팅 메일이 같이 날라와서 알게 되었어요. 동남아를 기반으로 하는 회사 같은데 잘 만드시네

JQuery – on(‘change’) vs change() 어떤 것을 쓰나?

이벤트 함수를 등록해서 쓰고 싶은데, 2가지 방식이 있네

on(‘change’) vs change()

둘다 맞는데, 머 정답이라기 보다는 그냥 on(이벤트, function() {}); 형태로 사용하는 것을 강권합니다.

동적으로 생긴 컴포넌트도 쓸수있도록 하려면 on(‘change’,… 를 쓰라고 하네요.

https://lookingfor.tistory.com/entry/JQuery-%ED%81%B4%EB%A6%AD-%EC%9D%B4%EB%B2%A4%ED%8A%B8-onclick-%EA%B3%BC-click-%EC%9D%98-%EC%B0%A8%EC%9D%B4

<div class=“wp-block-stackable-columns alignfull stk-block-columns stk-block stk-0e9692c” data-block-id=“0e9692c”><div class=“stk-row stk-inner-blocks stk-block-content stk-content-align stk-0e9692c-column alignwide”><div class=“wp-block-stackable-column stk-block-column stk-block-column—v2 stk-column stk-block stk-c467628” data-block-id=“c467628”><div class=“stk-column-wrapper stk-block-column__content stk-container stk-c467628-container stk—no-background stk—no-padding”><div class=“stk-block-content stk-inner-blocks stk-c467628-inner-blocks”><div class=“wp-block-stackable-subtitle stk-block-subtitle stk-block stk-94901b9” data-block-id=“94901b9”><style>.stk-94901b9 .stk-block-subtitle__text{font-size:16px !important;font-family:“Palatino Linotype”,Palatino,Palladio,“URW Palladio L”,“Book Antiqua”,Baskerville,“Bookman Old Style”,“Bitstream Charter”,“Nimbus Roman No9 L”,Garamond,“Apple Garamond”,“ITC Garamond Narrow”,“New Century Schoolbook”,“Century Schoolbook”,“Century Schoolbook L”,Georgia,serif !important}@media screen and (max-width:1023px){.stk-94901b9 .stk-block-subtitle__text{font-size:16px !important}}</style>Subtitle for this block

</div><div class=“wp-block-stackable-heading stk-block-heading stk-block stk-17baed9” data-block-id=“17baed9” id=“frequently-asked-questions”><style>.stk-17baed9 .stk-block-heading__text{margin:0 !important;font-weight:700 !important;font-family:“Lato”,Sans-serif !important}@media screen and (max-width:767px){.stk-17baed9 .stk-block-heading__text{font-size:32px !important}}</style>## Frequently Asked Questions

</div><div class=“wp-block-stackable-text stk-block-text stk-block stk-8af215e” data-block-id=“8af215e”><style>.stk-8af215e{margin-bottom:23px !important}</style>Description for this block. Use this space for describing your block. Any text will do.

</div><details class=“wp-block-stackable-accordion stk-block-accordion stk-inner-blocks stk-block-content stk—is-open stk—single-open stk-block stk-e579195” data-block-id=“e579195” open=""><style>.stk-e579195{border-style:solid !important;border-color:#dfdad1 !important;border-top-width:0px !important;border-right-width:0px !important;border-bottom-width:1px !important;border-left-width:0px !important}.stk-e579195{padding-bottom:24px !important}</style><summary class=“wp-block-stackable-column stk-block-column stk-block-column—v2 stk-column stk-block stk-606dfbc stk—container-small stk-block-accordion__heading” data-block-id=“606dfbc”><div class=“stk-column-wrapper stk-block-column__content stk-container stk-606dfbc-container stk—no-background stk—no-padding”><div class=“stk-block-content stk-inner-blocks stk-606dfbc-inner-blocks”><div class=“wp-block-stackable-icon-label stk-block-icon-label stk-block stk-3ad35f9” data-block-id=“3ad35f9”><div class=“stk-row stk-inner-blocks stk-block-content”><div class=“wp-block-stackable-heading stk-block-heading stk-block stk-b8ab3e0” data-block-id=“b8ab3e0” id=“j-query-on-change-vs-change-어떤-것을-쓰나”><style>.stk-b8ab3e0 .stk-block-heading__text{font-family:“Lato”,Sans-serif !important}</style>#### JQuery – on(‘change’) vs change() 어떤 것을 쓰나?

</div><div class=“wp-block-stackable-icon stk-block-icon stk-block stk-3ab2f56” data-block-id=“3ab2f56”><span class=“stk—svg-wrapper”><div class=“stk—inner-svg”><svg style=“height:0;width:0”><defs><lineargradient id=“linear-gradient-3ab2f56” x1=“0” x2=“100%” y1=“0” y2=“0”><stop offset=“0%” style=“stop-opacity:1;stop-color:var(—linear-gradient-3-ab-2-f-56-color-1)“></stop><stop offset=“100%” style=“stop-opacity:1;stop-color:var(—linear-gradient-3-ab-2-f-56-color-2)“></stop>``</lineargradient>``</defs>``</svg><svg aria-hidden=“true” class=“svg-inline—fa fa-chevron-down fa-w-14” data-icon=“chevron-down” data-prefix=“fas” height=“32” viewbox=“0 0 448 512” width=“32” xmlns=“http://www.w3.org/2000/svg”><path d=“M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z” fill=“currentColor”></path>``</svg>``</div>``</span>``</div>``</div>``</div>``</div>``</div>``</summary><div class=“wp-block-stackable-column stk-block-column stk-block-column—v2 stk-column stk-block stk-6540cfb stk-block-accordion__content” data-block-id=“6540cfb”><style>.stk-6540cfb-container{padding-top:0px !important;padding-right:0px !important;padding-bottom:0px !important;padding-left:0px !important}</style><div class=“stk-column-wrapper stk-block-column__content stk-container stk-6540cfb-container stk—no-background stk—no-padding”><div class=“stk-block-content stk-inner-blocks stk-6540cfb-inner-blocks”><div class=“wp-block-stackable-text stk-block-text stk-block stk-8a6c73b” data-block-id=“8a6c73b”>동적으로 생긴 컴포넌트도 쓸수있도록 하려면 on(‘change’,… 를 쓰라고 하네요.

</div>``</div>``</div>``</div>``</details><details class=“wp-block-stackable-accordion stk-block-accordion stk-inner-blocks stk-block-content stk—single-open stk-block stk-9e59c8c” data-block-id=“9e59c8c”><style>.stk-9e59c8c{border-style:solid !important;border-color:#dfdad1 !important;border-top-width:0px !important;border-right-width:0px !important;border-bottom-width:1px !important;border-left-width:0px !important}.stk-9e59c8c{padding-bottom:24px !important}</style><summary class=“wp-block-stackable-column stk-block-column stk-block-column—v2 stk-column stk-block stk-3b9b734 stk—container-small stk-block-accordion__heading” data-block-id=“3b9b734”><div class=“stk-column-wrapper stk-block-column__content stk-container stk-3b9b734-container stk—no-background stk—no-padding”><div class=“stk-block-content stk-inner-blocks stk-3b9b734-inner-blocks”><div class=“wp-block-stackable-icon-label stk-block-icon-label stk-block stk-99f5554” data-block-id=“99f5554”><div class=“stk-row stk-inner-blocks stk-block-content”><div class=“wp-block-stackable-heading stk-block-heading stk-block stk-53cd527” data-block-id=“53cd527” id=“title-for-this-block”><style>.stk-53cd527 .stk-block-heading__text{font-family:“Lato”,Sans-serif !important}</style>#### Title for This Block

</div><div class=“wp-block-stackable-icon stk-block-icon stk-block stk-e507371” data-block-id=“e507371”><span class=“stk—svg-wrapper”><div class=“stk—inner-svg”><svg style=“height:0;width:0”><defs><lineargradient id=“linear-gradient-e507371” x1=“0” x2=“100%” y1=“0” y2=“0”><stop offset=“0%” style=“stop-opacity:1;stop-color:var(—linear-gradient-e-507371-color-1)“></stop><stop offset=“100%” style=“stop-opacity:1;stop-color:var(—linear-gradient-e-507371-color-2)“></stop>``</lineargradient>``</defs>``</svg><svg aria-hidden=“true” class=“svg-inline—fa fa-chevron-down fa-w-14” data-icon=“chevron-down” data-prefix=“fas” height=“32” viewbox=“0 0 448 512” width=“32” xmlns=“http://www.w3.org/2000/svg”><path d=“M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z” fill=“currentColor”></path>``</svg>``</div>``</span>``</div>``</div>``</div>``</div>``</div>``</summary><div class=“wp-block-stackable-column stk-block-column stk-block-column—v2 stk-column stk-block stk-763e91c stk-block-accordion__content” data-block-id=“763e91c”><style>.stk-763e91c-container{padding-top:0px !important;padding-right:0px !important;padding-bottom:0px !important;padding-left:0px !important}</style><div class=“stk-column-wrapper stk-block-column__content stk-container stk-763e91c-container stk—no-background stk—no-padding”><div class=“stk-block-content stk-inner-blocks stk-763e91c-inner-blocks”><div class=“wp-block-stackable-text stk-block-text stk-block stk-f8b6731” data-block-id=“f8b6731”>Description for this block. Use this space for describing your block. Any text will do. Description for this block. You can use this space for describing your block.

</div>``</div>``</div>``</div>``</details><details class=“wp-block-stackable-accordion stk-block-accordion stk-inner-blocks stk-block-content stk—single-open stk-block stk-33ffc00” data-block-id=“33ffc00”><style>.stk-33ffc00{border-style:solid !important;border-color:#dfdad1 !important;border-top-width:0px !important;border-right-width:0px !important;border-bottom-width:1px !important;border-left-width:0px !important}.stk-33ffc00{padding-bottom:24px !important}</style><summary class=“wp-block-stackable-column stk-block-column stk-block-column—v2 stk-column stk-block stk-656b725 stk—container-small stk-block-accordion__heading” data-block-id=“656b725”><div class=“stk-column-wrapper stk-block-column__content stk-container stk-656b725-container stk—no-background stk—no-padding”><div class=“stk-block-content stk-inner-blocks stk-656b725-inner-blocks”><div class=“wp-block-stackable-icon-label stk-block-icon-label stk-block stk-2675e85” data-block-id=“2675e85”><div class=“stk-row stk-inner-blocks stk-block-content”><div class=“wp-block-stackable-heading stk-block-heading stk-block stk-6c1eb72” data-block-id=“6c1eb72” id=“title-for-this-block”><style>.stk-6c1eb72 .stk-block-heading__text{font-family:“Lato”,Sans-serif !important}</style>#### Title for This Block

</div><div class=“wp-block-stackable-icon stk-block-icon stk-block stk-e689253” data-block-id=“e689253”><span class=“stk—svg-wrapper”><div class=“stk—inner-svg”><svg style=“height:0;width:0”><defs><lineargradient id=“linear-gradient-e689253” x1=“0” x2=“100%” y1=“0” y2=“0”><stop offset=“0%” style=“stop-opacity:1;stop-color:var(—linear-gradient-e-689253-color-1)“></stop><stop offset=“100%” style=“stop-opacity:1;stop-color:var(—linear-gradient-e-689253-color-2)“></stop>``</lineargradient>``</defs>``</svg><svg aria-hidden=“true” class=“svg-inline—fa fa-chevron-down fa-w-14” data-icon=“chevron-down” data-prefix=“fas” height=“32” viewbox=“0 0 448 512” width=“32” xmlns=“http://www.w3.org/2000/svg”><path d=“M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z” fill=“currentColor”></path>``</svg>``</div>``</span>``</div>``</div>``</div>``</div>``</div>``</summary><div class=“wp-block-stackable-column stk-block-column stk-block-column—v2 stk-column stk-block stk-7612517 stk-block-accordion__content” data-block-id=“7612517”><style>.stk-7612517-container{padding-top:0px !important;padding-right:0px !important;padding-bottom:0px !important;padding-left:0px !important}</style><div class=“stk-column-wrapper stk-block-column__content stk-container stk-7612517-container stk—no-background stk—no-padding”><div class=“stk-block-content stk-inner-blocks stk-7612517-inner-blocks”><div class=“wp-block-stackable-text stk-block-text stk-block stk-12a5d36” data-block-id=“12a5d36”>Description for this block. Use this space for describing your block. Any text will do. Description for this block. You can use this space for describing your block.

</div>``</div>``</div>``</div>``</details>``</div>``</div>``</div>``</div>``</div>

html css – a link 빈 링크 처리

a href=”#” 으로 처리하지 않고, 그냥 빈 링크를 a link 로 해보고 싶은데, 쉽지 않넹

<figure class=“kg-card kg-image-card”></figure>그냥 href=”#” 을 빼니깐 위의 그림처럼 “Remove” 마우스 포인터가 일반 텍스트 입력을 나타내는 포인터가 되서 안되겠네. 어쩔 수 없이 강제로 style 추가하니 “Change” 처럼 링크를 나타내는 것처럼 보일 수 있겠네.

코드는 아래 것 참고, modal 창이 뜨는 것이라 코드가 지저분함

{% raw %}

<a style="cursor: pointer;" class="dropdown-item update-item bs-modal" data-form-url="{% url 'firmware_update' item.pk %}" data-form-size="lg">Change</a><div class="dropdown-divider"></div><a style="cursor: pointer;" class="dropdown-item text-danger" data-toggle="modal" data-target="#confirmModal"    data-form-url="{% url 'firmware_delete' item.pk %}" data-title="항목 {{item.pk}} 삭제" data-form-message="정말 삭제 하시겠습니까?">    Remove</a>

{% endraw %}

참고 사이트

href 없는 a link 스타일 처리하기 문답

<figure class=“kg-card kg-bookmark-card”><div class=“kg-bookmark-content”><div class=“kg-bookmark-title”>how to set cursor style to pointer for links without hrefs</div><div class=“kg-bookmark-description”>I have a lot of <a> html tags without the href attribute for making onclick javascript calls. These links do not have a pointer style of cursor. They have text style cursor. How can I set the</div><div class=“kg-bookmark-metadata”><span class=“kg-bookmark-author”>Stack Overflow</span><span class=“kg-bookmark-publisher”>kevin</span>``</div>``</div><div class=“kg-bookmark-thumbnail”></div></figure>

JQuery 로 form input 사이즈 조정하기

HTML 로드시에 Form 안에 있는 input box 들의 width 를 조정하고 싶다면 아래 코드를 활용하면 된다.

<script type="text/javascript">
$(function(){
    $("form select").css("width","100px");
    $("form input").css("width","100px");
});
</script>

전부 크기를 100px 로 바꿔 주는 코드이다.

form 내부에 select, input 요소들만 쏙 골라서, 결과는 다음과 같다.

<figure class=“wp-block-image size-large”></figure>요소들 접근 하는 방법은 다음 링크를 참고하세요.

https://back-end-developer.tistory.com/entry/jQuery-%EC%A0%9C%EC%9D%B4%EC%BF%BC%EB%A6%AC%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%98%EC%97%AC-css-%EC%A0%91%EA%B7%BC%ED%95%98%EA%B8%B0

순수하게 jquery 로 너비 조절을 한다면, 아래 글 참고

jQuery 입문 | 요소의 영역 | 요소의 크기 .width() .height()

HTML – 버튼에 또 중복 타입 type=”button” 선언

별로 생각 안하고 썼는데,

기본은 type=”submit” 으로 잡혀있어서, 왠만하면 일반 버튼은 type=”button” 을 써 주는게 좋을 듯 하다.

약간 중복되는 느낌은 있긴 하지만 그래도 머, 아무곳이나 눌러서 Submit 이 되면 낭패이니깐..

버튼에 타입을 쓰는 이유 (button type=”button”)

HTML – CSS 체크박스 수직정렬 맞추기

왜인지 모르지만 체크박스가 수직 정렬이 잘 안맞아서 글자랑 비뚤삐뚤 하네.

일단 결론적으로 이렇게 맞추었다. CSS의 남발인지 모르지만


d-flex align-items-center 이거의 남발일수 있지만

마진 이나 패팅을 0으로 만들고 억지로 끼워맞춘 느낌이지만 머 잘 보이면 되지

---

### JQuery – data field 값에 따라 option 표시

특정 제품이 선택되면 종속적인 옵션을 보여주고, 숨기고 해야 하는 응용이 상당히 많이 있다.

DB에서 가져올 때 필터링 해서 가져오면 좋은데, 대부분 경우 이미 가져온 데이터를 브라우저 렌더링시에 필터링해서 보여주고 숨기고 하는것이 효율적이다. show / hide 기능을 쓸수 있어야 하는데,

편법인지 모르지만 data-xxx=”xxx” 이런 html tag 에 추가해두면 JQuery 에서 data() 함수로 바로 읽을 수 있다.

이를 이용해서 .show() .hide() 기능을 활용하면 원하는 결과를 얻을 수 있다.

JQuery 코드는 아래와 같다.

$(“[name$=‘product’]“).on(“change”, function(){
var product_code = parseInt($(this).val());
$(“.productselect option”).hide().filter(‘[data-product=‘+product_code+’]‘).show();
$(“.productsetselect option”).hide().filter(‘[data-’+product_code+’=‘+product_code+’]‘).show();
$(“.productsetselect option”).hide();
var options = $(‘.productsetselect option’);
var values = $.map(options ,function(option) {
var getdata = $(option).data(“product”);
// if (jQuery.type(getdata) === “number”) {
// if (getdata == product_code) {
// $(option).show();
// }
// }
if (jQuery.type(getdata) === “array”) {
if (getdata.indexOf(product_code) >= 0) {
$(option).show();
}
}
});
});


적용되는 HTML 코드는 아래와 같다. 볼드로 강조해 두었다.


이렇게 되면, Product 가 선택될 때 해당 프로덕트에 맞는 펌웨어 리스트만 나오도록 표현할 수 있다.

productselect 클래스의 option을 전부 hide() 한 다음, 에서 data-product 값이 해당 값인 경우 show() 하도록 코드를 구성했다.

array 값이 올 수 도 있기 때문에, 이경우에는 간단하게 filter 함수로 이 components 들을 다 가져올 수 없어서, map() 함수로 iteration 하도록 구현해 봤다.

대안으로 data-productcode=”productcode” 형태로 나오도록 또 추가해서 간단하게 한줄로 가능하게 하는 것도 같이 추가해뒀다.

참고하시길..

Django Formfield 값에 data-xxx 속성을 넣는 방법은 다른 포스팅에서 올리겠다.

<figure class="wp-block-image size-full">![](assets/images/2023/03/img103.gif?resize=546%2C282&ssl=1)`</figure>`

---

### displaying beautiful tables with Bootstrap Tables

Using markdown to display tables is easy.

## Simple Example

First, add the following to the post's front matter

```yml
pretty_table: true

Then, the following syntax

| Left aligned | Center aligned | Right aligned |
| :----------- | :------------: | ------------: |
| Left 1       |    center 1    |       right 1 |
| Left 2       |    center 2    |       right 2 |
| Left 3       |    center 3    |       right 3 |

will generate

Left aligned	Center aligned	Right aligned
Left 1	center 1	right 1
Left 2	center 2	right 2
Left 3	center 3	right 3

HTML Example

It is also possible to use HTML to display tables. For example, the following HTML code will display a table with Bootstrap Table, loaded from a JSON file:

{% raw %}

```text
<table id="table" data-toggle="table" data-url="{{ '/assets/json/table_data.json' | relative_url }}">

<thead>
<tr>
<th data-field=“id”>ID</th>
<th data-field=“name”>Item Name</th>
<th data-field=“price”>Item Price</th>
</tr>
</thead>
</table>


`{% endraw  %}`

<table
  data-toggle="table"
  data-url="`{{ '/assets/json/table_data.json' | relative_url }}`">
  <thead>
    <tr>
      <th data-field="id">ID`</th>`
      <th data-field="name">Item Name`</th>`
      <th data-field="price">Item Price`</th>`
    </tr>
  </thead>
</table>

<p>`</p>`

## More Complex Example

By using [Bootstrap Table](https://bootstrap-table.com/) it is possible to create pretty complex tables, with pagination, search, and more. For example, the following HTML code will display a table, loaded from a JSON file, with pagination, search, checkboxes, and header/content alignment. For more information, check the [documentation](https://examples.bootstrap-table.com/index.html).

`{% raw  %}`

```html
&lt;table
  data-click-to-select="true"
  data-height="460"
  data-pagination="true"
  data-search="true"
  data-toggle="table"
```text
  data-url="{{ '/assets/json/table_data.json' | relative_url }}"

<thead>
<tr>
<th data-checkbox=“true”></th>
<th data-field=“id” data-halign=“left” data-align=“center” data-sortable=“true”>ID</th>
<th data-field=“name” data-halign=“center” data-align=“right” data-sortable=“true”>Item Name</th>
<th data-field=“price” data-halign=“right” data-align=“left” data-sortable=“true”>Item Price</th>
</tr>
</thead>
</table>


`{% endraw  %}`

<table
  data-click-to-select="true"
  data-height="460"
  data-pagination="true"
  data-search="true"
  data-toggle="table"
  data-url="`{{ '/assets/json/table_data.json' | relative_url }}`">
  <thead>
    <tr>
      <th data-checkbox="true">`</th>`
      <th data-field="id" data-halign="left" data-align="center" data-sortable="true">ID`</th>`
      <th data-field="name" data-halign="center" data-align="right" data-sortable="true">Item Name`</th>`
      <th data-field="price" data-halign="right" data-align="left" data-sortable="true">Item Price`</th>`
    </tr>
  </thead>
</table>

<Adsense />