본문 바로가기

Programming

 (469)
[CSS] 4. 레이아웃 설계(2) - float 3 : 3단 레이아웃 앞서 우리는 float 속성을 응용해 2단(칼럼) 레이아웃을 만들어 보았습니다. 하나씩 요소에 float를 적용하면서 float의 속성이 적용되는 방식에 대해서 어느 정도 이해도가 생겼을 것입니다. [CSS] 4. 레이아웃 설계(2) - float 2 : 2단 레이아웃 이제 float 속성과 clear 속성을 이용해서 실제 레이아웃을 구성해 보도록 하겠습니다. 칼럼 기준으로 2단 레이아웃을 가지며, 헤더와 푸터를 모두 구축하고 있는 페이지를 구성한다고 가정해 보겠 nozeroslope.tistory.com 이번에는 해당 방식을 응용하여 3단(칼럼) 레이아웃을 만들어 보도록 하겠습니다. 만들고자 하는 레이아웃의 사이즈는 아래 그림과 같습니다. 이번에도 역시 기본적인 HTML 코드와 CSS 스타일을 준비해 ..
중첩 클래스&인터페이스(5) - 익명 객체 5 앞서 살펴본 익명 객체를 활용한 인터페이스 구현 객체 사용법에 대해서 다시 한번 상기해 보겠습니다. 이번 아티클에서는 예제 코드를 통해서 익명 구현 클래스 인스턴스 생성과 사용 방식을 연습해 보겠습니다. public interface RemoteControl { public void turnOn(); public void turnOff(); } public class Anonymous { // 필드 값으로 인터페이스 구현 클래스 익명 인스턴스 구현 RemoteControl field = new RemoteControl() { @Override public void turnOn() { System.out.println("TV전원 ON"); } @Override public void turnOff() { S..
[CSS] 4. 레이아웃 설계(2) - float 2 : 2단 레이아웃 이제 float 속성과 clear 속성을 이용해서 실제 레이아웃을 구성해 보도록 하겠습니다. 칼럼 기준으로 2단 레이아웃을 가지며, 헤더와 푸터를 모두 구축하고 있는 페이지를 구성한다고 가정해 보겠습니다. 구성과 사이즈는 아래의 그림과 같이 구성하려고 합니다. 우선 기본적인 코드는 다음과 같이 준비합니다. 타이틀(header) 사이드바(aside) 본문(section) 푸터(footer) * { margin:0; padding:0; box-sizing: border-box; } 위와 같이 간단한 텍스트와 div로 영역만을 구분했습니다. 스타일 상에서도 box-sizing 속성을 border-box로 지정한 것과 이외에는 마진과 패딩을 0으로 설정해 둔 것뿐입니다. 현재 상태에서 화면은 다음과 같이 출력됩..
중첩 클래스&인터페이스(5) - 익명 객체 4 지금까지 익명 객체의 사용 형태와 관련해서 부모-자식 클래스를 사용하는 경우를 중심으로 살펴보았습니다. 그럼, 이제부터는 인터페이스를 익명 객체를 통해서 사용하는 케이스를 살펴보도록 하겠습니다. 사실 익명 객체를 활용한 인터페이스 구현 객체의 생성을 진행하는 케이스는 이미 인터페이스 아티클에서 배운 적이 있지만, 다시 한번 살펴보도록 하겠습니다. 일단 자식 클래스의 구현과 원리 자체는 거의 유사합니다. 인터페이스의 구현 객체 역시 다형성을 기반으로 하여 생성하고 있기 때문이죠. 기본적으로 인터페이스는, 인터페이스 타입의 변수를 만들고 거기에 구현 클래스의 인스턴스를 대입해 객체를 생성했습니다. 그리고 그 구현 클래스에는 필수로 인터페이스의 추상 메서드에 대해서 재정의를 진행해야 했습니다. 그런데 자식 클..
[CSS] 4. 레이아웃 설계(2) - float 1 ○ float : 블록 레벨 요소의 배치 방향 우리가 많이 사용하는 태그 요소 중에서 를 떠올려 보겠습니다. 요소를 이용해 텍스트를 작성했는데, 이 문단 자체의 좌측 또는 우측에 이미지를 붙여서 표시해야 하는 경우가 있을 것입니다. 그런데, 우리가 배웠다시피 태그는 블록 레벨의 요소이기 때문에, 원칙적으로 바로 다음 줄에 이미지가 표시될 것입니다. float 속성은 이런 경우에 사용하게 됩니다. float 속성을 활용하면 텍스트나 이미지의 주변에 요소들이 둘러싸는 형태로 배치가 가능해집니다. float 속성은 단어의 뜻 그대로, 어떠한 HTML요소를 '왼쪽 구석' 또는 '오른쪽 구석'에 (강제로) 띄워놓는다는 의미로 사용됩니다. 워드 프로세서에서 간혹 텍스트와 이미지 배치를 결정하는 것을 본 적이 있으실..
중첩 클래스&인터페이스(5) - 익명 객체 3 앞선 아티클에서 익명 인스턴스 형태로 자식 클래스를 정의해 사용하는 것을 배웠습니다. 실제 코드 작성 예제를 통해서 한번 살펴보도록 하겠습니다. 아래의 경우 일단 상위 부모 클래스인 Person에서 wake( )라는 메서드를 선언하고, Anonymous라는 클래스에 필드, 메서드의 로컬 변수, 메서드의 파라미터로 Person 클래스를 상속받는 익명의 자식 객체 인스턴스를 생성하게 됩니다. 각각의 익명 객체로 선언된 자식 객체들은 wake( )라는 공통의 메서드를 오버라이드하여 사용하게 되고, 각각 work, walk, study라는 고유의 자식 메서드를 사용하게 됩니다. 여기서 주의할 점, 이 익명 자식 객체에 새롭게 정의된 - wake( ) 이외의 필드나 메서드 - 의 경우에는 재정의된 wake( ) ..
[CSS] 4. 레이아웃 설계(1) - display ○ display 속성으로 요소 배치하기 우선 우리가 배었던 요소들의 블록 레벨의 요소와 인라인 레벨의 요소에 대해서 이해하고, 여기에 대해 display 속성 값을 이용해 여러 형태로 배치하는 방법에 대해서 살펴보겠습니다. 앞서 살펴본 내용이지만, 블록 레벨의 요소는 기본적으로 줄 바꿈이 일어난다는 기본적인 특징이 있습니다. 그리고 이 요소는 마진과 패딩을 설정할 수 있는 특성을 가지고 있죠. 인라인 레벨의 요소는 줄 바꿈이 일어나지 않는 요소이고 마진과 패딩 설정은 적용되지 않습니다. 이를 기억하고 아래 display 속성의 속성 값들의 사용에 대해서 확인해 보겠습니다. 종류 설명 block 인라인 레벨 요소를 블럭 요소로 변경합니다. inline 블럭 레벨의 요소를 인라인 레벨의 요소로 변경합니다...
중첩 클래스&인터페이스(5) - 익명 객체 2 바로 앞의 아티클에서, 익명 객체의 기본적인 생성 방식과 개념에 대해서 함께 살펴보았습니다. 코드 예제를 통해서 익명 객체를 생성하는 몇 가지 패턴에 대해서 살펴보도록 하겠습니다. 중첩 클래스&인터페이스(5) - 익명 객체 1 익명(anonymous) 객체는, 말 그대로 이름을 갖지 않는 객체를 의미합니다. 그런데 JAVA에서의 익명 객체에서 갖는 큰 특징은, 단독으로 익명 객체를 생성할 수가 없다는 점입니다. 단독으로 생성할 nozeroslope.tistory.com 우선 임의의 부모 클래스 Parent가 있다고 가정해 보겠습니다. A라는 클래스에서 Parent를 상속받는 자식 클래스를 익명 개체로 구현한다면, 다음과 같이 구현하게 됩니다. 참고로 부모 클래스 Parent에 선언된 메서드 parentM..

티스토리툴바