일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
- 변수
- JS
- node.js
- 그럼에도 불구하고
- JavaScript
- HTML
- cleancode
- max-width
- 프론트엔드
- Servlet
- webpack
- frontend
- node
- coding
- TypeScript
- 그럼에도불구하고
- react-router-dom
- 자바문제풀이
- media query
- 코드업
- git
- 자바
- java
- 반응형 페이지
- react
- redux
- 코딩테스트
- CSS
- github
- @media
- Today
- Total
목록분류 전체보기 (302)
그럼에도 불구하고
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/Z4REg/btrQ0RdN4kk/DKJbTO3gxpZC18k79awJkK/img.png)
오늘은 URI / URL / URN의 차이를 알아보자 대부분의 사람들은 URI와 URL을 혼용해서 사용하고 있다. 하지만, 이는 엄밀히 말하면 다르다. 위의 사진에서 볼 수 있듯이, URI는 URL과 URN을 포함하고 있다. 이들의 각 뜻은 다음과 같이 정의할 수 있다. URI (Uniform Resource Identifier) : 자원의 식별자 URL (Uniform Resource Locator) : 자원의 위치 URN (Uniform Resource Name) : 이름 [ URI ] 통합 자원 식별자 (Uniform Resource Identifier, URI)는 인터넷에 있는 자원을 나타내는 유일한 주소이다. URI의 존재는 인터넷에서 요구되는 기본 조건으로서 인터넷 프로토콜에 항상 붙어 다닌다..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/Oq1s0/btrQY1BCHgI/J5qMGI89RKjP7CRe77FcK0/img.png)
JSTL에 대해 알아보자 [ JSTL 이란? ] JSTL이란 자바서버 페이지 표준 태그 라이브러리를 뜻한다. 자바서버 페이지 표준 태그 라이브러리(JavaServer Pages Standard Tag Library, 약칭 JSTL)은 Java EE 기반의 웹 애플리케이션 개발 플랫폼을 위한 컴포넌트 모음이다. JSTL은 XML 데이터 처리와 조건문, 반복문,국제화와 지역화 같은 일 을 처리하기 위한 JSP 태그 라이브러리를 추가하여 JSP 사양을 확장했다. 즉, JSTL은 JSP 페이지 내에서 자바 코드를 바로 사용하지 않고 로직을 내장하는 효율적인 방법을 제공한다. HTML 코드 내의 Java 코드인 스크립틀릿 를 ${people}, 문을 , 문을 로 대체하여 사용한다. 예전에는 스크립틀릿을 많이 사용..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/boC1gN/btrQ0Gps0y8/yyDV1BiOIvL3ugGOJaE8Dk/img.png)
JSON에 대해 알아보자 [ JSON 이란? ] JSON은 JavaScript Object Notation의 약자로 name - value 한쌍으로 이루어진 네트워크를 통해 데이터를 주고받는 데 자주 사용되는 경량의 데이터 형식이다. JSON 표현식은 사람과 기계 모두 이해하기 쉬우며 특히 용량이 적어서, 최근에는JSON이 XML을 대체해서 데이터 전송 등에 많이 사용된다. JSON은 XML의 대안으로서 좀 더 쉽게 데이터를 교환하고 저장하기 위해 고안되었다. 또한, JSON은 텍스트 기반이므로 어떠한 프로그래밍 언어에서도 JSON 데이터를 읽고 사용할 수 있다. ※ XML이란? XML은 EXtensible Markup Language의 약자이다. 이런 XML은 HTML과 매우 비슷한 문자 기반의 마크업..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/dzGTvs/btrQZPHdJai/SKPEMSllh2OkTprkIMDv3K/img.png)
Ajax에 대해 알아보자 [ Ajax란? ] Ajax란 Asynchronous JavaScript and XML(비동기식 자바스크립트와 xml)의 약자이다. Ajax는 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법의 하나이다. Ajax는 JavaScript 라이브러리 중 하나이며, 브라우저가 가지고 있는 XMLHttpRequest 객체를 이용하여 전체 페이지를 새로 고치지 않고, 페이지의 일부만을 위한 데이터를 로드하는 기법이다. = Ajax는 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있다. 즉, JavaScript를 사용한 비동기 통신, 클라이언트와 서버 간에 XML 데이터를 주고받는 기술이라고 할 수 있다. 이때 서버와는 다음과 같은 다양한 형태의 데이터..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cj0YKP/btrQtVaZGBz/BRkl3uO8eUKWE39GSEcksk/img.png)
mask를 이용하여 로고를 만들어보자 test.html WE MAKE YOUR MORE ATTRACTIVE .mask { width: 1000px; height: 500px; background-color: pink; font-size: 100px; font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; position: relative; left: 50px; top: 50px; } * mask라는 이름을 가진 div 클래스의 기본설정 .mask > p { position: absolute; left: 10px; bottom: 0; overflow: hidden; height: 0px; width: 1000px; animation:..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/2eeUE/btrQywH6NaU/kFdKvKdBpdiY5UzIkssFv0/img.png)
애니메이션을 반복하는 코드를 짜 보자 test.html bgcolor: red -> blue -> orange -> pink tofrom: orange -> green 결과 HTML 삽입 미리보기할 수 없는 소스
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/b3HDjE/btrQAxGvjSq/Cb8HwkAISqT7fUZjvaS2O1/img.png)
이미지에 커서를 갖다 대면, 그 위로 글을 띄워보자 test.html Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque placeat perspiciatis sapiente inventore expedita dolorum recusandae. Corrupti libero dolores aperiam architecto unde, voluptas ipsum reiciendis accusantium! Eos provident in consequuntur. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque placeat perspiciatis sapiente inventore e..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bN0iO9/btrQywnA7s2/P0MGW9Wk9sxOiFkAgbupe0/img.png)
transform-origin을 사용해보자 transform-origin이란? 왜곡의 중심점을 의미한다. 어떤 애니메이션을 주었을 때 그 애니메이션의 중심을 잡아주는 역할을 한다. ※ transform-origin 위치 보는 기준 left / top center / top right / top left / center center / center right / center left / bottom center / bottom right / bottom test.html box01 box02 box03 box04 box05 box06 box07 box08 box09 box10 box11 결과 HTML 삽입 미리보기할 수 없는 소스
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/v6Ipk/btrQCia5wRF/k1kRU2IiowjHJ4EUIls261/img.png)
여러가지 transform을 이용해보자 test.html box01 box02 box03 box04 box05 box06 box07 box08 box09 box10 box11 box12 box13 box14 box15 box16 box17 결과 HTML 삽입 미리보기할 수 없는 소스
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/wtb2P/btrQrsMcXCh/1VKVFgLKz7nMmzA4KzskA1/img.png)
EL에 대해 알아보자 [ EL : Expression Language) ] View를 위한 데이터 추출 표현식 우선, EL을 사용하기 전에 java file과 jsp file로 값을 출력해보자 spag.java package com.zenghyun.web; import java.io.IOException; import java.util.HashMap; import java.util.Map; import javax.servlet.RequestDispatcher; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.ser..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/kNrKT/btrQqMLdWOF/UhyhboYPI1RduU7gPjHjjk/img.png)
service/ doGet / doPost에 대해 알아보자 우선, service와 doGet, doPost를 사용하지 않고 두 개의 java을 이용하여 계산기를 만들어보자. calcPage.java package com.zenghyun.web; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletContext; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.Cookie; import javax.servlet.http.HttpServlet; import javax..
오늘은 내장 객체에 대해 알아보자 [ 내장 객체란? ] "JSP 내에서 선언하지 않고 사용할 수 있는 객체" JSP가 서블릿 형태로 자동 변환된 코드 내에 자동으로 포함되어 있는 멤버 변수, 메서드 매게 변수 등의 각종 참조 변수들을 말한다. 보통 스크립트 내부에서 사용하며 내장객체를 사용하면 클라이언트(사용자)의 요청을 컨트롤하거나 페이지 간의 데이터를 손쉽게 공유할 수 있다. 내장 객체들은 특정 클래스에 대한 인스턴스 형태로서, 컨테이너를 통해서 초기화되고 다양한 기능과 정보 등을 제공한다. [ 선언하지 않고 사용할 수 있는 이유 ] HTML 삽입 미리보기할 수 없는 소스 [ 내장 객체의 종류와 기능 ] 내장 객체의 대표적인 것들을 알아보자 request reponse out session appli..