Front라이브러리 - Tirrilee/TechTalk GitHub Wiki

Slider

Machine ID

Ajax

$.ajax({ 
    type: "POST", 
    url: "{% url 'API:api-signup' %}",
    data: {
        'username': username,
        'email':email,
        'password': password,
        'phone':phone,
        'gender':gender,
        'csrfmiddlewaretoken': '{{ csrf_token }}'
    },
    dataType: "json", 
    success: function(response){
        console.log(response.msg)
        if (response.msg!='error'){
            location.href = '/accounts/login/'
        }
        else{
            location.reload()
        }
    },
    error: function(request, status, error){
    },
});

가운데 정렬

<style>
/* 가운데 정렬 */
.outer {
    display: table;
    height: 100%;
    margin: auto;
    text-align: left;
}
.middle {
    display: table-cell;
    vertical-align: middle;
}
.inner {
    margin-left: auto;
    margin-right: auto;
}
</style>
<div class='outer'>
<div class='middle'>
<div class='inner'>
  <!-- 가운데 정렬하고 싶은 아이템들-->
</div>
</div>
</div>

Class별로 랜덤 컬러 적용

var colorList = [
'rgb(26, 188, 156)', 'rgb(46, 204, 113)', 'rgb(52, 152, 219)', 'rgb(155, 89, 182)', 'rgb(52, 73, 94)',
'rgb(22, 160, 133)', 'rgb(39, 174, 96)', 'rgb(41, 128, 185)', 'rgb(142, 68, 173)', 'rgb(44, 62, 80)',
'rgb(241, 196, 15)', 'rgb(230, 126, 34)', 'rgb(231, 76, 60)', 'rgb(149, 165, 166)', 'rgb(243, 156, 18)',
'rgb(211, 84, 0)', 'rgb(192, 57, 43)', 'rgb(127, 140, 141)', 'rgb(9, 132, 227)', 'rgb(253, 121, 168)',
'rgb(255, 118, 117)', 'rgb(214, 48, 49)', 'rgb(253, 203, 110)', 'rgb(225, 112, 85)', 'rgb(108, 92, 231)',
'rgb(0, 184, 148)', 'rgb(106, 176, 76)', 'rgb(186, 220, 88)', 'rgb(72, 52, 212)', 'rgb(48, 51, 107)',
'rgb(19, 15, 64)', 'rgb(34, 166, 179)', 'rgb(140, 122, 230)', 'rgb(64, 115, 158)', 'rgb(0, 168, 255)',
'rgb(156, 136, 255)', 'rgb(251, 197, 49)', 'rgb(76, 209, 55)', 'rgb(72, 126, 176)', 'rgb(0, 151, 230)',
'rgb(140, 122, 230)', 'rgb(225, 177, 44)', 'rgb(68, 189, 50)', 'rgb(194, 54, 22)', 'rgb(127, 143, 166)',
'rgb(113, 128, 147)', 'rgb(39, 60, 117)', 'rgb(25, 42, 86)', 'rgb(53, 59, 72)', 'rgb(47, 54, 64)',
'rgb(246, 185, 59)', 'rgb(106, 137, 204)', 'rgb(120, 224, 143)', 'rgb(56, 173, 169)', 'rgb(7, 153, 146)',
'#rgb(235, 47, 6)', 'rgb(183, 21, 64)', 'rgb(30, 55, 153)'
]

var boxes = document.querySelectorAll(".item-tag");
for (i = 0; i < boxes.length; i++) {
    // Pick a random color from the array 'colors'.
    boxes[i].style.color = colorList[Math.floor(Math.random()*colorList.length)];
}

Video 태그 Full size

video{
    min-width:100%;
    min-height: 100%;
}

Multiple Item Slider

https://www.jqueryscript.net/slider/Responsive-Multi-slide-Carousel-Plugin-jQuery-Multislider.html

프런트 성능 테스트

https://github.com/ParkSB/Front-End-Performance-Checklist/blob/master/README.md#html

⚠️ **GitHub.com Fallback** ⚠️