본문 바로가기

분류 전체보기

 (666)
[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가 있는 구조에서 바깥 클래스를 참조..
2. 중복 제거, 텍스트 나누기와 합치기 ○ 중복된 항목 제거해 보기 엑셀 데이터에서 이유를 막론하고 중복된 값들을 제거하는 경우가 있습니다. 이럴 때 중복된 값을 간단하게 제거하는 방식에 대해서도 알아보겠습니다. 우선, 중복된 항목이 있는 행을 모두 삭제하는 형태로 진행해 보겠습니다. 다음과 같이 데이터 리스트의 전체를 선택해 주고, 메뉴의 [데이터] > [중복된 항목 제거]를 선택해 보겠습니다. 그럼 다음과 같이 [열]의 종류를 선택할 수 있는 팝업이 뜨게 됩니다. 우리는 이 중에서 '수입국가'를 선택해 실습해 보겠습니다. 만일, 모든 열을 삭제하는 것이 아니라 [수입국가] 열의 중복 값만 제거해서 보고 싶다면 다음과 같이 진행해 봅니다. 우선 [수입국가] 열을 전체 선택한 뒤 다시 중복 제거 메뉴를 실행합니다. 그럼 다음과 같은 선택 팝업..
[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..

티스토리툴바