본문 바로가기

Programming

 (477)
[CSS] 1. CSS의 기본 개념(1) - CSS란? HTML과 마찬가지로, 웹 문서의 스타일을 결정하는 CSS(Cascading Style Sheet) 역시 웹 표준 요소입니다. HTML로 내용을 구성한 후, CSS를 이용해 웹 문서의 디자인과 레이아웃, 배치, 배경 요소 등을 지정해 줄 수 있게 되죠. HTML과 CSS를 분리해 구성하기 때문에 서로 영향을 주지 않고 내용만을 수정하거나, 반대로 디자인 요소만 변경해 주는 것도 가능하게 되죠. 예를 들어, 이러한 속성을 이용해 디바이스나 브라우저에 따라 같은 내용이 다른 디자인으로 보이게 만드는 반응형 웹 디자인을 구현할 수도 있게 되는 것입니다. 우선 이번 아티클부터 CSS를 공부하면서, 기성의 웹 사이트의 CSS 미적용와 CSS 소스 파일을 간단하게 확인할 수 있도록 크롬의 확장 프로그램 중 하나인 ..
인터페이스(4) - 인터페이스 구현 기본 원리 인터페이스는 앞서 설명했듯이, 개발 코드에서 인터페이스 메서드를 호출하고 그 인터페이스가 객체의 메서드를 호출하는 구조입니다. 인터페이스는 중개자의 역할을 하기 때문에, 실제 구현 객체에서는 인터페이스에 정의된 추상 메서드와 동일한 이름과 파라미터와 리턴 타입을 갖는 실체 메서드를 가지고 있어야 하겠죠? 이는 추상 메서드에서도 배운 동일한 개념입니다. 여기서 인터페이스가 선언한 메서드의 실체를 갖고 있는 객체를 인터페이스 구현(implement) 객체라고 칭합니다. 당연히 이 구현 객체를 생성하는 클래스는 구현 클래스로 칭하게 되죠. 특정 인터페이스의 구현 클래스를 선언할 때는 implements 키워드를 추가하고, 인터페이스 명을 명시해야 합니다. public class 구현클래스이름 implement..
인터페이스(3) - 인터페이스 구성멤버의 개념과 특성 ○ 상수 필드(constant field)의 선언 이전에도 설명했듯이, JAVA의 인터페이스 자체는 데이터를 직접 저장할 수 없는 구조입니다. 그래서 인스턴스 객체의 생성도 불가능합니다. 또한, 인스턴스 필드와 더불어 정적(static) 필드 역시 가질 수 없죠. 인터페이스는 오로지 상수(static final) 필드 만을 가질 수 있습니다. - 상수는 우리가 static 챕터에서 배웠듯이 [public static final] 타입으로 선언됩니다. - 상수의 이름은 모두 대문자로 작성하고, 단어별 구분은 언더바(_)로 합니다. - 인터페이스에서 상수는 static { } 블록도 이용할 수 없습니다. 반드시 선언과 동시에 초기값이 필요합니다. - 인터페이스에서 상수 선언 시, [public / stati..
3. 입력 양식 작성(3) - 다양한 데이터, 텍스트 입력 태그 2 ○ , : 텍스트 필드용 데이터 리스트 앞서서 dropdown 형태를 통해서 미리 만들어 둔 값들을 선택하는 포맷을 사용해 보았습니다. 이번에도 다루어볼 데이터 리스트 형태의 태그 역시 비슷합니다. 하지만 데이터 리스트 타입의 태그는 텍스트 필드에 연계하여 사용하는 리스트라는 점에 차이가 있습니다. 아마 지금은 바로 와닿지 않는 기능일 것입니다. 한번 예제를 만들어보면서 확인해 보겠습니다. 옵션 텍스트1 옵션 텍스트2 리워드 종류 선택 리워드 A세트 리워드 B세트 리워드 C세트 HTML 삽입 미리보기할 수 없는 소스 dropdown 태그와의 차이점은, 일단 입력란 자체는 '텍스트'입력 폼이라는 점입니다. 그리고 그 텍스트 입력 폼에서 사용할 수 있는 데이터 리스트 보기가 마련되어 있다는 점이죠. 그래서 ..
인터페이스(2) - 인터페이스의 선언과 구성 멤버의 특성 인터페이스는 앞서 언급했다시피, 클래스와 물리적으로 같은 레벨로 생각해 주시면 됩니다. 그래서 인터페이스 이름 자체의 작명 원칙도 클래스와 동일하게 처리해 주면 됩니다. 이클립스 등에서 인터페이스를 생성해 주면, 클래스 형태로 다음과 같이 생성됩니다. [public] interface 인터페이스명칭 { ... } // 예시 public interface RemoteControl { } ○ 인터페이스의 구성 멤버 - 기본적으로 인터페이스는 객체로 생성할 수 없는 개념이기 때문에, 생성자를 갖지 않습니다. - 인터페이스는 상수(필드) / 메서드만을 구성 멤버로 갖습니다. 이 두 개의 원칙을 잘 기억해야 합니다. 그럼 구성 멤버는 구체적으로 어떤식으로 선언 및 사용할 수 있을지 하나씩 짚어보도록 하겠습니다. ..
3. 입력 양식 작성(3) - 다양한 데이터, 텍스트 입력 태그 1 지금까지 살펴본 기본적인 input 태그들은 어느 정도 마무리 되었습니다. 지금부터는 input 이외에 단독으로 사용되는 몇 가지 입력 태그에 대해서 살펴보도록 하겠습니다. ○ : 여러 줄의 텍스트 입력 폼 가입 양식에서 여러 줄의 요청사항이나, 메모, 하고 싶은 말 등을 입력받기 위해서는 기존 input type에서 제공하는 텍스트 입력 방식으로는 공간이 부족할 것입니다. 여러 줄의 텍스트를 자유롭게 입력받기 위해서는 태그를 사용해야 합니다. 태그에서 사용되는 속성은 대표적으로 cols, rows가 있습니다. 이는 이름에서 유추할 수 있다시피, cols를 통해 가로의 길이를 지정하고 rows로 입력 필드 세로(줄)의 길이를 지정할 수 있습니다. cols의 경우 입력하는 숫자만큼의 영문 텍스트를 표시하는..
인터페이스(1) - 인터페이스의 역할 개인적으로 자바의 '인터페이스(interface)' 개념은 꽤 복잡하고, 대충 넘어가다 보면 이해하기 어렵다는 인상을 많이 받습니다. 일단 추상 클래스/메서드에서부터 시작된 설계를 위한 개념에 가깝고, 지금까지 배운 대부분의 객체와 설계구조가 복합적으로 들어가 있는 성질에 가깝기 때문입니다. 클래스나 추상 클래스를 학습할 때는 (초심자 입장에서) 꽤 일관적인 원칙을 이해하면 됐지만, 인터페이스는 그야말로 지금까지 배운 JAVA의 언어 구조를 잘 이해하고 있다는 가정 하에 사용되는 기능이기 때문에 앞서 학습한 내용이 잘 기억나지 않는다거나 이해하지 못한 상태라면 금방 벽에 부딪힐 수 있습니다. 이해하기 어려운 개념이 나오거나, 이전에 배운 개념이 잘 생각나지 않는다면 지체 없이 앞에서 배운 내용을 다시 복..
3. 입력 양식 작성(2) - input 태그 7 이번 시간에는 잠시 분위기를 환기하기 위해, 간단하게 텍스트용 input type에서 사용하게 되는 유용한 속성을 살펴보려고 합니다. 바로 autofocus / placeholder / readonly / required입니다. 이 속성들은 우리가 흔히 웹페이지나 앱에서 친숙하게 사용하는 기능들이라 금방 이해가 가실 것입니다. 필수적인 요소임에도, 사용법은 간단하기 때문에 빠르게 훑고 예제를 살펴보도록 하겠습니다. 우선 autofocus는 어떤 텍스트 입력 input type이 있는 페이지를 열었을 때, 유저가 클릭하지 않더라도 해당 폼에 커서가 자동으로 클릭되어 있도록 지정하는 속성입니다. placeholder는 우리가 앱이나 홈페이지에서 항상 접하는 것들입니다. 텍스트 입력 란에 '힌트'를 표시하는 ..

티스토리툴바