본문 바로가기

Programming

 (469)
[CSS] 3. 박스 모델(5) - 여백 속성(margin, padding) 2 ○ padding 속성의 이해 패딩은 '콘텐츠 영역'과 '테두리(border)' 사이의 여백 공간을 의미하게 됩니다. 마진(margin)과 마찬가지로, 패딩 역시 4개 방향에 적용하게 됩니다. 선택자 { padding: 20px 30px 40px 50px; } 선택자 { padding-top: 20px; padding-bottom: 50px; } 아래 예제를 통해서, 지금까지 배워온 표와 태그 요소들을 사용해서 표를 한번 완성해 보도록 하겠습니다. 일단 아래 코드를 보지 않고, 하단의 이미지 화면을 CSS 없이 구현해 보는 것을 목표로 하겠습니다. Nat King Cole 냇킹콜 탄생 100주년 기념 앨범 영화 화양연화를 본 사람들에게 익숙한 노래들입니다. 총 17곡의 주옥 같은 라틴의 정수가 콜의 연기..
중첩 클래스&인터페이스(5) - 익명 객체 1 익명(anonymous) 객체는, 말 그대로 이름을 갖지 않는 객체를 의미합니다. 그런데 JAVA에서의 익명 객체에서 갖는 큰 특징은, 단독으로 익명 객체를 생성할 수가 없다는 점입니다. 단독으로 생성할 수 없다는 것은 결국 무엇을 의미할까요? 이는 어떤 부모 클래스를 상속받거나, 인터페이스를 구현해야만 생성할 수 있다는 의미입니다. 결국 JAVA에서의 익명 객체는 자식 레벨에서만 구현이 가능하다고 생각하면 되겠습니다. ○ 익명의 자식 객체 기본적으로 우리가 자식 객체를 사용하는 방법에 대해서 되짚어 보겠습니다. 부모 클래스인 Parent가 있고, 이를 상속받는 Child 클래스가 있다고 가정하겠습니다. 다형성을 발현하게 되는 경우는 언제일까요? 자식은 부모 행세를 할 수 있기 때문에 Parent 클래스..
[CSS] 3. 박스 모델(5) - 여백 속성(margin, padding) 1 ○ margin 속성의 이해 margin은 각 요소 사이의 간격을 조절할 수 있는, 요소 주변의 여백의 크기를 의미합니다. margin은 border 관련 속성들과 마찬가지로 margin 값을 일괄로 적용하거나, margin-위치를 통해서 개별적으로 지정할 수 있습니다. 선택자 { margin: 크기 | 백분율 | auto; } border 속성 값을 지정할 때와 마찬가지로, margin의 속성 값은 한 개부터 네 개까지 작성하는 개수에 따라서 적용 규칙이 달라진다. border와 동일하므로 이전의 내용도 함께 참고하시기 바랍니다. #margin1 { margin: 50px; } #margin2 { margin: 30px 50px; } #margin3 { margin: 30px 20px 50px; } #..
중첩 클래스&인터페이스(4) - 중첩 인터페이스 중첩 인터페이스는 클래스 내부에 멤버로서 선언된 인터페이스를 의미합니다. 일단 중첩 형태로 인터페이스를 선언하게 되는 경우는, 해당되는 바깥 클래스와 밀접하게 연결된 구현 클래스를 생성하기 위함입니다. 주로 UI 처리 관련 코드에서 사용하게 되는데 자세한 것은 차차 살펴보도록 하겠습니다. 기본적인 형태는 다음과 같습니다. class Outter { interface I { void method(); } } 안드로이드 스튜디오 등에서 UI 관련 이벤트를 구현할 때 자주 사용되는 패턴을 통해서, 중첩 인터페이스의 사용 방식을 알아보겠습니다. 일단 Button이라는 클래스가 있고, 이 클래스를 통해서 우리가 '클릭'이 발생했을 때의 여러가지 동작을 정의하는 상황이라고 가정해 보겠습니다. 예를 들어 Button..
[CSS] 3. 박스 모델(4) - 테두리 스타일 3 ○ border 속성의 일괄 지정 지금까지 여러 가지 border와 관련된 속성들을 살펴보았는데, 해당 속성들을 여러 가지로 사용하거나 위치에 따라 분리해 사용하다 보면, 특정 요소에 작성해야 하는 개별 속성 값들이 많아지는 경우가 있습니다. 이런 경우에 기본적으로 'border' 속성 값을 부여하게 되면 네 개의 테두리에 모두 적용됩니다. 만일 어떤 요소의 bottom 테두리에만 색상과 선 모양, 컬러를 적용하고 싶다고 해서 개별 요소를 선언하고 값을 지정하면 최소 3개 이상의 속성 값을 부여해야 합니다. 하지만 border-top | right | bottom | left 속성을 선언하고 속성 값을 부여하게 되면 일괄적으로 속성을 부여할 수 있게 됩니다. ○ border-radius : 둥근 테두리 ..
중첩 클래스&인터페이스(3) - 중첩 클래스의 접근 제한자 5 : 바깥 클래스 참조하기 클래스 내부에서 this라는 키워드를 사용하게 되면, this가 가리키는 것은 해당 클래스를 통해서 생성된 인스턴스 자신을 의미하게 되는 것을 잘 알고 계실 겁니다. 중첩 클래스 내부에서 this라는 키워드를 사용하게 되면, 당연히 중첩 클래스의 인스턴스를 가리키게 되겠죠. 하지만 중첩 클래스 내부에서 바깥 클래스의 인스턴스를 참조해야 하는 경우도 있을 것입니다. 중첩 클래스 내부에서 바깥 클래스의 인스턴스 참조를 진행하기 위해서는, this 앞에 해당 클래스의 이름을 붙여주는 방식으로 사용하게 됩니다. OutterClass.this.field; OutterClass.this.method(); 그럼 다음과 같이 바깥 클래스 Outter, 그리고 중첩 클래스 Nested가 있는 구조에서 바깥 클래스를 참조..
[CSS] 3. 박스 모델(4) - 테두리 스타일 2 ○ border-width : 테두리의 두께 지정 테두리의 스타일(border-style)과 마찬가지 방식으로, 박스의 테두리의 두께도 지정이 가능합니다. 아래의 예시처럼 px과 같은 크기 값을 직접 입력하거나, 예약어를 통해서 두께를 지정할 수 있습니다. 선택자 { border-width: [크기] | thin | medium | thick } 참고로 border-style때와 마찬가지로, border-top | right | bottom | left-width와 같은 방식으로 위치에 따라 개별적인 속성 값 지정도 가능합니다. 하지만 아래에서 설명하는 방식으로 각 테두리의 두께 개별 지정도 간단하게 가능하니 확인해 보겠습니다. 우선 border-width에서 속성 값으로 최소 한 개, 최대 네 개(to..
중첩 클래스&인터페이스(3) - 중첩 클래스의 접근 제한자 4 : 로컬 클래스 우선 앞의 아티클과 바로 이어지는 내용이니, 가능한 앞의 내용과 연속해서 확인해 보겠습니다. 우리는 특정 메서드 내부의 로컬 클래스가 선언되었을 때, 이 로컬 클래스가 바깥 메서드의 필드 값이나 메서드를 사용하게 되는 경우 발생할 수 있는 문제점에 대해서 살펴보았습니다. 이를 해결하기 위해서 로컬 클래스가 바깥 메서드의 매개변수 혹은 로컬 변수의 값을 사용하게 되면, 컴파일할 때 해당 값을 로컬 클래스 내부에 복사해 두고 사용하게 된다는 기본 작동 원리를 알아보았죠. 대신 이로 인해서 생기는 제약은 값의 변경이 생기면 안 되기 때문에 JAVA 7까지는 바깥 메서드의 매개변수, 로컬변수 등은 반드시 final 속성을 가진 값들이어야 한다고 했습니다. 또한, JAVA 8 이후에는 반드시 final 속성을 갖..

티스토리툴바