어제 오늘 내일

텍스트를 흐리게 블러 처리하기 위해서 다음 2가지 방법을 사용할 수 있습니다. text-shadow filter: blur() text-shadow CSS의 text-shadow 속성은 텍스트에 그림자를 만들어줍니다. text-shadow에 관한 자세한 설명은 지난 포스팅을 참조하세요. [HTML/CSS] 텍스트에 그림자 넣기 (text-shadow) text-shadow text-shadow .ex01 { background: blue; text-shadow: 0px 0px 10px white; color: transparent; } .ex02 { text-shadow: 0px 0px 10px black; color: transparent; } div { font-size: 30px; font-weig..

CSS에서는 filter 속성을 사용하여 포토샵 등의 이미지 편집 도구를 사용하지 않고 간단한 그래픽 효과를 줄 수 있습니다. filter: invert(amount) filter: invert(100%); filter 속성에 적용할 수 있는 여러 가지 함수 중 invert() 함수는 이미지의 색상을 반전시킵니다. 파라미터로 입력받는 amount는 반전의 정도를 나타내는데, 퍼센트(%) 또는 0~1까지의 숫자로 표현할 수 있습니다. 100%는 완벽한 반전, 0%는 반전이 없는 원본 상태입니다. 예제 my_invert.html 원본 invert(0) invert(50%) invert(100%) my_invert.css .invert_img_1 { filter: invert(0); } .invert_img_..

포토샵 등의 이미지 편집 도구를 사용하지 않고도 CSS를 사용해서 이미지를 흑백으로 보이게 할 수 있습니다. filter란 CSS에서 filter 속성을 사용하면 이미지 색상 변화나 흐림 처리 등 간단한 이미지 변경 처리를 할 수 있습니다. filter 함수 blur() brightness() contrast() drop-shadow() grayscale() hue-rotate() invert() opacity() saturate() sepia() 이 중 grayscale() 함수를 사용하면 컬러 이미지를 흑백으로 변환할 수 있습니다. filter : grayscale(amount) grayscale() 함수는 이미지를 흑백으로 변환하는 함수입니다. 파라미터로 들어가는 amount는 흑백으로 전환하는 비..

마우스 오버 시, 이미지 어둡게 하기 - :hover 마우스 오버 시, 이미지 어둡게 하기 (천천히) - transition 1. 마우스 오버 시, 이미지 어둡게 하기 - :hover :hover 가상 클래스인 :hover는 보통 마우스 포인터가 요소 위에 올라가면 선택됩니다. filter: brightness() filter 속성에 적용되는 brightness() 함수는 대상 요소의 밝기를 조정합니다. brightness(1)은 원본 밝기이고, 숫자가 작아질수록 어둡고, 클수록 밝습니다. 자세한 설명은 지난 포스팅을 참조하세요. [HTML/CSS] 이미지 어둡게 하는 3가지 방법 (brightness, background-color, linear-gradient) 예제 my_mouseover.html ..

List에 특정 값이 포함되어 있는지 확인하는 방법입니다. contains() indexOf() 반복문 Iterator를 사용한 반복문 Stream API 1. contains() 코드 import java.util.ArrayList; import java.util.Arrays; import java.util.List; public class ListValueCheck { public static void main(String[] args) { List list = new ArrayList(Arrays.asList("Hello", "Hi")); // 포함 여부 체크 boolean isContainsHello = list.contains("Hello"); boolean isContainsBye = list..

배열의 원소를 삭제하는 다양한 방법을 정리해 보았습니다. 1. 배열 전체 값 삭제 2. 배열 첫번째 값 삭제 3. 배열 뒤에서 삭제 4. 특정 index의 값 삭제 5. 특정 값 삭제 1. 배열 전체 값 삭제 빈 배열 할당하기 let arr = ['a', 'b', 'c']; // 배열 값 전체 삭제 arr = []; document.write(arr.length); arr = []; 배열 전체 값을 모두 삭제하고, 빈 배열로 만들기 위해 새로운 빈 배열을 만들어서, 배열 변수에 할당 하였습니다. 배열의 길이를 0으로 변경하기 let arr = ['a', 'b', 'c']; // 배열 값 전체 삭제 arr.length = 0; document.write(arr.length); arr.length = 0; ..

배열에서 특정 값 개수를 구하는 방법을 정리하였습니다. 1. for 반복문 2. filter 3. reduce for 반복문 const arr = ['a', 'b', 'c', 'a']; // 배열에서 'a' 개수 구하기 let count = 0; for(let i=0; i '..

Javascript의 배열에서 빈값 제거하는 방법 undefined 값만 제거하기 (filter 함수와 '!==' 연산자) undefined, null(nullish value) 제거하기 (filter 함수와 '!=' 연산자) 빈값(empty value) 제거하기 undefined, null, false, '', 빈값(empty) 모두 제거하기 0. filter 함수 알기 Javascript의 filter() 함수를 사용하면, 배열에서 특정 조건에 부합하는 값을 찾아서, 그 값들로 새로운 배열을 만들어서 리턴합니다. 그래서, 이 포스팅에서는, 배열에서 빈 값들을 찾아서 그 값들을 제외하고, 값이 있는 원소들로 새로운 배열을 만들어서 리턴하기 위해 filter 함수를 사용합니다. filter 함수를 잘 모..

Javascript의 배열에서 중복 되는 값을 제거하는 3가지 방법을 알아보도록 하겠습니다. 1. Set 2. indexOf(), filter() 3. forEach(), includes() 1. Set Javascript에서 Set 객체를 이용하면 중복없는 데이터를 표현할 수 있습니다. Set 객체의 이런 특징을 이용해서, 배열의 중복을 제거할 수 있습니다. const dupArr = [1, 2, 3, 1, 2]; const set = new Set(dupArr); const uniqueArr = [...set]; document.writeln(Array.isArray(uniqueArr)); document.writeln(uniqueArr); 위의 예제에서는 const set = new Set(dupA..

배열에서 특정 값을 찾는 방법을 알아보고 있습니다. 앞에서는 특정 값이 배열에 존재하는지, 존재한다면 어느 위치에 있는지 찾는 방법을 알아보았습니다. [Javascript] 배열 특정 값 위치(index) 찾기 - indexOf(), lastIndexOf() [Javascript] 배열 특정 값 위치(index) 찾기 - findIndex() [Javascript] 배열에 특정 값이 포함되어 있는지 여부 체크하기 이번에는 배열에서 특정 값을 찾아서 리턴하는 함수 find() 와 filter()를 알아보도록 하겠습니다. 배열의 특정 값 찾기 - find(), filter() 1. find() 2. filter() 1. find() arr.find(callback(element[, index[, array]..