본문 바로가기

Programming

 (467)
[CSS] 8. 트랜지션과 애니메이션(1) - transform(변형) 3 앞서 살펴본 transform 속성의 함수들을 이어서 살펴보도록 하겠습니다. [CSS] 8. 트랜지션과 애니메이션(1) - transform(변형) 2 앞서서 우리는 CSS에서 사용되는 transform 속성에 대해서 전반적으로 살펴보았습니다. 이 transform 속성에서 사용되는 여러 종류의 함수들을 2차원, 3차원으로 분류하여 알아보기도 했습니다. 이제 nozeroslope.tistory.com ○ rotate( ) 함수 - 요소 회전 * 2차원 rotate( ) 함수 : rotate( ) 함수를 2차원에서 사용할 때에는, 회전 각도만 지정해 주면 됩니다. 회전 각도가 양수일 경우 오른쪽 시계 방향, 음수일 경우 왼쪽 반시계 방향으로 회전하게 됩니다. 여기서 사용하는 각도의 값은 degree나 ra..
람다식(4) - 표준 API의 함수적 인터페이스 7 : 디폴트 메서드 andThen(), compose() 3 ○ Function으로 순차적 연결하기 Function 함수적 인터페이스는, 기본적으로 개념을 다시 한번 짚어보고 넘어가야 합니다. 아래 아티클을 통해서 기본적인 동작 방식을 상기하고 오시기 바랍니다. 람다식(4) - 표준 API의 함수적 인터페이스 4 : Function Functional Interface 1 이번 아티클에서는 Function 함수적 인터페이스에 대해서 살펴보겠습니다. Function 함수적 인터페이스의 특징은, 파라미터 값을 받아 리턴 값으로 타입 변환(매핑)하는 역할을 한다는 점입니다. 즉, nozeroslope.tistory.com 다시 복습해 보자면, Function 함수적 인터페이스는 (기본형일 경우) 추상 메서드 apply(T t)를 구현하게 됩니다. 이 인터페이스의 목적은..
[CSS] 8. 트랜지션과 애니메이션(1) - transform(변형) 2 앞서서 우리는 CSS에서 사용되는 transform 속성에 대해서 전반적으로 살펴보았습니다. 이 transform 속성에서 사용되는 여러 종류의 함수들을 2차원, 3차원으로 분류하여 알아보기도 했습니다. 이제부터는 각각의 transform 속성의 함수들에 대해서 상세하게 알아보도록 하겠습니다. ○ translate( ) 함수 - 요소 이동 translate( ) 함수는, x축이나 y축 또는 양쪽 방향으로 이동 거리를 지정하면, 해당 요소가 그만큼 이동하는 함수입니다. 사용하는 형태는 아래와 같습니다. 참고로 x값이 양수면 오른쪽으로, y값이 양수면 아래쪽으로 이동합니다. transform: translate(tx, ty) /* x축으로 tx만큼, y축으로 ty만큼 이동 */ transform: trans..
람다식(4) - 표준 API의 함수적 인터페이스 7 : 디폴트 메서드 andThen(), compose() 2 앞서서 살펴본 디폴트 메서드인 andThen()과 compose()에 대해서 기본적인 내용을 우선 상기하도록 하겠습니다. 지금부터는 이 기본 내용을 가지고 각각의 인터페이스에서 실제 순차적으로 연결하여 이 메서드를 활용하는 방법을 알아볼 예정입니다. { System.out.println("consumerA: " + m.getName()); }; Consumer consumerB = (m) -> { System.out.println("consumerB: " + m.getId()); }; Consumer consumerAB = consumerA.andThen(consumerB); consumerAB.accept(new Member("스윙스", "AP ALCHEMY", null)); } } /* 출력 cons..
[CSS] 8. 트랜지션과 애니메이션(1) - transform(변형) 1 이번 아티클부터는 CSS에서 애니메이션을 다루는 방법에 대해서 살펴봅니다. 첫 번째로는 우선 CSS에서 사용하게 되는 transform 속성의 개념과 사용 방법에 대해서 살펴보겠습니다. 말 그대로 물체의 크기, 형태의 위치 등을 바꾸는 것을 트랜스폼(transform)으로 지정하게 됩니다. transform 속성도 다른 여타 CSS에서의 속성들과 비슷한 형태로 지정하게 됩니다. transform: 함수() 형태로 선언하게 되지요. 예를 들어서 어떤 클래스 선택자에 요소를 x축 100px, y축 50px 이동하는 속성을 부여한다고 하면 아래와 같이 작성하게 됩니다. .picture { transform: translate(100px, 50px); } ○ 2차원 트랜스폼(transform) 웹에서도 여타 다..
람다식(4) - 표준 API의 함수적 인터페이스 7 : 디폴트 메서드 andThen(), compose() 1 우리가 지금까지 살펴본 '함수적 인터페이스'의 기본 성질이 무엇이었나요? 뜬금없이 느껴지겠지만, 너무나도 기본적인 내용이니 잘 기억하실 것입니다. 바로 "하나의 추상 메서드를 가지고 있으며, 람다식을 통해 해당 추상 메서드를 재정의 한 익명 구현 객체를 생성할 수 있는 것"입니다. 이 정의를 지금 왜 다시 꺼냈을까요? 지금부터는 함수적 인터페이스의 정적 메서드와 디폴트 메서드에 대해서 다룰 예정이기 때문입니다. 자, 특정 함수적 인터페이스가 한 개의 기본 추상 메서드를 갖고 있는데 - 여기에 다른 정적 메서드나 디폴트 메서드를 갖고 있다면...더이상 함수적 인터페이스가 아니게 되는 것일까요? 결론만 얘기하면, 아닙니다. 함수적 인터페이스는, 기본 추상 메서드를 한 개만 갖고 있는 게 맞다면 정적 메서드와..
[CSS] 7. 가상 클래스와 가상 요소(3) - 구조 가상 클래스 2 앞서 살펴본 구조 가상 클래스와 관련된 내용을 계속해서 살펴보도록 하겠습니다. [CSS] 7. 가상 클래스와 가상 요소(3) - 구조 가상 클래스 1 이번에는 구조 가상 클래스에 대해서 살펴보도록 하겠습니다. 일단, '구조 가상 클래스'의 정의에 대해서 간단하게라도 살펴봐야 하겠죠? 구조 가상 클래스라 함은, 웹 문서의 전체적인 구조를 nozeroslope.tistory.com ○ 가상 요소 가상 클래스를 통해서는, 웹 문서의 여러 가지 요소 중에서 특정한 요소를 선택할 수 있었습니다. 가상 요소는 비슷해 보이지만 그 개념과 활용이 조금 다르죠. 가상 요소는 불필요한 태그를 적용하지 않아도, 특정한 부분에 스타일을 적용해 꾸밀 수 있도록 하고자 사용되는 것입니다. 개념이 조금 복잡하죠? 대표적으로 아래의..
람다식(4) - 표준 API의 함수적 인터페이스 6 : Predicate Functional Interface Predicate 함수적 인터페이스는, 파라미터의 값을 조사하여 boolean 값을 리턴하는 메서드를 가지고 있습니다. 대부분 testXXXX( ) 형태의 메서드이죠. 이 인터페이스의 추상 메서드들도 한번 아래와 같이 알아보도록 하겠습니다. 인터페이스 명 추상 메서드 설명 Predicate boolean test(T t) 객체 T를 조사한다. BiPredicate boolean test(T t, U u) 객체 T와 U를 비교해 조사한다. DoublePredicate boolean test(double value) double 값을 조사한다. IntPredicate boolean test(int value) int 값을 조사한다. LongPredicate boolean test(long value) lon..

티스토리툴바