본문 바로가기
반응형

분류 전체보기126

Scss random 함수 scss의 내장함수 중에 random() 함수가 있습니다. random()을 사용하면 0 ~ 1사이의 수를 반환합니다. 숫자를 지정하면 0 부터 지정한 수까지 반환합니다. // scss .box { height: random() + px; } .box1 { height: random(300) + px; } // css로 변환 .box { height: 0.6770711576px; } .box1 { height: 190px; } 이런 식으로 해서 background-image도 랜덤으로 사용할 수 있습니다. // scss $imgKey: random(3); $list: (bg1, bg2, bg3); $nth: nth($list, $imgKey); #wrap { background-image: url(../.. 2020. 1. 3.
에버그린 브라우저(Evergreen Browser) 에버그린 브라우저(Evergreen Browser)란, 자동적으로 브라우저가 사용자에 대한 별도의 재설치를 요구하지 않고도 업데이트가 가능한 브라우저를 말한다. 초기 웹브라우저들은 Evergreen 방식을 사용하지 않으나, Web 기술의 발전에 따라 사용자의 편의성과 업데이트를 위해 설계된 방식이다. Chrome은 대표적인 에버그린 브라우저이며, Firefox나 근래의 IE와 같은 많은 주요 브라우저들이 Evergreen 방식의 업데이트로 브라우저를 제공하고 있다. 에버그린 브라우저는 사용자가 브라우저에 접속하면 버전을 체크 후 자동으로 업데이트를 진행한다. 보안 및 기능에 대한 업데이트가 사용자가 모르는 사이에 업그레이드 되는 것이다. 사용자들이 에버그린 브라우저를 사용하면 많은 장점이 있다. 먼저 지.. 2019. 12. 27.
DocumentFragment var $box = $('#box'); var arr = ['a','b','c','d','e','f']; arr.forEach( item => { $box.append( '' + item + '' ); }); 위와 같은 방식으로 배열 등을 받아와서 동적으로 태그를 추가해주는 방식은 양이 적으면 상관없겠지만 그 양이 수백, 수천개라면 성능에도 좋지 않고 그만큼 페이지를 새로 그려야합니다. 브라우저가 힘들어할겁니다. var $box = $('#box'); var arr = ['a','b','c','d','e','f']; var $frag = $(document.createDocumentFragment()); arr.forEach( item => { $frag.append( '' + item + '' ); }.. 2019. 12. 20.
숫자 정렬 토글로 만들기 sort! 6 7 3 1 12 var array = []; var switching = true; $('#list li').each(function(idx, val) { array.push(val.innerText); }) function toggleSort() { switching = !switching; var code = '', list = $('#list'); list.empty(); if (switching) { array.sort(function(a, b) { return b - a; // reverse }) console.log(array) for (var i = 0; i < array.length; i++) { code += '' + array[i] + ''; } list.append(co.. 2019. 12. 19.
브라우저 체크 // 익스플로러 체크 var agent = navigator.userAgent.toLowerCase(); if ( (navigator.appName == 'Netscape' && navigator.userAgent.search('Trident') != -1) || (agent.indexOf("msie") != -1) ) { alert("인터넷 익스플로러 브라우저 입니다."); } // 크롬 체크 var agent = navigator.userAgent.toLowerCase(); if (agent.indexOf("chrome") != -1) { alert("크롬 브라우저입니다."); } // 사파리 체크 var agent = navigator.userAgent.toLowerCase(); if (agent... 2019. 12. 10.
Styled Components Styled Components를 사용하면 Sass를 따로 설치하지 않고도 사용할 수 있고 클래스명 없이도 스타일을 작업할 수 있다. 설치 : npm install --save styled-components import React, { Component, Fragment } from "react"; import styled, { createGlobalStyle } from "styled-components"; const GlobalStyle = createGlobalStyle` body { padding: 50px; margin: 0; background: pink; } `; class App extends Component { render() { return ( Hello Hello go to Goo.. 2019. 12. 8.
반응형

티스토리툴바