본문 바로가기

Programming

 (469)
[CSS] 6. 고급 선택자(1) - 연결 선택자 2 연결 선택자(selector) 중에서 이번에는 형제 관계로 존재하는 요소들의 선택자에 대해서도 살펴보겠습니다. 일단, 여기서 얘기하는 형제 관계란 무엇일까요? 간단하게, 부모 요소가 같은 요소들을 일컬어 형제 관계라고 칭합니다. 다만, 이제 설명할 형제 관계의 요소에 해당하는 두 가지 셀렉터를 한국어로 번역했을 때 꽤 혼란스러울 수 있기 때문에, 여기서는 원문 단어를 중심으로 설명하겠습니다. 사실 관념적으로 일반적인 선택 형식은 아니기 때문에, 이런 선택 분류자체가 어색할 수 있어서 이해가 안 갈 뿐이지, 내용 자체가 어려운 것은 아닙니다. ○ adjacent selector(인접 형제 선택자) - 기본적으로 [요소1 + 요소2] 형태로 사용합니다. 실제 적용되는 요소는 '요소2' 뿐입니다. - 여기서 ..
람다식(3) - 클래스 멤버, 로컬 변수의 사용 2 자, 이번 시간에는 새롭게 배우는 내용이 아니라 - 지금까지 학습해 왔지만 분명 50% 이상의 확률로 잊어버렸을 내용을 상기하는 대목입니다. 이번 아티클이 짧다면, 다 이유가 있습니다. 최소한 두~세 개 아티클을 복습하셔야 하기 때문입니다. 저는 머리가 나쁘기 때문에 계속 반복해서 살펴보도록 하겠습니다. 일단, 람다식을 배우고 실제로 써먹게 되면 (지금은 이해가 안갈수도 있겠지만) 람다식은 대부분 '메서드 내부에서' 사용하게 되는 경우가 많습니다. 그럼 한가지 되짚어 보겠습니다. 우리가 '메서드 내부에서 선언하는 클래스'를 뭐라고 했죠? "로컬 클래스"라고 칭했습니다. 그럼 '메서드 내부에서 람다식을 선언한다면?' 이 역시 익명의 클래스 레벨의 객체를 만들어 내는 상황이기 때문에, 익명인 로컬 클래스를 ..
[CSS] 6. 고급 선택자(1) - 연결 선택자 1 우선 '연결 선택자'라는 단어의 정의를 오해하지 않도록 설명하겠습니다. 여기서 '연결'되는 것은, 선택자가 두 개 이상 사용되어 조합하게 된다는 것을 의미합니다. 그래서 연결 선택자는 곧 조합, 또는 콤비네이션 선택자로도 불립니다. 이러한 연결 선택자에는 다양한 유형이 있습니다. 필요성에 따라 하위 / 자식 / 형제 선택자를 사용하게 됩니다. 각각의 종류와 특성에 대해서 하나씩 살펴보겠습니다. ○ 하위 선택자(descendant selector) 하위 선택자를 사용하게 되면, 를 작성하게 됩니다. 이때 이 선택자의 정의는, '상위요소에 포함된 모든 하위요소에 적용한다.'입니다. 특히 자식 요소 뿐만아니라 손자 요소까지 모두 일괄적으로 적용됩니다. section p { // .... } 위와 같이 sect..
람다식(3) - 클래스 멤버, 로컬 변수의 사용 1 ○ 람다식에서 클래스의 멤버 사용하기 람다식의 실행 블록 내부에서 실행문을 작성할 때, 어떤 클래스의 멤버인 필드와 메서드를 사용하는 데는 크게 제약이 없습니다. 단, 주의해야 하는 개념은 [this]의 사용 방식입니다. - 만약 일반적인 익명 객체에서 this를 사용하게 되면, 이것이 의미하는 것은 익명 객체 그 자체를 참조한다는 의미입니다. - 하지만 람다식에서 this를 사용하면, 익명 객체를 참조하는 것이 아니라 그 람다식을 실행하는 객체를 참조한다는 의미가 됩니다. 아래에서 예제를 통해서 살펴보겠습니다. 우선 인터페이스를 선언합니다. 당연히 함수형 인터페이스입니다. @FunctionalInterface public interface MyFunctionalInterface { public int ..
[CSS] 5. 배경 이미지와 그라데이션(3) - 그라데이션 효과3 ○ 그라데이션을 사용한 패턴 생성 그라데이션을 사용하면 여러 가지 무늬를 가진 패턴을 생성하는 것도 가능합니다. 실제로 사용성이 높지 않은 기술이니 대략 이런 형태로도 사용이 가능하다, 정도 알고 넘어가시면 충분합니다. 우선 앞서 배웠던 선형 / 원형 그라데이션은 반복 사용이 가능한 속성입니다. 이때 사용하는 속성이 repeating-linear-gradient 그리고 repeating-radial-gradient입니다. 이를 그라데이션 형태가 아니라, 완벽한 솔리드 컬러 타입의 패턴으로 변경한다면 다음과 같이 적용할 수 있습니다. 참고로 상위의 노란색과 붉은색 패턴의 경우, 노란색과 붉은색 패턴이 전체 40px이고 yellow / yellow 20px / red 20px / red 40px의 순서대로 ..
람다식(2) - 람다식의 타겟 타입, 함수적 인터페이스 3 ○ 파라미터와 리턴 값이 있는 람다식 이번에는 파라미터와 리턴 값이 모두 존재하는 람다식에 대해서 작성 방법을 살펴보겠습니다. 당연히 파라미터와 리턴 식을 작성해 주면 되는 간단한 문제이지만, 이 경우에도 람다식에서 생략이 가능한 부분들이 있기 때문에 몇 가지 작성 방식에 차이가 발생합니다. 머리가 복잡하다면 일단 기본형을 먼저 익혀두고, 생략하는 방법을 적용해 나갑시다. 우선 인터페이스에서 다음과 같이 추상 메서드가 선언되었습니다. 리턴 타입은 int, 파라미터도 두 개가 존재합니다. @FunctionalInterface public interface MyFunctionalInterface { public int method(int x, int y); } 이 인터페이스를 람다식으로 표현하는 여러 가지 ..
[CSS] 5. 배경 이미지와 그라데이션(3) - 그라데이션 효과2 ○ 원형 그라데이션 앞서 살펴본 선형 그라데이션은 직선 형태의 방향으로 색상이 변경되었습니다. 원형 그라데이션은 (타)원의 중심으로부터 동심원을 그리며 바깥 방향으로 색상이 변형되는 형태입니다. 일단 아래와 같은 형태로 기본형을 살펴보고, 속성 별로 하나씩 살펴보겠습니다. 선택자 { background: radial-gradient( at , , [,...]); } - 모양 기본적으로 원형 그라데이션에서 지원하는 모양은 두 가지 입니다. 바로 원형(circle)과 타원형(ellipse)이죠. 참고로 모양을 지정하지 않으면 디폴트 값은 타원형으로 지정됩니다. 아래의 예제를 참고해 주시기 바랍니다. 위의 예제를 실행하면 아래와 같이 두 개의 원형 그라데이션을 확인할 수 있습니다. grad1의 경우, 별도로 ..
람다식(2) - 람다식의 타겟 타입, 함수적 인터페이스 2 앞의 아티클에서 람다식에서 정의하는 '함수적 인터페이스'의 기본 정의에 대해서 살펴보았습니다. 이때 추상 메서드는 단 한 개만 정의가 가능하다는 점도 배웠습니다. 그런데, 이렇게 정의된 하나의 추상 메서드의 선언 형태(파라미터, 리턴 값...)에 따라서 람다식 작성 방법이 달라진다는 사실을 기억해야 합니다. 해당 메서드의 선언 형태에 따라 달라지는 람다식 사용 방식에 대해서 하나씩 살펴보겠습니다. ○ 파라미터 / 리턴 값이 모두 없는 람다식 파라미터와 리턴 값이 모두 없는 추상 메서드가 선언되었을 경우의 사용 예시를 살펴보겠습니다. 사실 파라미터와 리턴 값이 없으므로 특이 사항은 없습니다. () -> { ... } 형태로 인터페이스를 구현해 주면 됩니다. 실제 예제를 통해서 살펴보겠습니다. public ..

티스토리툴바