본문 바로가기

Programming

 (469)
[CSS] 5. 배경 이미지와 그라데이션(3) - 그라데이션 효과1 그라데이션 자체를 실제로 CSS 요소를 사용해서 많이 사용하지는 않을 것입니다. 이번 아티클부터 다루는 다양한 그라데이션 효과 표현은 CSS의 구성 요소의 다양한 기능을 익혀보고 사용해 보는데 의의를 두고 가볍게 학습하시기 바랍니다. ○ 선형 그라데이션(linear-gradient) 우선 가장 기본적인 그라데이션 형태인, 선형 그라데이션을 살펴보겠습니다. 일단 기본적인 속성 형태는 아래와 같습니다. 실제 사용 방식은 하나씩 짚어보겠습니다. 선택자 { background: linear-gradint(to | , , [, ...]); } 위에서 background 속성 값에 선형 그라데이션을 적용한 케이스로 예시를 들었습니다. 실제로 사용하면서 속성 값을 적용하는 방식을 알아보겠습니다. - 선형 그라데이션 ..
람다식(2) - 람다식의 타겟 타입, 함수적 인터페이스 1 람다식에 대해서 앞선 아티클에서 간단하게 살펴보았습니다. 복잡해 보이는 설명이기는 했지만, 결국 람다식은 '인터페이스의 구현 객체를 익명으로 선언하는' 것이라는 간단한 정의를 잘 기억하고 있어야 합니다. 지금부터 설명하는 모든 내용이 이 사실을 기반으로 이루어지기 때문이지요. 자, 우리는 앞의 아티클에서 람다식의 기본 형태는 파라미터가 있고, 이를 사용하는 실행 코드 블럭( { } )이 있는 형태라고 배웠습니다. 람다식(1) - 람다식의 정의와 기본 문법 람다식은 익명 함수(anonymous function)를 생성하기 위한 식입니다. 이는 객체 지향 언어라기보다는, 함수 지향 언어에 가까운 성격을 갖고 있습니다. 일단 기존의 코드 작성 레이아웃과 약간의 차이 nozeroslope.tistory.com ..
[CSS] 5. 배경 이미지와 그라데이션(2) - background image 5 이제 앞에서 배운 내용을 바탕으로, 배경 이미지와 텍스트를 삽입하는 실제 사례를 만들어 보겠습니다. 우선 다소 큰 사이즈의 배경이미지를 하나 준비해 주겠습니다. 여기서 사용하는 이미지는 1920x1207 사이즈입니다. Let's Get It On! 이렇게 작성한 코드를 실행하면, 아래 그림과 같이 꽉 찬 배경 이미지로 구성된 화면을 볼 수 있습니다. 자, 그런데 이 배경 이미지가 1920x1207 사이즈의 이미지라고 했습니다. 현재 포지션은 left top으로 고정한 상태이죠. 이때, 브라우저의 사이즈가 1920x1207 이상의 크기로 확장되면 이미지는 어떻게 될까요? 본래의 사이즈에서 가로 크기만 늘어난다면 아래와 같이 변합니다. 반대로 본래 사이즈에서 세로 길이만 늘린다면, 다음과 같이 변하게 되지요.
람다식(1) - 람다식의 정의와 기본 문법 람다식은 익명 함수(anonymous function)를 생성하기 위한 식입니다. 이는 객체 지향 언어라기보다는, 함수 지향 언어에 가까운 성격을 갖고 있습니다. 일단 기존의 코드 작성 레이아웃과 약간의 차이가 있는 형태이지만, 결과적으로는 코드 자체가 간결해지고, 컬렉션을 다룰 때 원하는 결과를 쉽게 필터링/매핑할 수 있다는 장점이 있습니다. 람다식 자체는 기본적으로 '파라미터를 가진 코드 블럭' 형태이지만 런타임 시에는 "익명 구현 객체"를 생성하게 됩니다. 익명 구현 객체를 생성한다는 부분에서 눈치채셨겠지만, 인터페이스를 구현한다는 의미입니다. 이와 관련해서는, 익명 객체 아티클에서 인터페이스의 또는 부모 객체에 대한 익명 구현 객체 생성을 배웠습니다. 익명 객체와 관련해서는 생각보다 복잡한 내용을..
[CSS] 5. 배경 이미지와 그라데이션(2) - background image 4 ○ background 속성 일괄 적용하기 지금까지 background 관련된 속성을 여러 가지 배웠습니다. 예를 들어서, 아래와 같이 네 개의 background 관련 속성이 적용되었다고 가정해 보겠습니다. body { background-image: url('images/bg.png'); background-repeat: no-repeat; bacground-position: center bottom; background-attachment: fixed; } 위의 속성과 속성 값 부여를 아래와 같이 간단하게 나타낼 수도 있습니다. 속성 값은 중복되어 사용되지 않기 때문에, 입력 순서는 상관없이 사용할 수 있습니다. body { background: url('images/bg.png') no-repea..
제네릭(6) - 제네릭 타입의 상속과 구현 제네릭 타입(클래스)도 당연히 같은 레벨의 다른 클래스와 동일하게 부모-자식 클래스의 구현이 가능합니다. 물론 타입 파라미터에 대한 통일성을 가져야 상속이 가능하겠죠? 잘 이해가 가지 않는다면 아래와 같이 Product와 ChildProduct사이의 상속 선언 형태를 보겠습니다. public class ChildProduct extends Product { //... } 부모 클래스를 상속하는 자식 클래스는 (당연하게도) 자신만의 고유 필드나 메서드를 갖게 됩니다. 타입 파라미터도 비슷하게 생각해 주시면 됩니다. 자식 제네릭 타입의 경우 자신만의 타입 파라미터를 가질 수 있습니다. public class ChildProduct extends Product { // ... } 그럼 간단한 예제를 통해서, ..
[CSS] 5. 배경 이미지와 그라데이션(2) - background image 3 ○ background-origin : 배경 이미지 적용 범위 배경 이미지를 박스 모델 안에 적용하게 될 때, 해당 박스 모델에 패딩이 있거나 테두리까지 적용할지 결정할 수 있습니다. background-clip 속성에서 적용했던 속성 값과 비슷한 기능을 떠올리시면 됩니다. background-origin 속성 값은 다음 세 개의 종류로 구분됩니다. · content-box : 기본값이며, 패딩과 테두리를 제외한 콘텐츠 부분에만 배경 이미지를 표시합니다. · padding-box : 패딩까지 배경 이미지를 표시합니다. · border-box : 테두리까지 배경 이미지를 표시합니다. ○ background-attachment 속성 기본적으로 어떤 HTML 문서에서 스크롤을 조절하면, 해당 문서에 적용된 배..
제네릭(5) - 와일드카드 타입 와일드카드 타입은 제네릭 사용에 있어서 다소 설명이 어렵게 느껴질 수 있는 부분입니다. 하지만 차근차근 설명을 읽어나가면 충분히 이해할 수 있는 내용이니, 이 아티클을 순서대로 인내심을 갖고 읽어 내려가시기를 바랍니다. 일단 일반적으로 코드에서 '?'를 와일드카드(wildcard)로 통칭합니다. 제네릭 타입 파라미터의 구체적인 값을 선언할 때, 이 와일드카드를 이용해서 세 가지 형태로 사용할 수 있게 됩니다. 일단 예제를 직접 보기 전까지는 쉽게 이해가 가지 않을 수 있으니 분류에 대해서만 먼저 확인해 봅시다. · Unbounded Wildcards(제한 없음) GenericName genericName 모든 클래스나 인터페이스를 사용할 수 있다. · Upper Bounded Wildcards(상위 클래..

티스토리툴바