전체 글 177

HTML&CSS) 웹 애니메이션 - keyframes 사용 방법

keyframes : 애니메이션이 동작할 전체 영역(시작과 끝) keyframes을 지정한 그 영역 안에서 애니메이션이 작동한다. => 전체적인 틀을 만듦! 특징 시작과 끝 사이에 중간 상태를 원하는 만큼 지정할 수 있다. 입력없이 스스로 작동할 수 있다. 반복이 가능하다. keyframes 사용방법 CSS 파일에 @keyframes 애니메이션이름 { } 형태로 작성한다. 시작과 끝은 퍼센트(%)와 from~to 두 가지 방법으로 지정할 수 있다. @keyframes ballBounce { 0% { top: 20px; } 50% { top: 400px; } 100% { top: 20px; } } Animation 속성 name : 내가 만들 애니메이션의 이름 duration : 애니메이션 작동 시간. 단..

Front-end/HTML&CSS 2022.02.18

HTML&CSS) 웹 애니메이션 구현 종류 4가지

1. CSS Transition 시작과 끝 두개의 상태만 지정할 수 있는 단순한 연출. 어떠한 입력이 있어야만 작동한다. ex)버튼을 눌렀을때, 마우스를 올렸을때 등 버튼을 눌렀을때 어떤 컴포넌트가 부드럽게 등장 하는 등 간단한 작업에 사용하기 좋다. 사용방법 CSS에 transition속성으로 직접 구현 button { display: inline-block; transition-property: all; transition-duration: 0.5s; } button:active { transform:translate(50px, 50px); } 이동하는 버튼 2. CSS Keyframe Animation ▷ transition과 비교해서 가능한 것! 시작과 끝 사이에 중간 상태를 원하는 만큼 지정할 ..

Front-end/HTML&CSS 2022.02.18

JSP) Servlet이 무엇이며, 어떻게 동작할까?

JSP를 공부하다보니 Servlet에 대해 궁금해졌다. Servlet이 하는 일이 무엇인지, 어떻게 실행되는지 알아보자. 1. Applet이란? Servlet이 뭔지 알고싶은데 왜 Applet이 나오지? Servlet이 바로 Server Side Applet을 합친 말이기 때문이다. Applet은 자바가 생긴지 얼마 되지않았을때 사용했던 것으로, 정적인 HTML을 보완해 동적인 기능을 제공해주는 자바 프로그램이다. 하지만 일반 프로그램과는 차이가 있다. 일반적인 프로그램의 경우, 개인 로컬 컴퓨터에 설치를 해서 사용하지만, 애플릿은 설치하는게 아닌, 서버측에서 인터넷으로 기능을 받아서 웹 브라우저에서 실행한다. 그래서 "웹 브라우저에서 실행되는 작은 자바 응용 프로그램" 이라고 한다. 2. Servlet..

Back-end/JSP 2022.02.18

HTML&CSS) 이미지 태그

1. 이미지 형식 .jpg : 사진. 생삭과 명암을 다양하게 표현. .gif : 256색상 사용, 작은 아이콘, 작은 이미지 사용. .png : 투명한 배경색을 사용할 수 있고, 웹에서 많이 사용한다. 2. 이미지 경로 상대 참조: 현재 위치에서 올라가는 방법. ex) images/5.jpg 절대 참조 : 루트를 기준으로(JSP에서는 webapp) 찾아가는 방법. ex) ../folder/1.jpg 3. 이미지 태그 : src : 이미지 파일의 경로 alt : 이미지가 안보일때 나오는 이름. 4. 이미지 크기 픽셀 : 화면을 이루는 빛(하나의 점). 해상도는 점(빛)의 개수를 의미한다. % : 이미지 크기가 브라우저 크기에 따라 변동한다.

Front-end/HTML&CSS 2022.02.15

HTML) 텍스트 꾸미는 태그(기울임, 취소선, 밑줄, 공백 등등)

1. 제목 태그 2. 문단 : 3. 진한 글자 : , 4. 기울이기 : 5. 밑줄 : 6. 취소선 : 7. 글자 작게 : 8. 위첨자 : 9. 아래첨자 : 10. 들여쓰기 : 11. 줄바꿈: 12. 수평 밑줄: 13. 적은 그래도 출력 : 원하는 모양대로 출력한다고? 14. 공백 : &은 "앤퍼센트"라고 부른다. 15. 꺽새() : 16. 카피모양(©) : © 17. 앤퍼센트 모양(&) : &

Front-end/HTML&CSS 2022.02.14

JAVA) 클래스 변수와 인스턴스 변수

1. 클래스 변수와 인스턴스 변수. 클래스변수와 인스턴스 변수의 차이는 겉으로 봤을땐 static이 있고, 없고의 차이다. class A { static String st = "클래스 변수"; String inst = "인스턴스 변수"; } 메서드도 마찬가지로 겉모습이 static이 있고 없고의 차이 class A { .... static void static_method() { // 클래스 메서드 } void instance_method() { // 인스턴스 메서드 } } 2. 클래스 vs 인스턴스 접근성 클래스 메서드는 클래스 변수에 접근 가능 (O) 인스턴스 변수에 접근 불가능 (X) 인스턴스 메서드는 클래스변수, 인스턴스변수 둘 다 접근 가능 (O) 3. 메서드 호출 방법 클래스 안의 메서드를 호..

JSP) 영역 객체와 속성(Attribute)

JSP가 제공하는 9가지의 내장객체 중 4가지(pageContext, session, request, application)은 각각 특정 범위(scope)와 그 범위 안에서 공유할 수 있는 객체(데이터)(Attribute)를 가진다. 속성(Attribute): 공유되는 데이터 영역(Scope): 속성을 공유할 수 있는 유효범위 영역객체: 해당 영역에서 속성을 사용할 수 있는 내장 객체. ex) page영역에 데이터를 저장하려면 pageContext라는 영역객체를 사용해야하고, session 영역에 데이터를 저장하려면 session 영역객체를 사용해야한다. 영역객체 사용방법 영역객체에 속성 저장: setAttribute(속성명, 값) 영역객체의 속성 출력: getAttribute(속성명) 영역객체의 속성 ..

Back-end/JSP 2022.02.01

JSP) 내장 객체란?

내장 객체란(Implicit Object)? 웹 컨테이너가 제공하는 고정된 이름의 객체. JSP 페이지는 웹 컨테이너에의해 서블릿클래스로 변환되는데(.jsp -> .java -> .class) ,이때 웹 컨테이너가 자동으로 생성해주는 객체. 기본적으로 javax.servlet, java.lang 패키지 아래 고정된 이름으로 생성된다. 클래스, 패키지, import, 객체 선언 없이 자유롭게 사용할 수 있다. 종류: 총 9개 javax.servlet 패키지 아래 8개 + 예외처리를 위한 java.lang 패키지 아래 1개 실제 서버에 올라가 자동 변환된 서블릿 코드를 보면 _jspService() 메소드 내부에 생성된 객체들을 볼 수 있다. public void _jspService(final javax...

Back-end/JSP 2022.02.01

JSP) JSP기본 요소 - 액션 태그

액션태그 A페이지에서 이것저것 처리하고 결과를 B페이지에 넘기는데 B페이지로 넘어갔으면 B의 주소가 떠야하는데 URL은 A주소 그래도 변하지 않는다. // resultPage.jsp파일로 이동 // 파라미터 넘기기 페이지는 동적으로도 지정할 수 있고 파라미터를 넘길때는 태그를 쓰거나 GET방식처럼 주소뒤에 붙여서 전송할 수도 있다. 2. : 페이지 포함 include 페이지의 처리가 끝나면 처리결과를 원래 페이지에 반환하는 방식. 즉, 한페이지에 부분 부분이 다른 파일로 이루어진 셈이다. 이렇게 각 페이지를 기능별로 모듈화시켜서 한 페이지를 모듈화된 여러 페이지의 집합을 표현하는것을 템플릿페이지라고 한다. *지시어 include와 차이점 지시어 include 원래 페이지에 페이지 소스코드가 그대로 복사되..

Back-end/JSP 2022.02.01

JSP) JSP기본 요소(1): 주석, 지시어, 스크립트 요소, 액션 태그

1. 주석 JSP에서는 3가지 주석을 사용할 수 있다. HTML HTML문서에 포함되어 클라이언트에 같이 전송되며, console에 주석문이 그대로 나오게되므로 추천하지 않는다. JSP JSP파일 내에서 완전히 무시 처리되므로 원문 JSP파일로만 보인다. JAVA // 또는 /* */ JSP파일 컴파일 시 자바에서 주석처리한다. 선언문이나 스크립틀릿 내에서만 사용할 수 있다. 2. 지시어(Directive) JSP파일을 컨테이너에서 실행할 때 어떻게 실행시킬지에대한 방법을 설정한다. (설정정보 지정) 지시어 종류 3가지 1) page: JSP에 대한 12가지의 속성을 지정할 수 있다. 지시어는 JSP파일 제일 윗 줄에서 볼 수 있다. 2) include : JSP파일에 다른 특정한 JSP, HTML파일을..

Back-end/JSP 2022.01.30
반응형