더 나은 웹개발을 꿈꾸는 기술 블로그. 웹이즈프리.
총 16개의 일치하는 문서를 찾았습니다.
- css
[CSS] Flexbox 내부의 좌우 상하 정렬 방법 알아보기
css를 사용하면서 DOM 요소의 레이아웃에 사용되던 inline, block 타입의 요소를 이제는 쉽게 flex, inline-flex를 사용할 수 있게되었습니다. flexbox 형태의 레이아웃이 모든 메이저 브라우저에서 사용 가능하게 되었기 때문이죠.그래서 이미 알고 있지만 flexbox를 사용시 간단하면서 실수할 수 있는 부분에 대하여 알아보려고 합니다. 바로 margin값과 함께 사용할 경우 말이죠...(이 글은 flexbox를 어느 정도 사용할 수 있다라는 가정하에 적은 내용입니다. flexbox layout 관련하여 아래 글을 참고하세요.)https://w...
Last Modified : 2021-12-01 14:47:29
Created : 2021-12-01 11:45:38 - webdevetc
IE 브라우저에서 flex 엘리먼트의 vertical 정렬(세로정렬)이 안되는 이슈
웹사이트를 만들어 테스트 하는 중 IE에서만 발생하는 이슈입니다.! 이슈사항엘리먼트에 display: flex;를 사용한 경우 정렬을 위해 사용하는 align-items가 다른 브라우저는 잘 동작하나 Internet Explorer(IE) 11에서만 정상적으로 작동하지 않았습니다.@ 원인원인을 확인해보니 IE에서는 세로 정렬을 위해 align-items를 사용하는 경우 반드시 height 값이 필요하다는 것을 알게되었습니다. 단 auto 이 외의 값을 가져야 합니다.# IE에서 flex 세로 정렬 이슈 수정하기먼저 다시 정리하면 다음과 같습니다.1. IE에서 disp...
Last Modified : 2019-12-18 08:06:55
Created : 2019-12-17 11:11:47 
lodashlodash 소팅, 정렬하기, sortBy()
Lodash를 사용하여 Collection 값을 정렬할 수 있는 sortBy()에 대하여 알아봅니다. 먼저 sortBy()는 무엇일까요?# lodash의 sortBy()는 무엇인가?Collection 값들을 원하는 필드를 기준으로 정렬해줍니다. 특히 웹페이지에서 데이터를 모두 불러오는 경우 soryBy()를 사용하면 매우 편리하게 정렬할 수 있죠. 프론트엔드 프레임워크를 사용하는 싱글페이지 어플리케이션에서 데이터를 조작할때 유용하게 사용할 수 있을 것입니다.아래는 sortBy() 사용하는 방법으로 다음과 같습니다._.sortBy(Collection, fieldNam...
Last Modified : 2020-11-03 15:24:45
Created : 2018-07-30 14:17:18- etc
css를 사용하여 요소 세로정렬 만드는 방법은?
선택한 요소를 가로로 정렬하는 방법은 간단합니다. 하지만 만약 세로로 정렬하려면 어떻게 해야할까요?가로 정렬의 경우 text-align을 사용하는 방법이 있지만 모든 요소에 vertical-align: middle을 선언한다고 원하는 가로방향 정렬이 되지 않습니다.어떻게해야 가능할까요?...
Last Modified : 2017-09-21 00:19:12
Created : 2017-03-20 19:25:45 
js팝업창 중앙정렬 가운데 위치시키는 방법
자바스크립트를 사용하여 팝업창을 원하는 위치에 띄우는 방법을 알아봅니다. 일반적으로 중앙에 팝업창을 많이 띄우므로 아래는 중앙에 정렬 기준으로 팝업창 띄우기를 알아봅니다.! 잠깐. 팝업창은 어디에 띄우는게 좋을까?띄우기 위한 방법을 알기 전에 어디 위치에 띄울 것인가 역시 중요합니다. 대부분의 방문자의 시선에 가장 쉽게 노출되는 가운데를 선호하거나 아니면 좌측 상단에 많이 노출합니다. 아무래도 페이지의 정중앙에 팝업을 위치하는 방법이 가장 선호되므로 이 방법으로 띄우는 방법과 예제를 알아보려고 합니다. 그럼 순서대로 먼저 팝업창을 띄우는 방법을 간단...
Last Modified : 2020-03-22 10:34:18
Created : 2016-09-01 14:17:01
js[자바스크립트] 배열을 역순으로 정렬, reverse()
자바스크립트를 사용하여 데이터를 가공, 처리하는 일들이 점점 더 많아지고 있다. 이때 중요한 부분 중 하나로 데이터를 어떻게 정렬(Sorting) 하느냐 역시 고민인 부분이다. 만약 테이블 그리드 형태의 데이터가 존재한다고 했을때 쉽게 정렬할 수 있는 방법이 있을까?데이터를 불러와 처리하는 경우 일반적으로 배열이 데이터 형태로 저장된 경우가 많다. 그 이유는 무엇일까? 배열로 저장된 데이터는 소팅하여 재정렬 후 보여주기에 편리한 함수를 가지고 있기 때문이다. 이 중에서 reverse() 함수를 이용하면 배열을 역순으로 재정렬할 수 있게된다.배열이름.reverse();...
Last Modified : 2020-03-29 19:14:54
Created : 2016-04-19 09:23:55- webdevetc
[CSS] transform 속성에 상대값 사용하여 요소 이동시 발생하는 여백 또는 선 제거하는 방법
세로 저ㅇ렬을 하거나 요소을 이동시키기 위해 다양한 방법이 사용가능하다~ 그중에서도 transform 속성을 사용하는 방법 역시 존재한다.! transform 속성을 이용한 요소의 이동아래와 같은 방법으로 우리는 transform을 사용해 이미지를 비롯한 다양한 요소를 원하는 곳으로 이동할 수 있다.<style>div {transform: translate(x,y);}</style>위 코드는 div 요소를 좌우 x, y 값만큼 이동시키는 방법이다. 이 방법은 요소를 이동시키는 다양한 방법들과 비교할 때 몇가지 이점이 있는데 그 이유가 무엇인지 알...
Last Modified : 2016-03-11 23:03:08
Created : 2016-03-09 15:52:26 
css[CSS] 요소 및 레이어 중앙 정렬시키는 가장 쉽고 간단한 방법
웹사이트에서 모달(Modal) 및 팝업창을 띄우거나 기타 특정 요소를 가로 또는 세로로 중앙 정렬하기 위한 방법은 몇 가지가 있다. 이때 해당 요소를 스크롤 및 브라우저 크기가 관계 없이 항상 고정된 위치에 중앙 정렬을 가지려면 어떤 방법이 가장 효과적일까...우선 요소를 중앙정렬 시키기는 일반적이면서 가장 간단한 방법으로 left 속성을 사용하며 우리는 아래와 같이 CSS를 사용해 이를 가능하게 할 수 있다.position: fixed;left: 50%;top: 50%;오른쪽(우측)으로 요소를 상대값 50% 만큼 이동시키면 해당하는 엘리...
Last Modified : 2019-08-18 15:48:06
Created : 2016-03-09 14:25:40- webdevetc
가변 길이의 요소에서 텍스트 세로정렬하는 방법
텍스트를 세로 정렬하는 방법은 다양한 방법이 존재한다... 간단한 방법으로 line-height 속성을 이용하는 방법이 있고 그 외에도 padding을 적절하게 주거나 "top: 50%;" 등등의 여러가지 방법이 있다. 하지만!!!오늘 얘기할 부분은 가변 요소... 즉 텍스트가 길이에 따라서 변하는 경우 세로 정렬을 어떻게하는냐에 대한 부분이다.사실 위에 언급한 방법들은 텍스트가 고정된 값을 가져야 가능하다. 물론 가능할 수도 있지만 텍스트의 개수등에 따라 정렬이 흐트려지는 문제가 발생할 수 있다. 이를 해결할기 위한 방법으로 어떤 방법이 있을까... 이런 고민은 물...
Last Modified : 2016-03-03 16:26:22
Created : 2015-10-28 17:31:52 - js
[자바스크립트] 선택한 요소 중간에 위치시키는 방법, 예제보기
요소를 중간에 위치시킨다? 가로정렬은 상대적으로 간단하지만 세로정렬은 쉽지 않은 부분이 있습니다. 자바스크립트를 사용해 선택한 특정요소를 중간에 위치시키는 방법을 알아보겠습니다.먼저 아래 예제를 봐주세요!! 선택요소 세로 정렬 소스 코드보기<body><div id='popup_win'>TEST</div></body><script>$(document).ready(function() {var popup_win = $('.popup_win');// 하나. 정렬할 요소를 변수에 저장var availSizeScroll = ...
Last Modified : 2015-11-15 23:34:07
Created : 2015-07-02 18:50:04