본문 바로가기

전체 글

 (107)
<map> 활용 : 이미지 맵 좌표(이벤트 페이지 만들기) 1. 이미지 맵이란? 하나의 이미지에 여러 개의 링크를 만드는 것을 말한다. 2. 이미지 맵의 좌표 알아내기 : 원의 중심, 원의 반지름 이미지의 특정한 좌표는 그림판을 통해 쉽게 알아낼 수 있다. 좌표를 알아내고자 하는 이미지 파일을 그림판으로 열어보자. 1️⃣ 원의 중심 : [선택]을 누르고 원의 중심에 마우스를 가져가서 좌표를 알아낸다. 2️⃣ 원의 반지름 : [선택]을 누르고 원을 감쌀만큼 영역을 선택 이를 통해 대략 원의 반지름은 50px 정도라는 것을 알 수 있다. 3️⃣ 좌표 적용하기 : 태그 활용 먼저 이미지 맵 대상이 되는 이미지를 태그에 삽입한다. 태그를 사용할 것이기 때문에 맵의 이름을 함께 명시한다. 그 다음 태그를 설정한다. 👉 shape 속성 : map 으로 묶은 범위의 모양을 ..
<img> : SVG 이미지 삽입하기 1. SVG 파일 형식이란? SVG 는 Scalable Vector Graphics 즉 확대 가능한 벡터 그래픽이다. 기존의 gif, jpg/jpeg, png 파일은 비트맵 방식의 이미지(bitmap image) 로, 이를 확대를 하면 이미지가 일명 깨진다는 느낌을 받을 수 있었다. 하지만 SVG 이미지는 확대하더라도 깨지지 않는다는 특징이 있다. 이처럼 기존의 이미지 파일보다 확대 또는 축소 시에도 선명하게 활용할 수 있는 SVG 를 선호하게 되었다. SVG 는 시각적으로 중요한 이미지에 많이 사용되는데, 예를 들어 로고, 차트, 그래프 지도 등을 구현할 때 많이 적용된다. 복잡한 데이터를 표현한 이미지를 참고할 수 있는 사이트는 다음과 같다. 1️⃣ d3.js (http://d3js.org/) 2️⃣..
Calendar 로 달력 만들기 1. Calendar 란? JDK1.8 부터는 java.time 패키지가 Calendar 와 Date 의 단점을 보안한 형태로 추가되었으나, 기존의 클래스를 알고 있어야 새로운 패키지의 활용에도 수월해지기 때문에 Calendar 클래스를 활용해 보고자 한다. Calendar 클래스는 추상 클래스로 인스턴스를 생성할 수 없고 getInstance() 라는 static 메서드를 통하여 인스턴스를 생성할 수 있다. 📌 추상 클래스에서 인스턴스를 생성할 수 없는 이유 추상 클래스에는 추상 메서드가 있을 수 있다는 가능성으로 인하여 불완전한 설계도가 되어 이로 인하여 자신의 인스턴스를 만들 수가 없어진다. 대신 익명 클래스 등을 활용하여 추상 메서드를 작성하면 외부에서 인스턴스를 생성할 수도 있다. 📌 getIn..
SimpleDateFormat : 날짜와 시간 출력하기 1. SimpleDateFormat 이란? Date 와 Calendar 등 날짜와 시간에 관련한 클래스의 출력을 할 때에 원하는 형식을 지정할 수 있게 하는 클래스이다. SimpleDateFormat 을 사용했을 때와 사용하지 않았을 때를 비교해보면 그 차이를 확실히 구분할 수 있게 된다. // yyyy-MM-dd hh:mm:ss 이 포멧으로 지정 SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd hh:mm:ss"); // 기준시 String str = "2022-10-07 10:10:10"; // Calendar 객체 생성 Calendar calendar = Calendar.getInstance(); // Date 객체 생성 Date dat..
Serializable 과 File 활용하기 1. 직렬화(Serializable) 직렬화란 객체를 데이터 스트림으로 만드는 것을 의미한다. 객체는 클래스에 정의된 인스턴스 변수의 집합으로 객체는 오직 인스턴스 변수로만 구성되어 있다. (클래스 변수와 메서드는 method area 에 저장되고 인스턴스 변수만 heap 영역에 저장된다.) 2. ObjectInputStream 과 ObjectOutPutStream 직렬화를 위해서는 ObjectOutPutStream 를 사용하고, 역직렬화를 위해서는 ObjectInputStream 를 사용한다. 직렬화 (객체 👉 스트림) : ObjectOutPutStream 역직렬화 (스트림 👉 객체) : ObjectInputStream 해당 스트림은 이름에서도 알 수 있듯이 바이트 기반 스트림 InputStream /..
문자 기반 스트림 : Reader, Writer 1. Reader 와 Writer 자바 세계에서는 편의성을 위하여 byte 대신 char 타입을 이용하여 파일을 입출력 할 수 있도록 한다. 어떤 타입을 다루느냐가 다른 것일뿐 활용 방법은 byte 기반 스트림과 굉장히 유사하다. read 메서드 writer 메서드 int read() void write(int b) int read(char[] c) void write(char[] c) void write(String s) abstract int read(char[] c, int off, int len) abstract void write(char[] c, int off, int len) void write(String s, int off, int len) 위의 표에서도 확인할 수 있듯이 write 메서..
바이트 기반 스트림 : InputStream, OutPutStream 1. 바이트 기반 스트림 자바 외부 세계에서는 모든 데이터를 byte 단위로 저장하고 사용하며, 이러한 데이터를 읽고 쓰기 위하여 자바에서는 바이트 기반 스트림 'InputStream' 과 'OutputStream'을 제공하고 있다. 2. InputStream, OutPutStream 'InputStream' 과 'OutputStream' 은 모든 바이트 기반 스트림의 조상이며, 다음과 같은 메서드를 정의하고 있다. InputStream OutputStream abstract int read() abstract void write(int b) int read(byte[] b) void write(byte[] b) int read(byte[] b, int off, int len) void write(byt..
<a> : 링크 만들기 1. href 속성 : 링크 주소 태그의 링크를 통해 넘어갈 다른 문서나 사이트를 href 속성을 통해 지정해 준다. 1. 텍스트 링크 : naver 2. 이미지 링크 : 2. target 속성 : 새 탭에서 링크 열기 속성 값 설명 _blank 링크 내용이 새 창이나 새 탭에서 열린다. _self target 기본값, 링크를 누르는 해당 화면에서 열린다. _parent 프레임을 사용했을 때, 링크 내용이 부모 프레임에서 열린다. _top 프레임을 사용했을 때, 링크 내용이 프레임에서 벗어나서 열린다. parent 웹문서가 위와 같을 때 기본값으로 링크를 열게 되면, 저 사각형 안에서 링크 내용이 나타나게 된다. 그 아래 링크의 _top 속성으로 열게 되면 전체 화면으로 표현된다. 📌 _parent 과 ..

티스토리툴바