Lodash를 사용하여 Collection 값을 정렬할 수 있는 sortBy()에 대하여 알아봅니다. 먼저 sortBy()는 무엇일까요?# lodash의 sortBy()는 무엇인가?Collection 값들을 원하는 필드를 기준으로 정렬해줍니다. 특히 웹페이지에서 데이터를 모두 불러오는 경우 soryBy()를 사용하면 매우 편리하게 정렬할 수 있죠. 프론트엔드 프레임워크를 사용하는 싱글페이지 어플리케이션에서 데이터를 조작할때 유용하게 사용할 수 있을 것입니다.아래는 sortBy() 사용하는 방법으로 다음과 같습니다._.sortBy(Collection, fieldName);컬렉션값에 소팅을 원하는 필드명을 입력합니다. 매우 간단하죠. 그럼 아래는 예제소스입니다.! sortBy() 예제보기만약 아래와 같은 Collection 데이터가 존재하는 경우 각각의 필드명에 대하여 정렬할 수 있을 것입니다. 어떻게 수행하는지 확인해보세요.var items = [ { no: 1, name: 'we
2018-07-30 14:17:18선택한 요소를 가로로 정렬하는 방법은 간단합니다. 하지만 만약 세로로 정렬하려면 어떻게 해야할까요?가로 정렬의 경우 text-align을 사용하는 방법이 있지만 모든 요소에 vertical-align: middle을 선언한다고 원하는 가로방향 정렬이 되지 않습니다.어떻게해야 가능할까요?
2017-03-20 19:25:45자바스크립트를 사용하여 팝업창을 띄우기 위한 방법도 중요하지만 어디 위치에 띄울 것인가 역시 생각할 요소 중 하나이죠. 대부분의 팝업창은 화면을 기준으로 좌상단을 많이 사용하지만 페이지의 중앙 위치에 팝업을 위치시키는 방법 역시 많이 사용됩니다. 아무래도 가로 세로 정가운데 위치한 팝업이 사용자 입장에서 더 편리하고 보기 쉬울 수 있기 때문이다. 그렇다면 먼저 팝업창을 띄우는 방법을 간단히 알아보고 위치를 가운데로 설정하는 방법에 대하여 다음으로 알아보겠습니다.# 자바스크립트 팝업창을 띄우는 방법자바스크립트를 사용하여 팝업창을 띄우려면 어떻게 해야할까요? 간단하게 적어보려고 했지만 아래 링크로 대신하고자 합니다. 아무래도 더 많은 정보를 담고 있습니다.html 팝업창 띄우는 방법 및 고려할 사항들 바로가기 >https://webisfree.com/2016-01-19/html-팝업창-띄우는-방법-및-고려할-사항들그럼 팝업창을 띄우는 방법은 위 링크를 참고하시구요 다음으로 중앙에 정렬시
2016-09-01 14:17:01자바스크립트를 사용하여 데이터를 가공, 처리하는 일들이 점점 더 많아지고 있다. 이때 중요한 부분 중 하나로 데이터를 어떻게 정렬(Sorting) 하느냐 역시 고민인 부분이다. 만약 테이블 그리드 형태의 데이터가 존재한다고 했을때 쉽게 정렬할 수 있는 방법이 있을까?데이터를 불러와 처리하는 경우 일반적으로 배열이 데이터 형태로 저장된 경우가 많다. 그 이유는 무엇일까? 배열로 저장된 데이터는 소팅하여 재정렬 후 보여주기에 편리한 함수를 가지고 있기 때문이다. 이 중에서 reverse() 함수를 이용하면 배열을 역순으로 재정렬할 수 있게된다.배열이름.reverse();해당 함수를 실행하면 배열을 역순으로 정렬한다고 얘기하였다. 일반적인 정렬방법으로 sort() 함수가 많이 사용된다. 그럼 간단한 예제를 통해 좀 더 자세히 알아보자. 아래는 reverse() 함수를 사용하여 배열의 값들을 모두 역순으로 재정렬하는 예제이다.! reverse() 함수 예제보기<script> var pe
2016-04-19 09:23:55세로 저ㅇ렬을 하거나 요소을 이동시키기 위해 다양한 방법이 사용가능하다~ 그중에서도 transform 속성을 사용하는 방법 역시 존재한다.! transform 속성을 이용한 요소의 이동아래와 같은 방법으로 우리는 transform을 사용해 이미지를 비롯한 다양한 요소를 원하는 곳으로 이동할 수 있다.<style>div {transform: translate(x,y);}</style>위 코드는 div 요소를 좌우 x, y 값만큼 이동시키는 방법이다. 이 방법은 요소를 이동시키는 다양한 방법들과 비교할 때 몇가지 이점이 있는데 그 이유가 무엇인지 알아보자...transform 속성을 사용하는 사장 큰 이유는 바로 좌우 상하 이동시 절대값 뿐만 아니라 상대값을 이용한 이동이 가능하다는 점이다... 좀 더 쉽게 설명하자면...transform: translate(10px,10px);transform: translate(10%, 10%);위 보기는 두 가지 방법을 보여주는데 여기서 아래에 위
2016-03-09 15:52:26웹사이트에서 모달(Modal) 및 팝업창을 띄우거나 기타 특정 요소를 가로 또는 세로로 중앙 정렬하기 위한 방법은 몇 가지가 있다. 이때 해당 요소를 스크롤 및 브라우저 크기가 관계 없이 항상 고정된 위치에 중앙 정렬을 가지려면 어떤 방법이 가장 효과적일까...우선 요소를 중앙정렬 시키기는 일반적이면서 가장 간단한 방법으로 left 속성을 사용하며 우리는 아래와 같이 CSS를 사용해 이를 가능하게 할 수 있다.position: fixed;left: 50%;top: 50%;오른쪽(우측)으로 요소를 상대값 50% 만큼 이동시키면 해당하는 엘리먼트의 크기의 절반 만큼 다시 왼쪽으로 이동시킬 필요가 있게된다. 그래서 사용되는 방법이 해당요소의 크기만큼 50%를 다시 반대방향으로 이동하는 것이다. 예를 들어서...만약 요소의 크기가 800px인 경우 좌측으로 -400px 이동시키면 동일한 값을 가지게 된다. 하지만 left 속성은 이미 사용되었기 때문에 왼쪽으로 이동시킬 다른 css속성이
2016-03-09 14:25:40텍스트를 세로 정렬하는 방법은 다양한 방법이 존재한다... 간단한 방법으로 line-height 속성을 이용하는 방법이 있고 그 외에도 padding을 적절하게 주거나 "top: 50%;" 등등의 여러가지 방법이 있다. 하지만!!!오늘 얘기할 부분은 가변 요소... 즉 텍스트가 길이에 따라서 변하는 경우 세로 정렬을 어떻게하는냐에 대한 부분이다.사실 위에 언급한 방법들은 텍스트가 고정된 값을 가져야 가능하다. 물론 가능할 수도 있지만 텍스트의 개수등에 따라 정렬이 흐트려지는 문제가 발생할 수 있다. 이를 해결할기 위한 방법으로 어떤 방법이 있을까... 이런 고민은 물론 스크립트 언어를 사용함으로써 해결할 수 있을 것이나 개인적으로 css와 html 만으로 해결되는 것이 가능 좋은 방법이라 생각한다. 이 방법은 아래에 기술하여 보았다. 아래를 참고하자.우리가 원하는 그림은 아래처럼 구현되길 희망한다... 아래 스크린샷을 보자!스크린샷) 텍스트 길이에 따라 자동으로 세로정렬되는 레이어#
2015-10-28 17:31:52요소를 중간에 위치시킨다? 가로정렬은 상대적으로 간단하지만 세로정렬은 쉽지 않은 부분이 있습니다. 자바스크립트를 사용해 선택한 특정요소를 중간에 위치시키는 방법을 알아보겠습니다.먼저 아래 예제를 봐주세요!! 선택요소 세로 정렬 소스 코드보기<body><div id='popup_win'>TEST</div></body><script>$(document).ready(function() {var popup_win = $('.popup_win');// 하나. 정렬할 요소를 변수에 저장var availSizeScroll = (document.body.offsetHeight/2)-99;// 둘. 세로 위치값 계산popup_win.css('top', availSizeScroll);// 셋. 선택요소에 세로 위치값 입력})</script>document.body.offsetHeight를 사용해 브라우저의 현재 크기를 계산하여 2를 나눕니다. 그러면 중간값을 알 수 있는데 보여줄 요소의 높이 역시 계
2015-07-02 18:50:04세로 정렬을 하기 위한 방법들은 몇가지의 방법들이 있습니다. 가장 쉬운 방법중 하나가 table 태그를 사용하는 방법입니다. table을 사용하면 안에 있는 요소는 자동으로 세로정렬됩니다. 아니면 display의 속성을 table과 table-cell로 변경하는 방법 역시 유용합니다. 이 방법들은 아래 링크에 잘 소개되어 있으니 참고하세요.특정요소를 세로정렬하는 방법 바로가기 >그런데 이 방법을 사용하기 위해서는 세로정렬하게 될 요소가 position: absolute; 즉 절대값을 가지면 안됩니다... 하지만 이를 가능하게 하기 위해서 다른 방법을 사용해야 하는데 오늘 알아볼 방법은 바로 이 방법입니다. 먼저 아래 예제를 참고해주세요.# 세로 정렬 방법 예제보기* HTML 코드<div><p>Middle Align</p></div>* CSS 코드<style>div { width: 200px;height: 200px;border: 1px solid #d1d1d1;box-sizin
2015-03-23 10:06:04안녕하세요. position 속성이 absolute인 경우 정렬을 맞추는 방법입니다. 해당 요소의 position이 absolute일때 정렬하는 방법은 relative와는 다른 방법을 사용해야 합니다. absolute일 경우의 특징을 고려해서 레이아웃을 설정해야 하는데요...1. position 속성이 absolute?; absolute 속성이 되는 경우 주변의 다른 레이어 객체들과 상관하지 않은채 정렬이 가능하게 됩니다. 예를 들어 position이 relative인 경우는 다른 요소들을 고려해 정렬을 맞추어야 합니다. 앞 또는 뒤에 위치한 요소에 영향을 받기 때문이죠. 하지만 absolute의 경우는 다른 요소에 영향을 주지 않아 겹쳐지거나 화면 밖으로 이동하는 등 독립적인 레이아웃이 가능하게 되죠. 그리고 absolute로 설정한 경우 정렬 기준은 다음과 같이 두 가지가 됩니다.1) 전체 윈도우를 기준으로 정렬2) 바로 상위 레이어를 기준으로 정렬1번은 브라우저 창 전체를 기준
2014-03-24 14:59:00특정 태그를 정렬할 경우 가로 정렬은 쉽지만 세로 정렬은 쉽지 않죠? 이럴때 가급적 쉽게 적용이 가능한 방법입니다. 정해진 높이가 아닌 경우 height 값이 변하기 때문에 margin: auto 값으로 세로 정렬되지 않아 다른 방법을 찾아야하죠. 이를 해결하기 위한 방법은 자바스크립트를 이용할 수도 있지만 가장 간단한 방법은 역시 css를 사용하는 것입니다 .여기서는 display 속성의 table-cell 속성을 이용하는 방법입니다... # 세로정렬 예제 소스보기<style type="text/css">div {background: #f9f9f9;width: 200px;height: 200px;border: 1px solid #d1d1d1;box-sizing: border-box; }p {position: absolute;margin: 0;padding: 0;}</style> <div><p>Middle Alignment</p></div>보시는 것처럼 div 태그 안에 있는 p
2014-03-07 17:40:19웹페이지에서 텍스트를 세로로 중앙정렬 하기 위한 방법은 어떤게 있을까요? 몇가지 방법이 있겠지만 그 중에서 어떤 방법이 가장 적합할지 알아보고자 합니다.# css 텍스트 세로방향 정렬방법만약 텍스트가 아닌 이미지라면 display의 값이 inline으로 vertical-align을 사용해 해결할 수 있겠습니다. 아래와 같이 말이죠....imgElement { vertical-align: middle;}위와 같이 값을 넣어주면 세로방향으로 정렬이 됩니다. 물론 위 또는 아래에 적당판 margin값을 이용할 수도 있습니다. 이때는 display 속성값은 block 또는 inline-block으로 되어 있어야합니다. 만약 텍스트인 경우는 세로정렬을 어떻게 해야할까요? # 텍스트는 어떻게 세로로 정렬을 할 수 있을까 텍스트는 기본적으로 display속성값이 inline이고 height가 정해지지 않았기 때문에 이미지와는 다른 방법이 필요합니다. 물론 이를 해결하기 위한 다양한 방법이
2014-03-07 14:01:35배열이 가진 값을 배열에서 정렬할 수 있는 기능은 무엇있까요? php는 배열을 오름 또는 내림차순으로 정렬할 수 있도록 내부 함수를 제공하며 이 함수는 바로 sort()입니다. 먼저 아래의 sort() 함수를 사용하여 4가지 과일을 정렬한 매우 간단한 예제입니다. 그럼 아래 예제를 보시기 바랍니다.# sort() 예제보기$test = array ("fineapple", "orange", "banana", "mango")sort($test);// 출력결과 보기print_r($test);$test[0] => banana$test[1] => fineapple$test[2] => mango$test[3] => orange위 코드를 실행하면 배열값이 오름차순으로 정리되는 것을 확인할 수 있습니다.관련된 글을 보시려면 아래 링크를 클릭하세요.[PHP] 배열 내림 또는 오름차순으로 정렬하기, sort(), rsort() 바로가기 >
2014-01-29 13:12:02데이터베이스의 테이블 안에서 오름차순 또는 내림차순으로 정렬을 원할 경우가 있습니다. 그런데 정렬 할 조건의 필드가 하나가 아닌 두 개 이상인 경우 어떻게 쿼리문을 적용할까요? 그럼 아래 예제를 봐주세요.# 데이터베이스 정렬, sorting 예제보기(오름차순, 내림차순)먼저 정렬 기준이 없이 단순한 쿼리문입니다.SELECT * FROM tableName WHERE site="webisfree.com";이번에는 정렬할 필드가 하나인 경우입니다. site 필드 기준으로 정렬합니다. SELECT * FROM tableName WHERE site="webisfree.com" ORDER BY site;// 필드명 site의 정렬함만약 정렬할 필드가 두 개이상인 경우? 이 경우에는 어떻게할까요? 아래는 site, name 두개의 필드로 정렬하도록합니다.SELECT * FROM tableName WHERE site="webisfree.com" ORDER BY site ASC, name ASC/
2014-01-07 14:30:46
